From 0a50ef771eb870f18b0cd08f579dba1017d73858 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Mon, 29 Jun 2020 17:01:38 +0300 Subject: fix: change navbar to buefy navbar for mobile support --- src/site/assets/styles/_colors.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src/site/assets/styles') diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss index 6e40102..78d6f99 100644 --- a/src/site/assets/styles/_colors.scss +++ b/src/site/assets/styles/_colors.scss @@ -9,11 +9,19 @@ $background: #1e2430; $backgroundAccent: #20222b; $backgroundLight1: #f5f6f8; +// 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; -- cgit v1.2.3 From 50d233cd661e792e4aea92a389b0897dd734f772 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Mon, 29 Jun 2020 17:02:06 +0300 Subject: fix: fix minor visual issues on the album page --- src/site/assets/styles/style.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'src/site/assets/styles') diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss index c067ef4..c3aff91 100644 --- a/src/site/assets/styles/style.scss +++ b/src/site/assets/styles/style.scss @@ -248,3 +248,12 @@ table.table { border-color: #ffffff1c; } } + +// helpers +.has-text-default { + color: $textColor; +} + +.has-text-default-highlight { + color: $textColorHighlight; +} \ No newline at end of file -- cgit v1.2.3 From ac037c773ef5f15372c6999445a2efe00034c0c0 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Mon, 29 Jun 2020 20:02:47 +0300 Subject: fix: Remove hero and hero body and use sections and containers instead Hero is meant to be used as a full-width banner to showcare or present somethign, not to contain the entire content of the webpage --- src/site/assets/styles/_colors.scss | 19 ++++++++++-- src/site/assets/styles/style.scss | 62 ++++++++++++++++++++++++++++++++++++- 2 files changed, 78 insertions(+), 3 deletions(-) (limited to 'src/site/assets/styles') diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss index 78d6f99..a141447 100644 --- a/src/site/assets/styles/_colors.scss +++ b/src/site/assets/styles/_colors.scss @@ -7,14 +7,13 @@ $base-5: #4C566A; $background: #1e2430; $backgroundAccent: #20222b; +$backgroundAccentLighter: #53555E; $backgroundLight1: #f5f6f8; // customize navbar $navbar-background-color: $backgroundAccent; $navbar-item-color: #f5f6f8; - - // $defaultTextColor: #4a4a4a; $defaultTextColor: rgb(236, 239, 244); $textColor: #c7ccd8; @@ -31,3 +30,19 @@ $uploaderDropdownColor: #797979; $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; \ No newline at end of file diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss index c3aff91..69d15d3 100644 --- a/src/site/assets/styles/style.scss +++ b/src/site/assets/styles/style.scss @@ -249,6 +249,57 @@ table.table { } } +// 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; @@ -256,4 +307,13 @@ table.table { .has-text-default-highlight { color: $textColorHighlight; -} \ No newline at end of file +} + +.is-height-max-content { + height: max-content; +} + +.pagination a, .pagination a:hover { + text-decoration: none; +} + -- cgit v1.2.3 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 From b49017aafd8dd3206dc7f490f54e31474527e5b7 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Sun, 19 Jul 2020 22:26:55 +0300 Subject: chore: add custom class to inputs until fix is released on buefy's master --- src/site/assets/styles/bulma-divider.scss | 164 ++++++++++++++++++++++++++++++ src/site/assets/styles/style.scss | 94 +++++++++++++---- 2 files changed, 238 insertions(+), 20 deletions(-) create mode 100644 src/site/assets/styles/bulma-divider.scss (limited to 'src/site/assets/styles') 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 202e02a..026f277 100644 --- a/src/site/assets/styles/style.scss +++ b/src/site/assets/styles/style.scss @@ -10,11 +10,16 @@ $family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Robot '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%; font-size: 14px; @@ -204,24 +209,6 @@ section#register a.is-text { margin-top: 5px; } -.input, -.taginput .taginput-container.is-focusable, -.textarea, -.select select { - 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; - } -} /* button.button.is-primary { background-color: #323846; border: 2px solid #21252d; @@ -277,6 +264,29 @@ table.table { } } +.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; @@ -345,3 +355,47 @@ table.table { height: 3rem; padding-right: 1rem; } + +.is-marginless { + margin: 0 !important; +} + +.fucking-opl-shut-up { + 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; + } + } +} -- cgit v1.2.3 From 18bb451f793677a5bbfdc2c14128bae33c66dfde Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Mon, 20 Jul 2020 23:01:45 +0300 Subject: feat: implement all-in-one file detail viewer, tag editor and album selection modal --- src/site/assets/styles/_colors.scss | 12 ++++++++++++ src/site/assets/styles/style.scss | 6 +++++- 2 files changed, 17 insertions(+), 1 deletion(-) (limited to 'src/site/assets/styles') diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss index 0bc7c5e..e8b17c4 100644 --- a/src/site/assets/styles/_colors.scss +++ b/src/site/assets/styles/_colors.scss @@ -69,3 +69,15 @@ $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/style.scss b/src/site/assets/styles/style.scss index 026f277..4ad0471 100644 --- a/src/site/assets/styles/style.scss +++ b/src/site/assets/styles/style.scss @@ -360,7 +360,7 @@ table.table { margin: 0 !important; } -.fucking-opl-shut-up { +.has-centered-items { display: flex; justify-content: center; align-items: center; @@ -399,3 +399,7 @@ table.table { } } } + +.dropdown-content a { + text-decoration: none; +} -- cgit v1.2.3