diff options
Diffstat (limited to 'src/site/assets/styles/style.scss')
| -rw-r--r-- | src/site/assets/styles/style.scss | 414 |
1 files changed, 414 insertions, 0 deletions
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss new file mode 100644 index 0000000..1152f43 --- /dev/null +++ b/src/site/assets/styles/style.scss @@ -0,0 +1,414 @@ +// Let's first take care of having the customized colors ready. +@import './_bulma_colors_extender.scss'; +@import './_colors.scss'; + +// Bulma/Buefy customization +@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; +$size-normal: 1rem; + +/* @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, body, #__nuxt, #__layout, .default-body, #app { + // height: 100% !important; +} + +html { + // font-size: 100%; + font-size: 14px; + background-color: $base-1; +} + +a { + color: #5e81ac; + &:hover { + color: #81a1c1; + text-decoration: underline; + } +} +body, +p, +h1, +h1.title, +h2.subtitle, +label.label, +strong { + color: $textColor; +} +label.label { + font-weight: 400; +} + +h4 { + font-size: 2em; + font-weight: 700; + line-height: 1.25em; +} + +@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; + } +} + +.text-center { + text-align: center; +} + +hr { + background-color: #c7c7c757; + height: 1px; +} +// Bulma color changes. +.tooltip.is-top.is-primary:before { + border-top: 5px solid #20222b; +} +.tooltip.is-primary:after { + background: #20222b; +} + +div#drag-overlay { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 100; + div.background { + background: rgba(0, 0, 0, 0.9); + position: absolute; + top: 3%; + left: 3%; + width: 94%; + height: 94%; + border: 2px dashed #fff; + border-radius: 10px; + box-shadow: 0 0 0 4px #ffffff00, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); + } + + div.drop { + width: 100%; + color: white; + position: absolute; + height: 100%; + align-items: center; + display: flex; + justify-content: center; + font-size: 2em; + } +} + +section.hero { + &.dashboard { + // background-color: $backgroundLight1 !important; + div.hero-body { + align-items: baseline; + } + } +} + +section input, +section a.button { + font-size: 14px !important; +} +section input, +section p.control a.button { + border-left: 0px !important; + border-top: 0px !important; + border-right: 0px !important; + border-radius: 0px !important; + box-shadow: 0 0 0 !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 { + background: #fbfbfb; +} + +/* + Register and Login forms +*/ + +section.hero.is-login, +section.hero.is-register { + a { + font-size: 1.25em; + line-height: 2.5em; + + &.button { + font-size: 14px !important; + } + } + input { + background: #323846; + border-radius: 0 !important; + } +} +/* +section#login, +section#register { background-color: $backgroundLight1 !important; } +section#login input, +section#register input, +section#login a.button, +section#register a.button { + font-size: 14px !important; +} +section#login input, +section#register input, +section#login p.control a.button, +section#register p.control a.button { + border-left: 0px !important; + border-top: 0px !important; + border-right: 0px !important; + border-radius: 0px !important; + box-shadow: 0 0 0 !important; +} + +section#login p.control a.button, +section#register p.control a.button { margin-left: 10px !important; } +section#login p.control a#loginBtn, +section#register p.control a#loginBtn { border-right: 0px !important; } +section#login p.control a#registerBtn, +section#register p.control a#registerBtn { border-left: 0px !important; } + +section#login a.is-text, +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; +} + +/* 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; + &:hover { + background-color: $base-2; + } + &.big { + font-size: 1.25rem; + } +} */ +svg.waves { + display: block; + bottom: -1px; + left: 0px; + right: 0px; + width: 100%; + background-color: transparent; + pointer-events: none; + user-select: none; + overflow: hidden; +} +div.field-body > div.field { + text-align: left; +} +table.table { + background: $base-2; + color: $textColor; + border: 0; + thead { + th, + td { + color: $textColor; + } + } + tfoot { + background: $base-1; + tr.table-footer { + .wrapper { + display: flex; + color: $textColor; + justify-content: space-evenly; + } + } + } + th, + td { + border-color: #ffffff1c; + } +} + +.chibisafe-input input, +.chibisafe-select select, +.chibisafe-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; + } +} + +.chibisafe-input .icon { + color: #323846 !important; +} + + +// vue-bar +.vb > .vb-dragger { + z-index: 5; + width: 12px; + right: 0; +} + +.vb > .vb-dragger > .vb-dragger-styler { + backface-visibility: hidden; + transform: rotate3d(0, 0, 0, 0); + 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; +} + +.chibisafe-on-border.field.is-floating-label .label:before { + background-color: $chibisafe; +} + +.is-chibisafe.divider::after, .is-chibisafe.divider::before { + background-color: #21252d; +} + +.chibisafe.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; +} + +.button { + color: $textColor; + &:hover { + color: white; + } +} |