mirror of
https://github.com/filegator/filegator.git
synced 2025-01-16 20:28:22 +01:00
Extract app theme scss to external files (#524)
This commit is contained in:
Kobi Zaltzberg
GitHub
parent
52859b6137
commit
d8fb33fae9
200
frontend/App.vue
200
frontend/App.vue
@ -19,207 +19,15 @@ export default {
|
||||
<style lang="scss">
|
||||
@import "~bulma/sass/utilities/_all";
|
||||
|
||||
// Primary color
|
||||
$primary: #34B891;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
|
||||
$colors: (
|
||||
"primary": ($primary, $primary-invert),
|
||||
"info": ($info, $info-invert),
|
||||
"success": ($success, $success-invert),
|
||||
"warning": ($warning, $warning-invert),
|
||||
"danger": ($danger, $danger-invert),
|
||||
);
|
||||
|
||||
// Links
|
||||
$link: $primary;
|
||||
$link-invert: $primary-invert;
|
||||
$link-focus-border: $primary;
|
||||
|
||||
// Disable the widescreen breakpoint
|
||||
$widescreen-enabled: false;
|
||||
|
||||
// Disable the fullhd breakpoint
|
||||
$fullhd-enabled: false;
|
||||
// Theme base variables
|
||||
@import "assets/scss/theme/variables";
|
||||
|
||||
@import "~bulma";
|
||||
@import "~buefy/src/scss/buefy";
|
||||
|
||||
// Custom styles
|
||||
html, body, #wrapper, #inner, .container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.is-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.is-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.upload-draggable {
|
||||
display: flex!important;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload input[type=file] {
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.modal-card-foot {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1088px) {
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
@import "assets/scss/custom";
|
||||
|
||||
/* Dark Theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Dark theme primary colors */
|
||||
--color-primary-a0: #34b891;
|
||||
--color-primary-a20: #6ec8a8;
|
||||
--color-primary-transparent: #34b89123;
|
||||
|
||||
/* Dark theme surface colors */
|
||||
--color-surface-a0: #121212;
|
||||
--color-surface-a10: #282828;
|
||||
--color-surface-a20: #3f3f3f;
|
||||
--color-surface-a30: #575757;
|
||||
--color-surface-a50: #8b8b8b;
|
||||
|
||||
--color-text: #fff;
|
||||
}
|
||||
|
||||
html, body, .navbar {
|
||||
background-color: var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.navbar-item,
|
||||
.label,
|
||||
.table,
|
||||
.table thead th,
|
||||
.modal-card-title,
|
||||
.modal-card-body,
|
||||
.button:focus,
|
||||
.dropdown-item,
|
||||
.checkbox:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.box, .table, .modal-card-head, .modal-card-foot {
|
||||
background-color: var(--color-surface-a10);
|
||||
}
|
||||
|
||||
.table.is-hoverable tbody tr:not(.is-selected):hover {
|
||||
background-color: var(--color-primary-transparent);;
|
||||
}
|
||||
|
||||
.file-row a, .node-tree > a, strong {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
a.navbar-item:hover {
|
||||
background-color: var(--color-primary-transparent);;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: var(--color-surface-a20);
|
||||
color: var(--color-text);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
border-color: var(--color-primary-a20);
|
||||
}
|
||||
|
||||
.table td, .table th {
|
||||
border-bottom: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.is-current-sort {
|
||||
border-bottom: 1px solid var(--color-primary-a0) !important;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-card-body {
|
||||
background-color: var(--color-surface-a20);
|
||||
}
|
||||
|
||||
.modal-card-head {
|
||||
border-bottom: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.modal-card-foot {
|
||||
border-top: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.modal input {
|
||||
background-color: var(--color-surface-a30);
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.button {
|
||||
background-color: var(--color-primary-transparent);
|
||||
border-color: var(--color-primary-a0);
|
||||
color: var(--color-text)
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--color-primary-a0);
|
||||
border-color: var(--color-primary-a0);
|
||||
color: var(--color-text)
|
||||
}
|
||||
|
||||
.button:active {
|
||||
color: var(--color-primary-a0) !important;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.dropdown-content {
|
||||
background-color: var(--color-surface-a20);
|
||||
}
|
||||
|
||||
a.dropdown-item:hover {
|
||||
background-color: var(--color-primary-transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary-a20);
|
||||
}
|
||||
|
||||
#bottom-info {
|
||||
color: var(--color-surface-a50);
|
||||
}
|
||||
|
||||
.select select {
|
||||
background-color: var(--color-surface-a20);
|
||||
border-color: var(--color-surface-a20);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.select select:hover, .select:not(.is-multiple):not(.is-loading):hover::after {
|
||||
border-color: var(--color-primary-a0);
|
||||
}
|
||||
}
|
||||
@import "assets/scss/theme/dark";
|
||||
</style>
|
||||
|
||||
|
||||
43
frontend/assets/scss/custom.scss
Normal file
43
frontend/assets/scss/custom.scss
Normal file
@ -0,0 +1,43 @@
|
||||
html, body, #wrapper, #inner, .container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.is-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.is-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.upload-draggable {
|
||||
display: flex!important;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload input[type=file] {
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.modal-card-foot {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1088px) {
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
131
frontend/assets/scss/theme/dark.scss
Normal file
131
frontend/assets/scss/theme/dark.scss
Normal file
@ -0,0 +1,131 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
:root {
|
||||
/* Dark theme primary colors */
|
||||
--color-primary-a0: #34b891;
|
||||
--color-primary-a20: #6ec8a8;
|
||||
--color-primary-transparent: #34b89123;
|
||||
|
||||
/* Dark theme surface colors */
|
||||
--color-surface-a0: #121212;
|
||||
--color-surface-a10: #282828;
|
||||
--color-surface-a20: #3f3f3f;
|
||||
--color-surface-a30: #575757;
|
||||
--color-surface-a50: #8b8b8b;
|
||||
|
||||
--color-text: #fff;
|
||||
}
|
||||
|
||||
html, body, .navbar {
|
||||
background-color: var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.navbar-item,
|
||||
.label,
|
||||
.table,
|
||||
.table thead th,
|
||||
.modal-card-title,
|
||||
.modal-card-body,
|
||||
.button:focus,
|
||||
.dropdown-item,
|
||||
.checkbox:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.box, .table, .modal-card-head, .modal-card-foot {
|
||||
background-color: var(--color-surface-a10);
|
||||
}
|
||||
|
||||
.table.is-hoverable tbody tr:not(.is-selected):hover {
|
||||
background-color: var(--color-primary-transparent);;
|
||||
}
|
||||
|
||||
.file-row a, .node-tree > a, strong {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
a.navbar-item:hover {
|
||||
background-color: var(--color-primary-transparent);;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: var(--color-surface-a20);
|
||||
color: var(--color-text);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
border-color: var(--color-primary-a20);
|
||||
}
|
||||
|
||||
.table td, .table th {
|
||||
border-bottom: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.is-current-sort {
|
||||
border-bottom: 1px solid var(--color-primary-a0) !important;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-card-body {
|
||||
background-color: var(--color-surface-a20);
|
||||
}
|
||||
|
||||
.modal-card-head {
|
||||
border-bottom: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.modal-card-foot {
|
||||
border-top: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.modal input {
|
||||
background-color: var(--color-surface-a30);
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.button {
|
||||
background-color: var(--color-primary-transparent);
|
||||
border-color: var(--color-primary-a0);
|
||||
color: var(--color-text)
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--color-primary-a0);
|
||||
border-color: var(--color-primary-a0);
|
||||
color: var(--color-text)
|
||||
}
|
||||
|
||||
.button:active {
|
||||
color: var(--color-primary-a0) !important;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.dropdown-content {
|
||||
background-color: var(--color-surface-a20);
|
||||
}
|
||||
|
||||
a.dropdown-item:hover {
|
||||
background-color: var(--color-primary-transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary-a20);
|
||||
}
|
||||
|
||||
#bottom-info {
|
||||
color: var(--color-surface-a50);
|
||||
}
|
||||
|
||||
.select select {
|
||||
background-color: var(--color-surface-a20);
|
||||
border-color: var(--color-surface-a20);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.select select:hover, .select:not(.is-multiple):not(.is-loading):hover::after {
|
||||
border-color: var(--color-primary-a0);
|
||||
}
|
||||
}
|
||||
22
frontend/assets/scss/theme/variables.scss
Normal file
22
frontend/assets/scss/theme/variables.scss
Normal file
@ -0,0 +1,22 @@
|
||||
// Primary color
|
||||
$primary: #34B891;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
|
||||
$colors: (
|
||||
"primary": ($primary, $primary-invert),
|
||||
"info": ($info, $info-invert),
|
||||
"success": ($success, $success-invert),
|
||||
"warning": ($warning, $warning-invert),
|
||||
"danger": ($danger, $danger-invert),
|
||||
);
|
||||
|
||||
// Links
|
||||
$link: $primary;
|
||||
$link-invert: $primary-invert;
|
||||
$link-focus-border: $primary;
|
||||
|
||||
// Disable the widescreen breakpoint
|
||||
$widescreen-enabled: false;
|
||||
|
||||
// Disable the fullhd breakpoint
|
||||
$fullhd-enabled: false;
|
||||
@ -1,6 +1,9 @@
|
||||
module.exports = {
|
||||
indexPath: 'main.html',
|
||||
filenameHashing: false,
|
||||
css: {
|
||||
extract: true
|
||||
},
|
||||
configureWebpack: config => {
|
||||
config.entry = {
|
||||
app: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user