diff --git a/.metals/metals.h2.db b/.metals/metals.h2.db new file mode 100644 index 000000000..26db161c2 Binary files /dev/null and b/.metals/metals.h2.db differ diff --git a/.metals/metals.lock.db b/.metals/metals.lock.db new file mode 100644 index 000000000..cd8829720 --- /dev/null +++ b/.metals/metals.lock.db @@ -0,0 +1,6 @@ +#FileLock +#Thu Jun 03 13:17:35 MSK 2021 +server=localhost\:49498 +hostName=localhost +method=file +id=179d160d759e31fddd8c8d572ddc41374b06357e5f4 diff --git a/web/app/static/img/logo-square/logo-square_dark.png b/web/app/static/img/logo-square/logo-square_dark.png new file mode 100644 index 000000000..feab0bf7f Binary files /dev/null and b/web/app/static/img/logo-square/logo-square_dark.png differ diff --git a/web/app/static/img/logo-square/logo-square_light.png b/web/app/static/img/logo-square/logo-square_light.png new file mode 100644 index 000000000..33ec16670 Binary files /dev/null and b/web/app/static/img/logo-square/logo-square_light.png differ diff --git a/web/app/static/img/navbar-brand/navbar-brand_light.png b/web/app/static/img/navbar-brand/navbar-brand_light.png index 4fcdb69cf..1c8d9b797 100644 Binary files a/web/app/static/img/navbar-brand/navbar-brand_light.png and b/web/app/static/img/navbar-brand/navbar-brand_light.png differ diff --git a/web/frontend/src/common/Navbar.vue b/web/frontend/src/common/Navbar.vue index 9bef7efc0..d5b6e1020 100644 --- a/web/frontend/src/common/Navbar.vue +++ b/web/frontend/src/common/Navbar.vue @@ -170,8 +170,8 @@ export default { .user-menu text-transform: none - a.glowing - text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #9965f4, 0 0 70px #9965f4, 0 0 80px #9965f4, 0 0 100px #9965f4, 0 0 150px #9965f4 + // a.glowing + // text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #9965f4, 0 0 70px #9965f4, 0 0 80px #9965f4, 0 0 100px #9965f4, 0 0 150px #9965f4 .badge-btn position: relative @@ -187,7 +187,7 @@ export default { top: 1px height: 18px border-radius: 4px - background-color: #9965f4 + // background-color: #9965f4 transition: transform 0.2s /* Animation */ diff --git a/web/frontend/src/common/NumberInput.vue b/web/frontend/src/common/NumberInput.vue index 39d83edeb..8e3b0e817 100644 --- a/web/frontend/src/common/NumberInput.vue +++ b/web/frontend/src/common/NumberInput.vue @@ -74,8 +74,8 @@ border-width: 1px input - border-top-color: theme.$white - border-bottom-color: theme.$white - color: theme.$white + border-top-color: rgb(var(--color-white)) + border-bottom-color: rgb(var(--color-white)) + color: rgb(var(--color-white)) width: 5rem \ No newline at end of file diff --git a/web/frontend/src/common/PullToReveal.vue b/web/frontend/src/common/PullToReveal.vue index ad9d7f7d4..4f0350c63 100644 --- a/web/frontend/src/common/PullToReveal.vue +++ b/web/frontend/src/common/PullToReveal.vue @@ -201,7 +201,7 @@ export default { .showing-edge width: 100% height: 10px - background-color: #4E5D6C + background-color: rgb(var(--color-gray-200)) position: absolute top: 0 left: 0 diff --git a/web/frontend/src/common/RadioGroup.vue b/web/frontend/src/common/RadioGroup.vue index 075d5f5a5..96bde79c1 100644 --- a/web/frontend/src/common/RadioGroup.vue +++ b/web/frontend/src/common/RadioGroup.vue @@ -26,7 +26,7 @@ export default { @use "~main/theme" .btn-group-toggle - background: theme.$body-bg + background: rgb(var(--color-body-bg)) border-radius: 300px .btn border: solid thin darken(white, 60) diff --git a/web/frontend/src/common/SearchInput.vue b/web/frontend/src/common/SearchInput.vue index d9761ca8f..9fc3dfa96 100644 --- a/web/frontend/src/common/SearchInput.vue +++ b/web/frontend/src/common/SearchInput.vue @@ -42,17 +42,17 @@ opacity: .8 input - background-color: theme.$gray-200 - border: 1px solid theme.$gray-200 - color: theme.$white + background-color: rgb(var(--color-input-dark-bg)) + border: 1px solid rgb(var(--color-input-dark-bg)) + color: rgb(var(--color-text)) outline: none padding: .2em .5em .2em 2em width: 100% height: 100% &::placeholder - color: theme.$gray-600 + color: rgb(var(--color-gray-600)) &:focus - border-color: theme.$white + border-color: rgb(var(--color-white)) \ No newline at end of file diff --git a/web/frontend/src/common/Select.vue b/web/frontend/src/common/Select.vue index 99af067a2..7bf8c6813 100644 --- a/web/frontend/src/common/Select.vue +++ b/web/frontend/src/common/Select.vue @@ -52,18 +52,18 @@ $tsd-dropdown-with: 220px text-align: left width: $tsd-dropdown-with color: white - background-color: theme.$primary + background-color: rgb(var(--color-primary)) border-radius: 0px border: none box-shadow: none &:hover color: white - background-color: theme.$primary + background-color: rgb(var(--color-primary)) &[aria-expanded="true"], &:focus color: white !important - background-color: theme.$primary !important + background-color: rgb(var(--color-primary)) !important // border: none !important &:after diff --git a/web/frontend/src/common/StreamingBox.vue b/web/frontend/src/common/StreamingBox.vue index 73a9dede7..be2b3e913 100644 --- a/web/frontend/src/common/StreamingBox.vue +++ b/web/frontend/src/common/StreamingBox.vue @@ -267,7 +267,7 @@ export default { position: absolute height: $height z-index: 10 - background-color: theme.$white + background-color: rgb(var(--color-white)) border-radius: $height top: 10px left: 10px @@ -356,7 +356,7 @@ export default { font-size: 12px line-height: 20px text-align: center - color: theme.$white + color: rgb(var(--color-white)) .muted-status-wrapper position: absolute diff --git a/web/frontend/src/main/auth.scss b/web/frontend/src/main/auth.scss index 37986cf8c..b1d0b9673 100644 --- a/web/frontend/src/main/auth.scss +++ b/web/frontend/src/main/auth.scss @@ -3,7 +3,7 @@ #logreg-forms{ margin:10vh auto; padding: 0em 1.5em; - background-color: $color-form-bg; + background-color: rgb(var(--color-form-bg)); box-shadow: 0 7px 7px rgba(0, 0, 0, 0.12), 0 12px 40px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); diff --git a/web/frontend/src/main/ent.scss b/web/frontend/src/main/ent.scss index c492ba011..bf9af0521 100644 --- a/web/frontend/src/main/ent.scss +++ b/web/frontend/src/main/ent.scss @@ -2,7 +2,7 @@ @import 'mixin'; table.pricing { - background: darken($body-bg, 10); + background: rgb(var(--color-body-bg-d-10)); th { font-size: 1.2em; } @@ -11,19 +11,19 @@ table.pricing { .pricing { .btn-group-toggle { - background: $body-bg; + background: rgb(var(--color-body-bg)); .btn { - border: solid thin darken(white, 60); + border: solid thin rgb(var(--color-white-d-60)); } } .price-matrix { div[class^="col-"] { padding: 0px; - border-top: solid thin darken(white, 60); - border-bottom: solid thin darken(white, 60); - border-right: solid thin darken(white, 60); - background: $body-bg; + border-top: solid thin rgb(var(--color-white-d-60)); + border-bottom: solid thin rgb(var(--color-white-d-60)); + border-right: solid thin rgb(var(--color-white-d-60)); + background: rgb(var(--color-body-bg)); >div { padding-left: 1rem; @@ -32,7 +32,7 @@ table.pricing { .price-header { height: 15rem; - background: lighten($body-bg, 3); + background: rgb(var(--color-body-bg-l-3)); &.dh-pack-header { height: 12rem; } @@ -49,8 +49,8 @@ table.pricing { display: flex; flex-direction: column; justify-content: center; - border-bottom: solid thin darken(white, 60); - border-top: solid thin darken(white, 60); + border-bottom: solid thin rgb(var(--color-white-d-60)); + border-top: solid thin rgb(var(--color-white-d-60)); } .feature-header { @@ -59,7 +59,7 @@ table.pricing { display: flex; flex-direction: column; justify-content: center; - color: darken($gray-100, 30); + color: rgb(var(--color-gray-100-d-30)); } .features { @@ -84,20 +84,20 @@ table.pricing { i { padding-right: 0.7rem; padding-top: 0.35rem; - color: lighten($primary, 12); + color: rgb(var(--color-primary-l-12)); } } } @include respond-above(sm) { >div:first-child { - border-left: solid thin darken(white, 60); + border-left: solid thin rgb(var(--color-white-d-60)); } } @include respond-below(md) { >div { - border-left: solid thin darken(white, 60); + border-left: solid thin rgb(var(--color-white-d-60)); } } @@ -115,7 +115,7 @@ table.pricing { .price-unit { font-size: 18px; - color: darken($gray-100, 30); + color: rgb(var(--color-gray-100-d-30)); } } } @@ -124,7 +124,7 @@ table.pricing { font-weight: normal; .input-group { width: 7.5rem; - border: solid thin darken(white, 60); + border: solid thin rgb(var(--color-white-d-60)); button.btn-outline-primary { border-radius: 0px !important; } @@ -137,7 +137,7 @@ table.pricing { } .btn-group-toggle { .btn { - border: solid thin darken(white, 60); + border: solid thin rgb(var(--color-white-d-60)); font-size: 0.9rem; box-shadow: none; } @@ -146,7 +146,7 @@ table.pricing { .custom-radio.recommended { .tag { margin-left: 0.5em; - background: $primary; + background: rgb(var(--color-primary)); border: solid thin; border-radius: 4px; padding: 0px 3px; diff --git a/web/frontend/src/main/main.scss b/web/frontend/src/main/main.scss index e2d59237d..2d863d5b6 100644 --- a/web/frontend/src/main/main.scss +++ b/web/frontend/src/main/main.scss @@ -1,6 +1,59 @@ @import 'theme'; @import 'mixin'; +// Dark theme by default +:root { + --color-bg: 235 235 235; + --color-bg-body: 255 255 255; + --color-bg-secondary: 166 125 246; + --color-bg-video: 173 183 195; + --color-bg-overlay: 250 250 250; + --color-footer-bg: 172 182 194; + --color-footer-text: 64 84 100; + --color-input-bg: 233 233 233; + --color-input-text: 35 48 75; + --color-input-dark-bg: 235 235 235; + --color-icon-active: 166 128 229; + --color-icon-disabled: 211 190 245; + --color-white-primary: 255 255 255; + --color-primary-white: 153 101 244; + --color-text: 40 48 58; + --color-text-subdued: 126 130 133; + --color-text-inverted: 235 235 235; + --color-color: 255 255 255; + --color-color-2: 204 204 204; + --color-primary: 153 101 244; + --color-gray-100: 40 48 58; + --color-gray-200: 255 255 255; + --color-gray-200-2: 204 204 204; + --color-gray-200-hover: 153 101 244; + --color-gray-600: 134 142 150; + --color-form-bg: 255 255 255; + --color-body-bg: 255 255 255; + --color-bg-dark: 245 245 245; + --color-white: 0 0 0; + --color-black: 255 255 255; + --color-success: 92 184 92; + --color-danger: 223 112 109; + --color-primary-l-12: 191 158 248; + --color-primary-l-10: 185 149 247; + --color-primary-l-7: 175 134 246; + --color-primary-l-5: 169 125 246; + --color-primary-d-8: 128 63 241; + --color-primary-d-10: 121 53 241; + --color-primary-d-20: 93 16 227; + --color-primary-d-35: 64 11 155; + --color-body-bg-l-10: 230 230 230; + --color-body-bg-l-5p: 241 241 241; + --color-body-bg-l-3: 48 70 90; + --color-body-bg-d-5: 242 242 242; + --color-body-bg-d-10: 230 230 230; + --color-gray-100-d-20: 159 159 159; + --color-gray-100-d-30: 184 184 184; + --color-white-d-60: 102 102 102; + --color-bg-dark-d-10: 154 101 244; +} + /*** Global styles */ body { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -18,6 +71,7 @@ body { button, .btn { border-width: 2px; border-radius: 300px; + &.no-corner { border-radius: 0; border-width: 1px; @@ -41,14 +95,14 @@ button, .btn { .custom-control-label { &::before { - border: $primary solid 2px; + border: rgb(var(--color-primary)) solid 2px; } } .custom-switch { .custom-control-label { &::before { - background: $color-disabled; + background: rgb(var(--color-color) / 0.4) } } } @@ -91,8 +145,8 @@ footer { .bootstrap-select { button { &.dropdown-toggle { - background-color: $primary; - border-color: $primary; + background-color: rgb(var(--color-primary)); + border-color: rgb(var(--color-primary)); } border-radius: 0; } @@ -122,7 +176,7 @@ footer { text-transform: none; } a.glowing { - text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px $primary, 0 0 70px $primary, 0 0 80px $primary, 0 0 100px $primary, 0 0 150px $primary; + text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(var(--color-primary)), 0 0 70px rgb(var(--color-primary)), 0 0 80px rgb(var(--color-primary)), 0 0 100px rgb(var(--color-primary)), 0 0 150px rgb(var(--color-primary)); } .badge-btn { @@ -156,7 +210,7 @@ footer { } hr { - background-color: $color-form-bg; + background-color: rgb(var(--color-form-bg)); } .alert { @@ -164,12 +218,12 @@ hr { } a.link { - color: lighten($primary, 7) !important; + color: rgb(var(--color-primary-l-7)) !important; text-decoration: none; background-color: transparent; &:hover { - color: $primary !important; + color: rgb(var(--color-primary)) !important; text-decoration: underline !important; cursor: pointer !important; } @@ -178,12 +232,14 @@ a.link { .icon-btn { background-color: transparent; border: none; - color: rgba(255,255,255,0.75); + // color: rgba(255,255,255,0.75); + color: rgb(var(--color-primary-white) / .75); &:hover, &:active, &:focus { background-color: transparent !important; border: none !important; - color: rgba(255,255,255, 1.0) !important; + // color: rgba(255,255,255, 1.0) !important; + color: rgb(var(--color-primary-white)) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } @@ -202,7 +258,7 @@ a.link { .form-container { margin: 3em 0em; padding: 2.5em; - background: rgb(var(--color-body-bg)); + background: rgb(var(--color-bg-body)); -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1) !important; box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1) !important; border: none !important; @@ -217,9 +273,9 @@ a.link { color: rgb(var(--color-input-text)); &[readonly] { - background-color: darken($color-disabled, 20); + background-color: rgb(var(--color-color-2) / 0.4); color: white; - border: 1px solid $color-form-bg; + border: 1px solid rgb(var(--color-form-bg)); } } @@ -257,20 +313,20 @@ a.link { } .swal2-popup { - background-color: darken($body-bg, 5) !important; + background-color: rgb(var(--color-body-bg-d-5)) !important; border-radius: unset !important; .swal2-title, .swal2-content, #swal2-content { - color: $gray-100 !important; + color: rgb(var(--color-gray-100)) !important; text-align: left !important; } &.swal2-modal { .swal2-content { - color: $gray-100 !important; + color: rgb(var(--color-gray-100)) !important; font-size: 1rem !important; } .swal2-title { - color: $gray-100 !important; + color: rgb(var(--color-gray-100)) !important; font-size: 1.4rem !important; } .swal2-actions { @@ -281,7 +337,7 @@ a.link { border: none !important; &.swal2-confirm { - background-color: $primary !important; + background-color: rgb(var(--color-primary)) !important; } } .bootstrap-select { @@ -310,10 +366,10 @@ a.link { width: 100% !important; } .slider-selection { - background: lighten($primary, 10); + background: rgb(var(--color-primary-l-10)); } .slider-handle { - background: $primary; + background: rgb(var(--color-primary)); } } .slider.slider-horizontal:hover, .slider.slider-vertical:hover { @@ -339,7 +395,7 @@ a.link { .accordion, #accordion { .card { - background: $body-bg; + background: rgb(var(--color-body-bg)); } .card-header { a { @@ -371,6 +427,8 @@ a.link { /** Shared styles for printer and print cards */ .card { + background-color: rgb(var(--color-gray-200)); + .gauge-container { padding: 0 16px; } @@ -378,10 +436,10 @@ a.link { &.settings { text-align: center; padding-top: 7px; - border-bottom: solid thin $gray-200; + border-bottom: solid thin rgb(var(--color-gray-200-2)); } - background: $color-bg-dark; + background: rgb(var(--color-bg-dark)); .row { padding: 0.3em 0em 0.1em; text-align: center; @@ -396,7 +454,7 @@ a.link { display: flex; justify-content: space-between; align-items: center; - border-bottom: solid thin $gray-200; + border-bottom: solid thin rgb(var(--color-gray-200-2)); label { font-size: 1rem; text-align: left; @@ -412,3 +470,38 @@ a.link { #pass-change-form button[type="submit"] { margin: 1.8em 0em 0.1em 0em; } + +.text-muted { + color: rgb(var(--color-text) / .4) !important; +} + +.btn-outline { + color: rgb(var(--color-text)); + + &:hover { + color: rgb(var(--color-text)); + } +} + +.btn-outline-secondary { + color: rgb(var(--color-text)); + border-color: rgb(var(--color-text)); + + &:hover { + background-color: rgb(var(--color-text)); + color: rgb(var(--color-text-inverted)); + border-color: rgb(var(--color-text)); + } +} + +.dropdown-menu { + background-color: rgb(var(--color-gray-200)); + + .dropdown-item { + color: rgb(var(--color-text)); + + &:hover { + background-color: rgb(var(--color-white) / .075); + } + } +} \ No newline at end of file diff --git a/web/frontend/src/main/printer.scss b/web/frontend/src/main/printer.scss index 4f05ae765..bb4bc1bcf 100644 --- a/web/frontend/src/main/printer.scss +++ b/web/frontend/src/main/printer.scss @@ -8,7 +8,8 @@ position: relative; outline: none; - background-color: black; + // background-color: black; + background-color: rgb(var(--color-bg-video)); .webcam_rotated { position: relative; @@ -155,9 +156,9 @@ &.failure-alert { a { - color: darken($primary, 20); + color: rgb(var(--color-primary-d-20)); &:hover { - color: darken($primary, 35); + color: rgb(var(--color-primary-d-35)); } } } @@ -167,7 +168,7 @@ width: 33px; height: 33px; position: relative; - color: $gray-200; + color: rgb(var(--color-gray-200-2)); font-size: 1rem; padding: 0rem 1.5rem; i { @@ -175,8 +176,8 @@ transform: translate(-50%, -50%); } &.pressed { - color: lighten($primary, 5); - border-bottom: solid thin $primary; + color: rgb(var(--color-primary-l-5)); + border-bottom: solid thin rgb(var(--color-primary)); } } @@ -189,7 +190,7 @@ height: 60px !important; margin: 8px !important; // border: solid thick; - background: $primary; + background: rgb(var(--color-primary)); } .xy-controls { @@ -222,7 +223,7 @@ .btn { border: solid thin; &.active { - background: $primary; + background: rgb(var(--color-primary)); } } } @@ -244,7 +245,7 @@ height:100%; top:0; left:0; - background:rgba(0,0,0,0.7); + background:rgb(var(--color-bg-overlay) / 0.8); opacity: 1; } } @@ -262,7 +263,7 @@ a { text-align: center; border: thin dashed; - border-color: darken($primary, 10); + border-color: rgb(var(--color-primary-d-10)); padding: 5em 3em; &:hover { @@ -293,7 +294,7 @@ form#printer_form { } } .form-control { - border: 1px solid $gray-200; + border: 1px solid rgb(var(--color-gray-200)); } .sensitivity { @@ -326,7 +327,7 @@ form#printer_form { color: $primary !important; &:after { - background: $primary; + background: rgb(var(--color-primary)); } } } @@ -363,7 +364,7 @@ form#printer_form { #connected { i { - color: $success; + color: rgb(var(--color-success)); } } } @@ -453,15 +454,15 @@ form#printer_form { .card-img-overlay { top: initial; padding: 0.5rem; - background-color: rgba($gray-200, 0.7); + background-color: rgb(var(--color-gray-200) / 0.7) } } .upload-box { &.dropzone { border: thin dashed; - border-color: darken($primary, 10); - color: $primary; + border-color: rgb(var(--color-primary-d-10)); + color: rgb(var(--color-primary)); background: none; margin: auto; min-height: 194px; @@ -481,7 +482,7 @@ form#printer_form { &.vue-dropzone > .dz-preview .dz-details { border-radius: 20px; - background-color: $primary; + background-color: rgb(var(--color-primary)); } } @@ -490,7 +491,7 @@ form#printer_form { padding: 2rem 0rem; .token { padding: 1.5rem 3rem 2.5rem; - border: $color-form-bg thin dashed; + border: rgb(var(--color-form-bg)) thin dashed; margin-bottom: 2rem; text-align: center; @@ -505,7 +506,7 @@ form#printer_form { .option-drawer{ width:100%; margin-bottom: -0.5rem; - background: $color-bg-dark; + background: rgb(var(--color-bg-dark)); .panel-heading { padding: 0; border:0; @@ -518,7 +519,7 @@ form#printer_form { color: $primary; line-height: 0.8; &:hover { - color: darken($primary, 8); + color: rgb(var(--color-primary-d-8)); } } } @@ -535,6 +536,6 @@ form#printer_form { transition-duration: 0.2s; } hr { - background-color: lighten($body-bg, 10); + background-color: rgb(var(--color-body-bg-l-10)); } } diff --git a/web/frontend/src/main/themes.js b/web/frontend/src/main/themes.js index 583a1ded1..7680309e1 100644 --- a/web/frontend/src/main/themes.js +++ b/web/frontend/src/main/themes.js @@ -1,7 +1,9 @@ +/* eslint no-multi-spaces: 0 */ + import Vue from 'vue' -// Enum for less errors +// Enum with existing color themes for less errors export const Themes = { Light: 'Light', Dark: 'Dark', @@ -19,29 +21,99 @@ export const theme = Vue.observable({ /** * Colors for each theme * + * NOTICE #1: + * Add colors in full HEX format like "#ffffff". Shortcuts like "#fff" will cause errors. + * + * NOTICE #2: + * If you add new color here, don't forget to add it's default value to main.scss file: + * 1. Add color into this list + * 2. Open page in browser + * 3. Copy calculated css-variable from DevTools (will look like "--color-bg: 35 49 65;") + * 4. Paste it in main.scss file inside :root styles + * * Colors usage in CSS: - * background: rgb(var(--color-bg)) + * background: rgb(var(--color-body-bg-d-10)) + * + * Why translate HEX to RGB? + * It's a trick to be able to add transparency to any color without creating new variable. For + * example, primary color "#9965f4" will be trasformed to "153 101 244" (RGB numbers). Since rgb() + * func allows us to add transparency with "/" after numbers, we can write semi-trasparent primary + * color as "rgb(153 101 244 / .5)" or using variable "rgb(var(--color-primary) / .5)". If you'll + * find more elegant way to implement it or you won't need transparency change, feel free to get rid + * of HEXtoRGB() function and use colors directly. + * + * HINT: install 'Color Highlight' VSCode extension to see actual colors here */ const colors = [ - {name: 'bg', values: {[Themes.Light]: '#EBEBEB', [Themes.Dark]: '#233141'}}, - {name: 'body-bg', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#2D3E4F'}}, - {name: 'bg-secondary', values: {[Themes.Light]: '#A67DF6', [Themes.Dark]: '#505D6D'}}, + {name: 'bg', values: {[Themes.Light]: '#EBEBEB', [Themes.Dark]: '#233141'}}, + {name: 'bg-body', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#2D3E4F'}}, + {name: 'bg-secondary', values: {[Themes.Light]: '#A67DF6', [Themes.Dark]: '#505D6D'}}, + {name: 'bg-video', values: {[Themes.Light]: '#ADB7C3', [Themes.Dark]: '#000000'}}, + {name: 'bg-overlay', values: {[Themes.Light]: '#FAFAFA', [Themes.Dark]: '#000000'}}, + + {name: 'footer-bg', values: {[Themes.Light]: '#ACB6C2', [Themes.Dark]: '#000000'}}, + {name: 'footer-text', values: {[Themes.Light]: '#405464', [Themes.Dark]: '#989898'}}, + + {name: 'input-bg', values: {[Themes.Light]: '#E9E9E9', [Themes.Dark]: '#FFFFFF'}}, + {name: 'input-text', values: {[Themes.Light]: '#23304B', [Themes.Dark]: '#495057'}}, + {name: 'input-dark-bg', values: {[Themes.Light]: '#EBEBEB', [Themes.Dark]: '#4E5D6C'}}, + + {name: 'icon-active', values: {[Themes.Light]: '#A680E5', [Themes.Dark]: '#4B5B69'}}, + {name: 'icon-disabled', values: {[Themes.Light]: '#D3BEF5', [Themes.Dark]: '#A8AEB6'}}, + + {name: 'white-primary', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#9965f4'}}, + {name: 'primary-white', values: {[Themes.Light]: '#9965f4', [Themes.Dark]: '#FFFFFF'}}, + + {name: 'text', values: {[Themes.Light]: '#28303A', [Themes.Dark]: '#EBEBEB'}}, + {name: 'text-subdued', values: {[Themes.Light]: '#7E8285', [Themes.Dark]: '#FFFFFF'}}, + {name: 'text-inverted', values: {[Themes.Light]: '#EBEBEB', [Themes.Dark]: '#28303A'}}, + + {name: 'color', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#FFFFFF'}}, + {name: 'color-2', values: {[Themes.Light]: '#CCCCCC', [Themes.Dark]: '#CCCCCC'}}, + + + // From SASS variables + + {name: 'primary', values: {[Themes.Light]: '#9965f4', [Themes.Dark]: '#9965f4'}}, + + {name: 'gray-100', values: {[Themes.Light]: '#28303A', [Themes.Dark]: '#EBEBEB'}}, + {name: 'gray-200', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#4E5D6C'}}, + {name: 'gray-200-2', values: {[Themes.Light]: '#cccccc', [Themes.Dark]: '#4E5D6C'}}, + {name: 'gray-200-hover', values: {[Themes.Light]: '#9965f4', [Themes.Dark]: '#596a7b'}}, + {name: 'gray-600', values: {[Themes.Light]: '#868e96', [Themes.Dark]: '#868e96'}}, + + {name: 'form-bg', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#2b3e50'}}, + {name: 'body-bg', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#2B3E50'}}, + {name: 'bg-dark', values: {[Themes.Light]: '#f5f5f5', [Themes.Dark]: '#293b4d'}}, + {name: 'white', values: {[Themes.Light]: '#000000', [Themes.Dark]: '#FFFFFF'}}, + {name: 'dark-white', values: {[Themes.Light]: '#2B3E50', [Themes.Dark]: '#FFFFFF'}}, + {name: 'black', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#000000'}}, + {name: 'success', values: {[Themes.Light]: '#5cb85c', [Themes.Dark]: '#5cb85c'}}, + {name: 'danger', values: {[Themes.Light]: '#df706d', [Themes.Dark]: '#d9534f'}}, + - {name: 'footer-bg', values: {[Themes.Light]: '#ACB6C2', [Themes.Dark]: '#000000'}}, - {name: 'footer-text', values: {[Themes.Light]: '#405464', [Themes.Dark]: '#989898'}}, + // Derivatives from SASS functions (lighted, darken, etc.) - {name: 'input-bg', values: {[Themes.Light]: '#E9E9E9', [Themes.Dark]: '#FFFFFF'}}, - {name: 'input-text', values: {[Themes.Light]: '#23304B', [Themes.Dark]: '#495057'}}, + {name: 'primary-l-12', values: {[Themes.Light]: '#bf9ef8', [Themes.Dark]: '#bf9ef8'}}, + {name: 'primary-l-10', values: {[Themes.Light]: '#b995f7', [Themes.Dark]: '#b995f7'}}, + {name: 'primary-l-7', values: {[Themes.Light]: '#af86f6', [Themes.Dark]: '#af86f6'}}, + {name: 'primary-l-5', values: {[Themes.Light]: '#a97df6', [Themes.Dark]: '#a97df6'}}, + {name: 'primary-d-8', values: {[Themes.Light]: '#803ff1', [Themes.Dark]: '#803ff1'}}, + {name: 'primary-d-10', values: {[Themes.Light]: '#7935f1', [Themes.Dark]: '#7935f1'}}, + {name: 'primary-d-20', values: {[Themes.Light]: '#5d10e3', [Themes.Dark]: '#5d10e3'}}, + {name: 'primary-d-35', values: {[Themes.Light]: '#400b9b', [Themes.Dark]: '#400b9b'}}, - {name: 'icon-active', values: {[Themes.Light]: '#A680E5', [Themes.Dark]: '#4B5B69'}}, - {name: 'icon-disabled', values: {[Themes.Light]: '#D3BEF5', [Themes.Dark]: '#A8AEB6'}}, + {name: 'body-bg-l-10', values: {[Themes.Light]: '#e6e6e6', [Themes.Dark]: '#3d5871'}}, + {name: 'body-bg-l-5p', values: {[Themes.Light]: '#F1F1F1', [Themes.Dark]: '#344b61'}}, + {name: 'body-bg-l-3', values: {[Themes.Light]: '#30465a', [Themes.Dark]: '#30465a'}}, + {name: 'body-bg-d-5', values: {[Themes.Light]: '#f2f2f2', [Themes.Dark]: '#22313f'}}, + {name: 'body-bg-d-10', values: {[Themes.Light]: '#e6e6e6', [Themes.Dark]: '#19242f'}}, - {name: 'primary', values: {[Themes.Light]: '#9965f4', [Themes.Dark]: '#9965f4'}}, - {name: 'gray-200', values: {[Themes.Light]: '#FFFFFF', [Themes.Dark]: '#4E5D6C'}}, - {name: 'gray-200-hover', values: {[Themes.Light]: '#9965f4', [Themes.Dark]: '#596a7b'}}, + {name: 'gray-100-d-20', values: {[Themes.Light]: '#9f9f9f', [Themes.Dark]: '#b8b8b8'}}, + {name: 'gray-100-d-30', values: {[Themes.Light]: '#b8b8b8', [Themes.Dark]: '#9f9f9f'}}, - {name: 'text', values: {[Themes.Light]: '#28303A', [Themes.Dark]: '#EBEBEB'}}, - {name: 'text-subdued', values: {[Themes.Light]: '#7E8285', [Themes.Dark]: '#FFFFFF'}}, + {name: 'white-d-60', values: {[Themes.Light]: '#666666', [Themes.Dark]: '#666666'}}, + {name: 'bg-dark-d-10', values: {[Themes.Light]: '#9A65F4', [Themes.Dark]: '#17222c'}}, ] // Converts HEX color to RGB @@ -51,9 +123,9 @@ function HEXtoRGB(color) { return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] } -// Defines theme by localStorage and/or system settings +// Defines theme by value saved in LocalStorage or system settings export function initTheme() { - console.log('init theme!') + console.log('Init theme') let themeValue = localStorage.getItem('colorTheme') let themeSystem = themeValue === null || themeValue === Themes.System diff --git a/web/frontend/src/main/vue-slider-theme.scss b/web/frontend/src/main/vue-slider-theme.scss index 0840ab90d..7d2172cd7 100644 --- a/web/frontend/src/main/vue-slider-theme.scss +++ b/web/frontend/src/main/vue-slider-theme.scss @@ -13,7 +13,7 @@ /* process style */ .vue-slider-process { - background-color: theme.$primary; + background-color: rgb(var(--color-primary)); border-radius: 15px; } @@ -61,8 +61,8 @@ text-align: center; color: #fff; border-radius: 5px; - border-color: theme.$primary; - background-color: theme.$primary; + border-color: rgb(var(--color-primary)); + background-color: rgb(var(--color-primary)); box-sizing: content-box; } .vue-slider-dot-tooltip-inner::after { diff --git a/web/frontend/src/octoprint_tunnel/OctoPrintTunnelPage.vue b/web/frontend/src/octoprint_tunnel/OctoPrintTunnelPage.vue index 4d779bc84..804d326eb 100644 --- a/web/frontend/src/octoprint_tunnel/OctoPrintTunnelPage.vue +++ b/web/frontend/src/octoprint_tunnel/OctoPrintTunnelPage.vue @@ -99,7 +99,7 @@ export default { .tunnel-iframe width: 100% height: 100vh - background: theme.$white + background: rgb(var(--color-white)) position: absolute top: 0 left: 0 @@ -111,7 +111,7 @@ export default { bottom: 15px right: 15px box-shadow: 2px 2px 10px rgba(0,0,0,.3) - background-color: theme.$body-bg + background-color: rgb(var(--color-body-bg)) padding: 10px max-width: 300px z-index: 10 diff --git a/web/frontend/src/print_shot_feedback/PrintShotFeedbackApp.vue b/web/frontend/src/print_shot_feedback/PrintShotFeedbackApp.vue index 97c5e48b4..80001fcf6 100644 --- a/web/frontend/src/print_shot_feedback/PrintShotFeedbackApp.vue +++ b/web/frontend/src/print_shot_feedback/PrintShotFeedbackApp.vue @@ -158,8 +158,8 @@ export default { opacity: 0.5 .page-visiting - color: theme.$primary + color: rgb(var(--color-primary)) .page-unvisited - color: darken(theme.$secondary, 20) + color: rgb(var(--color-gray-100-d-20)) diff --git a/web/frontend/src/print_shot_feedback/components/Consent.vue b/web/frontend/src/print_shot_feedback/components/Consent.vue index 8539f2038..4638300ba 100644 --- a/web/frontend/src/print_shot_feedback/components/Consent.vue +++ b/web/frontend/src/print_shot_feedback/components/Consent.vue @@ -103,10 +103,10 @@ export default { @use "~main/theme" .consent-section - background: theme.$color-bg-dark + background: rgb(var(--color-bg-dark)) .feedback-estimate font-size: 1.2em font-weight: bolder - color: theme.$primary + color: rgb(var(--color-primary)) diff --git a/web/frontend/src/printers/GCodesPage.vue b/web/frontend/src/printers/GCodesPage.vue index 182649fc1..f194aea42 100644 --- a/web/frontend/src/printers/GCodesPage.vue +++ b/web/frontend/src/printers/GCodesPage.vue @@ -309,11 +309,11 @@ @use "~main/theme" .gcodes-wrapper - background-color: theme.$body-bg + background-color: rgb(var(--color-body-bg)) padding: 2em .control-panel - border-bottom: 1px solid theme.$table-border-color + border-bottom: 1px solid rgb(var(--color-bg)) padding-bottom: 16px .search-input @@ -322,7 +322,7 @@ .sorting-panel display: flex padding: 1em calc(1em + 30px) 1em 1em - border-bottom: 1px solid theme.$table-border-color + border-bottom: 1px solid rgb(var(--color-bg)) .sorting-option flex: 1 @@ -364,7 +364,7 @@ padding: .6em 1em &:nth-child(2n) - background-color: lighten(theme.$body-bg, 5%) + background-color: rgb(var(--color-body-bg-l-5p)) .item-info display: flex @@ -386,7 +386,7 @@ transition: background-color .2s ease-out &:hover - background-color: theme.$danger + background-color: rgb(var(--color-danger)) cursor: pointer @media (max-width: 768px) diff --git a/web/frontend/src/printers/PrinterControlPage.vue b/web/frontend/src/printers/PrinterControlPage.vue index 75feb1617..0c8c03197 100644 --- a/web/frontend/src/printers/PrinterControlPage.vue +++ b/web/frontend/src/printers/PrinterControlPage.vue @@ -180,5 +180,6 @@ diff --git a/web/frontend/src/printers/PrinterListPage.vue b/web/frontend/src/printers/PrinterListPage.vue index 98b2bab2f..cb978176e 100644 --- a/web/frontend/src/printers/PrinterListPage.vue +++ b/web/frontend/src/printers/PrinterListPage.vue @@ -330,6 +330,6 @@ export default { margin-top: 1.5rem .menu-bar - background-color: darken(theme.$color-bg-dark, 10) + background-color: rgb(var(--color-bg-dark-d-10)) padding: 0.75rem diff --git a/web/frontend/src/printers/PrinterSettingsPage.vue b/web/frontend/src/printers/PrinterSettingsPage.vue index 5d7fc94f0..f7a73bd3b 100644 --- a/web/frontend/src/printers/PrinterSettingsPage.vue +++ b/web/frontend/src/printers/PrinterSettingsPage.vue @@ -512,13 +512,13 @@ export default { .section-title padding-bottom: 5px - border-bottom: 1px solid theme.$white + border-bottom: 1px solid rgb(var(--color-white)) .form-label font-size: 18px section.danger .section-title - color: theme.$danger - border-color: theme.$danger + color: rgb(var(--color-danger)) + border-color: rgb(var(--color-danger)) diff --git a/web/frontend/src/printers/PrinterWizardPage.vue b/web/frontend/src/printers/PrinterWizardPage.vue index bdaca6399..0cea63ef6 100644 --- a/web/frontend/src/printers/PrinterWizardPage.vue +++ b/web/frontend/src/printers/PrinterWizardPage.vue @@ -6,8 +6,11 @@
- + + + + +

{{verifiedPrinter.name}}

Successfully linked to your account!


@@ -31,7 +34,7 @@

@@ -334,13 +337,13 @@ export default { .wizard-container padding: 1em - background: theme.$body-bg + background: rgb(var(--color-body-bg)) -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3) !important box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3) !important border: none !important .btn-back - color: theme.$white + color: rgb(var(--color-white)) min-width: auto .container @@ -353,7 +356,7 @@ export default { margin-bottom: 8px .img-container - background: darken(theme.$body-bg, 5) + background: rgb(var(--color-body-bg-d-5)) padding: 1rem text-align: center @@ -368,12 +371,12 @@ img text-align: center width: 21rem height: 60px - background-color: black - border: black - color: white + background-color: rgb(var(--color-body-bg-d-10)) + color: rgb(var(--color-text)) font-size: 2rem font-weight: 500 letter-spacing: 0.5em + border: none .helper text-align: center @@ -401,7 +404,7 @@ li // Step label (not active) .wizard-container .vue-form-wizard .wizard-nav-pills > li:not(.active) > a > span - color: theme.$white + color: rgb(var(--color-white)) // Adjust numbers in the circles (form steps) .wizard-nav.wizard-nav-pills .wizard-icon-circle i @@ -426,4 +429,12 @@ li left: calc(50% - #{$size / 2}) bottom: calc(50% - #{$size / 2}) right: calc(50% - #{$size / 2}) + +.success-checkmark + width: 256px + height: 170px + margin-bottom: 1.5rem + + path + fill: rgb(var(--color-dark-white)) diff --git a/web/frontend/src/printers/SharePrinter.vue b/web/frontend/src/printers/SharePrinter.vue index af53217c5..4ee46777a 100644 --- a/web/frontend/src/printers/SharePrinter.vue +++ b/web/frontend/src/printers/SharePrinter.vue @@ -166,7 +166,7 @@ @use "~main/theme" hr - background-color: theme.$white + background-color: rgb(var(--color-white)) .shared-link-text color: #fff !important diff --git a/web/frontend/src/printers/SharedPrinterPage.vue b/web/frontend/src/printers/SharedPrinterPage.vue index a0a01cf44..068f9d8c1 100644 --- a/web/frontend/src/printers/SharedPrinterPage.vue +++ b/web/frontend/src/printers/SharedPrinterPage.vue @@ -18,8 +18,7 @@

You are viewing an awesome 3D print your friend shared specifically with you on

- +


@@ -41,6 +40,7 @@ import WebRTCConnection from '@lib/webrtc' import StreamingBox from '@common/StreamingBox' import PullToReveal from '@common/PullToReveal.vue' import Navbar from '@common/Navbar.vue' +import DarkLightImage from '@common/DarkLightImage.vue' export default { name: 'SharedPrinterPage', @@ -48,6 +48,7 @@ export default { StreamingBox, PullToReveal, Navbar, + DarkLightImage, }, created(){ this.shareToken = split(window.location.pathname, '/').slice(-2, -1).pop() @@ -75,17 +76,19 @@ export default { } - - diff --git a/web/frontend/src/prints/PrintCard.vue b/web/frontend/src/prints/PrintCard.vue index 8d6cf939d..652943cf5 100644 --- a/web/frontend/src/prints/PrintCard.vue +++ b/web/frontend/src/prints/PrintCard.vue @@ -24,16 +24,14 @@ class="no-corner no-shadow" :disabled="!canShowDetectiveView" > - + - + + + + + @@ -212,6 +210,7 @@ import VideoBox from '../common/VideoBox' import Gauge from '../common/Gauge' import DetectiveWorking from 'common/DetectiveWorking' import printerStockImgSrc from '@static/img/3d_printer.png' +import DarkLightImage from '@common/DarkLightImage.vue' export default { name: 'PrintCard', @@ -219,7 +218,8 @@ export default { components: { VideoBox, Gauge, - DetectiveWorking + DetectiveWorking, + DarkLightImage, }, data: () => { @@ -425,11 +425,14 @@ export default { justify-content: space-between align-items: center -.seg-control-icon +.seg-control-icon, ::v-deep .seg-control-icon img height: 1.2rem +.info-icon path + fill: rgb(var(--color-dark-white)) + .feedback-section - background-color: theme.$color-bg-dark + background-color: rgb(var(--color-bg-dark)) .bounce-enter-active animation: bounce-in .5s @@ -461,4 +464,7 @@ export default { background-color: rgba(0,0,0,.6) text-align: center padding: 10px 0 + +::v-deep .vjs-poster, ::v-deep .video-js + background-color: rgb(var(--color-bg-video)) diff --git a/web/frontend/src/prints/PrintsPage.vue b/web/frontend/src/prints/PrintsPage.vue index 3e718a233..92b7c3501 100644 --- a/web/frontend/src/prints/PrintsPage.vue +++ b/web/frontend/src/prints/PrintsPage.vue @@ -11,7 +11,7 @@ sticky-side="both" on-stick="onMenuStick" > - +
@@ -273,15 +273,14 @@ export default { } - - diff --git a/web/frontend/src/simple/App.vue b/web/frontend/src/simple/App.vue index 1e9d3fb49..8ccda084b 100644 --- a/web/frontend/src/simple/App.vue +++ b/web/frontend/src/simple/App.vue @@ -70,12 +70,12 @@ export default { @use "~main/theme" b - color: theme.$primary + color: rgb(var(--color-primary)) img width: 200px display: block .example - color: theme.$primary + color: rgb(var(--color-primary)) diff --git a/web/frontend/src/users/UserPreferencesPage.vue b/web/frontend/src/users/UserPreferencesPage.vue index 14da733f2..6d83a2607 100644 --- a/web/frontend/src/users/UserPreferencesPage.vue +++ b/web/frontend/src/users/UserPreferencesPage.vue @@ -14,15 +14,16 @@
- - + +
DARK LIGHT
- - + + +
@@ -1050,11 +1051,11 @@ section:not(:first-child) height: 18px margin: 10px - path + path, circle fill: rgb(var(--color-icon-disabled)) transition: all .3s ease-out - &.active path + &.active path, &.active circle fill: rgb(var(--color-icon-active)) .label @@ -1066,7 +1067,7 @@ section:not(:first-child) .active-indicator position: absolute - width: calc(100% - 10px) + width: calc(100% - 9px) height: 30px top: 0 bottom: 0