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/style.scss') 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/style.scss | 62 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) (limited to 'src/site/assets/styles/style.scss') 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 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/style.scss | 139 ++++++++++++++++++++++---------------- 1 file changed, 79 insertions(+), 60 deletions(-) (limited to 'src/site/assets/styles/style.scss') 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/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src/site/assets/styles/style.scss') 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/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/site/assets/styles/style.scss') 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/style.scss | 94 ++++++++++++++++++++++++++++++--------- 1 file changed, 74 insertions(+), 20 deletions(-) (limited to 'src/site/assets/styles/style.scss') 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/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/site/assets/styles/style.scss') 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