From 8e17dda79a8db046cb73637501725cdb69e1c333 Mon Sep 17 00:00:00 2001 From: envoyr Date: Sun, 23 Oct 2022 17:35:18 +0200 Subject: [PATCH] refactored scss files and beautify darkmode --- templates/Froxlor/assets/mix-manifest.json | 6 +- templates/Froxlor/base.html.twig | 2 +- .../Froxlor/src/scss/components/_card.scss | 2 +- .../_generic.scss} | 5 +- .../Froxlor/src/scss/components/_heading.scss | 13 +++++ .../Froxlor/src/scss/components/_navbar.scss | 6 +- .../Froxlor/src/scss/components/_search.scss | 1 + .../Froxlor/src/scss/components/_sidebar.scss | 1 + templates/Froxlor/src/scss/dark.scss | 51 +---------------- templates/Froxlor/src/scss/main.scss | 4 +- .../Froxlor/src/scss/variables/_dark.scss | 57 +++++++++++++++---- .../Froxlor/src/scss/variables/_main.scss | 56 ++++++++++++++---- templates/Froxlor/table/table.html.twig | 2 +- templates/Froxlor/userarea.html.twig | 4 +- 14 files changed, 123 insertions(+), 87 deletions(-) rename templates/Froxlor/src/scss/{_global.scss => components/_generic.scss} (90%) create mode 100644 templates/Froxlor/src/scss/components/_heading.scss diff --git a/templates/Froxlor/assets/mix-manifest.json b/templates/Froxlor/assets/mix-manifest.json index 39723b55..4b0c5cf2 100644 --- a/templates/Froxlor/assets/mix-manifest.json +++ b/templates/Froxlor/assets/mix-manifest.json @@ -1,7 +1,5 @@ { "/js/main.js": "/js/main.js", - "/css/dark.css": "/css/dark.css", - "/css/main.css": "/css/main.css", "/webfonts/fa-brands-400.ttf": "/webfonts/fa-brands-400.ttf", "/webfonts/fa-brands-400.woff2": "/webfonts/fa-brands-400.woff2", "/webfonts/fa-regular-400.ttf": "/webfonts/fa-regular-400.ttf", @@ -9,5 +7,7 @@ "/webfonts/fa-solid-900.ttf": "/webfonts/fa-solid-900.ttf", "/webfonts/fa-solid-900.woff2": "/webfonts/fa-solid-900.woff2", "/webfonts/fa-v4compatibility.ttf": "/webfonts/fa-v4compatibility.ttf", - "/webfonts/fa-v4compatibility.woff2": "/webfonts/fa-v4compatibility.woff2" + "/webfonts/fa-v4compatibility.woff2": "/webfonts/fa-v4compatibility.woff2", + "/css/dark.css": "/css/dark.css", + "/css/main.css": "/css/main.css" } diff --git a/templates/Froxlor/base.html.twig b/templates/Froxlor/base.html.twig index 0422aa3a..ba41c856 100644 --- a/templates/Froxlor/base.html.twig +++ b/templates/Froxlor/base.html.twig @@ -1,5 +1,5 @@ - + diff --git a/templates/Froxlor/src/scss/components/_card.scss b/templates/Froxlor/src/scss/components/_card.scss index f343a9ed..2d553d0b 100644 --- a/templates/Froxlor/src/scss/components/_card.scss +++ b/templates/Froxlor/src/scss/components/_card.scss @@ -3,7 +3,7 @@ margin-bottom: $spacer * 1.5; .card-header { - border-bottom: #e5e5e5 solid 1px; + border-bottom: $border-color solid 1px; font-weight: bold; } diff --git a/templates/Froxlor/src/scss/_global.scss b/templates/Froxlor/src/scss/components/_generic.scss similarity index 90% rename from templates/Froxlor/src/scss/_global.scss rename to templates/Froxlor/src/scss/components/_generic.scss index adc7a14e..69ff654d 100644 --- a/templates/Froxlor/src/scss/_global.scss +++ b/templates/Froxlor/src/scss/components/_generic.scss @@ -1,5 +1,8 @@ +// Fontawesome +@import "~@fortawesome/fontawesome-free/scss/fontawesome"; @import "~@fortawesome/fontawesome-free/css/all"; +// Generic .form-control-plaintext { outline: none; } @@ -16,7 +19,7 @@ display: block; height: 3px; width: 100px; - background: $froxlor-blue-dark; + background: $froxlor-800; border-radius: 3px; content: ' '; } diff --git a/templates/Froxlor/src/scss/components/_heading.scss b/templates/Froxlor/src/scss/components/_heading.scss new file mode 100644 index 00000000..0f1d4d22 --- /dev/null +++ b/templates/Froxlor/src/scss/components/_heading.scss @@ -0,0 +1,13 @@ +.heading { + color: $heading-color; + background-color: $heading-bg; + border-top: $heading-border-color solid 1px; +} + +.heading h5 { + color: $heading-color; +} + +.heading span { + +} diff --git a/templates/Froxlor/src/scss/components/_navbar.scss b/templates/Froxlor/src/scss/components/_navbar.scss index 7d2a3129..93325295 100644 --- a/templates/Froxlor/src/scss/components/_navbar.scss +++ b/templates/Froxlor/src/scss/components/_navbar.scss @@ -1,5 +1,5 @@ .navbar { - background: darken($navbar-bg, 3); + z-index: 20; } .navbar-brand { @@ -8,7 +8,7 @@ @include media-breakpoint-up(md) { .navbar { - background: $white; + background: $navbar-bg; .navbar-brand { background: $dark; @@ -21,7 +21,7 @@ @include media-breakpoint-down(md) { .navbar { - background: $dark; + background: darken($navbar-bg, 90); .navbar-nav { .nav-link { diff --git a/templates/Froxlor/src/scss/components/_search.scss b/templates/Froxlor/src/scss/components/_search.scss index 25120178..b16ba530 100644 --- a/templates/Froxlor/src/scss/components/_search.scss +++ b/templates/Froxlor/src/scss/components/_search.scss @@ -7,6 +7,7 @@ } .search-input { + color: $body-color; outline: none; border: none; background: transparent; diff --git a/templates/Froxlor/src/scss/components/_sidebar.scss b/templates/Froxlor/src/scss/components/_sidebar.scss index b3acac4f..c1b509cf 100644 --- a/templates/Froxlor/src/scss/components/_sidebar.scss +++ b/templates/Froxlor/src/scss/components/_sidebar.scss @@ -1,5 +1,6 @@ .sidebar, .sub-sidebar { width: $sidebar-width; + z-index: 10; } .sidebar { diff --git a/templates/Froxlor/src/scss/dark.scss b/templates/Froxlor/src/scss/dark.scss index 93be3330..dfdd76d0 100644 --- a/templates/Froxlor/src/scss/dark.scss +++ b/templates/Froxlor/src/scss/dark.scss @@ -3,65 +3,19 @@ // Bootstrap @import "variables/dark"; @import "~bootstrap/scss/bootstrap"; -@import "~@fortawesome/fontawesome-free/scss/fontawesome"; // Theme -@import "global"; +@import "components/generic"; @import "components/alert"; @import "components/card"; @import "components/dropdown"; @import "components/footer"; @import "components/form"; +@import "components/heading"; @import "components/navbar"; @import "components/sidebar"; @import "components/search"; -.input-group-text { - background-color: $dark-bg; -} -.form-control:disabled, .form-control[readonly] { - background-color: $dark-bg; - opacity: 1; - color: #ddd; -} - -.border-top { - border-top: 1px solid var(--bs-body-bg)!important; -} - -.form-select, -.form-control, -.form-control:focus, -section h3, -section h3 + span, -section h5 { - color: $dark-bg; -} - -.card-title, -.page-header { - color: $light; -} - - -.form-control[readonly]:focus, -.form-control-plaintext { - color: $white; -} -.navbar { - background: $dark; - - .navbar-nav { - .nav-link { - color: $white; - - &:hover { - color: rgba(255,255,255,.45); - } - } - } -} - .navbar-light { .navbar-toggler { border-color: transparent; @@ -71,7 +25,6 @@ section h5 { } } -.modal-body, tr.bg-info td, tr.bg-warning td { color: $dark-bg !important; diff --git a/templates/Froxlor/src/scss/main.scss b/templates/Froxlor/src/scss/main.scss index 62352edf..1815ff26 100644 --- a/templates/Froxlor/src/scss/main.scss +++ b/templates/Froxlor/src/scss/main.scss @@ -3,15 +3,15 @@ // Bootstrap @import "variables/main"; @import "~bootstrap/scss/bootstrap"; -@import "~@fortawesome/fontawesome-free/scss/fontawesome"; // Theme -@import "global"; +@import "components/generic"; @import "components/alert"; @import "components/card"; @import "components/dropdown"; @import "components/footer"; @import "components/form"; +@import "components/heading"; @import "components/navbar"; @import "components/sidebar"; @import "components/search"; diff --git a/templates/Froxlor/src/scss/variables/_dark.scss b/templates/Froxlor/src/scss/variables/_dark.scss index c19fdab5..edf6c060 100644 --- a/templates/Froxlor/src/scss/variables/_dark.scss +++ b/templates/Froxlor/src/scss/variables/_dark.scss @@ -1,20 +1,53 @@ @import "main"; +// Color +$primary: $froxlor-700; +$secondary: $neutral-500; +$info: $froxlor-800; + // Body -$body-bg: $dark-bg; -$body-color: $dark-font-color; +$body-bg: $neutral-900; +$body-color: $neutral-100; -// Card -$card-bg: lighten($body-bg, 10); - -$navbar-bg: $dark-bg; - -$list-group-bg: lighten($dark-bg, 10); -$list-group-color: $body-color; +// Borders +$border-color: $neutral-900; +$border-color-translucent: $neutral-900; +// Link +$link-color: $froxlor-500; $nav-link-color: $body-color; -$white: #e9ecef; -$light: #f8f9fa; +// List groups +$list-group-bg: $neutral-800; +$list-group-color: $body-color; -$link-color: $froxlor-blue-light; +// Navbar +$navbar-bg: $neutral-800; +$navbar-light-color: $neutral-200; +$navbar-light-hover-color: $neutral-500; +$navbar-light-active-color: $neutral-500; + +// Sidebar + +// Card +$card-bg: $neutral-800; +$card-border-color: $neutral-600; + +// Heading +$heading-bg: $neutral-800; +$heading-color: $body-color; +$heading-border-color: rgba(0,0,0,0.15); + +// Dropdown +$dropdown-bg: $neutral-800; +$dropdown-color: $neutral-100; +$dropdown-link-color: $neutral-100; +$dropdown-link-hover-bg: $neutral-900; + +// Modal +$modal-content-bg: $neutral-800; + +// Form control +$input-bg: $neutral-900; +$input-border-color: $black; +$input-group-addon-bg: $neutral-800; diff --git a/templates/Froxlor/src/scss/variables/_main.scss b/templates/Froxlor/src/scss/variables/_main.scss index 404125e6..af8bcebb 100644 --- a/templates/Froxlor/src/scss/variables/_main.scss +++ b/templates/Froxlor/src/scss/variables/_main.scss @@ -1,17 +1,44 @@ +// CI +$froxlor-50: #e1f4fa; +$froxlor-100: #b3e3f1; +$froxlor-200: #84d0e9; +$froxlor-300: #5abde0; +$froxlor-400: #3eb0db; +$froxlor-500: #29a2d6; +$froxlor-600: #2395c8; +$froxlor-700: #1a83b6; +$froxlor-800: #1872a2; +$froxlor-900: #0e5380; + +$neutral-50: #fafafa; +$neutral-100: #f5f5f5; +$neutral-200: #e5e5e5; +$neutral-300: #d4d4d4; +$neutral-400: #a3a3a3; +$neutral-500: #737373; +$neutral-600: #525252; +$neutral-700: #404040; +$neutral-800: #262626; +$neutral-900: #171717; + +$dark: $neutral-800; + // Colors -$light-bg: #e9ecef; -$dark-bg: #2f2f2f; +$light-bg: $neutral-100; +$dark-bg: $neutral-800; -$light-font-color: #333333; -$dark-font-color: #ffffff; +$light-font-color: $neutral-800; +$dark-font-color: $neutral-100; -$froxlor-blue-light: #62c8f4; -$froxlor-blue-dark: #1871a2; - -$primary: $froxlor-blue-dark; -$info: $froxlor-blue-light; +$black: #000000; +$white: #ffffff; +$light: $neutral-100; +$primary: $froxlor-800; +$secondary: $neutral-600; +$info: $froxlor-900; $warning: #FBBF24; -$danger: #E11D48; +$danger: #BE123C; +$success: #059669; $alert-bg-scale: 0; $alert-color-scale: 0; @@ -36,10 +63,10 @@ $body-color: $light-font-color; // $border-radius: 0.5rem; // Links -$link-color: $froxlor-blue-dark; +$link-color: $froxlor-800; // Navbar -$navbar-bg: #ffffff; +$navbar-bg: $white; // Sidebar $sidebar-width: 256px; @@ -48,3 +75,8 @@ $sidebar-width: 256px; $card-cap-bg: none; $card-cap-padding-y: $spacer; $card-border-width: 0; + +// Heading +$heading-bg: $navbar-bg; +$heading-color: $body-color; +$heading-border-color: #dee2e6; diff --git a/templates/Froxlor/table/table.html.twig b/templates/Froxlor/table/table.html.twig index d82fa82c..939b9b00 100644 --- a/templates/Froxlor/table/table.html.twig +++ b/templates/Froxlor/table/table.html.twig @@ -10,7 +10,7 @@ {% else %}
-
+
{% if listing.no_search is not defined or (listing.no_search is defined and listing.no_search == false) %} {% if gSearchText is not empty %} Filter: {{ gSearchText }} diff --git a/templates/Froxlor/userarea.html.twig b/templates/Froxlor/userarea.html.twig index 4e12a706..1a2c5827 100644 --- a/templates/Froxlor/userarea.html.twig +++ b/templates/Froxlor/userarea.html.twig @@ -19,7 +19,7 @@