maketank/Froxlor
2
0
Fork 0
Code Pull Requests Releases Activity

refactored scss files and beautify darkmode

Browse Source
This commit is contained in:
envoyr
2022-10-23 17:35:18 +02:00
parent 861786f064
commit 8e17dda79a
14 changed files with 123 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/Froxlor/assets/mix-manifest.json
View File

@@ -1,7 +1,5 @@
{ {
"/js/main.js": "/js/main.js", "/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.ttf": "/webfonts/fa-brands-400.ttf",
"/webfonts/fa-brands-400.woff2": "/webfonts/fa-brands-400.woff2", "/webfonts/fa-brands-400.woff2": "/webfonts/fa-brands-400.woff2",
"/webfonts/fa-regular-400.ttf": "/webfonts/fa-regular-400.ttf", "/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.ttf": "/webfonts/fa-solid-900.ttf",
"/webfonts/fa-solid-900.woff2": "/webfonts/fa-solid-900.woff2", "/webfonts/fa-solid-900.woff2": "/webfonts/fa-solid-900.woff2",
"/webfonts/fa-v4compatibility.ttf": "/webfonts/fa-v4compatibility.ttf", "/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"
} }

2
templates/Froxlor/base.html.twig
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"{% if darkmode is defined %} class="{{ darkmode }}"{% endif %}> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">

2
templates/Froxlor/src/scss/components/_card.scss
View File

@@ -3,7 +3,7 @@
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
.card-header { .card-header {
border-bottom: #e5e5e5 solid 1px; border-bottom: $border-color solid 1px;
font-weight: bold; font-weight: bold;
} }

5
templates/Froxlor/src/scss/_global.scss → templates/Froxlor/src/scss/components/_generic.scss
View File

@@ -1,5 +1,8 @@
// Fontawesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/css/all"; @import "~@fortawesome/fontawesome-free/css/all";
// Generic
.form-control-plaintext { .form-control-plaintext {
outline: none; outline: none;
} }
@@ -16,7 +19,7 @@
display: block; display: block;
height: 3px; height: 3px;
width: 100px; width: 100px;
background: $froxlor-blue-dark; background: $froxlor-800;
border-radius: 3px; border-radius: 3px;
content: ' '; content: ' ';
} }

13
templates/Froxlor/src/scss/components/_heading.scss Normal file
View File

@@ -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 {
}

6
templates/Froxlor/src/scss/components/_navbar.scss
View File

@@ -1,5 +1,5 @@
.navbar { .navbar {
background: darken($navbar-bg, 3); z-index: 20;
} }
.navbar-brand { .navbar-brand {
@@ -8,7 +8,7 @@
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.navbar { .navbar {
background: $white; background: $navbar-bg;
.navbar-brand { .navbar-brand {
background: $dark; background: $dark;
@@ -21,7 +21,7 @@
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
.navbar { .navbar {
background: $dark; background: darken($navbar-bg, 90);
.navbar-nav { .navbar-nav {
.nav-link { .nav-link {

1
templates/Froxlor/src/scss/components/_search.scss
View File

@@ -7,6 +7,7 @@
} }
.search-input { .search-input {
color: $body-color;
outline: none; outline: none;
border: none; border: none;
background: transparent; background: transparent;

1
templates/Froxlor/src/scss/components/_sidebar.scss
View File

@@ -1,5 +1,6 @@
.sidebar, .sub-sidebar { .sidebar, .sub-sidebar {
width: $sidebar-width; width: $sidebar-width;
z-index: 10;
} }
.sidebar { .sidebar {

51
templates/Froxlor/src/scss/dark.scss
View File

@@ -3,65 +3,19 @@
// Bootstrap // Bootstrap
@import "variables/dark"; @import "variables/dark";
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
// Theme // Theme
@import "global"; @import "components/generic";
@import "components/alert"; @import "components/alert";
@import "components/card"; @import "components/card";
@import "components/dropdown"; @import "components/dropdown";
@import "components/footer"; @import "components/footer";
@import "components/form"; @import "components/form";
@import "components/heading";
@import "components/navbar"; @import "components/navbar";
@import "components/sidebar"; @import "components/sidebar";
@import "components/search"; @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-light {
.navbar-toggler { .navbar-toggler {
border-color: transparent; border-color: transparent;
@@ -71,7 +25,6 @@ section h5 {
} }
} }
.modal-body,
tr.bg-info td, tr.bg-info td,
tr.bg-warning td { tr.bg-warning td {
color: $dark-bg !important; color: $dark-bg !important;

4
templates/Froxlor/src/scss/main.scss
View File

@@ -3,15 +3,15 @@
// Bootstrap // Bootstrap
@import "variables/main"; @import "variables/main";
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
// Theme // Theme
@import "global"; @import "components/generic";
@import "components/alert"; @import "components/alert";
@import "components/card"; @import "components/card";
@import "components/dropdown"; @import "components/dropdown";
@import "components/footer"; @import "components/footer";
@import "components/form"; @import "components/form";
@import "components/heading";
@import "components/navbar"; @import "components/navbar";
@import "components/sidebar"; @import "components/sidebar";
@import "components/search"; @import "components/search";

57
templates/Froxlor/src/scss/variables/_dark.scss
View File

@@ -1,20 +1,53 @@
@import "main"; @import "main";
// Color
$primary: $froxlor-700;
$secondary: $neutral-500;
$info: $froxlor-800;
// Body // Body
$body-bg: $dark-bg; $body-bg: $neutral-900;
$body-color: $dark-font-color; $body-color: $neutral-100;
// Card // Borders
$card-bg: lighten($body-bg, 10); $border-color: $neutral-900;
$border-color-translucent: $neutral-900;
$navbar-bg: $dark-bg;
$list-group-bg: lighten($dark-bg, 10);
$list-group-color: $body-color;
// Link
$link-color: $froxlor-500;
$nav-link-color: $body-color; $nav-link-color: $body-color;
$white: #e9ecef; // List groups
$light: #f8f9fa; $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;

56
templates/Froxlor/src/scss/variables/_main.scss
View File

@@ -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 // Colors
$light-bg: #e9ecef; $light-bg: $neutral-100;
$dark-bg: #2f2f2f; $dark-bg: $neutral-800;
$light-font-color: #333333; $light-font-color: $neutral-800;
$dark-font-color: #ffffff; $dark-font-color: $neutral-100;
$froxlor-blue-light: #62c8f4; $black: #000000;
$froxlor-blue-dark: #1871a2; $white: #ffffff;
$light: $neutral-100;
$primary: $froxlor-blue-dark; $primary: $froxlor-800;
$info: $froxlor-blue-light; $secondary: $neutral-600;
$info: $froxlor-900;
$warning: #FBBF24; $warning: #FBBF24;
$danger: #E11D48; $danger: #BE123C;
$success: #059669;
$alert-bg-scale: 0; $alert-bg-scale: 0;
$alert-color-scale: 0; $alert-color-scale: 0;
@@ -36,10 +63,10 @@ $body-color: $light-font-color;
// $border-radius: 0.5rem; // $border-radius: 0.5rem;
// Links // Links
$link-color: $froxlor-blue-dark; $link-color: $froxlor-800;
// Navbar // Navbar
$navbar-bg: #ffffff; $navbar-bg: $white;
// Sidebar // Sidebar
$sidebar-width: 256px; $sidebar-width: 256px;
@@ -48,3 +75,8 @@ $sidebar-width: 256px;
$card-cap-bg: none; $card-cap-bg: none;
$card-cap-padding-y: $spacer; $card-cap-padding-y: $spacer;
$card-border-width: 0; $card-border-width: 0;
// Heading
$heading-bg: $navbar-bg;
$heading-color: $body-color;
$heading-border-color: #dee2e6;

2
templates/Froxlor/table/table.html.twig
View File

@@ -10,7 +10,7 @@
</div> </div>
{% else %} {% else %}
<div class="d-flex flex-column align-items-end mt-n2"> <div class="d-flex flex-column align-items-end mt-n2">
<div class="rounded-top bg-white small py-1 px-2 me-3 opacity-75 text-dark"> <div class="rounded-top bg-dark small py-1 px-2 me-3 opacity-25 text-white">
{% if listing.no_search is not defined or (listing.no_search is defined and listing.no_search == false) %} {% if listing.no_search is not defined or (listing.no_search is defined and listing.no_search == false) %}
{% if gSearchText is not empty %} {% if gSearchText is not empty %}
<span class="me-2"><a href="{{ linker(listing.self_overview) }}"><i class="fa-solid fa-xmark"></i></a> Filter: <strong>{{ gSearchText }}</strong></span> <span class="me-2"><a href="{{ linker(listing.self_overview) }}"><i class="fa-solid fa-xmark"></i></a> Filter: <strong>{{ gSearchText }}</strong></span>

4
templates/Froxlor/userarea.html.twig
View File

@@ -19,7 +19,7 @@
<nav class="navbar navbar-expand-md navbar-light p-0 {% if not block('heading') %}shadow-sm{% endif %}"> <nav class="navbar navbar-expand-md navbar-light p-0 {% if not block('heading') %}shadow-sm{% endif %}">
<div class="container-fluid gx-0"> <div class="container-fluid gx-0">
<a class="navbar-brand" href="{{ linker({'section': 'index'}) }}"> <a class="navbar-brand {% if block('heading') %}shadow-sm{% endif %}" href="{{ linker({'section': 'index'}) }}">
<img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top"> <img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top">
</a> </a>
<div class="me-3 me-sm-0"> <div class="me-3 me-sm-0">
@@ -109,7 +109,7 @@
<main class="d-flex flex-column flex-grow-1 overflow-auto"> <main class="d-flex flex-column flex-grow-1 overflow-auto">
{% if block('heading') %} {% if block('heading') %}
<section class="py-3 px-3 px-lg-5 bg-white shadow-sm border-top d-flex justify-content-between align-items-center"> <section class="py-3 px-3 px-lg-5 heading shadow-sm d-flex justify-content-between align-items-center">
<div>{% block heading %}{% endblock %}</div> <div>{% block heading %}{% endblock %}</div>
<div>{% block actions %}{% endblock %}</div> <div>{% block actions %}{% endblock %}</div>
</section> </section>