aboutsummaryrefslogtreecommitdiffhomepage
path: root/ui/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'ui/static/css')
-rw-r--r--ui/static/css/black.css233
-rw-r--r--ui/static/css/common.css168
-rw-r--r--ui/static/css/dark.css105
-rw-r--r--ui/static/css/light.css105
-rw-r--r--ui/static/css/sans_serif.css3
-rw-r--r--ui/static/css/sansserif.css11
-rw-r--r--ui/static/css/serif.css3
-rw-r--r--ui/static/css/system.css213
8 files changed, 527 insertions, 314 deletions
diff --git a/ui/static/css/black.css b/ui/static/css/black.css
deleted file mode 100644
index 3272dab..0000000
--- a/ui/static/css/black.css
+++ /dev/null
@@ -1,233 +0,0 @@
-/* Layout */
-body {
- background: #222;
- color: #efefef;
-}
-
-hr {
- border-color: #555;
-}
-
-h1, h2, h3 {
- color: #aaa;
-}
-
-a {
- color: #aaa;
-}
-
-a:focus,
-a:hover {
- color: #ddd;
-}
-
-/* Header and main menu */
-.header li {
- border-color: #333;
-}
-
-.header a {
- color: #ddd;
- font-weight: 400;
-}
-
-.header .active a {
- font-weight: 400;
- color: #9b9494;
-}
-
-.header a:focus,
-.header a:hover {
- color: rgba(82, 168, 236, 0.85);
-}
-
-/* Page header */
-.page-header h1 {
- border-color: #333;
-}
-
-/* Logo */
-.logo a:hover span {
- color: #555;
-}
-
-/* Tables */
-table, th, td {
- border: 1px solid #555;
-}
-
-th {
- background: #333;
- color: #aaa;
- font-weight: 400;
-}
-
-tr:hover {
- background-color: #333;
- color: #aaa;
-}
-
-/* Forms */
-input[type="search"],
-input[type="url"],
-input[type="password"],
-input[type="text"] {
- border: 1px solid #555;
- background: #333;
- color: #ccc;
-}
-
-input[type="search"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-input[type="text"]:focus {
- color: #efefef;
- border-color: rgba(82, 168, 236, 0.8);
- box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
-}
-
-/* Buttons */
-.button-primary {
- border-color: #444;
- background: #333;
- color: #efefef;
-}
-
-.button-primary:hover,
-.button-primary:focus {
- border-color: #888;
- background: #555;
-}
-
-/* Alerts */
-.alert,
-.alert-success,
-.alert-error,
-.alert-info,
-.alert-normal {
- color: #efefef;
- background-color: #333;
- border-color: #444;
-}
-
-/* Panel */
-.panel {
- background: #333;
- border-color: #555;
- color: #9b9b9b;
-}
-
-/* Modals */
-#modal-left {
- background: #333;
- color: #efefef;
- box-shadow: 0 0 10px rgba(82, 168, 236, 0.6);
-}
-
-/* Keyboard Shortcuts */
-.keyboard-shortcuts li {
- color: #9b9b9b;
-}
-
-/* Counters */
-.unread-counter-wrapper,
-.error-feeds-counter-wrapper {
- color: #bbb;
-}
-
-/* Category label */
-.category {
- color: #efefef;
- background-color: #333;
- border-color: #444;
-}
-
-.category a {
- color: #999;
-}
-
-.category a:hover,
-.category a:focus {
- color: #aaa;
-}
-
-/* Pagination */
-.pagination a {
- color: #aaa;
-}
-
-.pagination-bottom {
- border-color: #333;
-}
-
-/* List view */
-.item {
- border-color: #666;
- padding: 4px;
-}
-
-.item.current-item {
- border-width: 2px;
- border-color: rgba(82, 168, 236, 0.8);
- box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
-}
-
-.item-title a {
- font-weight: 400;
-}
-
-.item-status-read .item-title a {
- color: #666;
-}
-
-.item-status-read .item-title a:focus,
-.item-status-read .item-title a:hover {
- color: rgba(82, 168, 236, 0.6);
-}
-
-.item-meta a:hover,
-.item-meta a:focus {
- color: #aaa;
-}
-
-.item-meta li:after {
- color: #ddd;
-}
-
-/* Feeds list */
-article.feed-parsing-error {
- background-color: #343434;
-}
-
-.parsing-error {
- color: #eee;
-}
-
-/* Entry view */
-.entry header {
- border-color: #333;
-}
-
-.entry header h1 a {
- color: #bbb;
-}
-
-.entry-content,
-.entry-content p, ul {
- color: #999;
-}
-
-.entry-content pre,
-.entry-content code {
- color: #fff;
- background: #555;
- border-color: #888;
-}
-
-.entry-content q {
- color: #777;
-}
-
-.entry-enclosure {
- border-color: #333;
-}
diff --git a/ui/static/css/common.css b/ui/static/css/common.css
index 02a9493..d0caef9 100644
--- a/ui/static/css/common.css
+++ b/ui/static/css/common.css
@@ -11,17 +11,23 @@ html {
}
body {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-family: var(--font-family);
text-rendering: optimizeLegibility;
+ color: var(--body-color);
+ background: var(--body-background);
}
hr {
border: 0;
height: 0;
- border-top: 1px dotted #ccc;
+ border-top: 1px dotted var(--hr-border-color);
padding-bottom: 10px;
}
+h1, h2, h3 {
+ color: var(--title-color);
+}
+
main {
padding-left: 5px;
padding-right: 5px;
@@ -29,18 +35,18 @@ main {
}
a {
- color: #3366CC;
+ color: var(--link-color);
}
a:focus {
outline: 0;
- color: red;
+ color: var(--link-focus-color);
text-decoration: none;
outline: 1px dotted #aaa;
}
a:hover {
- color: #333;
+ color: var(--link-hover-color);
text-decoration: none;
}
@@ -59,7 +65,7 @@ a:hover {
padding-left: 10px;
line-height: 2.1em;
font-size: 1.2em;
- border-bottom: 1px dotted #ddd;
+ border-bottom: 1px dotted var(--header-list-border-color);
}
.header li:hover a {
@@ -68,18 +74,23 @@ a:hover {
.header a {
font-size: 0.9em;
- color: #444;
+ color: var(--header-link-color);
text-decoration: none;
border: none;
+ font-weight: 400;
}
.header .active a {
- font-weight: 600;
+ color: var(--header-active-link-color);
+ font-weight: 500;
+}
+
+.header a:hover {
+ color: var(--header-link-hover-color);
}
-.header a:hover,
.header a:focus {
- color: #888;
+ color: var(--header-link-focus-color);
}
/* Page header and footer*/
@@ -93,7 +104,7 @@ a:hover {
.page-header h1 {
font-weight: 500;
- border-bottom: 1px dotted #ddd;
+ border-bottom: 1px dotted var(--page-header-title-border-color);
}
.page-header ul,
@@ -114,7 +125,7 @@ a:hover {
}
.logo a {
- color: #000;
+ color: var(--logo-color);
letter-spacing: 1px;
}
@@ -127,7 +138,7 @@ a:hover {
}
.logo a:hover span {
- color: #000;
+ color: var(--logo-hover-color-span);
}
/* Search form */
@@ -213,7 +224,7 @@ table {
}
table, th, td {
- border: 1px solid #ddd;
+ border: 1px solid var(--table-border-color);
}
th, td {
@@ -226,11 +237,14 @@ td {
}
th {
- background: #fcfcfc;
+ background: var(--table-th-background);
+ color: var(--table-th-color);
+ font-weight: 400;
}
tr:hover {
- background-color: #f9f9f9;
+ color: var(--table-tr-hover-color);
+ background-color: var(--table-tr-hover-background-color);
}
.column-40 {
@@ -278,7 +292,9 @@ input[type="search"],
input[type="url"],
input[type="password"],
input[type="text"] {
- border: 1px solid #ccc;
+ color: var(--input-color);
+ background: var(--input-background);
+ border: var(--input-border);
padding: 3px;
line-height: 20px;
width: 250px;
@@ -292,10 +308,10 @@ input[type="search"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
- color: #000;
- border-color: rgba(82, 168, 236, 0.8);
+ color: var(--input-focus-color);
+ border-color: var(--input-focus-border-color);
outline: 0;
- box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+ box-shadow: var(--input-focus-box-shadow);
}
input[type="checkbox"] {
@@ -347,15 +363,15 @@ a.button {
}
.button-primary {
- border-color: #3079ed;
- background: #4d90fe;
- color: #fff;
+ border-color: var(--button-primary-border-color);
+ background: var(--button-primary-background);
+ color: var(--button-primary-color);
}
.button-primary:hover,
.button-primary:focus {
- border-color: #2f5bb7;
- background: #357ae8;
+ border-color: var(--button-primary-focus-border-color);
+ background: var(--button-primary-focus-background);
}
.button-danger {
@@ -385,9 +401,9 @@ a.button {
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
- color: #c09853;
- background-color: #fcf8e3;
- border: 1px solid #fbeed5;
+ color: var(--alert-color);
+ background-color: var(--alert-background-color);
+ border: 1px solid var(--alert-border-color);
border-radius: 4px;
overflow: auto;
}
@@ -398,32 +414,32 @@ a.button {
}
.alert-success {
- color: #468847;
- background-color: #dff0d8;
- border-color: #d6e9c6;
+ color: var(--alert-success-color);
+ background-color: var(--alert-success-background-color);
+ border-color: var(--alert-success-border-color);
}
.alert-error {
- color: #b94a48;
- background-color: #f2dede;
- border-color: #eed3d7;
+ color: var(--alert-error-color);
+ background-color: var(--alert-error-background-color);
+ border-color: var(--alert-error-border-color);
}
.alert-error a {
- color: #b94a48;
+ color: var(--alert-error-color);
}
.alert-info {
- color: #3a87ad;
- background-color: #d9edf7;
- border-color: #bce8f1;
+ color: var(--alert-info-color);
+ background-color: var(--alert-info-background-color);
+ border-color: var(--alert-info-border-color);
}
/* Panel */
.panel {
- color: #333;
- background-color: #fcfcfc;
- border: 1px solid #ddd;
+ color: var(--panel-color);
+ background-color: var(--panel-background);
+ border: 1px solid var(--panel-border-color);
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
@@ -447,8 +463,9 @@ a.button {
bottom: 0;
width: 360px;
overflow: auto;
- background: #f0f0f0;
- box-shadow: 2px 0 5px 0 #ccc;
+ color: var(--modal-color);
+ background: var(--modal-background);
+ box-shadow: var(--modal-box-shadow);
padding: 5px;
padding-top: 30px;
}
@@ -477,7 +494,7 @@ a.button {
.keyboard-shortcuts li {
margin-left: 25px;
list-style-type: square;
- color: #333;
+ color: var(--keyboard-shortcuts-li-color);
font-size: 0.95em;
line-height: 1.45em;
}
@@ -497,28 +514,29 @@ a.button {
.error-feeds-counter-wrapper {
font-size: 0.9em;
font-weight: 300;
- color: #666;
+ color: var(--counter-color);
}
/* Category label */
.category {
font-size: 0.75em;
- background-color: #fffcd7;
- border: 1px solid #d5d458;
+ background-color: var(--category-background-color);
+ border: 1px solid var(--category-border-color);
border-radius: 5px;
margin-left: 0.25em;
padding: 1px 0.4em 1px 0.4em;
white-space: nowrap;
+ color: var(--category-color);
}
.category a {
- color: #555;
+ color: var(--category-link-color);
text-decoration: none;
}
.category a:hover,
.category a:focus {
- color: #000;
+ color: var(--category-link-hover-color);
}
/* Pagination */
@@ -530,7 +548,7 @@ a.button {
}
.pagination-bottom {
- border-top: 1px dotted #ddd;
+ border-top: 1px dotted var(--pagination-border-color);
margin-bottom: 15px;
margin-top: 50px;
}
@@ -552,7 +570,7 @@ a.button {
}
.pagination a {
- color: #333;
+ color: var(--pagination-color);
}
.pagination a:hover,
@@ -562,28 +580,29 @@ a.button {
/* List view */
.item {
- border: 1px dotted #ddd;
+ border: 1px dotted var(--item-border-color);
margin-bottom: 20px;
- padding: 5px;
+ padding: var(--item-padding);
overflow: hidden;
}
.item.current-item {
- border: 3px solid #bce;
+ border: var(--current-item-border-width) solid var(--current-item-border-color);
padding: 3px;
+ box-shadow: var(--current-item-box-shadow);
}
.item-title a {
text-decoration: none;
- font-weight: 600;
+ font-weight: var(--item-title-link-font-weight);
}
.item-status-read .item-title a {
- color: #777;
+ color: var(--item-status-read-title-link-color);
}
.item-meta {
- color: #777;
+ color: var(--item-meta-focus-color);
font-size: 0.8em;
}
@@ -607,7 +626,7 @@ a.button {
.item-meta li:after {
content: "|";
- color: #aaa;
+ color: var(--item-meta-li-color);
}
.item-meta li:last-child:after {
@@ -624,14 +643,14 @@ a.button {
/* Feeds list */
article.feed-parsing-error {
- background-color: #fcf8e3;
+ background-color: var(--feed-parsing-error-background-color);
border-color: #aaa;
}
.parsing-error {
font-size: 0.85em;
margin-top: 2px;
- color: #333;
+ color: var(--parsing-error-color);
}
.parsing-error-count {
@@ -641,7 +660,7 @@ article.feed-parsing-error {
/* Entry view */
.entry header {
padding-bottom: 5px;
- border-bottom: 1px dotted #ddd;
+ border-bottom: 1px dotted var(--entry-header-border-color);
}
.entry header h1 {
@@ -652,7 +671,7 @@ article.feed-parsing-error {
.entry header h1 a {
text-decoration: none;
- color: #333;
+ color: var(--entry-header-title-link-color);
}
.entry header h1 a:hover,
@@ -708,8 +727,8 @@ article.feed-parsing-error {
padding-top: 15px;
font-size: 1.2em;
font-weight: 300;
- font-family: Georgia, 'Times New Roman', Times, serif;
- color: #555;
+ font-family: var(--entry-content-font-family);
+ color: var(--entry-content-color);
line-height: 1.4em;
overflow-wrap: break-word;
}
@@ -777,12 +796,12 @@ article.feed-parsing-error {
margin-bottom: 20px;
color: #888;
line-height: 1.4em;
- font-family: Georgia, serif;
+ font-family: var(--entry-content-quote-font-family);
}
.entry-content q {
- color: purple;
- font-family: Georgia, serif;
+ color: var(--entry-content-quote-color);
+ font-family: var(--entry-content-quote-font-family);
font-style: italic;
}
@@ -796,10 +815,17 @@ article.feed-parsing-error {
.entry-content pre {
padding: 5px;
- background: #f0f0f0;
- border: 1px solid #ddd;
overflow: auto;
overflow-wrap: initial;
+ border-width: 1px;
+ border-style: solid;
+}
+
+.entry-content pre,
+.entry-content code {
+ color: var(--entry-content-code-color);
+ background: var(--entry-content-code-background);
+ border-color: var(--entry-content-code-border-color);
}
.entry-content table {
@@ -810,6 +836,8 @@ article.feed-parsing-error {
.entry-content ul,
.entry-content ol {
margin-left: 30px;
+ margin-top: 15px;
+ margin-bottom: 15px;
}
.entry-content ul {
@@ -825,7 +853,7 @@ article.feed-parsing-error {
}
.entry-enclosure {
- border: 1px dotted #ddd;
+ border: 1px dotted var(--entry-enclosure-border-color);
padding: 5px;
margin-top: 10px;
max-width: 100%;
diff --git a/ui/static/css/dark.css b/ui/static/css/dark.css
new file mode 100644
index 0000000..2c7170f
--- /dev/null
+++ b/ui/static/css/dark.css
@@ -0,0 +1,105 @@
+:root {
+ --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+ --body-color: #efefef;
+ --body-background: #222;
+ --hr-border-color: #555;
+ --title-color: #aaa;
+ --link-color: #aaa;
+ --link-focus-color: #ddd;
+ --link-hover-color: #ddd;
+
+ --header-list-border-color: #333;
+ --header-link-color: #ddd;
+ --header-link-focus-color: rgba(82, 168, 236, 0.85);
+ --header-link-hover-color: rgba(82, 168, 236, 0.85);
+ --header-active-link-color: #9b9494;
+
+ --page-header-title-border-color: #333;
+
+ --logo-color: #bbb;
+ --logo-hover-color-span: #bbb;
+
+ --table-border-color: #555;
+ --table-th-background: #333;
+ --table-th-color: #aaa;
+ --table-tr-hover-background-color: #333;
+ --table-tr-hover-color: #aaa;
+
+ --button-primary-border-color: #444;
+ --button-primary-background: #333;
+ --button-primary-color: #efefef;
+ --button-primary-focus-border-color: #888;
+ --button-primary-focus-background: #555;
+
+ --input-border: 1px solid #555;
+ --input-background: #333;
+ --input-color: #ccc;
+
+ --input-focus-color: #efefef;
+ --input-focus-border-color: rgba(82, 168, 236, 0.8);
+ --input-focus-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+
+ --alert-color: #efefef;
+ --alert-background-color: #333;
+ --alert-border-color: #444;
+
+ --alert-success-color: #efefef;
+ --alert-success-background-color: #333;
+ --alert-success-border-color: #444;
+
+ --alert-error-color: #efefef;
+ --alert-error-background-color: #333;
+ --alert-error-border-color: #444;
+
+ --alert-info-color: #efefef;
+ --alert-info-background-color: #333;
+ --alert-info-border-color: #444;
+
+ --panel-background: #333;
+ --panel-border-color: #555;
+ --panel-color: #9b9b9b;
+
+ --modal-background: #333;
+ --modal-color: #efefef;
+ --modal-box-shadow: 0 0 10px rgba(82, 168, 236, 0.6);
+
+ --pagination-link-color: #aaa;
+ --pagination-border-color: #333;
+
+ --category-color: #efefef;
+ --category-background-color: #333;
+ --category-border-color: #444;
+ --category-link-color: #999;
+ --category-link-hover-color: #aaa;
+
+ --item-border-color: #666;
+ --item-padding: 4px;
+ --item-title-link-font-weight: 400;
+
+ --item-status-read-title-link-color: #666;
+ --item-status-read-title-focus-color: rgba(82, 168, 236, 0.6);
+
+ --item-meta-focus-color: #aaa;
+ --item-meta-li-color: #ddd;
+
+ --current-item-border-width: 2px;
+ --current-item-border-color: rgba(82, 168, 236, 0.8);
+ --current-item-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+
+ --entry-header-border-color: #333;
+ --entry-header-title-link-color: #bbb;
+ --entry-content-color: #999;
+ --entry-content-code-color: #fff;
+ --entry-content-code-background: #555;
+ --entry-content-code-border-color: #888;
+ --entry-content-quote-color: #777;
+ --entry-content-quote-font-family: Georgia, 'Times New Roman', Times, serif;
+ --entry-enclosure-border-color: #333;
+
+ --parsing-error-color: #eee;
+ --feed-parsing-error-background-color: #343434;
+
+ --keyboard-shortcuts-li-color: #9b9b9b;
+
+ --counter-color: #bbb;
+}
diff --git a/ui/static/css/light.css b/ui/static/css/light.css
new file mode 100644
index 0000000..232589e
--- /dev/null
+++ b/ui/static/css/light.css
@@ -0,0 +1,105 @@
+:root {
+ --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+ --body-color: #333;
+ --body-background: #fff;
+ --hr-border-color: #ccc;
+ --title-color: #333;
+ --link-color: #3366CC;
+ --link-focus-color: red;
+ --link-hover-color: #333;
+
+ --header-list-border-color: #ddd;
+ --header-link-color: #444;
+ --header-link-focus-color: #888;
+ --header-link-hover-color: #888;
+ --header-active-link-color: #444;
+
+ --page-header-title-border-color: #333;
+
+ --logo-color: #000;
+ --logo-hover-color-span: #000;
+
+ --table-border-color: #ddd;
+ --table-th-background: #fcfcfc;
+ --table-th-color: #333;
+ --table-tr-hover-background-color: #a3a3a3;
+ --table-tr-hover-color: #333;
+
+ --button-primary-border-color: #3079ed;
+ --button-primary-background: #4d90fe;
+ --button-primary-color: #fff;
+ --button-primary-focus-border-color: #2f5bb7;
+ --button-primary-focus-background: #357ae8;
+
+ --input-border: 1px solid #ccc;
+ --input-background: #fff;
+ --input-color: #333;
+
+ --input-focus-color: #000;
+ --input-focus-border-color: rgba(82, 168, 236, 0.8);
+ --input-focus-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+
+ --alert-color: #c09853;
+ --alert-background-color: #fcf8e3;
+ --alert-border-color: #fbeed5;
+
+ --alert-success-color: #468847;
+ --alert-success-background-color: #dff0d8;
+ --alert-success-border-color: #d6e9c6;
+
+ --alert-error-color: #b94a48;
+ --alert-error-background-color: #f2dede;
+ --alert-error-border-color: #eed3d7;
+
+ --alert-info-color: #3a87ad;
+ --alert-info-background-color: #d9edf7;
+ --alert-info-border-color: #bce8f1;
+
+ --panel-background: #fcfcfc;
+ --panel-border-color: #ddd;
+ --panel-color: #333;
+
+ --modal-background: #f0f0f0;
+ --modal-color: #333;
+ --modal-box-shadow: 2px 0 5px 0 #ccc;
+
+ --pagination-link-color: #333;
+ --pagination-border-color: #ddd;
+
+ --category-color: #333;
+ --category-background-color: #fffcd7;
+ --category-border-color: #d5d458;
+ --category-link-color: #000;
+ --category-link-hover-color: #000;
+
+ --item-border-color: #ddd;
+ --item-padding: 5px;
+ --item-title-link-font-weight: 600;
+
+ --item-status-read-title-link-color: #777;
+ --item-status-read-title-focus-color: #777;
+
+ --item-meta-focus-color: #777;
+ --item-meta-li-color: #aaa;
+
+ --current-item-border-width: 3px;
+ --current-item-border-color: #bce;
+ --current-item-box-shadow: none;
+
+ --entry-header-border-color: #ddd;
+ --entry-header-title-link-color: #333;
+ --entry-content-color: #555;
+ --entry-content-code-color: #333;
+ --entry-content-code-background: #f0f0f0;
+ --entry-content-code-border-color: #ddd;
+ --entry-content-quote-color: #666;
+ --entry-content-quote-font-family: Georgia, 'Times New Roman', Times, serif;
+ --entry-enclosure-border-color: #333;
+
+ --parsing-error-color: #333;
+ --feed-parsing-error-background-color: #fcf8e3;
+
+ --keyboard-shortcuts-li-color: #333;
+
+ --counter-color: #666;
+}
diff --git a/ui/static/css/sans_serif.css b/ui/static/css/sans_serif.css
new file mode 100644
index 0000000..b7c1d95
--- /dev/null
+++ b/ui/static/css/sans_serif.css
@@ -0,0 +1,3 @@
+:root {
+ --entry-content-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
diff --git a/ui/static/css/sansserif.css b/ui/static/css/sansserif.css
deleted file mode 100644
index ae97b5d..0000000
--- a/ui/static/css/sansserif.css
+++ /dev/null
@@ -1,11 +0,0 @@
-body,
-.entry-content,
-.entry-content blockquote,
-.entry-content q {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.entry-content {
- font-size: 1.17em;
- font-weight: 400;
-}
diff --git a/ui/static/css/serif.css b/ui/static/css/serif.css
new file mode 100644
index 0000000..8e6ba04
--- /dev/null
+++ b/ui/static/css/serif.css
@@ -0,0 +1,3 @@
+:root {
+ --entry-content-font-family: Georgia, 'Times New Roman', Times, serif;
+} \ No newline at end of file
diff --git a/ui/static/css/system.css b/ui/static/css/system.css
new file mode 100644
index 0000000..78dcf4e
--- /dev/null
+++ b/ui/static/css/system.css
@@ -0,0 +1,213 @@
+:root {
+ --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+ --body-color: #333;
+ --body-background: #fff;
+ --hr-border-color: #ccc;
+ --title-color: #333;
+ --link-color: #3366CC;
+ --link-focus-color: red;
+ --link-hover-color: #333;
+
+ --header-list-border-color: #ddd;
+ --header-link-color: #444;
+ --header-link-focus-color: #888;
+ --header-link-hover-color: #888;
+ --header-active-link-color: #444;
+
+ --page-header-title-border-color: #333;
+
+ --logo-color: #000;
+ --logo-hover-color-span: #000;
+
+ --table-border-color: #ddd;
+ --table-th-background: #fcfcfc;
+ --table-th-color: #333;
+ --table-tr-hover-background-color: #a3a3a3;
+ --table-tr-hover-color: #333;
+
+ --button-primary-border-color: #3079ed;
+ --button-primary-background: #4d90fe;
+ --button-primary-color: #fff;
+ --button-primary-focus-border-color: #2f5bb7;
+ --button-primary-focus-background: #357ae8;
+
+ --input-border: 1px solid #ccc;
+ --input-background: #fff;
+ --input-color: #333;
+
+ --input-focus-color: #000;
+ --input-focus-border-color: rgba(82, 168, 236, 0.8);
+ --input-focus-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+
+ --alert-color: #c09853;
+ --alert-background-color: #fcf8e3;
+ --alert-border-color: #fbeed5;
+
+ --alert-success-color: #468847;
+ --alert-success-background-color: #dff0d8;
+ --alert-success-border-color: #d6e9c6;
+
+ --alert-error-color: #b94a48;
+ --alert-error-background-color: #f2dede;
+ --alert-error-border-color: #eed3d7;
+
+ --alert-info-color: #3a87ad;
+ --alert-info-background-color: #d9edf7;
+ --alert-info-border-color: #bce8f1;
+
+ --panel-background: #fcfcfc;
+ --panel-border-color: #ddd;
+ --panel-color: #333;
+
+ --modal-background: #f0f0f0;
+ --modal-color: #333;
+ --modal-box-shadow: 2px 0 5px 0 #ccc;
+
+ --pagination-link-color: #333;
+ --pagination-border-color: #ddd;
+
+ --category-color: #333;
+ --category-background-color: #fffcd7;
+ --category-border-color: #d5d458;
+ --category-link-color: #000;
+ --category-link-hover-color: #000;
+
+ --item-border-color: #ddd;
+ --item-padding: 5px;
+ --item-title-link-font-weight: 600;
+
+ --item-status-read-title-link-color: #777;
+ --item-status-read-title-focus-color: #777;
+
+ --item-meta-focus-color: #777;
+ --item-meta-li-color: #aaa;
+
+ --current-item-border-width: 3px;
+ --current-item-border-color: #bce;
+ --current-item-box-shadow: none;
+
+ --entry-header-border-color: #ddd;
+ --entry-header-title-link-color: #333;
+ --entry-content-color: #555;
+ --entry-content-code-color: #333;
+ --entry-content-code-background: #f0f0f0;
+ --entry-content-code-border-color: #ddd;
+ --entry-content-quote-color: #666;
+ --entry-content-quote-font-family: Georgia, 'Times New Roman', Times, serif;
+ --entry-enclosure-border-color: #333;
+
+ --parsing-error-color: #333;
+ --feed-parsing-error-background-color: #fcf8e3;
+
+ --keyboard-shortcuts-li-color: #333;
+
+ --counter-color: #666;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+ --body-color: #efefef;
+ --body-background: #222;
+ --hr-border-color: #555;
+ --title-color: #aaa;
+ --link-color: #aaa;
+ --link-focus-color: #ddd;
+ --link-hover-color: #ddd;
+
+ --header-list-border-color: #333;
+ --header-link-color: #ddd;
+ --header-link-focus-color: rgba(82, 168, 236, 0.85);
+ --header-link-hover-color: rgba(82, 168, 236, 0.85);
+ --header-active-link-color: #9b9494;
+
+ --page-header-title-border-color: #333;
+
+ --logo-color: #bbb;
+ --logo-hover-color-span: #bbb;
+
+ --table-border-color: #555;
+ --table-th-background: #333;
+ --table-th-color: #aaa;
+ --table-tr-hover-background-color: #333;
+ --table-tr-hover-color: #aaa;
+
+ --button-primary-border-color: #444;
+ --button-primary-background: #333;
+ --button-primary-color: #efefef;
+ --button-primary-focus-border-color: #888;
+ --button-primary-focus-background: #555;
+
+ --input-border: 1px solid #555;
+ --input-background: #333;
+ --input-color: #ccc;
+
+ --input-focus-color: #efefef;
+ --input-focus-border-color: rgba(82, 168, 236, 0.8);
+ --input-focus-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+
+ --alert-color: #efefef;
+ --alert-background-color: #333;
+ --alert-border-color: #444;
+
+ --alert-success-color: #efefef;
+ --alert-success-background-color: #333;
+ --alert-success-border-color: #444;
+
+ --alert-error-color: #efefef;
+ --alert-error-background-color: #333;
+ --alert-error-border-color: #444;
+
+ --alert-info-color: #efefef;
+ --alert-info-background-color: #333;
+ --alert-info-border-color: #444;
+
+ --panel-background: #333;
+ --panel-border-color: #555;
+ --panel-color: #9b9b9b;
+
+ --modal-background: #333;
+ --modal-color: #efefef;
+ --modal-box-shadow: 0 0 10px rgba(82, 168, 236, 0.6);
+
+ --pagination-link-color: #aaa;
+ --pagination-border-color: #333;
+
+ --category-color: #efefef;
+ --category-background-color: #333;
+ --category-border-color: #444;
+ --category-link-color: #999;
+ --category-link-hover-color: #aaa;
+
+ --item-border-color: #666;
+ --item-padding: 4px;
+ --item-title-link-font-weight: 400;
+
+ --item-status-read-title-link-color: #666;
+ --item-status-read-title-focus-color: rgba(82, 168, 236, 0.6);
+
+ --item-meta-focus-color: #aaa;
+ --item-meta-li-color: #ddd;
+
+ --current-item-border-width: 2px;
+ --current-item-border-color: rgba(82, 168, 236, 0.8);
+ --current-item-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+
+ --entry-header-border-color: #333;
+ --entry-header-title-link-color: #bbb;
+ --entry-content-color: #999;
+ --entry-content-code-color: #fff;
+ --entry-content-code-background: #555;
+ --entry-content-code-border-color: #888;
+ --entry-content-quote-color: #777;
+ --entry-content-quote-font-family: Georgia, 'Times New Roman', Times, serif;
+ --entry-enclosure-border-color: #333;
+
+ --parsing-error-color: #eee;
+ --feed-parsing-error-background-color: #343434;
+
+ --keyboard-shortcuts-li-color: #9b9b9b;
+
+ --counter-color: #bbb;
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-07 21:27:35 +0000