From ee80eec0571e77798de76401d68a5dfc75aaaa9e Mon Sep 17 00:00:00 2001 From: Daniel Aguilar Date: Fri, 1 Nov 2024 19:35:21 +0100 Subject: [PATCH] improve themes --- assets/css/stipplecore.css | 3 + assets/css/theme-default-dark.css | 160 ++-- assets/css/theme-default-light.css | 1163 ++++++++++++++-------------- 3 files changed, 695 insertions(+), 631 deletions(-) diff --git a/assets/css/stipplecore.css b/assets/css/stipplecore.css index 8b3fad1..6871134 100644 --- a/assets/css/stipplecore.css +++ b/assets/css/stipplecore.css @@ -92,6 +92,9 @@ .st-gap-lg { gap: var(--st-spacing-lg); } .st-gap-xl { gap: var(--st-spacing-xl); } + .st-flex-row { display: flex; flex-direction: row; } + .st-flex-col { display: flex; flex-direction: column; } + } diff --git a/assets/css/theme-default-dark.css b/assets/css/theme-default-dark.css index 906187c..a1926b9 100644 --- a/assets/css/theme-default-dark.css +++ b/assets/css/theme-default-dark.css @@ -82,6 +82,7 @@ } + /* **************************************************************** */ /* VARIABLES IN THEME EDITOR */ /* **************************************************************** */ @@ -179,88 +180,121 @@ fieldset { border: none; } - - .q-field--float.q-field--focused.q-field--standout .q-field__control, - .q-input .q-field__native, - .q-select .q-field__native { - font-weight: var(--st-font-weight-bold); + .q-field { + font-size: 14px; } + .q-file .q-field__native{ - .q-field--rounded.q-field--filled .q-field__control { - border-radius: 5px 5px 0 0; - } - - .q-field--rounded.q-field--outlined .q-field__control, - .q-field--rounded.q-field--standout .q-field__control { - border-radius: 5px; - box-shadow: none; - } - - .q-field--standout .text-white .q-field__label, - .q-field--standout .text-white .q-field__marginal, - .q-field--standout .text-white .q-field__native { - color: var(--q-color-white); + white-space: nowrap; + overflow: hidden; + } + .q-field__input, .q-field__native, .q-field__prefix, .q-field__suffix { + color: var(--st-text-2); } - - .q-field .q-field__control, .q-field .q-field__native, .q-field .q-field__marginal { - height: var( --st-component-height-md ); - min-height: var( --st-component-height-md ); + .q-field__control, .q-field--auto-height .q-field__control, .q-field__marginal { + height: 36px; + min-height: 36px; color: var(--st-text-2); } .q-field--auto-height.q-field--labeled .q-field__control-container { - padding-top: 0px; + padding-top: 0; } - - .q-input .q-field__native, .q-select .q-field__native { - font-weight: normal; - font-size: 1em; - } - - .q-field .q-field__control{ - padding: 0 12px; + .q-field--auto-height .q-field__control, .q-field--auto-height .q-field__native { + min-height: 36px; } - .q-field .q-field__control:before { - border: solid 1px var(--st-color-field-border); + .q-field--labeled { + margin-top: 25px; + } + + .q-field--labeled .q-field__native, .q-field--labeled .q-field__prefix, .q-field--labeled .q-field__suffix { + padding-top: unset; + padding-bottom: unset; + } + + .q-field--float .q-field__label, .q-field__label { + color: var(--st-text-1); + transform: translateY(-210%) scale(1); + font-weight: 500; + left: -10px; + } + + .q-field--labeled.q-field--standard .q-field__label, + .q-field--labeled.q-field--borderless .q-field__label { + left: 0px; + } + + .q-field--filled.q-field--rounded .q-field__control { + border-radius: 18px 18px 0 0; + } + + .q-field .q-field__control:before { + border-color: var(--st-color-field-border); } .q-field.q-field--highlighted .q-field__control:after { border-color: var(--st-color-primary); border-width: 1px; - transform: scale3d(1, 1, 1); } - - .q-select .q-field__control { - padding-right: 0px; + .q-field--outlined .q-field__control:hover:before { + border-color: color-mix(in srgb, var(--st-color-primary), transparent 50%); } - .q-field .q-field__control:has(input[type="number"]) - { - padding-right: 5px; + + /*=================================================================== + PLOTLY + ================================================================== */ + .plot-container.plotly svg.main-svg, + .plot-container.plotly svg.main-svg g.infolayer g.legend rect.bg{ + fill: none !important; } - .q-field:has(.q-field__label) - { - margin-top: 35px; + .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-bg{ + fill: #00000030 !important; } - - .q-field__label - { - font-size: var(--st-font-size-md); + .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-min, + .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-max{ + fill: var(--st-dashboard-bg-1) !important; + fill-opacity: 0.8 !important; } - - .q-field--labeled .q-field__native, .q-field--labeled .q-field__prefix, .q-field--labeled .q-field__suffix { - padding-top: 6px; + .plot-container.plotly div.modebar-container > div.modebar{ + } - - .q-field--float .q-field__label, .q-field__control-container .q-field__label { - transform: translateY(-45px); - left: -10px; - font-size: var(--st-font-size-md); - font-weight: 500; - color: var(--st-text-1); + .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group{ + background-color: var(--st-dashboard-bg-1) !important; + } + .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group > a.modebar-btn > svg.icon > path{ + fill: color-mix(in srgb, var(--st-color-primary), transparent 80%) !important; + } + .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group > a.modebar-btn:hover > svg.icon > path{ + fill: var(--st-color-primary) !important; + } + .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-max{ + fill: var(--st-dashboard-bg-1) !important; + fill-opacity: 0.8 !important; + } + .plot-container.plotly svg.main-svg g.treemaplayer g.slice path.surface, + .plot-container.plotly svg.main-svg g.funnelarealayer g.slice path.surface{ + stroke: var(--st-dashboard-bg-1) !important; + } + .plot-container.plotly text{ + font-family: var(--st-font-family) !important; } + .plot-container.plotly svg.main-svg g.infolayer text{ + fill: var(--st-text-1) !important; + } + .plot-container.plotly svg.main-svg g.cartesianlayer g.zerolinelayer path, + .plot-container.plotly svg.main-svg g.cartesianlayer g.zerolinelayer path{ + stroke: color-mix(in srgb, var(--st-color-neutral), transparent 0%) !important; + } + .plot-container.plotly svg.main-svg g.cartesianlayer g.gridlayer path{ + stroke: color-mix(in srgb, var(--st-color-neutral), transparent 60%) !important; + } + .plot-container.plotly svg.main-svg g.cartesianlayer g.xtick text, + .plot-container.plotly svg.main-svg g.cartesianlayer g.ytick text{ + fill: var(--st-text-2) !important; + } /*=================================================================== Button, Badge, Banner, chip... @@ -312,9 +346,7 @@ /*=================================================================== MISC (File, Skeleton) ================================================================== */ - .q-file .q-field__marginal { - padding-top: 27px; - } + .q-skeleton { background: var(--st-skeleton); } @@ -340,7 +372,7 @@ width: 4px; opacity: 0.8; } - + /*=================================================================== Menu, Item, Date, Time, Uploader, Card ================================================================== */ @@ -360,9 +392,7 @@ } - .q-field__control { - border-radius: var( --st-border-radius-sm ); - } + /*=================================================================== Radio, Checkbox diff --git a/assets/css/theme-default-light.css b/assets/css/theme-default-light.css index f27a9fb..33e6652 100644 --- a/assets/css/theme-default-light.css +++ b/assets/css/theme-default-light.css @@ -1,5 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap'); - :root.stipple-core{ +:root.stipple-core{ --st-color-primary: #0da2e7; --st-color-neutral: #d6d6d6; --st-color-field-border: #d6d6d6; @@ -13,7 +13,7 @@ --st-dashboard-bg-2: #ffffff; } :root.stipple-core{ - --st-text-1: #13192a; + --st-text-1: #1a2748; --st-text-2: #6b7280; --st-text-3: #777f92; --st-font-family: Outfit; @@ -83,631 +83,662 @@ } + /* **************************************************************** */ /* VARIABLES IN THEME EDITOR */ /* **************************************************************** */ :root.stipple-core { - --st-font-size-4xl: 2.5rem; - --st-font-size-3xl: 2.1rem; - --st-font-size-2xl: 1.8rem; - --st-font-size-xl: 1.5rem; - --st-font-size-lg: 1.2rem; - --st-font-size-md: 1rem; - --st-font-size-sm: 0.8rem; - --st-font-size-xs: 0.6rem; -} - - - -/*=================================================================== - APPLICATION -================================================================== */ -.stipple-core { - .q-btn.q-btn--active:enabled:not(.disabled):not(.q-btn--push), - .q-btn:active:enabled:not(.disabled):not(.q-btn--push) { - box-shadow: none !important; - } - .q-btn--actionable.q-btn--standard.q-btn--active .q-btn__wrapper:before, - .q-btn--actionable.q-btn--standard:active .q-btn__wrapper:before { - box-shadow: none !important; - } - - - - h1, h2, h3, h4, h5, h6{ - line-height: normal; - margin: 0px; - color: var(--st-text-1); - } - - /* ---------- Module ---------- */ - - .st-module { - box-shadow: var(--st-shadow-md); - border-radius: var(--st-border-radius-md); - background: var(--st-dashboard-bg-1 ); - margin: var(--st-spacing-md); - padding: var(--st-spacing-lg); - box-sizing: border-box; flex: 1; - transition: background 0.3s; - } - - .st-card-title { - font-size: var(--st-font-size-lg); - font-weight: bold; - color: var(--st-text-1); - margin-top: 0px; - margin-bottom: var(--st-spacing-md); - + --st-font-size-4xl: 2.5rem; + --st-font-size-3xl: 2.1rem; + --st-font-size-2xl: 1.8rem; + --st-font-size-xl: 1.5rem; + --st-font-size-lg: 1.2rem; + --st-font-size-md: 1rem; + --st-font-size-sm: 0.8rem; + --st-font-size-xs: 0.6rem; } - /*=================================================================== - Containers & Common + APPLICATION ================================================================== */ - - /* ---------- Common ---------- */ - hr{ - border: solid 0.5px var(--st-color-neutral); - } + .stipple-core { + .q-btn.q-btn--active:enabled:not(.disabled):not(.q-btn--push), + .q-btn:active:enabled:not(.disabled):not(.q-btn--push) { + box-shadow: none !important; + } + .q-btn--actionable.q-btn--standard.q-btn--active .q-btn__wrapper:before, + .q-btn--actionable.q-btn--standard:active .q-btn__wrapper:before { + box-shadow: none !important; + } + + + + h1, h2, h3, h4, h5, h6{ + line-height: normal; + margin: 0px; + color: var(--st-text-1); + } + + /* ---------- Module ---------- */ + + .st-module { + box-shadow: var(--st-shadow-md); + border-radius: var(--st-border-radius-md); + background: var(--st-dashboard-bg-1 ); + margin: var(--st-spacing-md); + padding: var(--st-spacing-lg); + box-sizing: border-box; flex: 1; + transition: background 0.3s; + } + + .st-card-title { + font-size: var(--st-font-size-lg); + font-weight: bold; + color: var(--st-text-1); + margin-top: 0px; + margin-bottom: var(--st-spacing-md); + + } + + + + + /*=================================================================== + Containers & Common + ================================================================== */ + + /* ---------- Common ---------- */ + hr{ + border: solid 0.5px var(--st-color-neutral); + } + + .container > .row, .st-dashboard > .row { + padding: 0; + } - .container > .row, .st-dashboard > .row { - padding: 0; - } - - body > .container { - padding: 0 20px; - margin: 0 auto; - } - - @media (max-width: 999px) { body > .container { - padding: 0 10px; + padding: 0 20px; + margin: 0 auto; + } + + @media (max-width: 999px) { + body > .container { + padding: 0 10px; + } + } + @media (max-width: 599px) { + body > .container { + padding: 0 5px; + } + } + + /*=================================================================== + FIELDS + ================================================================== */ + fieldset { + border: none; + } + .q-field { + font-size: 14px; + } + .q-file .q-field__native{ + + white-space: nowrap; + overflow: hidden; } - } - @media (max-width: 599px) { - body > .container { - padding: 0 5px; + .q-field__input, .q-field__native, .q-field__prefix, .q-field__suffix { + color: var(--st-text-2); + } + .q-field__control, .q-field--auto-height .q-field__control, .q-field__marginal { + height: 36px; + min-height: 36px; + color: var(--st-text-2); + } + + .q-field--auto-height.q-field--labeled .q-field__control-container { + padding-top: 0; + } + + .q-field--auto-height .q-field__control, .q-field--auto-height .q-field__native { + min-height: 36px; + } + + .q-field--labeled { + margin-top: 25px; + } + + .q-field--labeled .q-field__native, .q-field--labeled .q-field__prefix, .q-field--labeled .q-field__suffix { + padding-top: unset; + padding-bottom: unset; + } + + .q-field--float .q-field__label, .q-field__label { + color: var(--st-text-1); + transform: translateY(-210%) scale(1); + font-weight: 500; + left: -10px; + } + + .q-field--labeled.q-field--standard .q-field__label, + .q-field--labeled.q-field--borderless .q-field__label { + left: 0px; + } + + .q-field--filled.q-field--rounded .q-field__control { + border-radius: 18px 18px 0 0; + } + + .q-field .q-field__control:before { + border-color: var(--st-color-field-border); + } + .q-field.q-field--highlighted .q-field__control:after { + border-color: var(--st-color-primary); + border-width: 1px; + } + .q-field--outlined .q-field__control:hover:before { + border-color: color-mix(in srgb, var(--st-color-primary), transparent 50%); + } + + + /*=================================================================== + PLOTLY + ================================================================== */ + .plot-container.plotly svg.main-svg, + .plot-container.plotly svg.main-svg g.infolayer g.legend rect.bg{ + fill: none !important; + } + .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-bg{ + fill: #00000030 !important; + } + .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-min, + .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-max{ + fill: var(--st-dashboard-bg-1) !important; + fill-opacity: 0.8 !important; + } + .plot-container.plotly div.modebar-container > div.modebar{ + + } + .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group{ + background-color: var(--st-dashboard-bg-1) !important; + } + .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group > a.modebar-btn > svg.icon > path{ + fill: color-mix(in srgb, var(--st-color-primary), transparent 80%) !important; + } + .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group > a.modebar-btn:hover > svg.icon > path{ + fill: var(--st-color-primary) !important; + } + .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-max{ + fill: var(--st-dashboard-bg-1) !important; + fill-opacity: 0.8 !important; + } + .plot-container.plotly svg.main-svg g.treemaplayer g.slice path.surface, + .plot-container.plotly svg.main-svg g.funnelarealayer g.slice path.surface{ + stroke: var(--st-dashboard-bg-1) !important; + } + .plot-container.plotly text{ + font-family: var(--st-font-family) !important; + } + + .plot-container.plotly svg.main-svg g.infolayer text{ + fill: var(--st-text-1) !important; + } + .plot-container.plotly svg.main-svg g.cartesianlayer g.zerolinelayer path, + .plot-container.plotly svg.main-svg g.cartesianlayer g.zerolinelayer path{ + stroke: color-mix(in srgb, var(--st-color-neutral), transparent 0%) !important; + } + .plot-container.plotly svg.main-svg g.cartesianlayer g.gridlayer path{ + stroke: color-mix(in srgb, var(--st-color-neutral), transparent 60%) !important; + } + .plot-container.plotly svg.main-svg g.cartesianlayer g.xtick text, + .plot-container.plotly svg.main-svg g.cartesianlayer g.ytick text{ + fill: var(--st-text-2) !important; + } + + /*=================================================================== + Button, Badge, Banner, chip... + ================================================================== */ + .q-badge { + font-size: var(--st-font-size-md); + font-weight: var(--st-font-weight-bold); + padding: 4px 6px; + } + .q-btn .q-badge.q-badge--floating { + padding-top: 1px; + padding-bottom: 1px; + } + .q-banner { + border-radius: 5px; + font-weight: var(--st-font-weight-bold); + } + .q-ripple { + display: none; + } + + .q-btn .q-btn__wrapper:before { + box-shadow: none; + } + .q-btn.q-btn--active:enabled:not(.disabled):not(.q-btn--push):not(.q-btn--outline), + .q-btn:active:enabled:not(.disabled):not(.q-btn--push):not(.q-btn--outline) { + box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3); + } + .q-btn.q-btn--active .q-btn__wrapper:before, + .q-btn:active .q-btn__wrapper:before { + box-shadow: none; + } + .q-btn { + font-weight: var(--st-font-weight-bold); + } + .q-btn-group { + box-shadow: none; + } + .q-chip{ + background: var(--st-color-primary) !important; + color: var(--st-color-field-text-dimmed); + font-weight: var(--st-font-weight-bold); + + .q-chip__icon { + color: var(--st-color-field-text-dimmed); + } + } + + /*=================================================================== + MISC (File, Skeleton) + ================================================================== */ + + .q-skeleton { + background: var(--st-skeleton); + } + .q-knob, .q-rating{ + color: var(--st-color-primary); + } + + .q-avatar{ + .q-avatar__content { + background: var(--st-color-primary) !important; + color: var(--st-color-field-text-dimmed); + } + } + + /*=================================================================== + Scrolls + ================================================================== */ + .q-scrollarea { + padding-right: 20px; + } + .q-scrollarea .q-scrollarea__thumb { + border-radius: 5px; + width: 4px; + opacity: 0.8; + } + + /*=================================================================== + Menu, Item, Date, Time, Uploader, Card + ================================================================== */ + .q-menu, .q-date, .q-time, .q-uploader, .q-card { + background-color: var( --st-dashboard-bg-2 ); + } + + .q-menu .q-item{ + min-height: var( --st-component-height-lg); + } + .q-item.q-manual-focusable--focused > .q-focus-helper { + opacity: 0.15; + } + .q-item__section--side { + min-width: 20px; + padding-right: 10px; + } + + + + + /*=================================================================== + Radio, Checkbox + ================================================================== */ + .q-checkbox__bg { + border-radius: 3px; + } + + .q-radio, .q-checkbox { + margin-top: var(--st-spacing-xs); + margin-right: var(--st-spacing-md); + margin-bottom: var(--st-spacing-xs); + margin-left: var(--st-spacing-xs); + .q-radio__inner, .q-checkbox__inner { + width: 0.42em; height: 0.42em; min-width: 0.42em; + .q-radio__bg, .q-checkbox__bg { + width: 100%; height: 100%; left: 0; top: 0; + } + } + .q-checkbox__inner--falsy { + .q-checkbox__bg { + border: 1.7px solid var(--st-color-neutral); + } + } + .q-radio__inner--falsy{ + .q-radio__bg path { + fill: var(--st-color-neutral); + } + } + .q-radio__label, .q-checkbox__label { padding-left: 0.5em; } + } + + + /*=================================================================== + Date-Time + ================================================================== */ + .q-date, + .q-time { + box-shadow: none; + } + + + /*=================================================================== + Focusable + ================================================================== */ + .q-focusable:focus>.q-focus-helper, .q-hoverable:hover>.q-focus-helper, .q-manual-focusable--focused>.q-focus-helper { + background: var(--st-color-primary) !important; + } + + + .q-item--active, .q-item.q-router-link--active { + font-weight: var(--st-font-weight-bold); + color: var(--st-color-primary) !important; + } + + + + /*=================================================================== + Sliders + ================================================================== */ + + .q-slider__pin-text-container { + padding: 0 8px; + min-height: 20px; + } + .q-slider__pin-text { + font-weight: var(--st-font-weight-bold); + } + + .q-slider__track-markers { + color: currentColor; + } + + .q-slider--inactive .q-slider__thumb--h { + width: 16px !important; + height: 16px !important; + } + + .q-slider__track { + background: var( --st-color-field-background-dimmed ); + .q-slider__inner { + background: none !important; + } + .q-slider__selection { + color: var( --st-color-primary ); } + } + + + + + /*=================================================================== + Table + ================================================================== */ + .q-table th { + color: var(--st-text-1); + font-weight: 900; + font-size: 0.8rem; } - - /*=================================================================== - FIELDS - ================================================================== */ - fieldset { + .q-table__card { + position: relative; border: none; + box-shadow: none; } - - .q-field--float.q-field--focused.q-field--standout .q-field__control, - .q-input .q-field__native, - .q-select .q-field__native { + .q-table__top { + padding: 0 5px; + } + .q-table__title { font-weight: var(--st-font-weight-bold); + font-size: 14px; } - - .q-field--rounded.q-field--filled .q-field__control { - border-radius: 5px 5px 0 0; + .q-table__middle { + background: transparent; + border-top-right-radius: 5px; + border-top-left-radius: 5px; } - - .q-field--rounded.q-field--outlined .q-field__control, - .q-field--rounded.q-field--standout .q-field__control { - border-radius: 5px; - box-shadow: none; + .q-table__middle + .q-table__bottom { + border-top: none; } - - .q-field--standout .text-white .q-field__label, - .q-field--standout .text-white .q-field__marginal, - .q-field--standout .text-white .q-field__native { - color: var(--q-color-white); + .q-table__bottom { + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + padding-top: 0; + padding-bottom: 0; + font-size: 0.8rem; } - - .q-field .q-field__control, .q-field .q-field__native, .q-field .q-field__marginal { - height: var( --st-component-height-md ); - min-height: var( --st-component-height-md ); + .q-table__sort-icon { + position: relative; + z-index: 1; + font-size: 25px; + } + .q-table__sort-icon:before { + font-family: Material Icons; + content: "arrow_drop_up"; + -webkit-font-feature-settings: "liga" 1; + -moz-font-feature-settings: "liga" 1; + font-feature-settings: "liga" 1; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--st-dashboard-module); + z-index: 5; + color: var(--q-color-secondary); + } + .q-table tbody tr { color: var(--st-text-2); } - - .q-field--auto-height.q-field--labeled .q-field__control-container { - padding-top: 0px; + .q-table td { + font-size: 0.9rem; } - - - .q-input .q-field__native, .q-select .q-field__native { - font-weight: normal; - font-size: 1em; + .q-table__select { + font-size: 12px; } - .q-field .q-field__control{ - padding: 0 12px; - } - - .q-field .q-field__control:before { - border: solid 1px var(--st-color-field-border); - } - .q-field.q-field--highlighted .q-field__control:after { - border-color: var(--st-color-primary); - border-width: 1px; - transform: scale3d(1, 1, 1); - } - - .q-select .q-field__control { - padding-right: 0px; - } - - .q-field .q-field__control:has(input[type="number"]) - { - padding-right: 5px; - } - .q-field:has(.q-field__label) - { - margin-top: 35px; - } - - .q-field__label - { - font-size: var(--st-font-size-md); - } - - .q-field--labeled .q-field__native, .q-field--labeled .q-field__prefix, .q-field--labeled .q-field__suffix { - padding-top: 6px; - } - - .q-field--float .q-field__label, .q-field__control-container .q-field__label { - transform: translateY(-45px); - left: -10px; - font-size: var(--st-font-size-md); - font-weight: 500; - color: var(--st-text-1); - } - - - /*=================================================================== - Button, Badge, Banner, chip... - ================================================================== */ - .q-badge { - font-size: var(--st-font-size-md); - font-weight: var(--st-font-weight-bold); - padding: 4px 6px; - } - .q-btn .q-badge.q-badge--floating { - padding-top: 1px; - padding-bottom: 1px; - } - .q-banner { - border-radius: 5px; - font-weight: var(--st-font-weight-bold); - } - .q-ripple { - display: none; - } - .q-btn .q-btn__wrapper:before { - box-shadow: none; - } - .q-btn.q-btn--active:enabled:not(.disabled):not(.q-btn--push):not(.q-btn--outline), - .q-btn:active:enabled:not(.disabled):not(.q-btn--push):not(.q-btn--outline) { - box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3); - } - .q-btn.q-btn--active .q-btn__wrapper:before, - .q-btn:active .q-btn__wrapper:before { - box-shadow: none; - } - .q-btn { - font-weight: var(--st-font-weight-bold); - } - .q-btn-group { - box-shadow: none; - } - .q-chip{ - background: var(--st-color-primary) !important; - color: var(--st-color-field-text-dimmed); - font-weight: var(--st-font-weight-bold); - - .q-chip__icon { - color: var(--st-color-field-text-dimmed); + .q-table__container{ + background: none; + } + + .q-table td, .q-table th, .q-table thead, .q-table tr { + border-color: var(--st-color-field-border); } - } - - /*=================================================================== - MISC (File, Skeleton) - ================================================================== */ - .q-file .q-field__marginal { - padding-top: 27px; - } - .q-skeleton { - background: var(--st-skeleton); - } - .q-knob, .q-rating{ - color: var(--st-color-primary); - } - .q-avatar{ - .q-avatar__content { - background: var(--st-color-primary) !important; - color: var(--st-color-field-text-dimmed); + .q-table__card { + color: unset; } - } - /*=================================================================== - Scrolls - ================================================================== */ - .q-scrollarea { - padding-right: 20px; - } - .q-scrollarea .q-scrollarea__thumb { - border-radius: 5px; - width: 4px; - opacity: 0.8; - } - - /*=================================================================== - Menu, Item, Date, Time, Uploader, Card - ================================================================== */ - .q-menu, .q-date, .q-time, .q-uploader, .q-card { - background-color: var( --st-dashboard-bg-2 ); - } + .q-table{ + th { + font-weight: bold; + } + tbody td:before { + background: color-mix(in srgb, var(--st-color-primary), transparent 85%); + } + } - .q-menu .q-item{ - min-height: var( --st-component-height-lg); - } - .q-item.q-manual-focusable--focused > .q-focus-helper { - opacity: 0.15; - } - .q-item__section--side { - min-width: 20px; - padding-right: 10px; - } - + - .q-field__control { - border-radius: var( --st-border-radius-sm ); - } + /*=================================================================== + Big Number + ================================================================== */ - /*=================================================================== - Radio, Checkbox - ================================================================== */ -.q-checkbox__bg { - border-radius: 3px; - } - - .q-radio, .q-checkbox { - margin-top: var(--st-spacing-xs); - margin-right: var(--st-spacing-md); - margin-bottom: var(--st-spacing-xs); - margin-left: var(--st-spacing-xs); - .q-radio__inner, .q-checkbox__inner { - width: 0.42em; height: 0.42em; min-width: 0.42em; - .q-radio__bg, .q-checkbox__bg { - width: 100%; height: 100%; left: 0; top: 0; - } + .st-big-number { + margin: 0 auto; + color: var(--q-color-white); + text-align: center; + border-radius: 5px; + padding: 1rem 0; + } + .st-big-number .q-badge { + font-weight: 900; + font-size: large; + margin: 0.5rem; + padding: 8px 15px; + display: block; + background: none; + color: var(--st-text-1); } - .q-checkbox__inner--falsy { - .q-checkbox__bg { - border: 1.7px solid var(--st-color-neutral); + .st-big-number__num { + font-weight: var(--st-font-weight-bold); + display: block; + color: var(--st-text-1); + font-size: 1.5rem; + } + .st-big-number__num .q-icon { + display: none; + margin-left: -30px; + } + + @media (max-width: 599px) { + .st-big-number__num .q-icon { + display: inline-block; } } - .q-radio__inner--falsy{ - .q-radio__bg path { - fill: var(--st-color-neutral); + @media (min-width: 1023px) { + .st-big-number__num { + font-size: 2rem; + } + .st-big-number__num .q-icon { + display: inline-block; } } - .q-radio__label, .q-checkbox__label { padding-left: 0.5em; } - } - - - /*=================================================================== - Date-Time - ================================================================== */ -.q-date, -.q-time { - box-shadow: none; - } - - - /*=================================================================== - Focusable - ================================================================== */ - .q-focusable:focus>.q-focus-helper, .q-hoverable:hover>.q-focus-helper, .q-manual-focusable--focused>.q-focus-helper { - background: var(--st-color-primary) !important; - } - - - .q-item--active, .q-item.q-router-link--active { - font-weight: var(--st-font-weight-bold); - color: var(--st-color-primary) !important; - } - - - - /*=================================================================== - Sliders - ================================================================== */ - - .q-slider__pin-text-container { - padding: 0 8px; - min-height: 20px; - } - .q-slider__pin-text { - font-weight: var(--st-font-weight-bold); - } - - .q-slider__track-markers { - color: currentColor; - } - - .q-slider--inactive .q-slider__thumb--h { - width: 16px !important; - height: 16px !important; - } - - .q-slider__track { - background: var( --st-color-field-background-dimmed ); - .q-slider__inner { - background: none !important; + .st-big-number--positive .st-big-number__num .q-icon { + color: var(--q-color-positive); } - .q-slider__selection { - color: var( --st-color-primary ); + .st-big-number--negative .st-big-number__num .q-icon { + color: var(--q-color-negative); + } + .st-big-number__icon { + font-size: 20px; + width: 2em; + height: 2em; + border-radius: 50%; + text-align: center; + margin: 0.5rem 0; + padding-right: 1px; } - } - - - - /*=================================================================== - Table - ================================================================== */ -.q-table th { - color: var(--st-text-1); - font-weight: 900; - font-size: 0.8rem; -} -.q-table__card { - position: relative; - border: none; - box-shadow: none; -} -.q-table__top { - padding: 0 5px; -} -.q-table__title { - font-weight: var(--st-font-weight-bold); - font-size: 14px; -} -.q-table__middle { - background: transparent; - border-top-right-radius: 5px; - border-top-left-radius: 5px; -} -.q-table__middle + .q-table__bottom { - border-top: none; -} -.q-table__bottom { - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; - padding-top: 0; - padding-bottom: 0; - font-size: 0.8rem; -} -.q-table__sort-icon { - position: relative; - z-index: 1; - font-size: 25px; -} -.q-table__sort-icon:before { - font-family: Material Icons; - content: "arrow_drop_up"; - -webkit-font-feature-settings: "liga" 1; - -moz-font-feature-settings: "liga" 1; - font-feature-settings: "liga" 1; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--st-dashboard-module); - z-index: 5; - color: var(--q-color-secondary); -} -.q-table tbody tr { - color: var(--st-text-2); -} -.q-table td { - font-size: 0.9rem; -} -.q-table__select { - font-size: 12px; -} - - - .q-table__container{ - background: none; - } - .q-table td, .q-table th, .q-table thead, .q-table tr { - border-color: var(--st-color-field-border); - } - - .q-table__card { - color: unset; - } - - .q-table{ - th { - font-weight: bold; + /*=================================================================== + Header + ================================================================== */ + + .st-header { + background: var(--q-color-white); + padding-left: 20px; } - tbody td:before { - background: color-mix(in srgb, var(--st-color-primary), transparent 85%); + @media (max-width: 599px) { + .st-header { + padding-top: 20px; + padding-bottom: 0; + } } - } - - - /*=================================================================== - Big Number - ================================================================== */ - -.st-big-number { - margin: 0 auto; - color: var(--q-color-white); - text-align: center; - border-radius: 5px; - padding: 1rem 0; + @media (min-width: 600px) { + .st-header .st-header__title + .st-header__title, + .st-header .st-header__title + .st-logo, + .st-header .st-logo + .st-header__title, + .st-header .st-logo + .st-logo { + margin-left: 15px; + padding-left: 15px; + border-left: 1px solid var(--st-dashboard-line); + } } -.st-big-number .q-badge { - font-weight: 900; - font-size: large; - margin: 0.5rem; - padding: 8px 15px; - display: block; - background: none; - color: var(--st-text-1); + .st-logo { + height: 20px; } -.st-big-number__num { - font-weight: var(--st-font-weight-bold); + .st-header__title, + .st-logo { + text-align: center; display: block; - color: var(--st-text-1); - font-size: 1.5rem; - } -.st-big-number__num .q-icon { - display: none; - margin-left: -30px; } - - @media (max-width: 599px) { - .st-big-number__num .q-icon { + @media (min-width: 600px) { + .st-header__title, + .st-logo { display: inline-block; + text-align: left; } } - @media (min-width: 1023px) { - .st-big-number__num { - font-size: 2rem; - } - .st-big-number__num .q-icon { - display: inline-block; - } - } -.st-big-number--positive .st-big-number__num .q-icon { - color: var(--q-color-positive); - } -.st-big-number--negative .st-big-number__num .q-icon { - color: var(--q-color-negative); + .st-logo { + margin: 0 auto; } -.st-big-number__icon { - font-size: 20px; - width: 2em; - height: 2em; - border-radius: 50%; - text-align: center; - margin: 0.5rem 0; - padding-right: 1px; + @media (min-width: 600px) { + .st-logo { + margin: auto; + } } - - - /*=================================================================== - Header - ================================================================== */ -.st-header { - background: var(--q-color-white); - padding-left: 20px; - } - @media (max-width: 599px) { - .st-header { - padding-top: 20px; - padding-bottom: 0; + + /*=================================================================== + Footer + ================================================================== */ + + .st-footer { + font-size: 0.8rem; + padding-top: 2rem !important; + text-align: center; + } + .st-footer .st-logo { + height: 17px; + margin-right: 2px; + } + + + + /*=================================================================== + St Field Label + ================================================================== */ + + .st-field-label { + font-size: var(--st-font-size-md); + font-weight: 500; + color: var(--st-text-1); + padding-top: 7px; + padding-bottom: 2px; + margin: 0; + + > p{ + margin: 0px; + } + } + + .st-center { + margin: auto; } } - -@media (min-width: 600px) { -.st-header .st-header__title + .st-header__title, -.st-header .st-header__title + .st-logo, -.st-header .st-logo + .st-header__title, -.st-header .st-logo + .st-logo { - margin-left: 15px; - padding-left: 15px; - border-left: 1px solid var(--st-dashboard-line); - } -} -.st-logo { - height: 20px; -} -.st-header__title, -.st-logo { - text-align: center; - display: block; -} -@media (min-width: 600px) { -.st-header__title, -.st-logo { - display: inline-block; - text-align: left; - } -} -.st-logo { - margin: 0 auto; -} -@media (min-width: 600px) { -.st-logo { - margin: auto; - } -} - - - /*=================================================================== - Footer - ================================================================== */ - -.st-footer { - font-size: 0.8rem; - padding-top: 2rem !important; - text-align: center; + + + /* ---------- Layout ---------- */ + + .max-width-xs { + max-width: 600px; } -.st-footer .st-logo { - height: 17px; - margin-right: 2px; + .max-width-sm { + max-width: 800px; } - - - - /*=================================================================== - St Field Label - ================================================================== */ - - .st-field-label { - font-size: var(--st-font-size-md); - font-weight: 500; - color: var(--st-text-1); - padding-top: 7px; - padding-bottom: 2px; - margin: 0; - - > p{ - margin: 0px; - } + .max-width-md { + max-width: 1000px; } - - .st-center { - margin: auto; + .max-width-lg { + max-width: 1200px; } -} - - -/* ---------- Layout ---------- */ - -.max-width-xs { - max-width: 600px; -} -.max-width-sm { - max-width: 800px; -} -.max-width-md { - max-width: 1000px; -} -.max-width-lg { - max-width: 1200px; -} -.max-width-xl { - max-width: 1400px; -} + .max-width-xl { + max-width: 1400px; + } + \ No newline at end of file