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: #A09090;
   9 }
  10
  11 html.private {
  12   --in-content-page-color: #FF9F00;
  13   --in-content-text-color: #FF9F00;
  14   --in-content-page-background: #000000;
  15 }
  16
  17 a:link {
  18   text-decoration: underline;
  19 }
  20
  21 .about-content-container {
  22   max-width: 780px;
  23 }
  24
  25 .container {
  26   max-width: 48em;
  27 }
  28
  29 .section-main {
  30   margin-bottom: 48px;
  31 }
  32
  33 .section-main:last-child {
  34   margin-bottom: 0;
  35 }
  36
  37 p {
  38   line-height: 1.5em;
  39 }
  40
  41 .list-row {
  42   overflow: auto;
  43 }
  44
  45 .list-row > ul > li {
  46   float: left;
  47   width: 16em;
  48   line-height: 2em;
  49   margin-inline-start: 1em;
  50   margin-bottom: 0;
  51 }
  52
  53 .list-row > ul > li:dir(rtl) {
  54   float: right;
  55 }
  56
  57 .title {
  58   background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
  59   background-position: left center;
  60   background-size: 2em;
  61   line-height: 2em;
  62   margin-inline-start: calc(-2em - 10px);
  63   padding-inline-start: calc(2em + 10px);
  64 }
  65
  66 .title:dir(rtl) {
  67   background-position: right center;
  68 }
  69
  70 .about-subheader {
  71   display: flex;
  72   align-items: center;
  73   font-size: 1.5em;
  74   font-weight: lighter;
  75   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
  76   background-repeat: no-repeat;
  77   background-position: left center;
  78   background-size: 1.5em;
  79   line-height: 1.5em;
  80   margin-inline-start: calc(-1.5em - 10px);
  81   padding-inline-start: calc(1.5em + 10px);
  82 }
  83
  84 .about-subheader:dir(rtl) {
  85   background-position: right;
  86 }
  87
  88 .about-subheader.tp-off {
  89   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
  90 }
  91
  92 .about-info {
  93   font-size: .9em;
  94 }
  95
  96 .tpTitle {
  97   margin-inline-end: 12px;
  98 }
  99
 100 a.button {
 101   padding: 3px 20px;
 102   background-color: #C09070;
 103   color: #000000;
 104   border: 0px solid #C09070;
 105   border-radius: 3000px;
 106   text-decoration: none;
 107   display: inline-block;
 108 }
 109
 110 a.button:hover {
 111   background-color: #FFCF00;
 112 }
 113
 114 a.button:active {
 115   background-color: #FF9F00;
 116 }
 117
 118 /**
 119  * We want to hide the checkbox in lieu of the toggle-btn
 120  * "slider toggle". We need to make the toggle keyboard
 121  * focusable, however, which is not possible if it's
 122  * display:none. We work around this by making the toggle
 123  * invisible but still present in the display list, allowing
 124  * it to receive keyboard events. When it is focused by keyboard,
 125  * we use the -moz-focusring selector on the invisible checkbox
 126  * to show a focus ring around the slider toggle.
 127  */
 128 .toggle-input {
 129   opacity: 0;
 130   width: 0;
 131   pointer-events: none;
 132   position: absolute;
 133 }
 134
 135 .toggle + .toggle-btn {
 136   box-sizing: border-box;
 137   cursor: pointer;
 138   min-width: 42px;
 139   height: 26px;
 140   border-radius: 13px;
 141   background-color: var(--color-grey);
 142   padding: 1px;
 143 }
 144
 145 .toggle + .toggle-btn::after {
 146   position: relative;
 147   display: block;
 148   content: "";
 149   width: 24px;
 150   height: 100%;
 151   left: 0;
 152   border-radius: 50%;
 153   background: #000000;
 154   transition: left .2s ease;
 155 }
 156
 157 .toggle + .toggle-btn:dir(rtl)::after {
 158   left: auto;
 159   right: 0;
 160   transition-property: right;
 161 }
 162
 163 .toggle:checked + .toggle-btn {
 164   background: #008484;
 165 }
 166
 167 .toggle:checked + .toggle-btn::after {
 168   left: 16px;
 169 }
 170
 171 .toggle:checked + .toggle-btn:dir(rtl)::after {
 172   left: auto;
 173   right: 16px;
 174 }
 175
 176 .toggle:-moz-focusring + .toggle-btn {
 177   outline: 2px solid #A09090;
 178   outline-offset: 1px;
 179   -moz-outline-radius: 2px;
 180 }