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   -moz-margin-start: var(--icon-margin);
  53   -moz-padding-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   -moz-margin-start: 1em;
  73   margin-bottom: 0;
  74 }
  75
  76 .list-row > ul > li:-moz-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   -moz-margin-start: 0;
  88   -moz-padding-start: calc(var(--icon-margin) + 24px);
  89 }
  90
  91 .title:-moz-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   -moz-margin-start: calc(var(--icon-margin) - 32px);
 105   -moz-padding-start: 56px;
 106 }
 107
 108 .about-subheader:-moz-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 .toggle + .toggle-btn {
 148   box-sizing: border-box;
 149   cursor: pointer;
 150   min-width: 60px;
 151   height: 24px;
 152   border-radius: 24px;
 153   background-color: var(--color-grey);
 154   border: 0px var(--color-grey) solid;
 155   padding: 2px;
 156 }
 157
 158 .toggle + .toggle-btn::after,
 159 .toggle + .toggle-btn::before {
 160   position: relative;
 161   display: block;
 162   content: "";
 163   width: 19px;
 164   height: 100%;
 165 }
 166
 167 .toggle + .toggle-btn::after {
 168   left: 0;
 169 /*  box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1),
 170               0 1px 0 hsla(0, 0%, 0%, .2);*/
 171   border-radius: 50%;
 172   background: #000000;
 173   transition: left .2s ease;
 174 }
 175
 176 .toggle + .toggle-btn::before {
 177   float: left;
 178   left: 9px;
 179   visibility: hidden;
 180   background-size: 16px;
 181   background-repeat: no-repeat;
 182   background-color: transparent;
 183   background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
 184 }
 185
 186 .toggle + .toggle-btn:-moz-dir(rtl)::after {
 187   left: auto;
 188   right: 0;
 189   transition-property: right;
 190 }
 191
 192 .toggle + .toggle-btn:-moz-dir(rtl)::before {
 193   float: right;
 194   left: auto;
 195   right: 9px;
 196 }
 197
 198 .toggle:checked + .toggle-btn {
 199   background: #008484;
 200   border: 0px solid #008484;
 201 }
 202
 203 .toggle:checked + .toggle-btn::after {
 204   left: 35px;
 205 }
 206
 207 .toggle:checked + .toggle-btn:-moz-dir(rtl)::after {
 208   right: 35px;
 209 }
 210
 211 .toggle:checked + .toggle-btn::before {
 212   visibility: visible;
 213 }
 214
 215 .toggle:-moz-focusring + .toggle-btn {
 216   outline: 2px solid #A09090;
 217   outline-offset: 1px;
 218   -moz-outline-radius: 2px;
 219 }