aboutsummaryrefslogtreecommitdiff
path: root/src/site/assets/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/site/assets/styles')
-rw-r--r--src/site/assets/styles/_bulma_colors_extender.scss16
-rw-r--r--src/site/assets/styles/_colors.scss70
-rw-r--r--src/site/assets/styles/bulma-divider.scss164
-rw-r--r--src/site/assets/styles/style.scss241
4 files changed, 442 insertions, 49 deletions
diff --git a/src/site/assets/styles/_bulma_colors_extender.scss b/src/site/assets/styles/_bulma_colors_extender.scss
new file mode 100644
index 0000000..69dbd1e
--- /dev/null
+++ b/src/site/assets/styles/_bulma_colors_extender.scss
@@ -0,0 +1,16 @@
+// Import the initial variables
+@import "../../../node_modules/bulma/sass/utilities/initial-variables";
+@import "../../../node_modules/bulma/sass/utilities/functions";
+
+// Setup our custom colors
+$lolisafe: #323846;
+$lolisafe-invert: findColorInvert($lolisafe);
+
+// XXX: EXPERIMENTAL, CHECK IF WE NEED ORIGINAL PRIMARY ANYWHERE
+// $primary: $lolisafe;
+// $primary-invert: $lolisafe-invert;
+
+// declare custom colors
+$custom-colors: (
+ "lolisafe":($lolisafe, $lolisafe-invert)
+);
diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index 6e40102..e8b17c4 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -1,25 +1,83 @@
// $basePink: #EC1A55;
$base-1: #292e39;
-$base-2: #2E3440;
-$base-3: #3B4252;
-$base-4: #434C5E;
-$base-5: #4C566A;
+$base-2: #2e3440;
+$base-3: #3b4252;
+$base-4: #434c5e;
+$base-5: #4c566a;
$background: #1e2430;
$backgroundAccent: #20222b;
+$backgroundAccentLighter: #53555e;
$backgroundLight1: #f5f6f8;
+$scheme-main: $background;
+$scheme-main-bis: $backgroundAccent;
+$scheme-main-ter: $backgroundAccentLighter;
+
+// customize navbar
+$navbar-background-color: $backgroundAccent;
+$navbar-item-color: #f5f6f8;
+
// $defaultTextColor: #4a4a4a;
$defaultTextColor: rgb(236, 239, 244);
$textColor: #c7ccd8;
$textColorHighlight: white;
+$input-hover-color: $textColor;
+
$basePink: #ff015b;
$basePinkHover: rgb(196, 4, 71);
-$baseBlue: #30A9ED;
+$baseBlue: #30a9ed;
$baseBlueHover: rgb(21, 135, 201);
$uploaderDropdownColor: #797979;
-$boxShadow: 0 10px 15px rgba(4,39,107,0.2);
+$boxShadow: 0 10px 15px rgba(4, 39, 107, 0.2);
$boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
+
+// pagination
+$pagination-color: $defaultTextColor;
+
+$pagination-focus-color: $textColorHighlight;
+$pagination-focus-border-color: $textColorHighlight;
+
+$pagination-active-color: $textColorHighlight;
+$pagination-active-border-color: $textColorHighlight;
+
+$pagination-hover-color: $textColorHighlight;
+$pagination-hover-border-color: $textColorHighlight;
+
+$pagination-current-background-color: $base-3;
+$pagination-current-border-color: $base-2;
+
+// loading
+$loading-background: rgba(0, 0, 0, 0.8);
+$loading-background: rgba(40, 40, 40, 0.66);
+
+// dialogs
+$modal-card-title-color: $textColor;
+$modal-card-body-background-color: $background;
+$modal-card-head-background-color: $backgroundAccent;
+$modal-card-head-border-bottom: 1px solid rgba(255, 255, 255, 0.1098);
+$modal-card-foot-border-top: 1px solid rgba(255, 255, 255, 0.1098);
+
+// sidebar
+$sidebar-background: $base-1;
+$sidebar-box-shadow: none;
+
+//
+$menu-item-color: $textColor;
+$menu-item-hover-color: $textColorHighlight;
+$menu-item-active-background-color: $backgroundAccent;
+
+// dropdown
+$dropdown-content-background-color: $background;
+$dropdown-item-hover-background-color: $backgroundAccentLighter;
+$dropdown-item-color: $textColor;
+$dropdown-item-hover-color: $textColorHighlight;
+$dropdown-item-active-color: $textColorHighlight;
+$dropdown-item-active-background-color: hsl(171, 100%, 41%); // $primary
+
+// tags
+$tag-background-color: $base-2;
+$tag-color: $textColor;
diff --git a/src/site/assets/styles/bulma-divider.scss b/src/site/assets/styles/bulma-divider.scss
new file mode 100644
index 0000000..713c7e4
--- /dev/null
+++ b/src/site/assets/styles/bulma-divider.scss
@@ -0,0 +1,164 @@
+/*! @creativebulma/bulma-divider v1.1.0 | (c) 2020 Gaetan | MIT License | https://github.com/CreativeBulma/bulma-divider */
+@-webkit-keyframes spinAround {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(359deg);
+ }
+}
+
+@keyframes spinAround {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(359deg);
+ }
+}
+
+/* line 17, src/sass/app.sass */
+.divider {
+ position: relative;
+ display: flex;
+ align-items: center;
+ text-transform: uppercase;
+ color: #7a7a7a;
+ font-size: 0.75rem;
+ font-weight: 600;
+ letter-spacing: .5px;
+ margin: 25px 0;
+}
+
+/* line 28, src/sass/app.sass */
+.divider::after, .divider::before {
+ content: '';
+ display: block;
+ flex: 1;
+ height: 1px;
+ background-color: #dbdbdb;
+}
+
+/* line 37, src/sass/app.sass */
+.divider:not(.is-right)::after {
+ margin-left: 10px;
+}
+
+/* line 41, src/sass/app.sass */
+.divider:not(.is-left)::before {
+ margin-right: 10px;
+}
+
+/* line 45, src/sass/app.sass */
+.divider.is-left::before {
+ display: none;
+}
+
+/* line 49, src/sass/app.sass */
+.divider.is-right::after {
+ display: none;
+}
+
+/* line 52, src/sass/app.sass */
+.divider.is-vertical {
+ flex-direction: column;
+ margin: 0 25px;
+}
+
+/* line 56, src/sass/app.sass */
+.divider.is-vertical::after, .divider.is-vertical::before {
+ height: auto;
+ width: 1px;
+}
+
+/* line 61, src/sass/app.sass */
+.divider.is-vertical::after {
+ margin-left: 0;
+ margin-top: 10px;
+}
+
+/* line 65, src/sass/app.sass */
+.divider.is-vertical::before {
+ margin-right: 0;
+ margin-bottom: 10px;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-white::after, .divider.is-white::before {
+ background-color: white;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-black::after, .divider.is-black::before {
+ background-color: #0a0a0a;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-light::after, .divider.is-light::before {
+ background-color: whitesmoke;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-dark::after, .divider.is-dark::before {
+ background-color: #363636;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-primary::after, .divider.is-primary::before {
+ background-color: #00d1b2;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-primary.is-light::after, .divider.is-primary.is-light::before {
+ background-color: #ebfffc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-link::after, .divider.is-link::before {
+ background-color: #3273dc;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-link.is-light::after, .divider.is-link.is-light::before {
+ background-color: #eef3fc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-info::after, .divider.is-info::before {
+ background-color: #3298dc;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-info.is-light::after, .divider.is-info.is-light::before {
+ background-color: #eef6fc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-success::after, .divider.is-success::before {
+ background-color: #48c774;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-success.is-light::after, .divider.is-success.is-light::before {
+ background-color: #effaf3;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-warning::after, .divider.is-warning::before {
+ background-color: #ffdd57;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-warning.is-light::after, .divider.is-warning.is-light::before {
+ background-color: #fffbeb;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-danger::after, .divider.is-danger::before {
+ background-color: #f14668;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-danger.is-light::after, .divider.is-danger.is-light::before {
+ background-color: #feecf0;
+}
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index c067ef4..4ad0471 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -1,15 +1,24 @@
// Let's first take care of having the customized colors ready.
-@import "./_colors.scss";
+@import './_bulma_colors_extender.scss';
+@import './_colors.scss';
// Bulma/Buefy customization
-@import "../../../node_modules/bulma/sass/utilities/_all.sass";
+@import '../../../node_modules/bulma/sass/utilities/_all.sass';
$body-size: 14px !default;
-$family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+ 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
$size-normal: 1rem;
-@import "../../../node_modules/bulma/bulma.sass";
-@import "../../../node_modules/buefy/src/scss/buefy.scss";
+/* @import '../../../node_modules/bulma/bulma.sass';
+@import '../../../node_modules/buefy/src/scss/buefy.scss'; */
+
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
+
+@import '@mdi/font/css/materialdesignicons.css';
+
+@import './bulma-divider.scss';
html {
// font-size: 100%;
@@ -18,9 +27,9 @@ html {
}
a {
- color: #5E81AC;
+ color: #5e81ac;
&:hover {
- color: #81A1C1;
+ color: #81a1c1;
text-decoration: underline;
}
}
@@ -43,10 +52,18 @@ h4 {
}
@for $i from 1 through 10 {
- .mt#{$i} { margin-top: $i + em !important; }
- .mb#{$i} { margin-bottom: $i + em !important; }
- .ml#{$i} { margin-left: $i + em !important; }
- .mr#{$i} { margin-right: $i + em !important; }
+ .mt#{$i} {
+ margin-top: $i + em !important;
+ }
+ .mb#{$i} {
+ margin-bottom: $i + em !important;
+ }
+ .ml#{$i} {
+ margin-left: $i + em !important;
+ }
+ .mr#{$i} {
+ margin-right: $i + em !important;
+ }
}
.text-center {
@@ -58,8 +75,12 @@ hr {
height: 1px;
}
// Bulma color changes.
-.tooltip.is-top.is-primary:before { border-top: 5px solid #20222b; }
-.tooltip.is-primary:after { background: #20222b; }
+.tooltip.is-top.is-primary:before {
+ border-top: 5px solid #20222b;
+}
+.tooltip.is-primary:after {
+ background: #20222b;
+}
div#drag-overlay {
position: fixed;
@@ -93,7 +114,6 @@ div#drag-overlay {
}
}
-
section.hero {
&.dashboard {
// background-color: $backgroundLight1 !important;
@@ -103,10 +123,12 @@ section.hero {
}
}
-section input, section a.button {
+section input,
+section a.button {
font-size: 14px !important;
}
-section input, section p.control a.button {
+section input,
+section p.control a.button {
border-left: 0px !important;
border-top: 0px !important;
border-right: 0px !important;
@@ -114,13 +136,15 @@ section input, section p.control a.button {
box-shadow: 0 0 0 !important;
}
-section p.control a.button { margin-left: 10px !important; }
+section p.control a.button {
+ margin-left: 10px !important;
+}
section p.control button {
height: 100%;
font-size: 12px;
}
-.switch input[type=checkbox] + .check:before {
+.switch input[type='checkbox'] + .check:before {
background: #fbfbfb;
}
@@ -128,7 +152,8 @@ section p.control button {
Register and Login forms
*/
-section.hero.is-login, section.hero.is-register {
+section.hero.is-login,
+section.hero.is-register {
a {
font-size: 1.25em;
line-height: 2.5em;
@@ -174,45 +199,31 @@ section#register a.is-text {
font-size: 1.25em;
line-height: 2.5em;
}
-*/
+
.modal-card-head, .modal-card-foot {
background: $backgroundLight1;
}
+*/
.switch {
margin-top: 5px;
}
-.input, .taginput .taginput-container.is-focusable, .textarea, .select select {
- border: 2px solid #21252d;
- border-radius: .3em !important;
- background: rgba(0, 0, 0, 0.15);
- padding: 1rem;
- color: $textColor;
- height: 3rem;
- &:focus,
- &:hover {
- border: 2px solid #21252d;
- }
- &::placeholder {
- color: $textColor;
- }
-}
-button.button.is-primary {
+/* button.button.is-primary {
background-color: #323846;
border: 2px solid #21252d;
color: $textColor;
font-size: 1rem;
- border-top: 0;
- border-left: 0;
- border-right: 0;
+ border-top: 0;
+ border-left: 0;
+ border-right: 0;
&:hover {
background-color: $base-2;
}
&.big {
font-size: 1.25rem;
}
-}
+} */
svg.waves {
display: block;
bottom: -1px;
@@ -224,13 +235,16 @@ svg.waves {
user-select: none;
overflow: hidden;
}
-div.field-body > div.field { text-align: left; }
+div.field-body > div.field {
+ text-align: left;
+}
table.table {
background: $base-2;
color: $textColor;
border: 0;
thead {
- th, td {
+ th,
+ td {
color: $textColor;
}
}
@@ -244,7 +258,148 @@ table.table {
}
}
}
- th, td {
+ th,
+ td {
border-color: #ffffff1c;
}
}
+
+.lolisafe-input input,
+.lolisafe-select select,
+.lolisafe-textarea textarea {
+ border: 2px solid #21252d;
+ border-radius: 0.3em !important;
+ background: rgba(0, 0, 0, 0.15);
+ padding: 1rem;
+ color: $textColor;
+ height: 3rem;
+ &:focus,
+ &:hover {
+ border: 2px solid #21252d;
+ }
+ &::placeholder {
+ color: $textColor;
+ }
+}
+
+.lolisafe-input .icon {
+ color: #323846 !important;
+}
+
+
+// vue-bar
+.vb > .vb-dragger {
+ z-index: 5;
+ width: 12px;
+ right: 0;
+}
+
+.vb > .vb-dragger > .vb-dragger-styler {
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform: rotate3d(0, 0, 0, 0);
+ transform: rotate3d(0, 0, 0, 0);
+ -webkit-transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
+ transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
+ background-color: $backgroundAccent;
+ margin: 5px 5px 5px 0;
+ border-radius: 20px;
+ height: calc(100% - 10px);
+ display: block;
+}
+
+.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
+ background-color: $backgroundAccentLighter;
+}
+
+.vb > .vb-dragger:hover > .vb-dragger-styler {
+ background-color: $backgroundAccentLighter;
+ margin: 0px;
+ height: 100%;
+}
+
+.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
+ background-color: $backgroundAccentLighter;
+ margin: 0px;
+ height: 100%;
+}
+
+.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
+ background-color: $backgroundAccentLighter;
+}
+
+.vb-content {
+ overflow: auto !important;
+}
+
+// helpers
+.has-text-default {
+ color: $textColor;
+}
+
+.has-text-default-highlight {
+ color: $textColorHighlight;
+}
+
+.is-height-max-content {
+ height: max-content;
+}
+
+.pagination a,
+.pagination a:hover {
+ text-decoration: none;
+}
+
+// fix control icons
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+ height: 3rem;
+ padding-right: 1rem;
+}
+
+.is-marginless {
+ margin: 0 !important;
+}
+
+.has-centered-items {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.lolisafe-on-border.field.is-floating-label .label:before {
+ background-color: $lolisafe;
+}
+
+.is-lolisafe.divider::after, .is-lolisafe.divider::before {
+ background-color: #21252d;
+}
+
+.lolisafe.taginput {
+ .taginput-container {
+ background-color: #21252d;
+ border: 2px solid #21252d;
+ border-radius: 0.3em !important;
+
+ input {
+ background-color: #21252d;
+ color: $textColor;
+ &::placeholder {
+ color: $textColor;
+ }
+ }
+
+ .icon {
+ padding-left: 15px;
+ }
+
+ &:focus,
+ &:hover,
+ &:active {
+ border: 2px solid #21252d;
+ }
+ }
+}
+
+.dropdown-content a {
+ text-decoration: none;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-19 03:43:11 +0000