Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add border to toolbar for dark theme

Browse source
This commit is contained in:
OVSharova 2022-08-30 16:01:34 +03:00
parent fae6b2ff5a
commit 66419325ce
4 changed files with 31 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/common/main/resources/less/colors-table-dark-contrast.less
View file

@ -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;

2
apps/common/main/resources/less/colors-table.less
View file

@ -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);

8
apps/common/main/resources/less/header.less
View file

@ -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;
}

34
apps/common/main/resources/less/toolbar.less
View file

@ -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;
}
}