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

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

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

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

@ -41,7 +41,7 @@
.share__box__element {
padding: 1em;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid var(--borderPrimary);
word-break: break-all;
}
@ -64,7 +64,7 @@
border-left: 0;
border-right: 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 {

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

@ -12,7 +12,7 @@
overflow: auto;
font-size: 1rem;
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;
}
@ -20,7 +20,7 @@
display: flex;
padding: 0.5em;
align-items: flex-start;
border-top: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid var(--divider);
}
.shell--hidden {

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

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

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

@ -1,8 +1,8 @@
body {
font-family: "Roboto", sans-serif;
padding-top: 4em;
background-color: #fafafa;
color: #333333;
background: var(--background);
color: var(--textSecondary);
}
* {
@ -79,7 +79,7 @@ html[dir="rtl"] nav .action {
}
nav > div {
border-top: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid var(--divider);
}
nav .action > * {
@ -94,7 +94,7 @@ main {
.breadcrumbs {
height: 3em;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid var(--divider);
}
.breadcrumbs span,
@ -115,7 +115,7 @@ html[dir="rtl"] .breadcrumbs a {
}
.breadcrumbs a:hover {
background-color: rgba(0, 0, 0, 0.05);
background-color: var(--divider);
}
.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 {
background: var(--surfaceSecondary);
border-color: var(--surfacePrimary);
@ -56,10 +35,6 @@ header {
border-color: var(--surfacePrimary);
}
nav > div {
border-color: var(--divider);
}
.breadcrumbs {
border-color: var(--divider);
color: var(--textPrimary) !important;
@ -93,28 +68,7 @@ nav > div {
background: var(--background);
}
.message {
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 {
.card h3 {
color: var(--textPrimary);
}
.card#share input,
@ -124,7 +78,6 @@ nav > div {
border: 1px solid var(--borderPrimary);
}
.dashboard #nav .wrapper,
.collapsible {
border-color: var(--divider);
}
@ -132,10 +85,6 @@ nav > div {
color: var(--textPrimary);
}
table th {
color: var(--textSecondary);
}
.file-list li:hover {
background: var(--surfaceSecondary);
}

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

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

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

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

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

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

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

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

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

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

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

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