Add a Mastodon entry to About > Links. https://redmine.stoutner.com/issues/573
[PrivacyBrowser.git] / 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
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 }