app/src/main/assets/css/theme.css

   1 /*
   2  * Copyright © 2017-2020 Soren Stoutner <soren@stoutner.com>.
   3  *
   4  * This file is part of Privacy Browser <https://www.stoutner.com/privacy-browser>.
   5  *
   6  * Privacy Browser 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 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.  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 /* Headers. */
  41 h3 {
  42   color: #0D47A1;  /* Blue 900 */
  43 }
  44
  45 @media (prefers-color-scheme: dark) {
  46   h3 {
  47     color: #8AB4F8;  /* Violet 500 */
  48   }
  49 }
  50
  51 /* Red bold text */
  52 strong.red {
  53   color: #B71C1C;  /* Red 900. */
  54 }
  55
  56 @media (prefers-color-scheme: dark) {
  57   strong.red {
  58     color: #930606;  /* Red 1100. */
  59   }
  60 }
  61
  62 /* Blue bold text */
  63 strong.blue {
  64   color: #1565C0;  /* Blue 800. */
  65 }
  66
  67 /* List items. */
  68 item {
  69   color: #1565C0;  /* Blue 800. */
  70   font-weight: bold;
  71 }
  72
  73 /* Header images do not allow the icon to be themed. */
  74 img.header {
  75   vertical-align: bottom;
  76   height: 32;
  77   width: 32;
  78 }
  79
  80 /* Header SVGs allow the icon to be themed. */
  81 svg.header {
  82   vertical-align: bottom;
  83   height: 32;
  84   width: 32;
  85   fill: #0D47A1;  /* Blue 900 */
  86 }
  87
  88 @media (prefers-color-scheme: dark) {
  89   svg.header {
  90     fill: #8AB4F8;  /* Violet 500 */
  91   }
  92 }
  93
  94 /* Left aligned images do not allow the icon to be themed. */
  95 img.left {
  96   float: left;
  97   height: 32;
  98   width: 32;
  99 }
 100
 101 /* Left aligned SVGs allow the icon to be themed. */
 102 svg.left {
 103   float: left;
 104   height: 32;
 105   width: 32;
 106   fill: #000000;  /* Black */
 107 }
 108
 109 @media (prefers-color-scheme: dark) {
 110   svg.left {
 111     fill: #FFFFFF;  /* White */
 112   }
 113 }
 114
 115 /* Inline images. */
 116 img.inline {
 117   height: 16;
 118   width: 16;
 119 }
 120
 121 /* SVG icons. */
 122 svg.icon {
 123   vertical-align: middle;
 124   height: 32;
 125   width: 32;
 126   fill: #000000;  /* Black */
 127 }
 128
 129 @media (prefers-color-scheme: dark) {
 130   svg.icon {
 131     fill: #FFFFFF;  /* White */
 132   }
 133 }
 134
 135 /* Centered screenshot images.  An image must be a block to be centered. */
 136 img.center {
 137   display: block;
 138   margin-left: auto;
 139   margin-right: auto;
 140   height: 720;
 141   width: 360;
 142 }