Avii/Radicale
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Reverted back to using a single main.css and added dark theme auto switching

Browse Source
This commit is contained in:
Roy Borgen
2026-05-22 23:11:34 +02:00
parent 95c90df8c0
commit ff1d0360ce
2 changed files with 181 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
radicale/web/internal_data/css/main.css
View File

@@ -1,6 +1,130 @@
/* Default (light mode) */
:root {
color-scheme: light dark;
--body-bg-color: #ffffff;
--body-color: #424247;
--container-bg-color: rgb(250, 250, 250);
--container-border-color: #2a2a33;
--container-box-shadow-color: #0000001a;
--container-h1-color: #484848;
--tr-border-bottom-color: #dadce0;
--th-color: #666;
--details-border-color: #dadce0;
--details-bg-color: white;
--summary-hover-color: #2494fe;
--loginscene-infcloudlink-color: #484848;
--loadingscene-bg-color: rgb(237 237 237);
--logoutview-bg-color: white;
--logoutview-color: #666;
--logoutview-border-bottom-color: #dadce0;
--logoutview-a-color: white;
--collectionsscene-article-bg-color: rgb(250, 250, 250);
--collectionsscene-article-box-shadow-color: #0000001a;
--collectionsscene-article-border-color: #dadce0;
--collectionsscene-article-colorbar-bg-color: #000000;
--editcollectionscene-p-span-color: #4e9a06;
--deletecollectionscene-p-span-color: #a40000;
--uploadcollectionscene-li-border-bottom-color: #d5d5d5;
--uploadcollectionscene-successmessage-color: #4e9a06;
--fabcontainer-a-color: white;
--fabcontainer-a-bg-color: black;
--fabcontainer-a-box-shadow-color: #000000d6;
--badge_icon-bg-color: white;
--error-color: rgb(217, 48, 37);
--error-before-color: white;
--error-before-bg-color: rgb(217, 48, 37);
--button-color: white;
--button-bg-color: black;
--input-select-border-color: #e6e6e6;
--input-select-bg-color: #0f1115;
--input-focus-visible-border-color: #2494fe;
--copy-btn-color: #2494fe;
--copy-btn-hover-bg-color: #f0f7ff;
--copy-btn-hover-color: #055fb5;
--copy-btn-copied-color: #4e9a06;
--p-red-span-red-color: #b50202;
--button-red-a-red-bg-color: #b50202;
--button-red-a-red-border-color: #a40000;
--button-red-hover-a-red-hover-bg-color: #a40000;
--button-red-active-a-red-active-bg-color: #8f0000;
--button-green-a-green-bg-color: #4e9a06;
--button-green-a-green-border-color: #377200;
--button-green-hover-a-green-hover-bg-color: #377200;
--button-green-active-a-green-active-bg-color: #285200;
--button-blue-a-blue-bg-color: #2494fe;
--button-blue-a-blue-border-color: #055fb5;
--button-blue-hover-a-blue-hover-bg-color: #1578d6;
--button-blue-active-a-blue-active-bg-color: #055fb5;
--pill-bg-color: #6c757d;
--pill-color: #fff;
}
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
:root {
--body-bg-color: #0f1115;
--body-color: #e5e7eb;
--container-bg-color: #1b1b22;
--container-border-color: #2a2a33;
--container-box-shadow-color: #00000066;
--container-h1-color: #e5e7eb;
--tr-border-bottom-color: #2a2a33;
--th-color: #a1a1aa;
--details-border-color: #2a2a33;
--details-bg-color: #1b1b22;
--summary-hover-color: #2494fe;
--loginscene-infcloudlink-color: #a1a1aa;
--loadingscene-bg-color: #12141a;
--logoutview-bg-color: #1b1b22;
--logoutview-color: #a1a1aa;
--logoutview-border-bottom-color: #2a2a33;
--logoutview-a-color: #e5e7eb;
--logoutview-version-color: #6b7280;
--collectionsscene-article-bg-color: #1b1b22;
--collectionsscene-article-box-shadow-color: #00000066;
--collectionsscene-article-border-color: #2a2a33;
--collectionsscene-article-colorbar-bg-color: #111827;
--editcollectionscene-p-span-color: #22c55e;
--deletecollectionscene-p-span-color: #ef4444;
--uploadcollectionscene-border-bottom-color: #2a2a33;
--uploadcollectionscene-successmessage-color: #22c55e;
--fabcontainer-a-color: #e5e7eb;
--fabcontainer-a-bg-color: #111827;
--fabcontainer-a-box-shadow-color: #000000aa;
--badge_icon-bg-color: #1b1b22;
--error-color: #f87171;
--error-before-color: white;
--error-before-bg-color: #ef4444;
--button-color: #e5e7eb;
--button-bg-color: #111827;
--input-select-border-color: #2a2a33;
--input-select-bg-color: #0f1115;
--input-focus-visible-border-color: #2494fe;
--copy-btn-color: #60a5fa;
--copy-btn-hover-bg-color: #1b2a3a;
--copy-btn-hover-color: #93c5fd;
--copy-btn-copied-color: #22c55e;
--p-red-span-red-color: #f87171;
--button-red-a-red-bg-color: #7f1d1d;
--button-red-a-red-border-color: #991b1b;
--button-red-hover-a-red-hover-bg-color: #991b1b;
--button-red-active-a-red-active-bg-color: #b91c1c;
--button-green-a-green-bg-color: #14532d;
--button-green-a-green-border-color: #166534;
--button-green-hover-a-green-hover-bg-color: #166534;
--button-green-active-a-green-active-bg-color: #22c55e;
--button-blue-a-blue-bg-color: #1d4ed8;
--button-blue-a-blue-border-color: #1e40af;
--button-blue-hover-a-blue-hover-bg-color: #2563eb;
--button-blue-active-a-blue-active-bg-color: #1e40af;
--pill-bg-color: #3a3f4b;
--pill-color: #e5e7eb;
}
}
body { body {
background: #ffffff; background: var(--body-bg-color);
color: #424247; color: var(--body-color);
font-family: sans-serif; font-family: sans-serif;
font-size: 14pt; font-size: 14pt;
margin: 0; margin: 0;
@@ -26,10 +150,10 @@ main {
transition: .2s; transition: .2s;
overflow: hidden; overflow: hidden;
padding: 1ex 1em 1ex 1em; padding: 1ex 1em 1ex 1em;
background: rgb(250, 250, 250); background: var(--container-bg-color);
border: 1px solid #dadce0; border: 1px solid var(--container-border-color);
border-radius: 8px; border-radius: 8px;
box-shadow: 2px 2px 3px #0000001a; box-shadow: 2px 2px 3px var(--container-box-shadow-color);
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
margin: 0 auto; margin: 0 auto;
@@ -39,7 +163,7 @@ main {
margin: 0; margin: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #484848; color: var(--container-h1-color);
} }
table { table {
@@ -56,7 +180,7 @@ td {
} }
tr { tr {
border-bottom: 1px solid #dadce0; border-bottom: 1px solid var(--tr-border-bottom-color);
} }
tr:last-child { tr:last-child {
@@ -65,7 +189,7 @@ tr:last-child {
th { th {
font-size: 0.8em; font-size: 0.8em;
color: #666; color: var(--th-color);
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -75,11 +199,11 @@ td.fill {
} }
details { details {
border: 1px solid #dadce0; border: 1px solid var(--details-border-color);
border-radius: 0.7ex; border-radius: 0.7ex;
padding: 0.5ex 0.7ex; padding: 0.5ex 0.7ex;
margin-bottom: 1ex; margin-bottom: 1ex;
background: white; background: var(--details-bg-color);
} }
summary { summary {
@@ -90,14 +214,14 @@ summary {
} }
summary:hover { summary:hover {
color: #2494fe; color: var(--summary-hover-color);
} }
#loginscene .infcloudlink { #loginscene .infcloudlink {
margin: 0; margin: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #484848; color: var(--loginscene-infcloudlink-color);
} }
#loginscene .infcloudlink-hidden { #loginscene .infcloudlink-hidden {
@@ -126,7 +250,7 @@ summary:hover {
#loadingscene { #loadingscene {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgb(237 237 237); background: var(--loadingscene-bg-color);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -147,11 +271,11 @@ summary:hover {
#logoutview { #logoutview {
width: 100%; width: 100%;
display: block; display: block;
background: white; background: var(--logoutview-bg-color);
text-align: center; text-align: center;
padding: 10px 0px; padding: 10px 0px;
color: #666; color: var(--logoutview-color);
border-bottom: 2px solid #dadce0; border-bottom: 2px solid var(--logoutview-border-bottom-color);
position: fixed; position: fixed;
} }
@@ -162,7 +286,7 @@ summary:hover {
} }
#logoutview a { #logoutview a {
color: white; color: var(--logoutview-a-color);
text-decoration: none; text-decoration: none;
padding: 3px 10px; padding: 3px 10px;
position: relative; position: relative;
@@ -186,7 +310,7 @@ summary:hover {
position: relative; position: relative;
right: 25px; right: 25px;
font-size: 0.8em; font-size: 0.8em;
color: #999; color: var(logoutview-version-color);
line-height: 2.2em; line-height: 2.2em;
} }
@@ -203,10 +327,10 @@ summary:hover {
#collectionsscene article { #collectionsscene article {
width: 275px; width: 275px;
background: rgb(250, 250, 250); background: var(--collectionsscene-article-bg-color);
border-radius: 8px; border-radius: 8px;
box-shadow: 2px 2px 3px #0000001a; box-shadow: 2px 2px 3px var(--collectionsscene-article-box-shadow-color);
border: 1px solid #dadce0; border: 1px solid var(--collectionsscene-article-border-color);
padding: 5px 10px; padding: 5px 10px;
padding-top: 0; padding-top: 0;
margin: 10px; margin: 10px;
@@ -219,7 +343,7 @@ summary:hover {
width: 500%; width: 500%;
height: 15px; height: 15px;
margin: 0px -100%; margin: 0px -100%;
background: #000000; background: var(--collectionsscene-article-colorbar-bg-color);
} }
#collectionsscene article .title { #collectionsscene article .title {
@@ -288,13 +412,13 @@ summary:hover {
#editcollectionscene p span { #editcollectionscene p span {
word-wrap: break-word; word-wrap: break-word;
font-weight: bold; font-weight: bold;
color: #4e9a06; color: var(--editcollectionscene-p-span-color);
} }
#deletecollectionscene p span { #deletecollectionscene p span {
word-wrap: break-word; word-wrap: break-word;
font-weight: bold; font-weight: bold;
color: #a40000; color: var(--deletecollectionscene-p-span-color);
} }
#uploadcollectionscene ul { #uploadcollectionscene ul {
@@ -304,7 +428,7 @@ summary:hover {
} }
#uploadcollectionscene li { #uploadcollectionscene li {
border-bottom: 1px dashed #d5d5d5; border-bottom: 1px dashed var(--uploadcollectionscene-li-border-bottom-color);
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
@@ -315,7 +439,7 @@ summary:hover {
} }
#uploadcollectionscene .successmessage { #uploadcollectionscene .successmessage {
color: #4e9a06; color: var(--uploadcollectionscene-successmessage-color);
width: 100%; width: 100%;
text-align: center; text-align: center;
display: block; display: block;
@@ -345,11 +469,11 @@ summary:hover {
width: 30px; width: 30px;
height: 30px; height: 30px;
text-decoration: none; text-decoration: none;
color: white; color: var(--fabcontainer-a-color);
border: none !important; border: none !important;
border-radius: 100%; border-radius: 100%;
margin: 5px 10px; margin: 5px 10px;
background: black; background: var(--fabcontainer-a-bg-color);
text-align: center; text-align: center;
display: flex; display: flex;
align-content: center; align-content: center;
@@ -357,7 +481,7 @@ summary:hover {
align-items: center; align-items: center;
font-size: 30px; font-size: 30px;
padding: 10px; padding: 10px;
box-shadow: 2px 2px 7px #000000d6; box-shadow: 2px 2px 7px var(--fabcontainer-a-box-shadow-color);
} }
.title { .title {
@@ -390,7 +514,7 @@ summary:hover {
right: -5px; right: -5px;
filter: invert(1); filter: invert(1);
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: var(--badge_icon-bg-color);
} }
@@ -402,7 +526,7 @@ summary:hover {
width: 100%; width: 100%;
display: block; display: block;
text-align: center; text-align: center;
color: rgb(217, 48, 37); color: var(--error-color);
font-family: sans-serif; font-family: sans-serif;
clear: both; clear: both;
padding-top: 15px; padding-top: 15px;
@@ -416,8 +540,8 @@ img.loading {
.error::before { .error::before {
content: "!"; content: "!";
height: 1.4em; height: 1.4em;
color: white; color: var(--error-before-color);
background: rgb(217, 48, 37); background: var(--error-before-bg-color);
font-weight: bold; font-weight: bold;
border-radius: 100%; border-radius: 100%;
display: inline-block; display: inline-block;
@@ -430,11 +554,11 @@ img.loading {
button { button {
font-size: 1em; font-size: 1em;
padding: 7px 21px; padding: 7px 21px;
color: white; color: var(--button-color);
border-radius: 4px; border-radius: 4px;
float: right; float: right;
margin-left: 10px; margin-left: 10px;
background: black; background: var(--button-bg-color);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
@@ -444,7 +568,7 @@ select {
width: 100%; width: 100%;
height: 3em; height: 3em;
border-style: solid; border-style: solid;
border-color: #e6e6e6; border-color: var(--input-select-border-color);
border-width: 1px; border-width: 1px;
border-radius: 7px; border-radius: 7px;
margin-bottom: 25px; margin-bottom: 25px;
@@ -466,7 +590,7 @@ input[type=password] {
input:active, input:active,
input:focus, input:focus,
input:focus-visible { input:focus-visible {
border-color: #2494fe !important; border-color: var(--input-focus-visible-border-color) !important;
border-width: 1px !important; border-width: 1px !important;
} }
@@ -506,7 +630,7 @@ td .url-input-wrapper input {
margin-left: -30px; margin-left: -30px;
background: transparent; background: transparent;
border: none; border: none;
color: #2494fe; color: var(--copy-btn-color);
font-size: 1.25em; font-size: 1.25em;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
@@ -526,8 +650,8 @@ td .url-input-wrapper input {
} }
.copy-btn:hover { .copy-btn:hover {
background-color: #f0f7ff; background-color: var(--copy-btn-hover-bg-color: #1b2a3a);
color: #055fb5; color: var(--copy-btn-hover-color: #93c5fd);
} }
.copy-btn:active { .copy-btn:active {
@@ -535,7 +659,7 @@ td .url-input-wrapper input {
} }
.copy-btn.copied { .copy-btn.copied {
color: #4e9a06; color: var(--copy-btn-copied-color);
} }
input[type=radio], input[type=radio],
@@ -548,56 +672,56 @@ input[type=checkbox] {
p.red, p.red,
span.red { span.red {
color: #b50202; color: var(--p-red-span-red-color);
} }
button.red, button.red,
a.red { a.red {
background: #b50202; background: var(--button-red-a-red-bg-color);
border: 1px solid #a40000; border: 1px solid var(--button-red-a-red-border-color);
} }
button.red:hover, button.red:hover,
a.red:hover { a.red:hover {
background: #a40000; background: var(--button-red-hover-a-red-hover-bg-color);
} }
button.red:active, button.red:active,
a.red:active { a.red:active {
background: #8f0000; background: var(--button-red-active-a-red-active-bg-color);
} }
button.green, button.green,
a.green { a.green {
background: #4e9a06; background: var(--button-green-a-green-bg-color);
border: 1px solid #377200; border: 1px solid var(--button-green-a-green-border-color);
} }
button.green:hover, button.green:hover,
a.green:hover { a.green:hover {
background: #377200; background: var(--button-green-hover-a-green-hover-bg-color);
} }
button.green:active, button.green:active,
a.green:active { a.green:active {
background: #285200; background: var(--button-green-active-a-green-active-bg-color);
} }
button.blue, button.blue,
a.blue { a.blue {
background: #2494fe; background: var(--button-blue-a-blue-bg-color);
border: 1px solid #055fb5; border: 1px solid var(--button-blue-a-blue-border-color);
} }
button.blue:hover, button.blue:hover,
a.blue:hover { a.blue:hover {
background: #1578d6; background: var(--button-blue-hover-a-blue-hover-bg-color);
cursor: pointer !important; cursor: pointer !important;
} }
button.blue:active, button.blue:active,
a.blue:active { a.blue:active {
background: #055fb5; background: var(--button-blue-active-a-blue-active-bg-color);
cursor: pointer !important; cursor: pointer !important;
} }
@@ -641,4 +765,5 @@ button.inline {
.hidden { .hidden {
display: none !important; display: none !important;
} }

3
radicale/web/internal_data/index.html
View File

@@ -12,8 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Radicale Web Interface</title> <title>Radicale Web Interface</title>
<link href="css/main.css" rel="stylesheet" media="(prefers-color-scheme: light)"> <link href="css/main.css" type="text/css" media="screen" rel="stylesheet">
<link href="css/main-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
<link href="css/icon.png" type="image/png" rel="icon"> <link href="css/icon.png" type="image/png" rel="icon">
<script type="module" src="js/main.js"></script> <script type="module" src="js/main.js"></script>
</head> </head>