mirror of
https://github.com/Froxlor/Froxlor.git
synced 2024-09-21 10:27:29 +00:00
add dark mode
This commit is contained in:
parent
5d80c40b25
commit
b4d9b1037d
@ -1,4 +1,5 @@
|
||||
{
|
||||
"/templates/Froxlor/assets/js/main.js": "/templates/Froxlor/assets/js/main.js",
|
||||
"/templates/Froxlor/assets/css/main.css": "/templates/Froxlor/assets/css/main.css"
|
||||
"/templates/Froxlor/assets/css/main.css": "/templates/Froxlor/assets/css/main.css",
|
||||
"/templates/Froxlor/assets/css/dark.css": "/templates/Froxlor/assets/css/dark.css"
|
||||
}
|
||||
|
20508
templates/Froxlor/assets/css/dark.css
Normal file
20508
templates/Froxlor/assets/css/dark.css
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -13,7 +13,6 @@
|
||||
},
|
||||
"dark": {
|
||||
"css": [
|
||||
"main.css",
|
||||
"dark.css",
|
||||
"custom.css"
|
||||
],
|
||||
|
39
templates/Froxlor/src/scss/_global.scss
Normal file
39
templates/Froxlor/src/scss/_global.scss
Normal file
@ -0,0 +1,39 @@
|
||||
@import "~@fortawesome/fontawesome-free/css/all";
|
||||
|
||||
.navbar {
|
||||
background: darken($navbar-bg, 3);
|
||||
}
|
||||
|
||||
.navbar, .card {
|
||||
@extend .shadow-sm;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
padding: .5rem;
|
||||
background: rgba(0, 0, 0, .15);
|
||||
text-align: center;
|
||||
border-radius: $border-radius;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
.card .card-body {
|
||||
p {
|
||||
@extend .card-text;
|
||||
}
|
||||
}
|
||||
|
||||
.max-w-420 {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.max-w-xs {
|
||||
max-width: 575.98px;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 991.98px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@extend .text-muted;
|
||||
}
|
8
templates/Froxlor/src/scss/dark.scss
Normal file
8
templates/Froxlor/src/scss/dark.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Bootstrap
|
||||
@import "variables/dark";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
// Theme
|
||||
@import "global";
|
@ -1,39 +1,8 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "~@fortawesome/fontawesome-free/css/all";
|
||||
@import "variables";
|
||||
// Bootstrap
|
||||
@import "variables/main";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
.navbar, .card {
|
||||
@extend .shadow-sm;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
padding: .5rem;
|
||||
background: rgba(0, 0, 0, .15);
|
||||
text-align: center;
|
||||
border-radius: $border-radius;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
.card .card-body {
|
||||
p {
|
||||
@extend .card-text;
|
||||
}
|
||||
}
|
||||
|
||||
.max-w-420 {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.max-w-xs {
|
||||
max-width: 575.98px;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 991.98px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@extend .text-muted;
|
||||
}
|
||||
// Theme
|
||||
@import "global";
|
||||
|
16
templates/Froxlor/src/scss/variables/_dark.scss
Normal file
16
templates/Froxlor/src/scss/variables/_dark.scss
Normal file
@ -0,0 +1,16 @@
|
||||
@import "main";
|
||||
|
||||
// Body
|
||||
$body-bg: $dark-bg;
|
||||
$body-color: $dark-font-color;
|
||||
|
||||
// Card
|
||||
$card-bg: lighten($body-bg, 10);
|
||||
|
||||
$navbar-bg: $dark-bg;
|
||||
|
||||
$light: lighten($dark-bg, 15);
|
||||
$list-group-bg: lighten($dark-bg, 10);
|
||||
$list-group-color: $body-color;
|
||||
|
||||
$nav-link-color: $body-color;
|
@ -32,3 +32,6 @@ $border-radius: 0.5rem;
|
||||
|
||||
// Links
|
||||
$links: $froxlor-blue-dark;
|
||||
|
||||
// Navbar
|
||||
$navbar-bg: #ffffff;
|
@ -17,7 +17,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<nav class="navbar navbar-expand navbar-light bg-light py-0">
|
||||
<nav class="navbar navbar-expand py-0">
|
||||
<div class="container-fluid gx-0">
|
||||
<a class="navbar-brand bg-dark p-3" style="width: 280px" href="{{ linker({'section': 'index'}) }}">
|
||||
<img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top">
|
||||
|
@ -4,4 +4,5 @@ let mix = require('laravel-mix');
|
||||
|
||||
mix
|
||||
.js('templates/Froxlor/src/main.js', 'templates/Froxlor/assets/js')
|
||||
.sass('templates/Froxlor/src/scss/main.scss', 'templates/Froxlor/assets/css');
|
||||
.sass('templates/Froxlor/src/scss/main.scss', 'templates/Froxlor/assets/css')
|
||||
.sass('templates/Froxlor/src/scss/dark.scss', 'templates/Froxlor/assets/css');
|
Loading…
Reference in New Issue
Block a user