simple.css (2952B)
1 /* Set colour scheme from https://simplecss.org/ */
2 :root {
3 --primary: #0d47a1;
4 --primary-contrast: #ffffff;
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-filter-title,
43 #nav-tags-title,
44 #nav-sources-title
45 {
46 color: var(--text-color);
47 }
48
49 #nav-tags li a,
50 #nav-sources li a,
51 #nav-filter li a
52 {
53 color: var(--text-color);
54 }
55
56 #nav-filter li a.active,
57 #nav-tags li a.active,
58 #nav-sources li a.active
59 {
60 background: var(--primary);
61 color: var(--primary-contrast) !important;
62 }
63 #nav-filter li a:hover,
64 #nav-tags li a:hover,
65 #nav-sources li a:hover
66 {
67 background: var(--primary-highlight);
68 color: var(--primary-contrast) !important;
69 }
70
71 #nav-filter > .active > span.offline-count,
72 #nav-filter .active span
73 {
74 color: var(--primary-contrast) !important;
75 }
76
77 .nav-toolbar > button,
78 .nav-toolbar > a
79 {
80 background: transparent !important;
81 color: var(--text-color) !important;
82 }
83
84 /* Style Article entries */
85 div.entry, .source {
86 background: var(--background-color);
87 }
88 .entry.unread .entry-title, .source-title {
89 color: var(--text-color) !important;
90 }
91
92 .entry.selected.unread, .entry.unread {
93 border-left: 5px solid var(--primary);
94 }
95
96 .entry.selected {
97 border-color: var(--primary);
98 }
99
100 /* Active article */
101 #content > .entry.expanded.selected {
102 color: var(--text-color) !important;
103
104 }
105
106 .entry-toolbar {
107 background-color: var(--background-color);
108 border-top: 1p solid var(--text-color);
109 }
110
111 /* Search bar */
112 #search {
113 background-color: var(--primary);
114 }
115
116 #search > button > svg {
117 filter: invert(100%)
118 }
119 #search-term:focus {
120 color: var(--text-color);
121 }
122
123 /* Mobile specific colour changes */
124
125 #nav-mobile {
126 background-color: var(--header-color);
127 }
128
129 @media screen and (max-width: 1024px) {
130 .entry.selected.unread, .entry.unread {
131 border-left: 0;
132 border-right: 5px solid var(--primary);
133 }
134 }
135
136 @media screen and (max-width: 1024px) {
137 .entry.selected {
138 background-color: initial;
139 }
140 }
141
142 @media (prefers-color-scheme: light) {
143 #nav-mobile-logo, #nav-mobile-settings {
144 filter: invert(100%);
145 }
146 }
147
148 @media screen and (max-width: 1024px) {
149 #search-button {
150 background-color: var(--primary-highlight);
151 }
152 }
