From 22f9eb4dff9ee03b5ec655db2204050ffe7a7771 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Thu, 2 Jul 2020 23:42:44 +0300 Subject: feat: refactor preview to support random fragment extraction --- src/site/assets/styles/_colors.scss | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'src/site/assets/styles') diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss index a141447..b8861d2 100644 --- a/src/site/assets/styles/_colors.scss +++ b/src/site/assets/styles/_colors.scss @@ -1,13 +1,13 @@ // $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; +$backgroundAccentLighter: #53555e; $backgroundLight1: #f5f6f8; // customize navbar @@ -23,16 +23,15 @@ $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; @@ -45,4 +44,9 @@ $pagination-hover-color: $textColorHighlight; $pagination-hover-border-color: $textColorHighlight; $pagination-current-background-color: $base-3; -$pagination-current-border-color: $base-2; \ No newline at end of file +$pagination-current-border-color: $base-2; + +// loading + +$loading-background: rgba(0, 0, 0, 0.8); +$loading-background: rgba(40, 40, 40, 0.66); -- cgit v1.2.3 From 92be4504ccb8f6d918013e5c33870858cd22376a Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Sat, 4 Jul 2020 03:26:35 +0300 Subject: feat: refactor most of the album components to use store for presentation and actions --- src/site/assets/styles/_colors.scss | 10 ++- src/site/assets/styles/style.scss | 139 ++++++++++++++++++++---------------- 2 files changed, 88 insertions(+), 61 deletions(-) (limited to 'src/site/assets/styles') diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss index b8861d2..6693d8a 100644 --- a/src/site/assets/styles/_colors.scss +++ b/src/site/assets/styles/_colors.scss @@ -10,6 +10,10 @@ $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; @@ -47,6 +51,10 @@ $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-body-background-color: $background; +$modal-card-head-background-color: $backgroundAccent; +$modal-card-foot-border-top: 1px solid rgba(255, 255, 255, 0.1098); diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss index 69d15d3..6c939b5 100644 --- a/src/site/assets/styles/style.scss +++ b/src/site/assets/styles/style.scss @@ -1,15 +1,16 @@ // Let's first take care of having the customized colors ready. -@import "./_colors.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'; html { // font-size: 100%; @@ -18,9 +19,9 @@ html { } a { - color: #5E81AC; + color: #5e81ac; &:hover { - color: #81A1C1; + color: #81a1c1; text-decoration: underline; } } @@ -43,10 +44,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 +67,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 +106,6 @@ div#drag-overlay { } } - section.hero { &.dashboard { // background-color: $backgroundLight1 !important; @@ -103,10 +115,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 +128,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 +144,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,18 +191,22 @@ 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 { +.input, +.taginput .taginput-container.is-focusable, +.textarea, +.select select { border: 2px solid #21252d; - border-radius: .3em !important; + border-radius: 0.3em !important; background: rgba(0, 0, 0, 0.15); padding: 1rem; color: $textColor; @@ -203,9 +224,9 @@ button.button.is-primary { 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; } @@ -224,13 +245,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,60 +268,55 @@ table.table { } } } - th, td { + th, + td { border-color: #ffffff1c; } } // vue-bar .vb > .vb-dragger { - z-index: 5; - width: 12px; - right: 0; + 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; + -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; + background-color: $backgroundAccentLighter; } .vb > .vb-dragger:hover > .vb-dragger-styler { - background-color: $backgroundAccentLighter; - margin: 0px; - height: 100%; + background-color: $backgroundAccentLighter; + margin: 0px; + height: 100%; } .vb.vb-dragging > .vb-dragger > .vb-dragger-styler { - background-color: $backgroundAccentLighter; - margin: 0px; - height: 100%; + background-color: $backgroundAccentLighter; + margin: 0px; + height: 100%; } .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler { - background-color: $backgroundAccentLighter; + background-color: $backgroundAccentLighter; } -.vb-content{ - overflow: auto !important +.vb-content { + overflow: auto !important; } // helpers @@ -313,7 +332,7 @@ table.table { height: max-content; } -.pagination a, .pagination a:hover { +.pagination a, +.pagination a:hover { text-decoration: none; } - -- cgit v1.2.3 From 15266378810d81704f8c9ece6ecf919526efacae Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Wed, 8 Jul 2020 03:15:07 +0300 Subject: feat: add new sidebar with mdi icons and active reactivity --- src/site/assets/styles/_colors.scss | 11 +++++++++++ src/site/assets/styles/style.scss | 8 ++++++++ 2 files changed, 19 insertions(+) (limited to 'src/site/assets/styles') diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss index 6693d8a..0bc7c5e 100644 --- a/src/site/assets/styles/_colors.scss +++ b/src/site/assets/styles/_colors.scss @@ -55,6 +55,17 @@ $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; diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss index 6c939b5..0ebba4c 100644 --- a/src/site/assets/styles/style.scss +++ b/src/site/assets/styles/style.scss @@ -12,6 +12,8 @@ $size-normal: 1rem; @import '../../../node_modules/bulma/bulma.sass'; @import '../../../node_modules/buefy/src/scss/buefy.scss'; +@import '@mdi/font/css/materialdesignicons.css'; + html { // font-size: 100%; font-size: 14px; @@ -336,3 +338,9 @@ table.table { .pagination a:hover { text-decoration: none; } + +// fix control icons +.control.has-icons-left .icon, .control.has-icons-right .icon { + height: 3rem; + padding-right: 1rem; +} -- cgit v1.2.3 From 5ded974ef98caf0b8c9160938ff55dc101c718ee Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Thu, 9 Jul 2020 02:23:19 +0300 Subject: feat: add lolisafe as a color to bulma instead of doing weird hacks --- src/site/assets/styles/_bulma_colors_extender.scss | 16 ++++++++++++++++ src/site/assets/styles/style.scss | 5 +++-- 2 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 src/site/assets/styles/_bulma_colors_extender.scss (limited to 'src/site/assets/styles') 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/style.scss b/src/site/assets/styles/style.scss index 0ebba4c..202e02a 100644 --- a/src/site/assets/styles/style.scss +++ b/src/site/assets/styles/style.scss @@ -1,4 +1,5 @@ // Let's first take care of having the customized colors ready. +@import './_bulma_colors_extender.scss'; @import './_colors.scss'; // Bulma/Buefy customization @@ -221,7 +222,7 @@ section#register a.is-text { color: $textColor; } } -button.button.is-primary { +/* button.button.is-primary { background-color: #323846; border: 2px solid #21252d; color: $textColor; @@ -235,7 +236,7 @@ button.button.is-primary { &.big { font-size: 1.25rem; } -} +} */ svg.waves { display: block; bottom: -1px; -- cgit v1.2.3