nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More work on dark theme integration

Browse Source
This commit is contained in:
Kloon ImKloon 2023-10-07 17:51:17 +02:00
parent 3f008012ef
commit e3943370e0
No known key found for this signature in database
GPG Key ID: CCF1C86A995C5B6A
13 changed files with 67 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/css/_buttons.css
View File

@ -6,8 +6,8 @@
cursor: pointer; cursor: pointer;
background: var(--blue); background: var(--blue);
color: white; color: white;
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid var(--divider);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); box-shadow: 0 0 5px var(--divider);
transition: 0.1s ease all; transition: 0.1s ease all;
} }
@ -38,7 +38,7 @@
} }
.button--flat:hover { .button--flat:hover {
background: var(--moon-grey); background: var(--surfaceSecondary);
} }
.button--flat.button--red { .button--flat.button--red {

2
frontend/src/css/_inputs.css
View File

@ -1,6 +1,6 @@
.input { .input {
background: var(--surfacePrimary); background: var(--surfacePrimary);
color: var(--textPrimary); color: var(--textSecondary);
border: 1px solid var(--borderPrimary); border: 1px solid var(--borderPrimary);
border-radius: 0.1em; border-radius: 0.1em;
padding: 0.5em 1em; padding: 0.5em 1em;

4
frontend/src/css/_share.css
View File

@ -41,7 +41,7 @@
.share__box__element { .share__box__element {
padding: 1em; padding: 1em;
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid var(--borderPrimary);
word-break: break-all; word-break: break-all;
} }
@ -64,7 +64,7 @@
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-bottom: 0; border-bottom: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid var(--borderPrimary);
} }
.share__box__items #listing.list .item .name { .share__box__items #listing.list .item .name {

4
frontend/src/css/_shell.css
View File

@ -12,7 +12,7 @@
overflow: auto; overflow: auto;
font-size: 1rem; font-size: 1rem;
cursor: text; cursor: text;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--borderPrimary);
transition: 0.2s ease transform; transition: 0.2s ease transform;
} }
@ -20,7 +20,7 @@
display: flex; display: flex;
padding: 0.5em; padding: 0.5em;
align-items: flex-start; align-items: flex-start;
border-top: 1px solid rgba(0, 0, 0, 0.05); border-top: 1px solid var(--divider);
} }
.shell--hidden { .shell--hidden {

28
frontend/src/css/_variables.css
View File

@ -12,15 +12,16 @@
--icon-blue: #1d99f3; --icon-blue: #1d99f3;
--icon-violet: #9b59b6; --icon-violet: #9b59b6;
--input-red: #fcd0cd; --input-red: rgb(252, 208, 205);
--input-green: #c9f2da; --input-green: rgb(201, 242, 218);
--background: rgb(250, 250, 250); --background: rgb(250, 250, 250);
--surfacePrimary: #fff; --surfacePrimary: rgb(255, 255, 255);
--surfaceSecondary: #f5f5f5; --surfaceSecondary: rgb(230, 230, 230);
--divider: rgba(0, 0, 0, 0.05); --divider: rgba(0, 0, 0, 0.05);
--iconPrimary: var(--icon-blue); --iconPrimary: var(--icon-blue);
--iconSecondary: #fff; --iconSecondary: rgb(255, 255, 255);
--iconTertiary: rgb(204, 204, 204);
--action: rgb(84, 110, 122); --action: rgb(84, 110, 122);
--textPrimary: rgb(111, 111, 111); --textPrimary: rgb(111, 111, 111);
--textSecondary: rgb(51, 51, 51); --textSecondary: rgb(51, 51, 51);
@ -30,18 +31,19 @@
} }
:root.dark { :root.dark {
--input-red: #73302d; --input-red: rgb(115, 48, 45);
--input-green: #147a41; --input-green: rgb(20, 122, 65);
--background: #141d24; --background: rgb(20, 29, 36);
--surfacePrimary: #20292f; --surfacePrimary: rgb(32, 41, 47);
--surfaceSecondary: #3a4147; --surfaceSecondary: rgb(58, 65, 71);
--textPrimary: rgba(255, 255, 255, 0.6); --textPrimary: rgba(255, 255, 255, 0.6);
--textSecondary: rgba(255, 255, 255, 0.87); --textSecondary: rgba(255, 255, 255, 0.87);
--divider: rgba(255, 255, 255, 0.12); --divider: rgba(255, 255, 255, 0.12);
--iconPrimary: #fff; --iconPrimary: rgb(255, 255, 255);
--iconSecondary: #fff; --iconSecondary: rgb(255, 255, 255);
--action: #fff; --iconTertiary: rgb(255, 255, 255);
--action: rgb(255, 255, 255);
--hover: rgba(255, 255, 255, 0.1); --hover: rgba(255, 255, 255, 0.1);
--borderPrimary: rgba(255, 255, 255, 0.05); --borderPrimary: rgba(255, 255, 255, 0.05);
--borderSecondary: rgba(255, 255, 255, 0.15); --borderSecondary: rgba(255, 255, 255, 0.15);

10
frontend/src/css/base.css
View File

@ -1,8 +1,8 @@
body { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
padding-top: 4em; padding-top: 4em;
background-color: #fafafa; background: var(--background);
color: #333333; color: var(--textSecondary);
} }
* { * {
@ -79,7 +79,7 @@ html[dir="rtl"] nav .action {
} }
nav > div { nav > div {
border-top: 1px solid rgba(0, 0, 0, 0.05); border-top: 1px solid var(--divider);
} }
nav .action > * { nav .action > * {
@ -94,7 +94,7 @@ main {
.breadcrumbs { .breadcrumbs {
height: 3em; height: 3em;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid var(--divider);
} }
.breadcrumbs span, .breadcrumbs span,
@ -115,7 +115,7 @@ html[dir="rtl"] .breadcrumbs a {
} }
.breadcrumbs a:hover { .breadcrumbs a:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: var(--divider);
} }
.breadcrumbs span a { .breadcrumbs span a {

53
frontend/src/css/dark.css
View File

@ -1,24 +1,3 @@
body {
background: var(--background);
color: var(--textSecondary);
}
#loading {
background: var(--background);
}
#loading .spinner div,
main .spinner div {
background: var(--iconPrimary);
}
#login {
background: var(--surfacePrimary);
}
header {
background: var(--surfacePrimary);
}
#search #input { #search #input {
background: var(--surfaceSecondary); background: var(--surfaceSecondary);
border-color: var(--surfacePrimary); border-color: var(--surfacePrimary);
@ -56,10 +35,6 @@ header {
border-color: var(--surfacePrimary); border-color: var(--surfacePrimary);
} }
nav > div {
border-color: var(--divider);
}
.breadcrumbs { .breadcrumbs {
border-color: var(--divider); border-color: var(--divider);
color: var(--textPrimary) !important; color: var(--textPrimary) !important;
@ -93,28 +68,7 @@ nav > div {
background: var(--background); background: var(--background);
} }
.message { .card h3 {
color: var(--textPrimary);
}
.card {
background: var(--surfacePrimary);
color: var(--textSecondary);
}
.button--flat:hover {
background: var(--surfaceSecondary);
}
.dashboard #nav ul li {
color: var(--action);
}
.dashboard #nav ul li:hover {
background: var(--surfaceSecondary);
}
.card h3,
.dashboard #nav,
.dashboard p label {
color: var(--textPrimary); color: var(--textPrimary);
} }
.card#share input, .card#share input,
@ -124,7 +78,6 @@ nav > div {
border: 1px solid var(--borderPrimary); border: 1px solid var(--borderPrimary);
} }
.dashboard #nav .wrapper,
.collapsible { .collapsible {
border-color: var(--divider); border-color: var(--divider);
} }
@ -132,10 +85,6 @@ nav > div {
color: var(--textPrimary); color: var(--textPrimary);
} }
table th {
color: var(--textSecondary);
}
.file-list li:hover { .file-list li:hover {
background: var(--surfaceSecondary); background: var(--surfaceSecondary);
} }

23
frontend/src/css/dashboard.css
View File

@ -37,12 +37,12 @@ a {
display: block; display: block;
font-size: 0.8em; font-size: 0.8em;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.57); color: var(--textPrimary);
} }
li code, li code,
p code { p code {
background: rgba(0, 0, 0, 0.05); background: var(--divider);
padding: 0.1em; padding: 0.1em;
border-radius: 0.2em; border-radius: 0.2em;
} }
@ -61,7 +61,7 @@ p code {
.dashboard #nav .wrapper { .dashboard #nav .wrapper {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
border-bottom: 2px solid rgba(0, 0, 0, 0.05); border-bottom: 2px solid var(--divider);
} }
html[dir="rtl"] .dashboard #nav .wrapper { html[dir="rtl"] .dashboard #nav .wrapper {
@ -71,7 +71,7 @@ html[dir="rtl"] .dashboard #nav .wrapper {
.dashboard #nav ul { .dashboard #nav ul {
list-style: none; list-style: none;
display: flex; display: flex;
color: rgb(84, 110, 122); color: var(--action);
font-weight: 500; font-weight: 500;
padding: 0; padding: 0;
margin: 0 0 -2px 0; margin: 0 0 -2px 0;
@ -89,7 +89,7 @@ html[dir="rtl"] .dashboard #nav .wrapper {
} }
.dashboard #nav ul li:hover { .dashboard #nav ul li:hover {
background: var(--moon-grey); background: var(--surfaceSecondary);
} }
.dashboard #nav ul li.active { .dashboard #nav ul li.active {
@ -119,7 +119,7 @@ table {
} }
table tr { table tr {
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--iconTertiary);
} }
table tr:last-child { table tr:last-child {
@ -128,7 +128,7 @@ table tr:last-child {
table th { table th {
font-weight: 500; font-weight: 500;
color: #757575; color: var(--textSecondary);
text-align: left; text-align: left;
} }
@ -159,7 +159,8 @@ table tr > *:last-child {
.card { .card {
position: relative; position: relative;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
background-color: #fff; background: var(--surfacePrimary);
color: var(--textSecondary);
border-radius: 2px; border-radius: 2px;
box-shadow: box-shadow:
0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
@ -396,11 +397,11 @@ html[dir="rtl"] .card .card-title > *:first-child {
} }
.collapsible { .collapsible {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid var(--borderPrimary);
} }
.collapsible:last-of-type { .collapsible:last-of-type {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid var(--borderPrimary);
} }
.collapsible > input { .collapsible > input {
@ -465,7 +466,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
flex: 1; flex: 1;
padding: 2em; padding: 2em;
border-radius: 0.2em; border-radius: 0.2em;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid var(--borderPrimary);
text-align: center; text-align: center;
} }

12
frontend/src/css/header.css
View File

@ -1,8 +1,8 @@
header { header {
z-index: 1000; z-index: 1000;
background-color: #fff; background: var(--surfacePrimary);
border-bottom: 1px solid rgba(0, 0, 0, 0.075); border-bottom: 1px solid var(--divider);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--borderPrimary);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -94,7 +94,7 @@ header .menu-button {
#search.active #input { #search.active #input {
border-bottom: 1px solid rgba(0, 0, 0, 0.075); border-bottom: 1px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--borderPrimary);
background-color: #fff; background-color: #fff;
height: 4em; height: 4em;
} }
@ -189,7 +189,7 @@ html[dir="rtl"] #search #result ul > * {
} }
#search.active #result i { #search.active #result i {
color: #ccc; color: var(--iconTertiary);
} }
#search.active #result > p > i { #search.active #result > p > i {
@ -228,7 +228,7 @@ html[dir="rtl"] #search #result ul > * {
#search .boxes { #search .boxes {
border: 1px solid rgba(0, 0, 0, 0.075); border: 1px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--borderPrimary);
background: #fff; background: #fff;
margin: 1em 0; margin: 1em 0;
} }

8
frontend/src/css/listing.css
View File

@ -77,7 +77,7 @@ html[dir="rtl"] #listing {
margin: 1em auto; margin: 1em auto;
display: block !important; display: block !important;
width: 95%; width: 95%;
color: rgba(0, 0, 0, 0.3); color: var(--textPrimary);
font-weight: 500; font-weight: 500;
} }
@ -165,7 +165,7 @@ html[dir="rtl"] #listing {
#listing.list .item { #listing.list .item {
width: 100%; width: 100%;
margin: 0; margin: 0;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid var(--borderPrimary);
padding: 1em; padding: 1em;
border-top: 0; border-top: 0;
} }
@ -208,7 +208,7 @@ html[dir="rtl"] #listing {
#listing .item.header { #listing .item.header {
display: none !important; display: none !important;
background-color: #ccc; background-color: var(--iconTertiary);
} }
#listing.list .header i { #listing.list .header i {
@ -223,7 +223,7 @@ html[dir="rtl"] #listing {
z-index: 999; z-index: 999;
padding: 0.85em; padding: 0.85em;
border: 0; border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid var(--borderPrimary);
} }
#listing.list .item.header > div:first-child { #listing.list .item.header > div:first-child {

2
frontend/src/css/login.css
View File

@ -1,5 +1,5 @@
#login { #login {
background: #fff; background: var(--surfacePrimary);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;

6
frontend/src/css/mobile.css
View File

@ -30,7 +30,7 @@
header .overlay { header .overlay {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--borderPrimary);
} }
#dropdown { #dropdown {
position: fixed; position: fixed;
@ -38,7 +38,7 @@
right: 1em; right: 1em;
display: block; display: block;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--borderPrimary);
transform: scale(0); transform: scale(0);
transition: 0.1s ease-in-out transform; transition: 0.1s ease-in-out transform;
transform-origin: top right; transform-origin: top right;
@ -104,7 +104,7 @@
background: #fff; background: #fff;
height: 100%; height: 100%;
width: 16em; width: 16em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--borderPrimary);
transition: 0.1s ease left; transition: 0.1s ease left;
left: -17em; left: -17em;
} }

17
frontend/src/css/styles.css
View File

@ -20,6 +20,13 @@
color: var(--blue); color: var(--blue);
} }
#loading {
background: var(--background);
}
#loading .spinner > div {
background: var(--iconPrimary);
}
main .spinner { main .spinner {
display: block; display: block;
text-align: center; text-align: center;
@ -32,7 +39,7 @@ main .spinner > div {
height: 0.8em; height: 0.8em;
margin: 0 0.1em; margin: 0 0.1em;
font-size: 1em; font-size: 1em;
background-color: rgba(0, 0, 0, 0.3); background: var(--iconPrimary);
border-radius: 100%; border-radius: 100%;
display: inline-block; display: inline-block;
animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;
@ -94,7 +101,7 @@ main .spinner .bounce2 {
} }
.action:hover { .action:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: var(--borderPrimary);
} }
.action ul { .action ul {
@ -287,7 +294,7 @@ main .spinner .bounce2 {
#previewer .spinner > div { #previewer .spinner > div {
width: 18px; width: 18px;
height: 18px; height: 18px;
background-color: white; background: var(--iconPrimary);
} }
/* EDITOR */ /* EDITOR */
@ -338,8 +345,8 @@ html[dir="rtl"] .breadcrumbs .chevron {
} }
.noty_buttons button { .noty_buttons button {
background: rgba(0, 0, 0, 0.05); background: var(--divider);
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid var(--borderPrimary);
box-shadow: 0 0 0 0; box-shadow: 0 0 0 0;
font-size: 1rem; font-size: 1rem;
} }