From 9940dabfff7c588a4fd1aa150f2002000738c3ff Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 11 Mar 2024 10:16:56 +0100 Subject: [PATCH 1/6] :bug: Fix z-index of workspace context menu --- .../resources/styles/common/framework.scss | 2 +- .../styles/common/refactor/basic-rules.scss | 2 +- .../styles/common/refactor/z-index.scss | 5 +- frontend/resources/styles/main-default.scss | 1 - .../styles/main/partials/context-menu.scss | 2 +- .../styles/main/partials/dropdown.scss | 2 +- .../styles/main/partials/exception-page.scss | 2 +- .../styles/main/partials/loader.scss | 2 +- .../styles/main/partials/tool-bar.scss | 48 ------------------- .../main/ui/components/context_menu_a11y.scss | 2 +- .../src/app/main/ui/dashboard/comments.scss | 2 +- .../src/app/main/ui/dashboard/templates.scss | 2 +- .../app/main/ui/workspace/color_palette.scss | 2 +- .../ui/workspace/color_palette_ctx_menu.scss | 2 +- .../app/main/ui/workspace/context_menu.scss | 2 +- .../src/app/main/ui/workspace/palette.scss | 2 +- .../src/app/main/ui/workspace/presence.scss | 2 +- .../src/app/main/ui/workspace/sidebar.scss | 2 +- .../main/ui/workspace/sidebar/layer_item.scss | 2 +- .../sidebar/options/menus/frame_grid.scss | 2 +- .../sidebar/options/menus/typography.scss | 2 +- .../ui/workspace/text_palette_ctx_menu.scss | 2 +- .../app/main/ui/workspace/top_toolbar.scss | 2 +- 23 files changed, 23 insertions(+), 71 deletions(-) delete mode 100644 frontend/resources/styles/main/partials/tool-bar.scss diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 5a22085ee..a90e22dbd 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -1011,7 +1011,7 @@ input[type="range"]:focus::-ms-fill-upper { padding-left: 16px; top: 16px; right: 16px; - z-index: 1005; + z-index: 40; display: flex; align-items: center; diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 61a1c4c49..4b8663f33 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -905,7 +905,7 @@ margin: 0; margin-top: $s-1; border-radius: $br-8; - z-index: $z-index-3; + z-index: $z-index-4; overflow-y: auto; overflow-x: hidden; background-color: var(--menu-background-color); diff --git a/frontend/resources/styles/common/refactor/z-index.scss b/frontend/resources/styles/common/refactor/z-index.scss index 5be8e2e5b..755b2e9fa 100644 --- a/frontend/resources/styles/common/refactor/z-index.scss +++ b/frontend/resources/styles/common/refactor/z-index.scss @@ -6,8 +6,9 @@ $z-index-1: 1; // floating elements $z-index-2: 2; // sidebars -$z-index-3: 3; // context menu -$z-index-4: 4; // modal +$z-index-3: 3; // topbar +$z-index-4: 4; // context menu +$z-index-5: 5; // modal $z-index-10: 10; $z-index-20: 20; $z-index-modal: 30; // When refactor finish we can reduce this number, diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index f3fd5e5bc..0a914e78d 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -60,7 +60,6 @@ @import "main/partials/project-bar"; @import "main/partials/sidebar"; @import "main/partials/tab-container"; -@import "main/partials/tool-bar"; @import "main/partials/user-settings"; @import "main/partials/workspace"; @import "main/partials/color-bullet"; diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss index e7a302655..3f4e3f0dd 100644 --- a/frontend/resources/styles/main/partials/context-menu.scss +++ b/frontend/resources/styles/main/partials/context-menu.scss @@ -8,7 +8,7 @@ position: relative; visibility: hidden; opacity: 0; - z-index: 100; + z-index: 3; } .context-menu.is-open { diff --git a/frontend/resources/styles/main/partials/dropdown.scss b/frontend/resources/styles/main/partials/dropdown.scss index 0abd62a4f..ed3a2817f 100644 --- a/frontend/resources/styles/main/partials/dropdown.scss +++ b/frontend/resources/styles/main/partials/dropdown.scss @@ -4,7 +4,7 @@ background-color: $color-white; border-radius: $br2; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); - z-index: 12; + z-index: 3; hr { margin: 0 !important; diff --git a/frontend/resources/styles/main/partials/exception-page.scss b/frontend/resources/styles/main/partials/exception-page.scss index 3ffd4ca1b..30686023a 100644 --- a/frontend/resources/styles/main/partials/exception-page.scss +++ b/frontend/resources/styles/main/partials/exception-page.scss @@ -12,7 +12,7 @@ display: flex; align-items: center; padding: 32px; - z-index: 1000; + z-index: 40; cursor: pointer; diff --git a/frontend/resources/styles/main/partials/loader.scss b/frontend/resources/styles/main/partials/loader.scss index f42675aaf..ce2542d2d 100644 --- a/frontend/resources/styles/main/partials/loader.scss +++ b/frontend/resources/styles/main/partials/loader.scss @@ -9,7 +9,7 @@ position: fixed; top: 0; width: 100%; - z-index: 999; + z-index: 40; } // full with loader CSS diff --git a/frontend/resources/styles/main/partials/tool-bar.scss b/frontend/resources/styles/main/partials/tool-bar.scss deleted file mode 100644 index eea14f2e3..000000000 --- a/frontend/resources/styles/main/partials/tool-bar.scss +++ /dev/null @@ -1,48 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) KALEIDOS INC - -.tool-bar { - background-color: $color-gray-40; - bottom: 0; - height: 100%; - position: fixed; - left: 0; - width: 50px; - z-index: 10; - - .tool-bar-inside { - padding-top: 70px; - - .main-tools { - align-items: center; - display: flex; - flex-direction: column; - - li { - cursor: pointer; - margin-bottom: $size-5; - - svg { - fill: $color-gray-20; - height: 25px; - width: 25px; - } - - &:hover { - svg { - fill: $color-white; - } - } - - &.current { - svg { - fill: $color-primary; - } - } - } - } - } -} diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index ed007261c..ea8a89cc5 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -10,7 +10,7 @@ position: relative; visibility: hidden; opacity: $op-0; - z-index: $z-index-3; + z-index: $z-index-4; &.is-open { position: relative; diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss index 1be90e32b..b6e872e52 100644 --- a/frontend/src/app/main/ui/dashboard/comments.scss +++ b/frontend/src/app/main/ui/dashboard/comments.scss @@ -78,7 +78,7 @@ min-height: $s-200; position: absolute; width: 100%; - z-index: $z-index-3; + z-index: $z-index-4; hr { margin: 0; diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss index 2fa508411..2649d166b 100644 --- a/frontend/src/app/main/ui/dashboard/templates.scss +++ b/frontend/src/app/main/ui/dashboard/templates.scss @@ -42,7 +42,7 @@ border-top-right-radius: $br-10; margin-right: $s-32; position: relative; - z-index: 1; + z-index: $z-index-1; background-color: $db-quaternary; } diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss index dfe3e8229..4815dee3e 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.scss +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -19,7 +19,7 @@ height: 100%; width: $s-24; padding: 0; - z-index: $z-index-4; + z-index: $z-index-5; svg { @extend .button-icon; stroke: var(--icon-foreground); diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index 7b09a1ab6..920d6031b 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -13,7 +13,7 @@ max-width: $s-480; padding: $s-4; margin: 0 0 $s-4 0; - z-index: $z-index-3; + z-index: $z-index-4; border-radius: $br-10; background-color: var(--context-menu-background-color); diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss index f6d10a8ec..0ce429a5b 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -19,7 +19,7 @@ border-radius: $br-8; border: $s-2 solid var(--panel-border-color); background-color: var(--menu-background-color); - z-index: $z-index-3; + z-index: $z-index-4; } .separator { diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index 70f0639e0..9474a7909 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -43,7 +43,7 @@ .resize-area { grid-area: resize; height: $s-8; - z-index: $z-index-3; + z-index: $z-index-4; width: calc(100% - $s-8); border-radius: $br-circle; cursor: ns-resize; diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss index 07c883950..22c76e3b0 100644 --- a/frontend/src/app/main/ui/workspace/presence.scss +++ b/frontend/src/app/main/ui/workspace/presence.scss @@ -42,7 +42,7 @@ padding: $s-8; margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0; background-color: var(--menu-background-color); - z-index: $z-index-3; + z-index: $z-index-4; .active-users-list { gap: $s-4; .users-num, diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index b14ca1253..192a8416e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -47,7 +47,7 @@ $width-settings-bar-max: $s-500; position: absolute; top: 0; left: unset; - z-index: $z-index-3; + z-index: $z-index-4; width: $s-8; cursor: ew-resize; height: 100%; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 68779f911..124ee6f48 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -249,7 +249,7 @@ :global(.sticky) { position: sticky; top: $s-0; - z-index: $z-index-3; + z-index: $z-index-4; } .tab-indentation { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index d1bb3aa4c..bf1a29c77 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -224,7 +224,7 @@ margin: 0 0 $s-40 0; margin-top: $s-4; border-radius: $br-8; - z-index: $z-index-3; + z-index: $z-index-4; overflow-y: auto; background-color: var(--menu-background-color); .option-btn { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 1106ea3c1..b5c417a41 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -351,7 +351,7 @@ right: 0; height: 100%; width: 100%; - z-index: $z-index-3; + z-index: $z-index-4; } .show-recent { diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index e1b2bb08d..e29217eaa 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -13,7 +13,7 @@ max-width: $s-480; padding: $s-4; margin: 0 0 $s-4 0; - z-index: $z-index-3; + z-index: $z-index-4; border-radius: $br-10; background-color: var(--context-menu-background-color); diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss index 293956c6c..bc7850c72 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss @@ -17,7 +17,7 @@ padding: $s-8 $s-16; border-radius: $s-8; border: $s-2 solid var(--panel-border-color); - z-index: $z-index-10; + z-index: $z-index-3; background-color: var(--color-background-primary); transition: top 0.3s, From 71b4079483ef2cce2a713569db89fbc1a7ad3297 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 11 Mar 2024 10:54:00 +0100 Subject: [PATCH 2/6] :bug: Fix the hero project height in dashboard --- frontend/src/app/main/ui/dashboard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss index 064694ec9..ed79f5362 100644 --- a/frontend/src/app/main/ui/dashboard.scss +++ b/frontend/src/app/main/ui/dashboard.scss @@ -21,7 +21,7 @@ .dashboard-content { display: grid; - grid-template-rows: $s-64 1fr; + grid-template-rows: $s-64 auto auto 1fr; position: relative; grid-row: 1 / span 2; padding: $s-16 $s-16 0 0; From f714f08716c4e722d4c25b88959b1c6d9dde8988 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 11 Mar 2024 11:05:21 +0100 Subject: [PATCH 3/6] :bug: Fix comment bubble border --- frontend/src/app/main/ui/comments.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index ddad36a6b..2c6b622d0 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -138,6 +138,7 @@ width: $s-284; padding: $s-12; border-radius: $br-8; + border: $s-2 solid var(--modal-border-color); background-color: var(--comment-modal-background-color); .comments { display: flex; From d860eac59fa5f07ed9a55874dc82a98c9dfee0ed Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 11 Mar 2024 11:16:15 +0100 Subject: [PATCH 4/6] :bug: Fix disabled buttons height in login and auth pages --- frontend/resources/styles/common/refactor/basic-rules.scss | 1 - frontend/src/app/main/ui/components/forms.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 4b8663f33..0a257da60 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -223,7 +223,6 @@ .button-disabled { @include buttonStyle; @include flexCenter; - height: $s-32; background-color: var(--button-background-color-disabled); border: $s-1 solid var(--button-border-color-disabled); color: var(--button-foreground-color-disabled); diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index 19027a065..53db07493 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -263,6 +263,7 @@ :disabled { @extend .button-disabled; + min-height: $s-32; } // MULTI INPUT From 4ffaf6f996d9d32e7b92f5785e39798cb04b9225 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 11 Mar 2024 11:41:49 +0100 Subject: [PATCH 5/6] :bug: Fix gradient background image --- frontend/resources/styles/main-default.scss | 1 - .../styles/main/partials/color-bullet.scss | 209 ------------------ .../app/main/ui/components/color_bullet.scss | 4 +- .../ui/workspace/colorpicker/gradients.scss | 2 +- .../colorpicker/slider_selector.scss | 3 +- 5 files changed, 5 insertions(+), 214 deletions(-) delete mode 100644 frontend/resources/styles/main/partials/color-bullet.scss diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index 0a914e78d..48c342b70 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -62,6 +62,5 @@ @import "main/partials/tab-container"; @import "main/partials/user-settings"; @import "main/partials/workspace"; -@import "main/partials/color-bullet"; @import "main/partials/exception-page"; @import "main/partials/signup-questions"; diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss deleted file mode 100644 index 43983d50f..000000000 --- a/frontend/resources/styles/main/partials/color-bullet.scss +++ /dev/null @@ -1,209 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) KALEIDOS INC - -.color-bullet { - border: 2px solid $color-gray-30; - position: relative; - width: var(--bullet-size); - height: var(--bullet-size); - - &:hover { - border-color: $color-primary; - } -} -.color-cell { - display: grid; - grid-template-columns: 100%; - grid-template-rows: 1fr auto; - height: 100%; - justify-items: center; - width: 65px; - - .color-bullet { - border: 2px solid $color-gray-30; - position: relative; - width: var(--bullet-size); - height: var(--bullet-size); - - &:hover { - border-color: $color-primary; - } - } - - & > * { - overflow: hidden; - } -} - -.color-cell.current { - .color-bullet { - border-color: $color-gray-30; - } -} - -ul.palette-menu .color-bullet { - width: 20px; - height: 20px; - border: 1px solid $color-gray-30; - margin-right: 5px; - background-size: 8px; -} -.color-cell.add-color .color-bullet { - align-items: center; - background-color: $color-gray-50; - border: 3px dashed $color-gray-30; - cursor: pointer; - display: flex; - justify-content: center; - margin-bottom: 1rem; - padding: 0.6rem; - - svg { - fill: $color-gray-10; - height: 30px; - width: 30px; - } -} - -.colorpicker-content .color-bullet { - grid-area: color; - width: 20px; - height: 20px; - border: 1px solid $color-gray-30; - background-size: 8px; - overflow: hidden; -} - -.asset-section .asset-list-item .color-bullet { - border: 1px solid $color-gray-30; - height: 20px; - margin-right: $size-1; - width: 20px; -} -.tool-window-content .asset-list .asset-list-item { - &:hover { - .color-bullet { - border: 1px solid $color-primary; - } - } -} - -.color-cell.add-color:hover .color-bullet { - border-color: $color-gray-30; - - svg { - fill: $color-gray-30; - } -} - -.color-bullet { - display: flex; - flex-direction: row; - border-radius: 50%; - - & .color-bullet-wrapper { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") - left center; - background-color: $color-white; - clip-path: circle(50%); - display: flex; - flex-direction: row; - height: 100%; - width: 100%; - } - - &.is-gradient { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") - left center; - background-color: $color-white; - } - - & .color-bullet-wrapper > * { - width: 100%; - height: 100%; - } -} - -.color-data .color-bullet.multiple { - background: transparent; - - &::before { - content: "?"; - } -} - -.color-data .color-bullet { - border: 1px solid $color-gray-30; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - color: $color-gray-10; - flex-shrink: 0; - height: 20px; - margin: 5px 4px 0 0; - width: 20px; - - &.palette-th { - align-items: center; - border: 1px solid $color-gray-30; - display: flex; - justify-content: center; - - svg { - fill: $color-gray-30; - height: 16px; - width: 16px; - } - - &:hover { - border-color: $color-primary; - svg { - fill: $color-primary; - } - } - } -} - -.colorpicker-content .libraries .selected-colors .color-bullet { - grid-area: auto; - margin-bottom: 0.25rem; - cursor: pointer; - - &:hover { - border-color: $color-primary; - z-index: 10; - } - - &.button { - background: $color-white; - display: flex; - align-items: center; - justify-content: center; - } - - &.button svg { - width: 12px; - height: 12px; - fill: $color-gray-30; - } - - &.plus-button svg { - width: 8px; - height: 8px; - fill: $color-black; - } -} - -.color-bullet.is-not-library-color { - border-radius: $br3; - overflow: hidden; - - & .color-bullet-wrapper { - clip-path: none; - } -} diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss index 36afda4b2..3a8e0e202 100644 --- a/frontend/src/app/main/ui/components/color_bullet.scss +++ b/frontend/src/app/main/ui/components/color_bullet.scss @@ -39,13 +39,13 @@ } } &.is-gradient { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=") left center; background-color: var(--color-bullet-background-color); transform: rotate(-90deg); } &.is-transparent { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=") left center; background-color: var(--color-bullet-background-color); } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss index 0fe9529f2..374edaaa7 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss @@ -19,7 +19,7 @@ height: 100%; width: 100%; border-radius: $br-6; - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=") left center; } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss index aef415df5..3e30ad7ea 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss @@ -54,12 +54,13 @@ } &.opacity { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=") var(--background-repeat) center; &::after { content: ""; position: absolute; + border-radius: $br-6; width: 100%; height: 100%; background: linear-gradient( From 358176c92753444b63f6d7c7881dc9dcc038e67a Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 11 Mar 2024 16:03:40 +0100 Subject: [PATCH 6/6] :bug: Fix project name in sidebar --- frontend/src/app/main/ui/dashboard/sidebar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index c6cea273a..1a5c627e6 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -239,6 +239,7 @@ .element-title { @include textEllipsis; + width: $s-256; color: var(--sidebar-element-foreground-color); font-size: $fs-14; }