main/assets/css/theme.css

   1 /*
   2  * Copyright © 2017-2020,2022 Soren Stoutner <soren@stoutner.com>.
   3  *
   4  * This file is part of Privacy Browser Android <https://www.stoutner.com/privacy-browser-android>.
   5  *
   6  * Privacy Browser Android is free software: you can redistribute it and/or modify
   7  * it under the terms of the GNU General Public License as published by
   8  * the Free Software Foundation, either version 3 of the License, or
   9  * (at your option) any later version.
  10  *
  11  * Privacy Browser Android is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14  * GNU General Public License for more details.
  15  *
  16  * You should have received a copy of the GNU General Public License
  17  * along with Privacy Browser Android.  If not, see <http://www.gnu.org/licenses/>.
  18  */
  19
  20 /* Dark colors. */
  21 @media (prefers-color-scheme: dark) {
  22   body {
  23     color: #C1C1C1;  /* Gray 350 */
  24     background-color: #303030;  /* Gray 860 */
  25   }
  26 }
  27
  28 /* Hyperlinks. */
  29 a {
  30   color: #1976D2;  /* Blue 700 */
  31   text-decoration: none;
  32 }
  33
  34 @media (prefers-color-scheme: dark) {
  35   a {
  36     color: #5785C5;  /* Violet 700 */
  37   }
  38 }
  39
  40
  41 /* Headers. */
  42 h3 {
  43   color: #0D47A1;  /* Blue 900 */
  44 }
  45
  46 @media (prefers-color-scheme: dark) {
  47   h3 {
  48     color: #8AB4F8;  /* Violet 500 */
  49   }
  50 }
  51
  52
  53 /* Red bold text */
  54 strong.red {
  55   color: #B71C1C;  /* Red 900. */
  56 }
  57
  58 @media (prefers-color-scheme: dark) {
  59   strong.red {
  60     color: #930606;  /* Red 1100. */
  61   }
  62 }
  63
  64
  65 /* Blue bold text */
  66 strong.blue {
  67   color: #1565C0;  /* Blue 800. */
  68 }
  69
  70
  71 /* List items. */
  72 item {
  73   color: #1565C0;  /* Blue 800. */
  74   font-weight: bold;
  75 }
  76
  77
  78 /* Header images do not allow the icon to be themed. */
  79 img.header {
  80   vertical-align: bottom;
  81   height: 32;
  82   width: 32;
  83 }
  84
  85 /* Header SVGs allow the icon to be themed. */
  86 svg.header {
  87   vertical-align: bottom;
  88   height: 32;
  89   width: 32;
  90   fill: #0D47A1;  /* Blue 900 */
  91 }
  92
  93 @media (prefers-color-scheme: dark) {
  94   svg.header {
  95     fill: #8AB4F8;  /* Violet 500 */
  96   }
  97 }
  98
  99
 100 /* Links SVGs allow the icon to be themed. */
 101 svg.links {
 102   vertical-align: middle;
 103   height: 32;
 104   width: 32;
 105   fill: #0D47A1;  /* Blue 900 */
 106 }
 107
 108 @media (prefers-color-scheme: dark) {
 109   svg.header {
 110     fill: #8AB4F8;  /* Violet 500 */
 111   }
 112 }
 113
 114
 115 /* Left aligned images do not allow the icon to be themed. */
 116 img.left {
 117   float: left;
 118   height: 32;
 119   width: 32;
 120 }
 121
 122 /* Left aligned SVGs allow the icon to be themed. */
 123 svg.left {
 124   float: left;
 125   height: 32;
 126   width: 32;
 127   fill: #000000;  /* Black */
 128 }
 129
 130 @media (prefers-color-scheme: dark) {
 131   svg.left {
 132     fill: #FFFFFF;  /* White */
 133   }
 134 }
 135
 136
 137 /* SVG icons. */
 138 svg.icon {
 139   vertical-align: middle;
 140   height: 32;
 141   width: 32;
 142   fill: #000000;  /* Black */
 143 }
 144
 145 @media (prefers-color-scheme: dark) {
 146   svg.icon {
 147     fill: #FFFFFF;  /* White */
 148   }
 149 }
 150
 151
 152 /* Inline images. */
 153 img.inline {
 154   height: 16;
 155   width: 16;
 156 }
 157
 158
 159 /* Centered screenshot images.  An image must be a block to be centered. */
 160 img.center {
 161   display: block;
 162   margin-left: auto;
 163   margin-right: auto;
 164   height: 720;
 165   width: 360;
 166 }
 167
 168 /* Centered screenshot images with a 2.16 aspect ratio.  An image must be a block to be centered. */
 169 img.center216 {
 170   display: block;
 171   margin-left: auto;
 172   margin-right: auto;
 173   height: 780;
 174   width: 360;
 175 }