From 66419325ce791d07abd1a39ea35f278d8e1b165a Mon Sep 17 00:00:00 2001 From: OVSharova Date: Tue, 30 Aug 2022 16:01:34 +0300 Subject: [PATCH] Add border to toolbar for dark theme --- .../less/colors-table-dark-contrast.less | 1 + .../main/resources/less/colors-table.less | 2 ++ apps/common/main/resources/less/header.less | 8 ++--- apps/common/main/resources/less/toolbar.less | 34 +++++++++++++------ 4 files changed, 31 insertions(+), 14 deletions(-) diff --git a/apps/common/main/resources/less/colors-table-dark-contrast.less b/apps/common/main/resources/less/colors-table-dark-contrast.less index 4cf865894..08ae8feac 100644 --- a/apps/common/main/resources/less/colors-table-dark-contrast.less +++ b/apps/common/main/resources/less/colors-table-dark-contrast.less @@ -35,6 +35,7 @@ --border-toolbar: #616161; --border-divider: #414141; + --border-toolbar-active-panel-top: var(--border-toolbar); --border-regular-control: #696969; --border-toolbar-button-hover: #616161; --border-preview-hover: #828282; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index 3807516ab..4ef307f71 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -45,6 +45,7 @@ --highlight-text-select: #3494fb; --border-toolbar: #cbcbcb; + --border-toolbar-active-panel-top: var(--background-toolbar); --border-divider: #dfdfdf; --border-regular-control: #c0c0c0; --border-toolbar-button-hover: #e0e0e0; @@ -187,6 +188,7 @@ @border-toolbar: var(--border-toolbar); @border-divider: var(--border-divider); @border-regular-control: var(--border-regular-control); +@border-toolbar-active-panel-top: var(--border-toolbar-active-panel-top); @border-toolbar-button-hover: var(--border-toolbar-button-hover); @border-preview-hover: var(--border-preview-hover); @border-preview-select: var(--border-preview-select); diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index 0f7a7b0db..8cd5e5463 100644 --- a/apps/common/main/resources/less/header.less +++ b/apps/common/main/resources/less/header.less @@ -116,8 +116,8 @@ line-height: 24px; &:hover:not(:disabled),&:focus { - box-shadow: 0 0 0 1px @highlight-header-button-hover-ie; - box-shadow: 0 0 0 1px @highlight-header-button-hover; + box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie; + box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover; border-radius: 1px; cursor: text; } @@ -517,8 +517,8 @@ .user-select(text); &:hover:not(:disabled),&:focus{ - box-shadow: 0 0 0 1px @highlight-header-button-hover-ie; - box-shadow: 0 0 0 1px @highlight-header-button-hover; + box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie; + box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover; border-radius: 1px; cursor: text; } diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index d29a43791..3595df2c1 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -36,6 +36,7 @@ display: flex; align-items: stretch; + border-bottom: @border-toolbar-active-panel-top 1px solid; .extra { background-color: @header-background-color-ie; @@ -58,7 +59,7 @@ background-color: @header-background-color-ie; background-color: @header-background-color; position: relative; - overflow: hidden; + overflow: visible; display: flex; flex-shrink: 1; @@ -66,7 +67,7 @@ padding: 4px 0 0; margin: 0; white-space: nowrap; - overflow: hidden; + overflow: visible; list-style: none; font-size: 0; } @@ -75,7 +76,7 @@ display: inline-flex; align-items: center; height: 100%; - + border-top: transparent 2px solid; &:hover { background-color: @highlight-header-button-hover-ie; background-color: @highlight-header-button-hover; @@ -84,6 +85,9 @@ &.active { background-color: @background-toolbar-ie; background-color: @background-toolbar; + border: @border-toolbar-active-panel-top 1px solid; + border-bottom: none; + height: 28px; } @@ -96,12 +100,15 @@ text-align: center; color: @text-toolbar-header-ie; color: @text-toolbar-header; + position: relative; + top: -1px; } &.active { > a { color: @text-normal-ie; color: @text-normal; + padding: 0 11px; } } } @@ -397,6 +404,10 @@ box-shadow: inset 0 -1px 0 0 @border-regular-control; } + .box-tabs { + border-bottom: none; + } + .tabs { ul { padding: 0; @@ -404,7 +415,7 @@ li { position: relative; - + border: none; &:after { //transition: opacity .1s; //transition: bottom .1s; @@ -419,7 +430,9 @@ &.active { background-color: transparent; - + > a { + padding: 0 12px; + } &:after { opacity: 1; bottom: 0; @@ -427,14 +440,15 @@ } &:hover:not(.active) { - background-color: rgba(0, 0, 0, .05); - //background-color: @highlight-button-hover; + //background-color: rgba(0, 0, 0, .05); + background-color: @highlight-button-hover-ie; + background-color: @highlight-button-hover; } > a { color: @text-normal-ie; color: @text-normal; - + top: 0; &::after { display:block; content:attr(data-title); @@ -561,8 +575,8 @@ color: @text-normal-ie; color: @text-normal; &:hover:not(:disabled),&:focus { - box-shadow: 0 0 0 1px @highlight-button-hover-ie; - box-shadow: 0 0 0 1px @highlight-button-hover; + box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie; + box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover; } }