simple.css (2807B)
1 /* Set colour scheme from https://simplecss.org/ */
2 :root {
3 --primary: #0d47a1;
4 --primary-contrast: #dcdcdc;
5 --primary-highlight: #1266e2;
6 --primary-highlight-shadow: #1266e250;
7 --text-color: #212121;
8 --background-color: #ffffff;
9 --header-color: #f5f7ff;
10 }
11 @media (prefers-color-scheme: dark) {
12 :root {
13 --primary: #ffb300;
14 --primary-contrast: #2d291f;
15 --primary-highlight: #ffe099;
16 --primary-highlight-shadow: #ffe09950;
17 --text-color: #dcdcdc;
18 --background-color: #212121;
19 --header-color: #2b2b2b;
20 }
21 }
22
23 /* Enforce background colours */
24 html, body, #content > .entry.expanded.selected {
25 color: var(--primary) !important;
26 background-color: var(--background-color) !important;
27 background-image: none !important;
28 }
29
30 /* Style navigation bar */
31 #nav-mark, #nav-mark:hover {
32 color: var(--primary-contrast);
33 }
34 #nav-mark:hover {
35 background: var(--primary-highlight);
36 }
37
38 #nav {
39 background-color: var(--background-color);
40 }
41
42 #nav-tags li a,
43 #nav-sources li a
44 {
45 color: var(--text-color);
46 }
47
48 #nav-filter li a.active,
49 #nav-tags li a.active,
50 #nav-sources li a.active
51 {
52 background: var(--primary);
53 color: var(--primary-contrast) !important;
54 }
55 #nav-filter li a:hover,
56 #nav-tags li a:hover,
57 #nav-sources li a:hover
58 {
59 background: var(--primary-highlight);
60 color: var(--primary-contrast) !important;
61 }
62
63 #nav-filter > .active > span.offline-count,
64 #nav-filter .active span
65 {
66 color: var(--primary-contrast) !important;
67 }
68
69 .nav-toolbar > button,
70 .nav-toolbar > a
71 {
72 background: transparent !important;
73 }
74
75 /* Style Article entries */
76 div.entry, .source {
77 background: var(--background-color);
78 }
79 .entry.unread .entry-title, .source-title {
80 color: var(--text-color) !important;
81 }
82
83 .entry.selected.unread, .entry.unread {
84 border-left: 5px solid var(--primary);
85 }
86
87 .entry.selected {
88 border-color: var(--primary);
89 }
90
91 /* Active article */
92 #content > .entry.expanded.selected {
93 color: var(--text-color) !important;
94
95 }
96
97 .entry-toolbar {
98 background-color: var(--background-color);
99 border-top: 1p solid var(--text-color);
100 }
101
102 /* Search bar */
103 #search {
104 background-color: var(--primary);
105 }
106
107 #search > button > svg {
108 filter: invert(100%)
109 }
110 #search-term:focus {
111 color: var(--text-color);
112 }
113
114 /* Mobile specific colour changes */
115
116 #nav-mobile {
117 background-color: var(--header-color);
118 }
119
120 @media screen and (max-width: 1024px) {
121 .entry.selected.unread, .entry.unread {
122 border-left: 0;
123 border-right: 5px solid var(--primary);
124 }
125 }
126
127 @media screen and (max-width: 1024px) {
128 .entry.selected {
129 background-color: initial;
130 }
131 }
132
133 @media (prefers-color-scheme: light) {
134 #nav-mobile-logo, #nav-mobile-settings {
135 filter: invert(100%);
136 }
137 }
138
139 @media screen and (max-width: 1024px) {
140 #search-button {
141 background-color: var(--primary-highlight);
142 }
143 }
