LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @import url("chrome://global/skin/in-content/info-pages.css");
   6
   7 :root {
   8   --color-grey-lightest: #FFCF00;
   9   --color-grey: #A09090;
  10
  11   --color-blue: #336699;
  12   --color-blue-dark: #FFCF00;
  13   --color-blue-darker: #6000CF;
  14
  15   --icon-margin: 64px;
  16 }
  17
  18 html.private {
  19   --in-content-page-color: #FF9F00;
  20   --in-content-text-color: #FF9F00;
  21   --in-content-page-background: #000000;
  22 }
  23
  24 body {
  25   padding: 40px;
  26 }
  27
  28 a:link {
  29   color: var(--color-blue);
  30   text-decoration: none;
  31 }
  32
  33 a:hover {
  34   color: var(--color-blue-dark);
  35   text-decoration: underline;
  36 }
  37
  38 a:hover:active {
  39   color: var(--color-blue-darker);
  40 }
  41
  42 a:visited {
  43   color: var(--color-blue-darker);
  44 }
  45
  46 .about-content-container {
  47   max-width: 780px;
  48 }
  49
  50 .section-main {
  51   margin-bottom: 48px;
  52   margin-inline-start: var(--icon-margin);
  53   padding-inline-start: 24px;
  54 }
  55
  56 .section-main:last-child {
  57   margin-bottom: 0;
  58 }
  59
  60 p {
  61   line-height: 1.5em;
  62 }
  63
  64 .list-row {
  65   overflow: auto;
  66 }
  67
  68 .list-row > ul > li {
  69   float: left;
  70   width: 220px;
  71   line-height: 1.5em;
  72   margin-inline-start: 1em;
  73   margin-bottom: 0;
  74 }
  75
  76 .list-row > ul > li:dir(rtl) {
  77   float: right;
  78 }
  79
  80 .title {
  81   background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
  82   background-size: 64px;
  83   background-position: left, center;
  84   font-weight: lighter;
  85   line-height: 1.5em;
  86   min-height: 64px;
  87   margin-inline-start: 0;
  88   padding-inline-start: calc(var(--icon-margin) + 24px);
  89 }
  90
  91 .title:dir(rtl) {
  92   background-position: right, center;
  93 }
  94
  95 .about-subheader {
  96   display: flex;
  97   align-items: center;
  98   font-size: 1.5em;
  99   font-weight: lighter;
 100   min-height: 32px;
 101   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
 102   background-repeat: no-repeat;
 103   background-size: 32px;
 104   margin-inline-start: calc(var(--icon-margin) - 32px);
 105   padding-inline-start: 56px;
 106 }
 107
 108 .about-subheader:dir(rtl) {
 109   background-position: right;
 110 }
 111
 112 .about-subheader.tp-off {
 113   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
 114 }
 115
 116 .about-info {
 117   font-size: .875em;
 118 }
 119
 120 .tpTitle {
 121   margin-inline-end: 12px;
 122 }
 123
 124 .private strong {
 125   color: var(--color-grey-lightest);
 126   font-weight: normal;
 127 }
 128
 129 a.button {
 130   padding: 5px 40px;
 131   background-color: #C09070;
 132   color: #000000;
 133   border: 0px solid #C09070;
 134   border-radius: 3000px;
 135   text-decoration: none;
 136   display: inline-block;
 137 }
 138
 139 a.button:hover {
 140   background-color: #FFCF00;
 141 }
 142
 143 a.button:active {
 144   background-color: #FF9F00;
 145 }
 146
 147 /**
 148  * We want to hide the checkbox in lieu of the toggle-btn
 149  * "slider toggle". We need to make the toggle keyboard
 150  * focusable, however, which is not possible if it's
 151  * display:none. We work around this by making the toggle
 152  * invisible but still present in the display list, allowing
 153  * it to receive keyboard events. When it is focused by keyboard,
 154  * we use the -moz-focusring selector on the invisible checkbox
 155  * to show a focus ring around the slider toggle.
 156  */
 157 .toggle-input {
 158   opacity: 0;
 159   width: 0;
 160   pointer-events: none;
 161   position: absolute;
 162 }
 163
 164 .toggle + .toggle-btn {
 165   box-sizing: border-box;
 166   cursor: pointer;
 167   min-width: 60px;
 168   height: 24px;
 169   border-radius: 24px;
 170   background-color: var(--color-grey);
 171   border: 0px var(--color-grey) solid;
 172   padding: 2px;
 173 }
 174
 175 .toggle + .toggle-btn::after,
 176 .toggle + .toggle-btn::before {
 177   position: relative;
 178   display: block;
 179   content: "";
 180   width: 19px;
 181   height: 100%;
 182 }
 183
 184 .toggle + .toggle-btn::after {
 185   left: 0;
 186 /*  box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1),
 187               0 1px 0 hsla(0, 0%, 0%, .2);*/
 188   border-radius: 50%;
 189   background: #000000;
 190   transition: left .2s ease;
 191 }
 192
 193 .toggle + .toggle-btn::before {
 194   float: left;
 195   left: 9px;
 196   visibility: hidden;
 197   background-size: 16px;
 198   background-repeat: no-repeat;
 199   background-color: transparent;
 200   background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
 201 }
 202
 203 .toggle + .toggle-btn:dir(rtl)::after {
 204   left: auto;
 205   right: 0;
 206   transition-property: right;
 207 }
 208
 209 .toggle + .toggle-btn:dir(rtl)::before {
 210   float: right;
 211   left: auto;
 212   right: 9px;
 213 }
 214
 215 .toggle:checked + .toggle-btn {
 216   background: #008484;
 217   border: 0px solid #008484;
 218 }
 219
 220 .toggle:checked + .toggle-btn::after {
 221   left: 35px;
 222 }
 223
 224 .toggle:checked + .toggle-btn:dir(rtl)::after {
 225   right: 35px;
 226 }
 227
 228 .toggle:checked + .toggle-btn::before {
 229   visibility: visible;
 230 }
 231
 232 .toggle:-moz-focusring + .toggle-btn {
 233   outline: 2px solid #A09090;
 234   outline-offset: 1px;
 235   -moz-outline-radius: 2px;
 236 }