dark/light mode
This commit is contained in:
jr-k
parent
9e1381bb19
commit
56c52501e0
1
data/www/css/compiled/main-dark-mode.css
Normal file
1
data/www/css/compiled/main-dark-mode.css
Normal file
File diff suppressed because one or more lines are too long
1
data/www/css/compiled/main-light-mode.css
Normal file
1
data/www/css/compiled/main-light-mode.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -31,7 +31,7 @@ const hideDropdowns = function () {
|
||||
};
|
||||
|
||||
const showToast = function (text) {
|
||||
const $toast = $("#toast");
|
||||
const $toast = $(".toast");
|
||||
$toast.addClass('show');
|
||||
$toast.text(text);
|
||||
setTimeout(function() {
|
||||
|
||||
@ -26,7 +26,7 @@ main {
|
||||
.context-divider {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #222;
|
||||
background: $gscale2;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
@ -44,13 +44,13 @@ main {
|
||||
margin-right: 20px;
|
||||
|
||||
.trigger {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: $baseRadius;
|
||||
background: #AAA;
|
||||
background: $gscaleA;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -59,8 +59,8 @@ main {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
border: 1px solid #444;
|
||||
color: black;
|
||||
border: 1px solid $gscale4;
|
||||
color: $gscale0;
|
||||
}
|
||||
|
||||
i {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #111;
|
||||
background-color: $gscale1;
|
||||
}
|
||||
|
||||
body, html {
|
||||
@ -60,7 +60,7 @@ main {
|
||||
border-bottom: $layoutBorder;
|
||||
|
||||
h1 {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
}
|
||||
@ -108,7 +108,7 @@ main {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
background: rgba(0,0,0,.8);
|
||||
background: rgba($gscale0, .8);
|
||||
padding: 5px;
|
||||
|
||||
.inner {
|
||||
@ -118,7 +118,7 @@ main {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 0 10px 40px 10px;
|
||||
background: $layoutBackground;
|
||||
background: $gscale1;
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
@ -127,7 +127,7 @@ main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
align-self: stretch;
|
||||
background: $layoutBackground;
|
||||
background: $gscale1;
|
||||
border-top: none;
|
||||
|
||||
&.left-panel {
|
||||
@ -138,8 +138,8 @@ main {
|
||||
flex: 0.5;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
background: $layoutBackground;
|
||||
box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2);
|
||||
background: $gscale1;
|
||||
box-shadow: 1px 1px .5px .5px inset rgba($gscale0, 0.2);
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
|
||||
menu {
|
||||
width: 300px;
|
||||
background: $layoutBackground;
|
||||
background: $gscale1;
|
||||
overflow-y: auto;
|
||||
overflow-x: visible;
|
||||
padding: 20px;
|
||||
@ -32,6 +31,7 @@ menu {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
color: $white;
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
@ -90,7 +90,7 @@ menu {
|
||||
border-radius: $baseRadius;
|
||||
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: rgba($gscaleF, 0.9);
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -103,7 +103,7 @@ menu {
|
||||
padding-left: 10px;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
opacity: .2;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
@ -119,7 +119,7 @@ menu {
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $white;
|
||||
background: $gscaleF;
|
||||
content: "";
|
||||
height: 195px;
|
||||
left: -200px;
|
||||
@ -140,8 +140,9 @@ menu {
|
||||
|
||||
i {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: #017BFF;
|
||||
color: $white;
|
||||
background: rgba($gscaleF, 0.9);
|
||||
background: $seaBlue;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -170,7 +171,7 @@ menu {
|
||||
}
|
||||
|
||||
footer {
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
background: rgba($gscaleF, 0.01);
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -179,11 +180,11 @@ menu {
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
color: #444;
|
||||
color: $gscale4;
|
||||
|
||||
&.version {
|
||||
a {
|
||||
color: #777;
|
||||
color: $gscale7;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,24 +7,24 @@ a.badge,
|
||||
padding: 5px 5px;
|
||||
border-radius: $baseRadius;
|
||||
font-size: 12px;
|
||||
background: rgba($white, .1);
|
||||
background: rgba($gscaleF, .1);
|
||||
border: 1px solid transparent;
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
|
||||
a.badge:hover {
|
||||
color: $white;
|
||||
border: 1px solid rgba($white, .4);
|
||||
color: $gscaleF;
|
||||
border: 1px solid rgba($gscaleF, .4);
|
||||
}
|
||||
|
||||
.panel-inactive .badge {
|
||||
background: rgba($lightGrey, .1);
|
||||
color: $lightGrey;
|
||||
background: rgba($gscale7, .1);
|
||||
color: $gscale7;
|
||||
}
|
||||
|
||||
.panel-inactive a.badge:hover {
|
||||
color: $lightGrey;
|
||||
border: 1px solid rgba($lightGrey,.2);
|
||||
color: $gscale7;
|
||||
border: 1px solid rgba($gscale7,.2);
|
||||
}
|
||||
|
||||
.badge.anonymous {
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
padding: 10px;
|
||||
|
||||
ul.breadcrumb {
|
||||
background: #222;
|
||||
background: $gscale2;
|
||||
padding: 6px 4px 5px 4px;
|
||||
box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid #222;
|
||||
box-shadow: 1px 1px .5px .5px inset rgba($gscale0, 0.2);
|
||||
border: 1px solid $gscale2;
|
||||
border-radius: $baseRadius;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -31,7 +31,7 @@
|
||||
margin: 0 5px;
|
||||
|
||||
i {
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
text-align: center;
|
||||
padding: 0 3px;
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
color: #fff;
|
||||
color: $gscaleF;
|
||||
background: $seaBlue;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ button,
|
||||
position: relative;
|
||||
padding: 10px 10px 8px 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: $baseRadius;
|
||||
@ -35,13 +35,13 @@ button,
|
||||
}
|
||||
|
||||
&.btn-pixel {
|
||||
background: #CCC;
|
||||
background: $gscaleC;
|
||||
border: 1px solid transparent;
|
||||
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
@include pixel-box(4);
|
||||
color: #222;
|
||||
color: $gscale2;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
@ -51,37 +51,37 @@ button,
|
||||
}
|
||||
|
||||
&.btn-neutral {
|
||||
color: #AAA;
|
||||
background: $neutralGrey;
|
||||
box-shadow: 0 $shadowOffset 0 0 darken($neutralGrey, 10%);
|
||||
color: $white;
|
||||
background: $gscale5;
|
||||
box-shadow: 0 $shadowOffset 0 0 darken($gscale5, 10%);
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 $shadowOffset 0 1px #222 inset;
|
||||
background: darken($neutralGrey, 10%);
|
||||
box-shadow: 0 $shadowOffset 0 1px $gkscale2 inset;
|
||||
background: darken($gscale5, 10%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: darken($neutralGrey, 20%);
|
||||
border: 1px solid #AAA;
|
||||
background: darken($gscale5, 20%);
|
||||
border: 1px solid $gscaleA;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wire-neutral {
|
||||
background: transparent;
|
||||
border: 2px solid $neutralGrey;
|
||||
border: 2px solid $gscale5;
|
||||
color: rgba($white, .8);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba($neutralGrey, 0.05);
|
||||
border-color: darken($neutralGrey, 10%);
|
||||
color: darken($neutralGrey, 10%);
|
||||
background: rgba($gscale5, 0.05);
|
||||
border-color: darken($gscale5, 10%);
|
||||
color: darken($gscale5, 10%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: darken($neutralGrey, 20%);
|
||||
border-color: darken($gscale5, 20%);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@ -90,15 +90,17 @@ button,
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 1px solid transparent;
|
||||
color: $gscaleF;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 $shadowOffset 0 1px #222 inset;
|
||||
background: darken($neutralGrey, 10%);
|
||||
box-shadow: 0 $shadowOffset 0 1px $gkscale2 inset;
|
||||
background: darken($gscale5, 10%);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: darken($neutralGrey, 20%);
|
||||
border: 1px solid #AAA;
|
||||
background: darken($gscale5, 20%);
|
||||
border: 1px solid $gscaleA;
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,9 +114,9 @@ button,
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
background: #777;
|
||||
border-bottom: 2px solid $neutralGrey;
|
||||
color: black;
|
||||
background: $gscale7;
|
||||
border-bottom: 2px solid $gscale5;
|
||||
color: red;
|
||||
border-radius: $baseRadius;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@ -126,7 +128,7 @@ button,
|
||||
padding-bottom: 1px;
|
||||
|
||||
i {
|
||||
color: white;
|
||||
color: $white;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@ body.dragover {
|
||||
display: none;
|
||||
width: 200px;
|
||||
height: 10px;
|
||||
background: #666;
|
||||
background: $gscale6;
|
||||
border-radius: $baseRadius;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
@ -47,8 +47,8 @@ body.dragover {
|
||||
bottom: 0;
|
||||
top: 2px;
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
text-shadow: 0 0 2px black;
|
||||
color: $white;
|
||||
text-shadow: 0 0 2px $black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
top: 100%;
|
||||
left: 0;
|
||||
display: none;
|
||||
background-color: #222;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
background-color: $gscale2;
|
||||
box-shadow: 0 8px 16px rgba($gscale0, 0.2);
|
||||
z-index: 1000;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
@ -52,7 +52,7 @@
|
||||
|
||||
a {
|
||||
padding: 8px 16px 8px 8px;
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
@ -20,7 +20,7 @@ span.empty {
|
||||
i {
|
||||
font-size: 90px;
|
||||
opacity: 0.3;
|
||||
text-shadow: 0 -1px #333, 0 0px .5px #444;
|
||||
text-shadow: 0 -1px $gscale3, 0 0px .5px $gscale4;
|
||||
}
|
||||
|
||||
}
|
||||
@ -11,7 +11,7 @@ ul.explr-tree {
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
color: #555;
|
||||
color: $gscale5;
|
||||
font-size: 13px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
@ -21,7 +21,7 @@ ul.explr-tree {
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,9 +35,8 @@ ul.explr-tree {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5px;
|
||||
background: #777;
|
||||
border-bottom: 2px solid $neutralGrey;
|
||||
color: black;
|
||||
background: $gscale7;
|
||||
border-bottom: 2px solid $gscale5;
|
||||
border-radius: $baseRadius;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
@ -47,23 +46,23 @@ ul.explr-tree {
|
||||
padding-bottom: 1px;
|
||||
|
||||
i {
|
||||
color: white;
|
||||
color: $white;
|
||||
font-size: 4px !important;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
padding-right: 80px;
|
||||
margin-top: 2px;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
background: rgba($gscaleF, .1);
|
||||
border-radius: $baseRadius;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
@ -174,12 +173,12 @@ ul.explr-dirview {
|
||||
}
|
||||
|
||||
&.highlight-clicked {
|
||||
border: 1px dotted rgba($white, .2);
|
||||
background: rgba($white, .1);
|
||||
border: 1px dotted rgba($gscaleF, .2);
|
||||
background: rgba($gscaleF, .1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #BBB;
|
||||
color: $gscaleB;
|
||||
text-decoration: none;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
@ -197,7 +196,7 @@ ul.explr-dirview {
|
||||
.img-holder {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #070707;
|
||||
background: $gscale07;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -217,7 +216,7 @@ ul.explr-dirview {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
text-shadow: 0 .5px .5px #777;
|
||||
text-shadow: 0 .5px .5px $gscale7;
|
||||
}
|
||||
}
|
||||
|
||||
@ -232,9 +231,8 @@ ul.explr-dirview {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 0;
|
||||
background: #777;
|
||||
border-bottom: 2px solid $neutralGrey;
|
||||
color: black;
|
||||
background: $gscale7;
|
||||
border-bottom: 2px solid $gscale5;
|
||||
border-radius: $baseRadius;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@ -246,7 +244,7 @@ ul.explr-dirview {
|
||||
padding-bottom: 1px;
|
||||
|
||||
i {
|
||||
color: white;
|
||||
color: $white;
|
||||
font-size: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -299,7 +297,7 @@ ul.explr-dirview {
|
||||
width: 400px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
background: #222;
|
||||
background: $gscale2;
|
||||
padding: 10px 20px 10px 20px;
|
||||
border-radius: $baseRadius;
|
||||
margin-top: 15px;
|
||||
@ -314,8 +312,8 @@ ul.explr-dirview {
|
||||
|
||||
.selection-rectangle {
|
||||
position: absolute;
|
||||
border: 1px solid #0099ff;
|
||||
background-color: rgba(0, 153, 255, 0.1);
|
||||
border: 1px solid $systemSelect;
|
||||
background-color: rgba($systemSelect, 0.1);
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
.pickers,
|
||||
.modals {
|
||||
position: fixed;
|
||||
background: rgba($black, 0.4);
|
||||
background: rgba($gscale0, 0.4);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@ -25,7 +25,7 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
color: #666666;
|
||||
color: $gscale6;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -40,19 +40,19 @@
|
||||
padding-bottom: 2px;
|
||||
|
||||
.modals-inner {
|
||||
background: $layoutBackground;
|
||||
background: $gscale1;
|
||||
border-radius: 10px;
|
||||
color: lighten($black, 20%);
|
||||
color: lighten($gscale0, 20%);
|
||||
padding: 40px;
|
||||
box-shadow: 0 2px #222;
|
||||
border: 1px solid #222;
|
||||
box-shadow: 0 2px $gscale2;
|
||||
border: 1px solid $gscale2;
|
||||
|
||||
.modal {
|
||||
h2 {
|
||||
padding: 0;
|
||||
margin: 0 0 30px 0;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
color: $gscale9;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -63,12 +63,12 @@
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: white;
|
||||
color: $gscaleF;
|
||||
padding-bottom: 10px;
|
||||
text-decoration: none;
|
||||
|
||||
&.divide {
|
||||
border-top: 1px solid #222;
|
||||
border-top: 1px solid $gscale2;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
@ -14,9 +14,9 @@
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
margin: 1px 1px 28px 1px;
|
||||
background: $layoutBackground;
|
||||
background: $gscale1;
|
||||
border-radius: $baseRadius;
|
||||
border: 4px solid rgba($white, .05);
|
||||
border: 4px solid rgba($gscaleF, .05);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($seaBlue, .05);
|
||||
@ -35,23 +35,23 @@
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
padding: 8px 18px;
|
||||
background: #222;
|
||||
background: $gscale2;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: $layoutBackground;
|
||||
background-color: $gscale1;
|
||||
|
||||
td.description {
|
||||
color: rgba($white, .7);
|
||||
color: rgba($gscaleF, .7);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #141414;
|
||||
background-color: $gscale04;
|
||||
}
|
||||
|
||||
.pane-cell,
|
||||
td {
|
||||
color: #888;
|
||||
color: $gscale8;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
@ -91,7 +91,7 @@
|
||||
}
|
||||
|
||||
&.title-item {
|
||||
border-bottom: 1px solid #222;
|
||||
border-bottom: 1px solid $gscale2;
|
||||
|
||||
td {
|
||||
color: rgba($seaBlue, .9);
|
||||
@ -106,7 +106,7 @@
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
color: $gscale8;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@ -121,16 +121,16 @@
|
||||
|
||||
td {
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
|
||||
i.icon-legend {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
|
||||
span,
|
||||
i.icon-value {
|
||||
background-color: rgba($white, .3);
|
||||
color: $white;
|
||||
background-color: rgba($gscaleF, .3);
|
||||
color: $gscaleF;
|
||||
}
|
||||
|
||||
&.description {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
ul.pills {
|
||||
background: #222;
|
||||
background: $gscale2;
|
||||
padding: 6px 4px 5px 4px;
|
||||
box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid #222;
|
||||
box-shadow: 1px 1px .5px .5px inset rgba($gscale0, 0.2);
|
||||
border: 1px solid $gscale2;
|
||||
border-radius: $baseRadius;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -16,7 +16,7 @@ ul.pills {
|
||||
margin: 0 20px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #333;
|
||||
background: $gscale3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -31,11 +31,11 @@ ul.pills {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
overflow: hidden;
|
||||
padding-right: 30px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: rgba($gscale0, 0.2);
|
||||
margin-right: 5px;
|
||||
transition: all 250ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
||||
@ -45,22 +45,22 @@ ul.pills {
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
height: 42px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: rgba($gscale0, 0.2);
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: #333;
|
||||
background: $white;
|
||||
color: $gscale3;
|
||||
background: $gscaleC;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
color: #fff;
|
||||
color: $white;
|
||||
background: $seaBlue;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,12 +2,12 @@ $containerWidth: 42px;
|
||||
$containerHeight: 26px;
|
||||
$containerRadius: 15px;
|
||||
$toggleActiveColor: lighten($seaBlue, 30%);
|
||||
$containerShadowActive: 0 2px 2px #222 inset;
|
||||
$containerShadowInactive: 0 2px 2px #111 inset;
|
||||
$backgroundColorInactive: #222;
|
||||
$containerShadowActive: 0 2px 2px $gkscale2 inset;
|
||||
$containerShadowInactive: 0 2px 2px $gkscale1 inset;
|
||||
$backgroundColorInactive: $gscale2;
|
||||
$backgroundColorActive: darken($toggleActiveColor, 30%);
|
||||
$thumbColorActive: $toggleActiveColor;
|
||||
$thumbColorInactive: #777;
|
||||
$thumbColorInactive: $gscale7;
|
||||
$thumbWidth: 18px;
|
||||
$thumbHeight: $thumbWidth;
|
||||
$borderSize: 1px;
|
||||
@ -25,7 +25,7 @@ $animationSpeed: 0.2s;
|
||||
|
||||
&:checked + label {
|
||||
background: darken($thumbColorActive, 30%);
|
||||
border: $borderSize solid rgba($white, .1);
|
||||
border: $borderSize solid rgba($gscaleF, .1);
|
||||
box-shadow: $containerShadowActive;
|
||||
|
||||
&::after {
|
||||
@ -48,7 +48,7 @@ $animationSpeed: 0.2s;
|
||||
border-radius: $containerRadius;
|
||||
background: $backgroundColorInactive;
|
||||
cursor: pointer;
|
||||
border: $borderSize solid rgba($white, .1);
|
||||
border: $borderSize solid rgba($gscaleF, .1);
|
||||
box-shadow: $containerShadowInactive;
|
||||
|
||||
&::after {
|
||||
@ -59,7 +59,7 @@ $animationSpeed: 0.2s;
|
||||
height: $thumbHeight;
|
||||
margin: 3px;
|
||||
background: $thumbColorInactive;
|
||||
box-shadow: 0 2px rgba(0,0,0,0.9);
|
||||
box-shadow: 0 2px rgba($gkscale5, 0.9);
|
||||
transition: $animationSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
margin: 1px;
|
||||
padding: 15px 10px 15px 15px;
|
||||
border-radius: $baseRadius;
|
||||
@ -36,8 +36,8 @@
|
||||
&.active {
|
||||
border-left: 4px solid $seaBlue;
|
||||
border-radius: $baseRadius;
|
||||
border-bottom: 2px solid #171717;
|
||||
background: #222;
|
||||
border-bottom: 2px solid $gscale07;
|
||||
background: $gscale2;
|
||||
color: $seaBlue;
|
||||
|
||||
&:hover {
|
||||
@ -45,8 +45,8 @@
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border-left-color: #444;
|
||||
color: white;
|
||||
border-left-color: $gscale4;
|
||||
color: $gscaleF;
|
||||
}
|
||||
|
||||
&.starred {
|
||||
@ -73,7 +73,7 @@
|
||||
.tile-tail {
|
||||
.head-icon {
|
||||
i {
|
||||
color: #444;
|
||||
color: $gscale4;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
#toast {
|
||||
.toast {
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
margin-left: -125px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
background-color: $gscale3;
|
||||
color: $gscaleF;
|
||||
text-align: center;
|
||||
border-radius: $baseRadius;
|
||||
padding: 16px;
|
||||
@ -12,7 +12,7 @@
|
||||
left: 50%;
|
||||
bottom: 30px;
|
||||
font-size: 17px;
|
||||
border: 2px dashed #222;
|
||||
border: 2px dashed $gscale2;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
|
||||
@ -44,10 +44,10 @@ form {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
color: #666666;
|
||||
color: $gscale6;
|
||||
|
||||
&.btn-upload {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
font-size: 14px;
|
||||
flex: 0;
|
||||
flex-basis: auto;
|
||||
@ -91,11 +91,11 @@ form {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid #333;
|
||||
border-bottom: 1px solid $gscale3;
|
||||
border-radius: 0;
|
||||
max-width: 80px;
|
||||
padding-left: 0;
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -106,12 +106,12 @@ form {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
color: #555;
|
||||
color: $gscale5;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
color: rgba($white, .7);
|
||||
color: rgba($gscaleF, .7);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -121,33 +121,33 @@ form {
|
||||
outline: none;
|
||||
padding: 8px 0 5px 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba($white, .05);
|
||||
border: 1px solid rgba($gscaleF, .05);
|
||||
flex: 1;
|
||||
background: #555;
|
||||
box-shadow: 0 2px 1px #444, 0 4px 2px #333 inset;
|
||||
color: #DDD;
|
||||
background: $gscale5;
|
||||
box-shadow: 0 2px 1px $gscale4, 0 4px 2px $gscale3 inset;
|
||||
color: $gscaleD;
|
||||
font-size: 14px;
|
||||
|
||||
&.input-naked,
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
color: #555;
|
||||
color: $gscale5;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid #333;
|
||||
border-bottom: 1px solid $gscale3;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.input-naked {
|
||||
padding-left: 0;
|
||||
color: #BBB;
|
||||
color: $gscaleB;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
border: none;
|
||||
background: $black;
|
||||
background: $gscale0;
|
||||
border-radius: $baseRadius;
|
||||
padding-left: 10px;
|
||||
}
|
||||
@ -156,7 +156,7 @@ form {
|
||||
|
||||
|
||||
&.tab-select {
|
||||
border-bottom: 1px solid #444;
|
||||
border-bottom: 1px solid $gscale4;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.container {
|
||||
background: rgba($black, 0.1);
|
||||
background: rgba($gscale0, 0.1);
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
|
||||
@ -59,7 +59,7 @@ header nav ul li.user-menu {
|
||||
}
|
||||
|
||||
header nav ul li.user-menu .logout {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
|
||||
header nav ul li.user-menu .username {
|
||||
@ -78,11 +78,11 @@ header nav ul li.user-menu .username i {
|
||||
}
|
||||
|
||||
header nav ul li a {
|
||||
color: rgba($white, 0.6);
|
||||
color: rgba($gscaleF, 0.6);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header nav ul li a:hover,
|
||||
header nav ul li.active a {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
|
||||
8
data/www/scss/main-dark-mode.scss
Normal file
8
data/www/scss/main-dark-mode.scss
Normal file
@ -0,0 +1,8 @@
|
||||
// Import utility styles
|
||||
@import 'utils/mixins';
|
||||
@import 'utils/variables-dark';
|
||||
@import 'utils/colors';
|
||||
@import 'modes/specific-dark-before';
|
||||
@import 'utils/packs';
|
||||
@import 'main';
|
||||
@import 'modes/specific-dark';
|
||||
8
data/www/scss/main-light-mode.scss
Normal file
8
data/www/scss/main-light-mode.scss
Normal file
@ -0,0 +1,8 @@
|
||||
// Import utility styles
|
||||
@import 'utils/mixins';
|
||||
@import 'utils/variables-light';
|
||||
@import 'utils/colors';
|
||||
@import 'modes/specific-light-before';
|
||||
@import 'utils/packs';
|
||||
@import 'main';
|
||||
@import 'modes/specific-light';
|
||||
@ -1,7 +1,3 @@
|
||||
// Import utility styles
|
||||
@import 'utils/mixins';
|
||||
@import 'utils/variables';
|
||||
|
||||
// Import base styles
|
||||
@import 'base/fonts';
|
||||
@import 'base/html';
|
||||
|
||||
0
data/www/scss/modes/specific-dark-before.scss
Normal file
0
data/www/scss/modes/specific-dark-before.scss
Normal file
0
data/www/scss/modes/specific-dark.scss
Normal file
0
data/www/scss/modes/specific-dark.scss
Normal file
2
data/www/scss/modes/specific-light-before.scss
Normal file
2
data/www/scss/modes/specific-light-before.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$limeGreen: $bitterGreen;
|
||||
$yellow: rgb(255, 167, 10);
|
||||
129
data/www/scss/modes/specific-light.scss
Normal file
129
data/www/scss/modes/specific-light.scss
Normal file
@ -0,0 +1,129 @@
|
||||
|
||||
menu h1.logo a {
|
||||
color: $gkscale6;
|
||||
}
|
||||
|
||||
menu:hover h1.logo a {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
ul.explr-dirview li a i {
|
||||
color: $seaBlue;
|
||||
}
|
||||
|
||||
button.btn-neutral:hover,
|
||||
.btn.btn-neutral:hover {
|
||||
box-shadow: 0 2px 0 1px $gkscale6 inset;
|
||||
}
|
||||
|
||||
button.btn-naked,
|
||||
.btn.btn-naked {
|
||||
color: $gkscale7;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 0 1px $gkscale6 inset;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tiles .tiles-inner .tile-item:hover, .tiles .tiles-inner .tile-item.active {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.panes {
|
||||
.pane-section,
|
||||
tbody {
|
||||
|
||||
.pane-item,
|
||||
tr {
|
||||
&:nth-child(odd) {
|
||||
background-color: $gkscaleF4;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: $gscale1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group .widget select, .form-group .widget input, .form-group .widget textarea {
|
||||
box-shadow: 0 2px 1px $gkscaleA, 0 4px 2px $gkscaleA inset;
|
||||
color: $gkscale5;
|
||||
background: $gkscaleC;
|
||||
}
|
||||
|
||||
.toggle label {
|
||||
box-shadow: 0 2px 2px $gkscaleA inset;
|
||||
&::after {
|
||||
box-shadow: 0 2px rgba($gkscaleA, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-explr-picker {
|
||||
.explr-tree {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ul.pills {
|
||||
box-shadow: 1px 1px .5px .5px inset rgba($gkscaleA, 0.2);
|
||||
li {
|
||||
a {
|
||||
color: $gkscale4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $white;
|
||||
background: $seaBlue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container ul.breadcrumb {
|
||||
box-shadow: 1px 1px .5px .5px inset rgba($gkscaleA, 0.2);
|
||||
li a,
|
||||
li span,
|
||||
li {
|
||||
color: $gkscale4;
|
||||
}
|
||||
|
||||
li:hover a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
li.divider i {
|
||||
color: $gkscaleB;
|
||||
}
|
||||
}
|
||||
|
||||
.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .preview,
|
||||
.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .preview {
|
||||
border-color: $gkscaleC;
|
||||
}
|
||||
|
||||
.view-player-group-list main .main-container .players-holder ul.players li.player-item .body,
|
||||
.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body {
|
||||
background: $gkscaleD;
|
||||
}
|
||||
|
||||
.dropdown ul.dropdown-menu li.danger:hover a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.inner-empty i {
|
||||
color: $gkscaleB;
|
||||
text-shadow: 0 -1px $gkscale7, 0 0px .5px $gkscale4;
|
||||
}
|
||||
|
||||
.view-player-group-list main .main-container .players-holder ul.players li.player-item .tail a,
|
||||
.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .tail a {
|
||||
color: $gkscale8;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
@ -15,8 +15,8 @@
|
||||
&.dragover {
|
||||
main .main-container .inner .dropzone {
|
||||
border-radius: $baseRadius;
|
||||
background: rgba($white, .1);
|
||||
border: 1px dashed rgba($white, .5);
|
||||
background: rgba($gscaleF, .1);
|
||||
border: 1px dashed rgba($gscaleF, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -44,7 +44,7 @@
|
||||
padding: 20px;
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
color: $gscaleF;
|
||||
padding: 10px 10px 10px 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
@ -72,7 +72,7 @@
|
||||
padding-top: 56.25%; /* 16:9 aspect ratio */
|
||||
overflow: hidden;
|
||||
border-radius: $baseRadius;
|
||||
outline: 4px solid rgba($white, .1);
|
||||
outline: 4px solid rgba($gscaleF, .1);
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
align-self: stretch;
|
||||
border-radius: 6px;
|
||||
padding: 50px 50px;
|
||||
color: lighten($black, 20%);
|
||||
color: lighten($gscale0, 20%);
|
||||
|
||||
form {
|
||||
padding: 0;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
pre {
|
||||
flex: 1;
|
||||
background: rgba($black, 0.9);
|
||||
border: 1px solid rgba($neutralGrey, .5);
|
||||
border: 1px solid rgba($gkscale5, .5);
|
||||
border-radius: $baseRadius;
|
||||
font-family: monospace;
|
||||
color: darken($white, 5%);
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
margin: 10px 0 0 0;
|
||||
border: 1px dashed #222;
|
||||
border: 1px dashed $gscale2;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
color: $gscale9;
|
||||
font-size: 10px;
|
||||
padding: 10px;
|
||||
cursor: default;
|
||||
@ -53,7 +53,7 @@
|
||||
|
||||
&:hover {
|
||||
.infos .title {
|
||||
color: white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,19 +62,19 @@
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
flex: 1;
|
||||
max-width: 180px;
|
||||
background: $black;
|
||||
border: 1px solid #333;
|
||||
background: $gscale0;
|
||||
border: 1px solid $gscale3;
|
||||
border-radius: $baseRadius;
|
||||
padding: 3px 7px;
|
||||
|
||||
.title {
|
||||
font-size: 13px;
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
@ -88,7 +88,7 @@
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@ -100,12 +100,12 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 0 10px 0 10px;
|
||||
background: #1B1B1B;
|
||||
background: $gscale0B;
|
||||
padding: 10px;
|
||||
align-self: stretch;
|
||||
flex: 1;
|
||||
border-radius: $baseRadius;
|
||||
color: #CCC;
|
||||
color: $gscaleC;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -126,7 +126,7 @@
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
color: #666666;
|
||||
color: $gscale6;
|
||||
}
|
||||
|
||||
//.modal-slide {
|
||||
@ -19,7 +19,7 @@
|
||||
//
|
||||
// input {
|
||||
// &[disabled] {
|
||||
// color: #AAA;
|
||||
// color: $gscaleA;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
@ -53,7 +53,7 @@
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #DDD;
|
||||
color: $gscaleD;
|
||||
text-decoration: none;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
@ -90,20 +90,20 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
color: white;
|
||||
color: $gscaleF;
|
||||
padding-bottom: 10px;
|
||||
text-decoration: none;
|
||||
|
||||
&.divide {
|
||||
border-top: 1px solid #222;
|
||||
border-top: 1px solid $gscale2;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
background: black;
|
||||
border: 1px solid rgba($white, .3);
|
||||
background: $black;
|
||||
border: 1px solid rgba($gscaleF, .3);
|
||||
border-radius: $baseRadius;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -121,7 +121,7 @@
|
||||
|
||||
.players-holder {
|
||||
align-self: stretch;
|
||||
border-right: 1px solid #222;
|
||||
border-right: 1px solid $gscale2;
|
||||
margin: 20px 10px 20px 20px;
|
||||
padding-right: 20px;
|
||||
flex: 1.3;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
color: #666666;
|
||||
color: $gscale6;
|
||||
}
|
||||
|
||||
.modal-playlist-qrcode {
|
||||
@ -25,7 +25,7 @@
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
border: 4px solid #555;
|
||||
border: 4px solid $gscale5;
|
||||
border-radius: $baseRadius;
|
||||
}
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
input {
|
||||
&[disabled] {
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #DDD;
|
||||
color: $gscaleD;
|
||||
text-decoration: none;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
@ -113,12 +113,12 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
color: white;
|
||||
color: $gscaleF;
|
||||
padding-bottom: 10px;
|
||||
text-decoration: none;
|
||||
|
||||
&.divide {
|
||||
border-top: 1px solid #222;
|
||||
border-top: 1px solid $gscale2;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
@ -128,15 +128,15 @@
|
||||
margin-top: 10px;
|
||||
|
||||
img {
|
||||
border: 1px dashed #555;
|
||||
border: 1px dashed $gscale5;
|
||||
padding: 5px;
|
||||
border-radius: $baseRadius;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
background: black;
|
||||
border: 1px solid rgba($white, .3);
|
||||
background: $black;
|
||||
border: 1px solid rgba($gscaleF, .3);
|
||||
border-radius: $baseRadius;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -154,7 +154,7 @@
|
||||
|
||||
.slides-holder {
|
||||
align-self: stretch;
|
||||
border-right: 1px solid #222;
|
||||
border-right: 1px solid $gscale2;
|
||||
margin: 20px 10px 20px 20px;
|
||||
padding-right: 20px;
|
||||
flex: 1.3;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
margin: 10px 0 0 0;
|
||||
border: 1px dashed #222;
|
||||
border: 1px dashed $gscale2;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
@ -24,12 +24,12 @@
|
||||
&.disabled {
|
||||
.infos {
|
||||
.title {
|
||||
color: #333;
|
||||
color: $gscale3;
|
||||
}
|
||||
|
||||
.type {
|
||||
i {
|
||||
color: #333 !important;
|
||||
color: $gscale3 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -46,7 +46,7 @@
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: #999;
|
||||
color: $gscale9;
|
||||
font-size: 10px;
|
||||
padding: 10px;
|
||||
cursor: move;
|
||||
@ -63,19 +63,19 @@
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
flex: 1;
|
||||
max-width: 120px;
|
||||
background: $black;
|
||||
border: 1px solid #333;
|
||||
background: $gscale0;
|
||||
border: 1px solid $gscale3;
|
||||
border-radius: $baseRadius;
|
||||
padding: 3px 7px;
|
||||
|
||||
&:hover {
|
||||
.title {
|
||||
color: white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -95,7 +95,7 @@
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: #AAA;
|
||||
color: $gscaleA;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@ -107,13 +107,13 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 0 10px 0 10px;
|
||||
background: #1B1B1B;
|
||||
background: $gscale0B;
|
||||
padding: 10px;
|
||||
align-self: stretch;
|
||||
flex: 1;
|
||||
border-radius: $baseRadius;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
color: $gscaleF;
|
||||
|
||||
.range {
|
||||
display: flex;
|
||||
@ -146,7 +146,7 @@
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
font-size: 12px;
|
||||
color: #DDD;
|
||||
color: $gscaleD;
|
||||
}
|
||||
|
||||
.cron-description {
|
||||
@ -171,7 +171,7 @@
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
color: $gscaleF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
.view-sysinfo-list {
|
||||
.reboot {
|
||||
color: #CCC;
|
||||
color: $gscaleC;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
28
data/www/scss/utils/_colors.scss
Normal file
28
data/www/scss/utils/_colors.scss
Normal file
@ -0,0 +1,28 @@
|
||||
// Raw Colors
|
||||
$blueDark: rgb(15, 0, 53);
|
||||
$bitterBlue: rgb(7, 92, 183);
|
||||
$seaBlue: rgb(2, 123, 255);
|
||||
$pinkyRed: rgb(239, 14, 93);
|
||||
$bitterRed: rgb(194, 9, 65);
|
||||
$limeGreen: rgb(14, 239, 95);
|
||||
$bitterGreen: rgb(17, 169, 72);
|
||||
$bitterPurple: rgb(105, 47, 189);
|
||||
$sweetPurple: rgb(188, 72, 255);
|
||||
$neutralGrey: rgb(70, 70, 70);
|
||||
$lightGrey: rgb(153, 153, 153);
|
||||
$white: rgb(255, 255, 255);
|
||||
$black: rgb(0, 0, 0);
|
||||
$yellow: rgb(229, 161, 35);
|
||||
$systemSelect: rgb(0, 153, 255);
|
||||
|
||||
// Brand Colors
|
||||
$youtube: rgb(253, 60, 1);
|
||||
$raspbian: rgb(182, 18, 64);
|
||||
$windows: rgb(18, 167, 227);
|
||||
$macos: rgb(179, 188, 194);
|
||||
$debian: rgb(207, 8, 78);
|
||||
$fedora: rgb(82, 162, 218);
|
||||
$ubuntu: rgb(214, 69, 20);
|
||||
$suse: rgb(111, 180, 37);
|
||||
$redhat: rgb(198, 2, 0);
|
||||
$centos: rgb(155, 76, 136);
|
||||
@ -1,7 +1,7 @@
|
||||
@mixin pixel-text($pixelOffset: 1) {
|
||||
text-align: center;
|
||||
text-shadow: #{$pixelOffset}px 0 0 #fff,
|
||||
#{$pixelOffset}px 2px 0 #444,
|
||||
text-shadow: #{$pixelOffset}px 0 0 $white,
|
||||
#{$pixelOffset}px 2px 0 $gscale4,
|
||||
0 #{$pixelOffset}px 0 $limeGreen,
|
||||
-#{$pixelOffset}px 0 0 $seaBlue,
|
||||
0 -#{$pixelOffset}px 0 $pinkyRed;
|
||||
@ -13,8 +13,8 @@
|
||||
|
||||
@mixin pixel-text-to-right($pixelOffset: 1) {
|
||||
text-align: center;
|
||||
text-shadow: -#{$pixelOffset}px 0 0 #fff,
|
||||
-#{$pixelOffset}px #{$pixelOffset*0.5}px 0 black,
|
||||
text-shadow: -#{$pixelOffset}px 0 0 $white,
|
||||
-#{$pixelOffset}px #{$pixelOffset*0.5}px 0 $black,
|
||||
#{$pixelOffset*2}px #{$pixelOffset}px 0 $limeGreen,
|
||||
#{$pixelOffset*2}px 0 0 $seaBlue,
|
||||
#{$pixelOffset*2}px -#{$pixelOffset}px 0 $pinkyRed;
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
@mixin pixel-box($pixelOffset: 1) {
|
||||
box-shadow: #{$pixelOffset}px 0 0 #fff, 0 #{$pixelOffset}px 0 $limeGreen, -#{$pixelOffset}px 0 0 $seaBlue, 0 -#{$pixelOffset}px 0 $pinkyRed;
|
||||
box-shadow: #{$pixelOffset}px 0 0 $white, 0 #{$pixelOffset}px 0 $limeGreen, -#{$pixelOffset}px 0 0 $seaBlue, 0 -#{$pixelOffset}px 0 $pinkyRed;
|
||||
}
|
||||
|
||||
@mixin generate-color-classes($color-map) {
|
||||
@ -63,7 +63,7 @@
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 2px solid $color;
|
||||
color: rgba($white, .8);
|
||||
color: rgba($gscaleF, .8);
|
||||
|
||||
i.btn-match {
|
||||
color: $color;
|
||||
|
||||
44
data/www/scss/utils/_packs.scss
Normal file
44
data/www/scss/utils/_packs.scss
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
// Type Colors
|
||||
$other: $yellow;
|
||||
$info: $seaBlue;
|
||||
$success: $limeGreen;
|
||||
$danger: $pinkyRed;
|
||||
$primary: $seaBlue;
|
||||
|
||||
// Common styles
|
||||
$baseRadius: 4px;
|
||||
$layoutBorder: 1px solid $gscale2;
|
||||
|
||||
// Packs
|
||||
$colors: (
|
||||
info: $info,
|
||||
info-alt: $bitterBlue,
|
||||
success: $success,
|
||||
success-alt: $bitterGreen,
|
||||
error: $danger,
|
||||
error-alt: $bitterRed,
|
||||
danger: $danger,
|
||||
danger-alt: $bitterRed,
|
||||
purple: $sweetPurple,
|
||||
purple-alt: $bitterPurple,
|
||||
neutral: $neutralGrey,
|
||||
yellow: $yellow,
|
||||
white: $white,
|
||||
black: $black,
|
||||
youtube: $youtube,
|
||||
raspbian: $raspbian,
|
||||
windows:$windows,
|
||||
macos:$macos,
|
||||
debian:$debian,
|
||||
fedora:$fedora,
|
||||
ubuntu:$ubuntu,
|
||||
suse:$suse,
|
||||
redhat:$redhat,
|
||||
centos:$centos,
|
||||
other:$other,
|
||||
);
|
||||
|
||||
// Classes
|
||||
@include generate-color-classes($colors);
|
||||
@include generate-button-classes($colors);
|
||||
51
data/www/scss/utils/_variables-dark.scss
Normal file
51
data/www/scss/utils/_variables-dark.scss
Normal file
@ -0,0 +1,51 @@
|
||||
|
||||
// Greyscales
|
||||
$gscale0: #000000;
|
||||
$gscale04: #141414;
|
||||
$gscale05: #151515;
|
||||
$gscale07: #171717;
|
||||
$gscale0B: #1B1B1B;
|
||||
$gscale1: #111;
|
||||
$gscale2: #222;
|
||||
$gscale3: #333;
|
||||
$gscale4: #444;
|
||||
$gscale5: #555;
|
||||
$gscale6: #666;
|
||||
$gscale7: #777;
|
||||
$gscale8: #888;
|
||||
$gscale9: #999;
|
||||
$gscaleA: #AAA;
|
||||
$gscaleB: #BBB;
|
||||
$gscaleC: #CCC;
|
||||
$gscaleD: #DDD;
|
||||
$gscaleE: #EEE;
|
||||
$gscaleF4: #E4E4E4;
|
||||
$gscaleF5: #E5E5E5;
|
||||
$gscaleF7: #E7E7E7;
|
||||
$gscaleFB: #EBEBEB;
|
||||
$gscaleF: #FFFFFF;
|
||||
|
||||
$gkscale0: #000000;
|
||||
$gkscale04: #141414;
|
||||
$gkscale05: #151515;
|
||||
$gkscale07: #171717;
|
||||
$gkscale0B: #1B1B1B;
|
||||
$gkscale1: #111;
|
||||
$gkscale2: #222;
|
||||
$gkscale3: #333;
|
||||
$gkscale4: #444;
|
||||
$gkscale5: #555;
|
||||
$gkscale6: #666;
|
||||
$gkscale7: #777;
|
||||
$gkscale8: #888;
|
||||
$gkscale9: #999;
|
||||
$gkscaleA: #AAA;
|
||||
$gkscaleB: #BBB;
|
||||
$gkscaleC: #CCC;
|
||||
$gkscaleD: #DDD;
|
||||
$gkscaleE: #EEE;
|
||||
$gkscaleF4: #E4E4E4;
|
||||
$gkscaleF5: #E5E5E5;
|
||||
$gkscaleF7: #E7E7E7;
|
||||
$gkscaleFB: #EBEBEB;
|
||||
$gkscaleF: #FFFFFF;
|
||||
51
data/www/scss/utils/_variables-light.scss
Normal file
51
data/www/scss/utils/_variables-light.scss
Normal file
@ -0,0 +1,51 @@
|
||||
|
||||
// Greyscales
|
||||
$gscale0: #FFFFFF;
|
||||
$gscale04: #E4E4E4;
|
||||
$gscale05: #E5E5E5;
|
||||
$gscale07: #E7E7E7;
|
||||
$gscale0B: #EBEBEB;
|
||||
$gscale1: #EEE;
|
||||
$gscale2: #DDD;
|
||||
$gscale3: #CCC;
|
||||
$gscale4: #BBB;
|
||||
$gscale5: #AAA;
|
||||
$gscale6: #999;
|
||||
$gscale7: #888;
|
||||
$gscale8: #777;
|
||||
$gscale9: #666;
|
||||
$gscaleA: #555;
|
||||
$gscaleB: #444;
|
||||
$gscaleC: #333;
|
||||
$gscaleD: #222;
|
||||
$gscaleE: #111;
|
||||
$gscaleF4: #141414;
|
||||
$gscaleF5: #151515;
|
||||
$gscaleF7: #171717;
|
||||
$gscaleFB: #1B1B1B;
|
||||
$gscaleF: #000000;
|
||||
|
||||
$gkscale0: #000000;
|
||||
$gkscale04: #141414;
|
||||
$gkscale05: #151515;
|
||||
$gkscale07: #171717;
|
||||
$gkscale0B: #1B1B1B;
|
||||
$gkscale1: #111;
|
||||
$gkscale2: #222;
|
||||
$gkscale3: #333;
|
||||
$gkscale4: #444;
|
||||
$gkscale5: #555;
|
||||
$gkscale6: #666;
|
||||
$gkscale7: #777;
|
||||
$gkscale8: #888;
|
||||
$gkscale9: #999;
|
||||
$gkscaleA: #AAA;
|
||||
$gkscaleB: #BBB;
|
||||
$gkscaleC: #CCC;
|
||||
$gkscaleD: #DDD;
|
||||
$gkscaleE: #EEE;
|
||||
$gkscaleF4: #E4E4E4;
|
||||
$gkscaleF5: #E5E5E5;
|
||||
$gkscaleF7: #E7E7E7;
|
||||
$gkscaleFB: #EBEBEB;
|
||||
$gkscaleF: #FFFFFF;
|
||||
@ -1,72 +0,0 @@
|
||||
// Raw Colors
|
||||
$blueDark: rgb(15, 0, 53);
|
||||
$bitterBlue: rgb(7, 92, 183);
|
||||
$seaBlue: rgb(2, 123, 255);
|
||||
$pinkyRed: rgb(239, 14, 93);
|
||||
$bitterRed: rgb(194, 9, 65);
|
||||
$limeGreen: rgb(14, 239, 95);
|
||||
$bitterGreen: rgb(17, 169, 72);
|
||||
$bitterPurple: rgb(105, 47, 189);
|
||||
$sweetPurple: rgb(188, 72, 255);
|
||||
$neutralGrey: rgb(70, 70, 70);
|
||||
$lightGrey: rgb(153, 153, 153);
|
||||
$white: rgb(255, 255, 255);
|
||||
$black: rgb(0, 0, 0);
|
||||
$yellow: rgb(229, 161, 35);
|
||||
|
||||
// Brand Colors
|
||||
$youtube: rgb(253, 60, 1);
|
||||
$raspbian: rgb(182, 18, 64);
|
||||
$windows: rgb(18, 167, 227);
|
||||
$macos: rgb(179, 188, 194);
|
||||
$debian: rgb(207, 8, 78);
|
||||
$fedora: rgb(82, 162, 218);
|
||||
$ubuntu: rgb(214, 69, 20);
|
||||
$suse: rgb(111, 180, 37);
|
||||
$redhat: rgb(198, 2, 0);
|
||||
$centos: rgb(155, 76, 136);
|
||||
$other: $yellow;
|
||||
|
||||
// Type Colors
|
||||
$info: $seaBlue;
|
||||
$success: $limeGreen;
|
||||
$danger: $pinkyRed;
|
||||
$primary: $seaBlue;
|
||||
|
||||
// Common styles
|
||||
$baseRadius: 4px;
|
||||
$layoutBorder: 1px solid #222;
|
||||
$layoutBackground: #111;
|
||||
|
||||
// Packs
|
||||
$colors: (
|
||||
info: $info,
|
||||
info-alt: $bitterBlue,
|
||||
success: $success,
|
||||
success-alt: $bitterGreen,
|
||||
error: $danger,
|
||||
error-alt: $bitterRed,
|
||||
danger: $danger,
|
||||
danger-alt: $bitterRed,
|
||||
purple: $sweetPurple,
|
||||
purple-alt: $bitterPurple,
|
||||
neutral: $neutralGrey,
|
||||
yellow: $yellow,
|
||||
white: $white,
|
||||
black: $black,
|
||||
youtube: $youtube,
|
||||
raspbian: $raspbian,
|
||||
windows:$windows,
|
||||
macos:$macos,
|
||||
debian:$debian,
|
||||
fedora:$fedora,
|
||||
ubuntu:$ubuntu,
|
||||
suse:$suse,
|
||||
redhat:$redhat,
|
||||
centos:$centos,
|
||||
other:$other,
|
||||
);
|
||||
|
||||
// Classes
|
||||
@include generate-color-classes($colors);
|
||||
@include generate-button-classes($colors);
|
||||
@ -176,6 +176,7 @@
|
||||
"settings_variable_desc_edition_auth_enabled": "Default user credentials will be admin/admin",
|
||||
"settings_variable_desc_external_url": "External url (i.e: https://studio-01.company.com or http://10.10.3.100)",
|
||||
"settings_variable_desc_slide_upload_limit": "Slide upload limit (in megabytes)",
|
||||
"settings_variable_desc_dark_mode": "Dark mode",
|
||||
"settings_variable_desc_intro_slide_duration": "Introduction slide duration (in seconds)",
|
||||
"settings_variable_desc_default_slide_time_with_seconds": "Show the seconds on the clock in the introduction slide",
|
||||
"settings_variable_desc_polling_interval": "Refresh interval applied for settings to the player (in seconds)",
|
||||
|
||||
@ -177,6 +177,7 @@
|
||||
"settings_variable_desc_edition_auth_enabled": "Las credenciales predeterminadas del usuario serán admin/admin",
|
||||
"settings_variable_desc_external_url": "URL externa (ej.: https://studio-01.company.com o http://10.10.3.100)",
|
||||
"settings_variable_desc_slide_upload_limit": "Límite de carga de diapositivas (en megabytes)",
|
||||
"settings_variable_desc_dark_mode": "Modo oscuro",
|
||||
"settings_variable_desc_intro_slide_duration": "Duración de la diapositiva de introducción (en segundos)",
|
||||
"settings_variable_desc_default_slide_time_with_seconds": "Mostrar los segundos en el reloj de la diapositiva de introducción",
|
||||
"settings_variable_desc_polling_interval": "Intervalo de actualización aplicado para configuraciones del reproductor (en segundos)",
|
||||
|
||||
@ -178,6 +178,7 @@
|
||||
"settings_variable_desc_edition_auth_enabled": "Les identifiants de l'utilisateur par défaut seront admin/admin",
|
||||
"settings_variable_desc_external_url": "URL externe (i.e: https://studio-01.company.com or http://10.10.3.100)",
|
||||
"settings_variable_desc_slide_upload_limit": "Limite d'upload du fichier d'une slide (en mégaoctets)",
|
||||
"settings_variable_desc_dark_mode": "Mdoe sombre",
|
||||
"settings_variable_desc_intro_slide_duration": "Durée de la slide d'introduction (en secondes)",
|
||||
"settings_variable_desc_default_slide_time_with_seconds": "Afficher les secondes de l'horloge de la slide d'introduction",
|
||||
"settings_variable_desc_polling_interval": "Intervalle de rafraîchissement des paramètres à appliquer au lecteur (en secondes)",
|
||||
|
||||
@ -177,6 +177,7 @@
|
||||
"settings_variable_desc_edition_auth_enabled": "Le credenziali utente predefinite sono admin/admin",
|
||||
"settings_variable_desc_external_url": "Url esterno (esempio: https://studio-01.company.com or http://10.10.3.100)",
|
||||
"settings_variable_desc_slide_upload_limit": "Limite upload slide (in megabytes)",
|
||||
"settings_variable_desc_dark_mode": "Modalità scura",
|
||||
"settings_variable_desc_intro_slide_duration": "Durata introduzione slide (in secondi)",
|
||||
"settings_variable_desc_default_slide_time_with_seconds": "Mostra secondi introduzione slide",
|
||||
"settings_variable_desc_polling_interval": "Intervallo di aggiornamento applicato per le impostazioni del monitor (in secondi)",
|
||||
|
||||
@ -43,7 +43,7 @@ class PlayerController(ObController):
|
||||
return redirect(url_for('player_default', noplaylist=1))
|
||||
|
||||
intro_slide_duration = 0 if items['preview_mode'] else int(request.args.get('intro', self._model_store.variable().get_one_by_name('intro_slide_duration').eval()))
|
||||
animation_enabled = bool(request.args.get('animation', int(self._model_store.variable().get_one_by_name('slide_animation_enabled').eval())))
|
||||
animation_enabled = bool(int(request.args.get('animation', int(self._model_store.variable().get_one_by_name('slide_animation_enabled').eval()))))
|
||||
polling_interval = int(request.args.get('polling', self._model_store.variable().get_one_by_name('polling_interval').eval()))
|
||||
slide_animation_speed = request.args.get('animation_speed', self._model_store.variable().get_one_by_name('slide_animation_speed').eval()).lower()
|
||||
slide_animation_entrance_effect = request.args.get('animation_effect', self._model_store.variable().get_one_by_name('slide_animation_entrance_effect').eval())
|
||||
|
||||
@ -110,6 +110,7 @@ class VariableManager:
|
||||
{"name": "lang", "section": self.t(VariableSection.GENERAL), "value": "en", "type": VariableType.SELECT_SINGLE, "editable": True, "description": self.t('settings_variable_desc_lang'), "selectables": self.t(ApplicationLanguage), "refresh_player": False},
|
||||
{"name": "external_url", "section": self.t(VariableSection.GENERAL), "value": "", "type": VariableType.STRING, "editable": True, "description": self.t('settings_variable_desc_external_url'), "refresh_player": False},
|
||||
{"name": "slide_upload_limit", "section": self.t(VariableSection.GENERAL), "value": 32, "unit": VariableUnit.MEGABYTE, "type": VariableType.INT, "editable": True, "description": self.t('settings_variable_desc_slide_upload_limit'), "refresh_player": False},
|
||||
{"name": "dark_mode", "section": self.t(VariableSection.GENERAL), "value": True, "type": VariableType.BOOL, "editable": True, "description": self.t('settings_variable_desc_dark_mode'), "refresh_player": False},
|
||||
|
||||
### Player Options
|
||||
{"name": "intro_slide_duration", "section": self.t(VariableSection.PLAYER_OPTIONS), "value": 3, "unit": VariableUnit.SECOND, "type": VariableType.INT, "editable": True, "description": self.t('settings_variable_desc_intro_slide_duration'), "refresh_player": False},
|
||||
|
||||
@ -28,6 +28,7 @@ class TemplateRenderer:
|
||||
STATIC_PREFIX="/{}/{}/".format(WebDirConstant.FOLDER_STATIC, WebDirConstant.FOLDER_STATIC_WEB_ASSETS),
|
||||
SECRET_KEY=self._model_store.config().map().get('secret_key'),
|
||||
FLEET_PLAYER_ENABLED=self._model_store.variable().map().get('fleet_player_enabled').as_bool(),
|
||||
DARK_MODE=self._model_store.variable().map().get('dark_mode').as_bool(),
|
||||
AUTH_ENABLED=self._model_store.variable().map().get('auth_enabled').as_bool(),
|
||||
last_pillmenu_slideshow=self._model_store.variable().map().get('last_pillmenu_slideshow').as_string(),
|
||||
last_pillmenu_configuration=self._model_store.variable().map().get('last_pillmenu_configuration').as_string(),
|
||||
|
||||
@ -44,12 +44,12 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/fontawesome.min.css"/>
|
||||
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/compiled/main.css"/>
|
||||
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/compiled/main-{{ 'dark' if DARK_MODE else 'light' }}-mode.css"/>
|
||||
{% block add_css %}{% endblock %}
|
||||
{{ HOOK(H_ROOT_CSS) }}
|
||||
</head>
|
||||
<body class="{% block body_class %}{% endblock %}">
|
||||
<div id="toast"></div>
|
||||
<div class="toast"></div>
|
||||
|
||||
<div class="container {% block container_class %}{% endblock %}">
|
||||
|
||||
|
||||
@ -10,7 +10,8 @@ export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: path.resolve(__dirname, 'data/www/scss/main.scss'),
|
||||
'main-dark-mode': path.resolve(__dirname, 'data/www/scss/main-dark-mode.scss'),
|
||||
'main-light-mode': path.resolve(__dirname, 'data/www/scss/main-light-mode.scss'),
|
||||
},
|
||||
output: {
|
||||
dir: path.resolve(__dirname, 'data/www/css/compiled'),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user