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

Merge pull request #1922 from ONLYOFFICE/feature/border-for-dark-theme-2

Browse source 
Border for dark theme
This commit is contained in:
maxkadushkin 2022-08-30 16:43:54 +03:00 committed by GitHub
parent fae6b2ff5a 66419325ce
commit 6f3414e98f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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-toolbar: #616161;
--border-divider: #414141; --border-divider: #414141;
--border-toolbar-active-panel-top: var(--border-toolbar);
--border-regular-control: #696969; --border-regular-control: #696969;
--border-toolbar-button-hover: #616161; --border-toolbar-button-hover: #616161;
--border-preview-hover: #828282; --border-preview-hover: #828282;

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

@ -45,6 +45,7 @@
--highlight-text-select: #3494fb; --highlight-text-select: #3494fb;
--border-toolbar: #cbcbcb; --border-toolbar: #cbcbcb;
--border-toolbar-active-panel-top: var(--background-toolbar);
--border-divider: #dfdfdf; --border-divider: #dfdfdf;
--border-regular-control: #c0c0c0; --border-regular-control: #c0c0c0;
--border-toolbar-button-hover: #e0e0e0; --border-toolbar-button-hover: #e0e0e0;
@ -187,6 +188,7 @@
@border-toolbar: var(--border-toolbar); @border-toolbar: var(--border-toolbar);
@border-divider: var(--border-divider); @border-divider: var(--border-divider);
@border-regular-control: var(--border-regular-control); @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-toolbar-button-hover: var(--border-toolbar-button-hover);
@border-preview-hover: var(--border-preview-hover); @border-preview-hover: var(--border-preview-hover);
@border-preview-select: var(--border-preview-select); @border-preview-select: var(--border-preview-select);

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

@ -116,8 +116,8 @@
line-height: 24px; line-height: 24px;
&:hover:not(:disabled),&:focus { &:hover:not(:disabled),&:focus {
box-shadow: 0 0 0 1px @highlight-header-button-hover-ie; box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
box-shadow: 0 0 0 1px @highlight-header-button-hover; box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
border-radius: 1px; border-radius: 1px;
cursor: text; cursor: text;
} }
@ -517,8 +517,8 @@
.user-select(text); .user-select(text);
&:hover:not(:disabled),&:focus{ &:hover:not(:disabled),&:focus{
box-shadow: 0 0 0 1px @highlight-header-button-hover-ie; box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
box-shadow: 0 0 0 1px @highlight-header-button-hover; box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
border-radius: 1px; border-radius: 1px;
cursor: text; cursor: text;
} }

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

@ -36,6 +36,7 @@
display: flex; display: flex;
align-items: stretch; align-items: stretch;
border-bottom: @border-toolbar-active-panel-top 1px solid;
.extra { .extra {
background-color: @header-background-color-ie; background-color: @header-background-color-ie;
@ -58,7 +59,7 @@
background-color: @header-background-color-ie; background-color: @header-background-color-ie;
background-color: @header-background-color; background-color: @header-background-color;
position: relative; position: relative;
overflow: hidden; overflow: visible;
display: flex; display: flex;
flex-shrink: 1; flex-shrink: 1;
@ -66,7 +67,7 @@
padding: 4px 0 0; padding: 4px 0 0;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: visible;
list-style: none; list-style: none;
font-size: 0; font-size: 0;
} }
@ -75,7 +76,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
border-top: transparent 2px solid;
&:hover { &:hover {
background-color: @highlight-header-button-hover-ie; background-color: @highlight-header-button-hover-ie;
background-color: @highlight-header-button-hover; background-color: @highlight-header-button-hover;
@ -84,6 +85,9 @@
&.active { &.active {
background-color: @background-toolbar-ie; background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
border: @border-toolbar-active-panel-top 1px solid;
border-bottom: none;
height: 28px;
} }
@ -96,12 +100,15 @@
text-align: center; text-align: center;
color: @text-toolbar-header-ie; color: @text-toolbar-header-ie;
color: @text-toolbar-header; color: @text-toolbar-header;
position: relative;
top: -1px;
} }
&.active { &.active {
> a { > a {
color: @text-normal-ie; color: @text-normal-ie;
color: @text-normal; color: @text-normal;
padding: 0 11px;
} }
} }
} }
@ -397,6 +404,10 @@
box-shadow: inset 0 -1px 0 0 @border-regular-control; box-shadow: inset 0 -1px 0 0 @border-regular-control;
} }
.box-tabs {
border-bottom: none;
}
.tabs { .tabs {
ul { ul {
padding: 0; padding: 0;
@ -404,7 +415,7 @@
li { li {
position: relative; position: relative;
border: none;
&:after { &:after {
//transition: opacity .1s; //transition: opacity .1s;
//transition: bottom .1s; //transition: bottom .1s;
@ -419,7 +430,9 @@
&.active { &.active {
background-color: transparent; background-color: transparent;
> a {
padding: 0 12px;
}
&:after { &:after {
opacity: 1; opacity: 1;
bottom: 0; bottom: 0;
@ -427,14 +440,15 @@
} }
&:hover:not(.active) { &:hover:not(.active) {
background-color: rgba(0, 0, 0, .05); //background-color: rgba(0, 0, 0, .05);
//background-color: @highlight-button-hover; background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover;
} }
> a { > a {
color: @text-normal-ie; color: @text-normal-ie;
color: @text-normal; color: @text-normal;
top: 0;
&::after { &::after {
display:block; display:block;
content:attr(data-title); content:attr(data-title);
@ -561,8 +575,8 @@
color: @text-normal-ie; color: @text-normal-ie;
color: @text-normal; color: @text-normal;
&:hover:not(:disabled),&:focus { &:hover:not(:disabled),&:focus {
box-shadow: 0 0 0 1px @highlight-button-hover-ie; box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
box-shadow: 0 0 0 1px @highlight-button-hover; box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
} }
} }