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

Integrate dark mode into main css

Browse Source
This commit is contained in:
Kloon ImKloon 2023-10-10 18:29:45 +02:00
parent 531b0e1f2b
commit e574d5a98e
No known key found for this signature in database
GPG Key ID: CCF1C86A995C5B6A
11 changed files with 103 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,8 @@
box-shadow:
rgba(0, 0, 0, 0.06) 0px 1px 3px,
rgba(0, 0, 0, 0.12) 0px 1px 2px;
background: #fff;
background: var(--surfacePrimary);
color: var(--textPrimary);
border-radius: 0.2em;
margin: 5px;
overflow: hidden;

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

@ -4,8 +4,8 @@
left: 0;
height: 25em;
max-height: calc(100% - 4em);
background: white;
color: #212121;
background: var(--surfacePrimary);
color: var(--textPrimary);
z-index: 9999;
width: 100%;
font-family: monospace;

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

@ -15,6 +15,10 @@
--input-red: rgb(252, 208, 205);
--input-green: rgb(201, 242, 218);
--item-selected: white;
--action: rgb(84, 110, 122);
--background: rgb(250, 250, 250);
--surfacePrimary: rgb(255, 255, 255);
--surfaceSecondary: rgb(230, 230, 230);
@ -22,10 +26,9 @@
--iconPrimary: var(--icon-blue);
--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);
--hover: rgba(255, 255, 255, 0.1);
--hover: rgba(0, 0, 0, 0.1);
--borderPrimary: rgba(0, 0, 0, 0.1);
--borderSecondary: rgba(0, 0, 0, 0.2);
}
@ -34,6 +37,8 @@
--input-red: rgb(115, 48, 45);
--input-green: rgb(20, 122, 65);
--action: rgb(255, 255, 255);
--background: rgb(20, 29, 36);
--surfacePrimary: rgb(32, 41, 47);
--surfaceSecondary: rgb(58, 65, 71);
@ -43,7 +48,6 @@
--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);

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

@ -94,6 +94,7 @@ main {
.breadcrumbs {
height: 3em;
background: var(--background);
border-bottom: 1px solid var(--divider);
}
@ -101,7 +102,7 @@ main {
.breadcrumbs {
display: flex;
align-items: center;
color: #6f6f6f;
color: var(--textPrimary);
}
.breadcrumbs a {
@ -147,3 +148,33 @@ html[dir="rtl"] .breadcrumbs a {
.break-word {
word-break: break-all;
}
.vue-number-input > input {
background: var(--surfacePrimary) !important;
border-color: var(--surfaceSecondary) !important;
color: var(--textSecondary) !important;
}
.vue-number-input--small > input {
height: 1rem !important;
font-size: 1rem !important;
}
.vue-number-input :hover,
.vue-number-input :focus {
border-color: var(--borderSecondary) !important;
}
.vue-number-input__button {
background: var(--surfacePrimary) !important;
}
.vue-number-input__button--minus,
.vue-number-input__button--plus {
border-color: var(--surfaceSecondary) !important;
}
.vue-number-input__button::before,
.vue-number-input__button::after {
background: var(--textSecondary) !important;
}

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

@ -1,136 +0,0 @@
#search #input {
background: var(--surfaceSecondary);
border-color: var(--surfacePrimary);
}
#search #input input::placeholder {
color: var(--textSecondary);
}
#search.active #input {
background: var(--surfacePrimary);
}
#search.active input {
color: var(--textPrimary);
}
#search #result {
background: var(--background);
color: var(--textPrimary);
}
#search .boxes {
background: var(--surfacePrimary);
}
#search .boxes h3 {
color: var(--textSecondary);
}
.action {
color: var(--action) !important;
}
.action:hover {
background-color: var(--hover);
}
.action i {
color: var(--action) !important;
}
.action .counter {
border-color: var(--surfacePrimary);
}
.breadcrumbs {
border-color: var(--divider);
color: var(--textPrimary) !important;
}
.breadcrumbs span {
color: var(--textPrimary) !important;
}
.breadcrumbs a:hover {
background-color: var(--hover);
}
#listing .item {
background: var(--surfacePrimary);
color: var(--textPrimary);
border-color: var(--divider) !important;
}
#listing .item i {
color: var(--iconPrimary);
}
#listing .item[aria-selected="true"] i {
color: var(--iconSecondary);
}
#listing h2,
#listing.list .header span {
color: var(--textPrimary) !important;
}
#listing.list .header i {
color: var(--textPrimary);
}
#listing.list .item.header {
background: var(--background);
}
.card h3 {
color: var(--textPrimary);
}
.card#share input,
.card#share select {
background: var(--surfacePrimary);
color: var(--textPrimary);
border: 1px solid var(--borderPrimary);
}
.collapsible {
border-color: var(--divider);
}
.collapsible > label * {
color: var(--textPrimary);
}
.file-list li:hover {
background: var(--surfaceSecondary);
}
.file-list li:before {
color: var(--textSecondary);
}
.file-list li[aria-selected="true"]:before {
color: var(--iconSecondary);
}
.shell {
background: var(--surfacePrimary);
color: var(--textPrimary);
}
.shell__result {
border-top: 1px solid var(--divider);
}
#editor-container {
background: var(--background);
}
#editor-container .bar {
background: var(--surfacePrimary);
}
@media (max-width: 736px) {
#file-selection {
background: var(--surfaceSecondary) !important;
}
#file-selection span {
color: var(--textPrimary) !important;
}
nav {
background: var(--surfaceSecondary) !important;
}
#dropdown {
background: var(--surfaceSecondary) !important;
}
}
.share__box {
background: var(--surfacePrimary) !important;
color: var(--textPrimary);
}
.share__box__element {
border-top-color: var(--divider);
}

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

@ -233,7 +233,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
}
.card h3 {
color: rgba(0, 0, 0, 0.53);
color: var(--textPrimary);
font-size: 1em;
font-weight: 500;
margin: 2em 0 1em;
@ -252,6 +252,14 @@ html[dir="rtl"] .card .card-title > *:first-child {
max-width: 15em;
}
.card#share input,
.card#share select,
.card#share input::-webkit-inner-spin-button,
.card#share input::-webkit-outer-spin-button {
background: var(--surfacePrimary);
color: var(--textSecondary);
}
.card#share ul {
list-style: none;
padding: 0;
@ -278,7 +286,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
.card#share ul li select {
padding: 0.2em;
margin-right: 0.5em;
border: 1px solid #dadada;
border: 1px solid var(--borderPrimary);
}
.card#share .action.copy-clipboard::after {
@ -348,18 +356,18 @@ html[dir="rtl"] .card .card-title > *:first-child {
.file-list li[aria-selected="true"] {
background: var(--blue) !important;
color: #fff !important;
color: var(--iconSecondary) !important;
transition: 0.1s ease all;
}
.file-list li:hover {
background-color: #e9eaeb;
background: var(--surfaceSecondary);
cursor: pointer;
}
.file-list li:before {
content: "folder";
color: #6f6f6f;
color: var(--textPrimary);
vertical-align: middle;
line-height: 1.4;
font-family: "Material Icons";
@ -368,7 +376,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
}
.file-list li[aria-selected="true"]:before {
color: white;
color: var(--iconSecondary);
}
.help {
@ -419,7 +427,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
.collapsible > label * {
margin: 0;
color: rgba(0, 0, 0, 0.57);
color: var(--textPrimary);
}
.collapsible > label i {

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

@ -82,7 +82,8 @@ header .menu-button {
}
#search #input {
background-color: #f5f5f5;
background: var(--surfaceSecondary);
border-color: var(--surfacePrimary);
display: flex;
height: 100%;
padding: 0em 0.75em;
@ -92,10 +93,14 @@ header .menu-button {
z-index: 2;
}
#search #input input::placeholder {
color: var(--textSecondary);
}
#search.active #input {
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
border-bottom: 1px solid var(--borderPrimary);
box-shadow: 0 0 5px var(--borderPrimary);
background-color: #fff;
background: var(--surfacePrimary);
height: 4em;
}
@ -105,7 +110,7 @@ header .menu-button {
#search.active i,
#search.active input {
color: #212121;
color: var(--textPrimary);
}
#search #input > .action,
@ -124,10 +129,10 @@ header .menu-button {
#search #result {
visibility: visible;
max-height: none;
background-color: #f8f8f8;
background: var(--background);
text-align: left;
padding: 0;
color: rgba(0, 0, 0, 0.6);
color: var(--textPrimary);
height: 0;
transition:
0.1s ease height,
@ -146,7 +151,6 @@ html[dir="rtl"] #search #result {
}
html[dir="rtl"] #search #result {
direction: rtl;
text-align: right;
}
@ -208,28 +212,28 @@ html[dir="rtl"] #search #result ul > * {
margin-right: 0.3em;
}
#search::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
#search:-moz-placeholder {
opacity: 1;
color: rgba(255, 255, 255, 0.5);
// I dont think we need these anymore
/* #search::-webkit-input-placeholder {
color: var(--textPrimary);
}
#search::-moz-placeholder {
opacity: 1;
color: rgba(255, 255, 255, 0.5);
color: var(--textPrimary);
}
#search:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
color: var(--textPrimary);
}
#search #input input::placeholder {
color: var(--textPrimary);
} */
#search .boxes {
border: 1px solid rgba(0, 0, 0, 0.075);
border: 1px solid var(--borderPrimary);
box-shadow: 0 0 5px var(--borderPrimary);
background: #fff;
background: var(--surfacePrimary);
margin: 1em 0;
}
@ -237,7 +241,7 @@ html[dir="rtl"] #search #result ul > * {
margin: 0;
font-weight: 500;
font-size: 1em;
color: #212121;
color: var(--textSecondary);
padding: 0.5em;
}

2
frontend/src/css/listing-icons.css
View File

@ -249,5 +249,5 @@
content: "folder";
}
.file-icons [aria-selected="true"] i {
color: var(--item-selected);
color: var(--iconSecondary);
}

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

@ -1,7 +1,3 @@
#listing {
--item-selected: white;
}
html[dir="rtl"] #listing {
margin-right: 16em;
}
@ -9,7 +5,7 @@ html[dir="rtl"] #listing {
#listing h2 {
margin: 0 0 0 0.5em;
font-size: 0.9em;
color: rgba(0, 0, 0, 0.38);
color: var(--textPrimary);
font-weight: 500;
}
@ -25,11 +21,12 @@ html[dir="rtl"] #listing {
}
#listing .item {
background-color: #fff;
background: var(--surfacePrimary);
border-color: var(--divider);
position: relative;
display: flex;
flex-wrap: nowrap;
color: #6f6f6f;
color: var(--textPrimary);
transition:
0.1s ease background,
0.1s ease opacity;
@ -176,7 +173,7 @@ html[dir="rtl"] #listing {
#listing .item[aria-selected="true"] {
background: var(--blue) !important;
color: var(--item-selected) !important;
color: var(--iconSecondary) !important;
}
#listing.list .item div:first-of-type {
@ -219,7 +216,7 @@ html[dir="rtl"] #listing {
#listing.list .item.header {
display: flex !important;
background: #fafafa;
background: var(--background);
z-index: 999;
padding: 0.85em;
border: 0;
@ -287,5 +284,5 @@ html[dir="rtl"] #listing {
#listing #multiple-selection p,
#listing #multiple-selection i {
color: var(--item-selected);
color: var(--iconSecondary);
}

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

@ -37,7 +37,7 @@
top: 1em;
right: 1em;
display: block;
background-color: #fff;
background: var(--surfaceSecondary);
box-shadow: 0 0 5px var(--borderPrimary);
transform: scale(0);
transition: 0.1s ease-in-out transform;
@ -77,7 +77,7 @@
transform: translateX(-50%);
display: flex;
align-items: center;
background: #fff;
background: var(--surfaceSecondary);
box-shadow:
rgba(0, 0, 0, 0.06) 0px 1px 3px,
rgba(0, 0, 0, 0.12) 0px 1px 2px;
@ -92,7 +92,7 @@
#file-selection > span {
display: inline-block;
margin-left: 1em;
color: #6f6f6f;
color: var(--textPrimary);
margin-right: auto;
}
#file-selection .action span {
@ -101,7 +101,7 @@
nav {
top: 0;
z-index: 99999;
background: #fff;
background: var(--surfaceSecondary);
height: 100%;
width: 16em;
box-shadow: 0 0 5px var(--borderPrimary);

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

@ -79,7 +79,7 @@ main .spinner .bounce2 {
transition: 0.2s ease all;
border: 0;
margin: 0;
color: #546e7a;
color: var(--action);
border-radius: 50%;
background: transparent;
padding: 0;
@ -101,7 +101,7 @@ main .spinner .bounce2 {
}
.action:hover {
background-color: var(--borderPrimary);
background-color: var(--hover);
}
.action ul {
@ -122,7 +122,7 @@ main .spinner .bounce2 {
}
.action ul li:hover {
background-color: rgba(0, 0, 0, 0.04);
background-color: var(--divider);
}
#click-overlay {
@ -145,7 +145,7 @@ main .spinner .bounce2 {
bottom: 0;
right: 0;
background: var(--blue);
color: #fff;
color: var(--iconSecondary);
border-radius: 50%;
font-size: 0.75em;
width: 1.8em;
@ -153,7 +153,7 @@ main .spinner .bounce2 {
text-align: center;
line-height: 1.55em;
font-weight: bold;
border: 2px solid white;
border: 2px solid var(--borderPrimary);
}
/* PREVIEWER */
@ -302,7 +302,7 @@ main .spinner .bounce2 {
#editor-container {
display: flex;
flex-direction: column;
background-color: #fafafa;
background-color: var(--background);
position: fixed;
padding-top: 4em;
top: 0;
@ -313,6 +313,10 @@ main .spinner .bounce2 {
overflow: hidden;
}
#editor-container .bar {
background: var(--surfacePrimary);
}
#editor-container #editor {
flex: 1;
}
@ -335,22 +339,6 @@ html[dir="rtl"] .breadcrumbs .chevron {
font-size: 1rem;
}
/* * * * * * * * * * * * * * * *
* PROMPT *
* * * * * * * * * * * * * * * */
.noty_buttons {
text-align: right;
padding: 0 10px 10px !important;
}
.noty_buttons button {
background: var(--divider);
border: 1px solid var(--borderPrimary);
box-shadow: 0 0 0 0;
font-size: 1rem;
}
/* * * * * * * * * * * * * * * *
* FOOTER *
* * * * * * * * * * * * * * * */