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

[dark theme] fix SSE stylesheets for IE support

Browse source
This commit is contained in:
Maxim Kadushkin 2021-02-16 11:37:33 +03:00
parent 8847c328a6
commit 66ff7cf201
10 changed files with 71 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/spreadsheeteditor/main/resources/less/advanced-settings.less
View file

@ -92,6 +92,7 @@
.sort-dialog-btn-caret { .sort-dialog-btn-caret {
display: inline-block; display: inline-block;
border: @scaled-one-px-value-ie solid #cfcfcf;
border: @scaled-one-px-value solid #cfcfcf; border: @scaled-one-px-value solid #cfcfcf;
border-radius: 1px; border-radius: 1px;
} }

13
apps/spreadsheeteditor/main/resources/less/celleditor.less
View file

@ -1,13 +1,18 @@
#cell-editing-box { #cell-editing-box {
border-bottom: solid @scaled-one-px-value-ie @border-toolbar-ie;
border-bottom: solid @scaled-one-px-value @border-toolbar; border-bottom: solid @scaled-one-px-value @border-toolbar;
border-left: solid @scaled-one-px-value-ie @border-toolbar-ie;
border-left: solid @scaled-one-px-value @border-toolbar; border-left: solid @scaled-one-px-value @border-toolbar;
min-height: 20px; min-height: 20px;
background-color: @background-normal-ie;
background-color: @background-normal; background-color: @background-normal;
.ce-group-name { .ce-group-name {
float: left; float: left;
height: 20px; height: 20px;
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-bottom: @scaled-one-px-value solid @border-toolbar; border-bottom: @scaled-one-px-value solid @border-toolbar;
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
#ce-cell-name { #ce-cell-name {
@ -17,11 +22,13 @@
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
border: 0 none; border: 0 none;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value solid @border-toolbar;
transition: none; transition: none;
-webkit-transition: none; -webkit-transition: none;
&[disabled] { &[disabled] {
color: @border-preview-select-ie;
color: @border-preview-select; color: @border-preview-select;
opacity: 0.5; opacity: 0.5;
} }
@ -31,9 +38,11 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 80px; left: 80px;
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
button { button {
background-color: @background-normal-ie;
background-color: @background-normal; background-color: @background-normal;
height: 19px; height: 19px;
@ -75,6 +84,7 @@
padding-left: 1px; padding-left: 1px;
margin: 0 16px 0 120px; margin: 0 16px 0 120px;
height: 100%; height: 100%;
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar; border-left: @scaled-one-px-value solid @border-toolbar;
#ce-cell-content { #ce-cell-content {
@ -87,6 +97,7 @@
padding-bottom: 0; padding-bottom: 0;
&[disabled] { &[disabled] {
color: @border-preview-select-ie;
color: @border-preview-select; color: @border-preview-select;
opacity: 0.5; opacity: 0.5;
} }
@ -102,7 +113,9 @@
border-bottom: 0 none; border-bottom: 0 none;
&.move { &.move {
border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-top: @scaled-one-px-value solid @border-toolbar; border-top: @scaled-one-px-value solid @border-toolbar;
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-bottom: @scaled-one-px-value solid @border-toolbar; border-bottom: @scaled-one-px-value solid @border-toolbar;
opacity: 0.4; opacity: 0.4;
} }

6
apps/spreadsheeteditor/main/resources/less/filterdialog.less
View file

@ -17,14 +17,19 @@
} }
.border-values { .border-values {
border: @scaled-one-px-value-ie solid @input-border;
border: @scaled-one-px-value solid @input-border; border: @scaled-one-px-value solid @input-border;
.item { .item {
&.selected { &.selected {
background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover; background-color: @highlight-button-hover;
border-color: @highlight-button-hover-ie;
border-color: @highlight-button-hover; border-color: @highlight-button-hover;
color: @text-normal-ie;
color: @text-normal; color: @text-normal;
border-style: solid; border-style: solid;
border-width: @scaled-one-px-value-ie 0;
border-width: @scaled-one-px-value 0; border-width: @scaled-one-px-value 0;
} }
} }
@ -94,6 +99,7 @@
} }
&.border { &.border {
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control; border: @scaled-one-px-value solid @border-regular-control;
.border-radius(1px); .border-radius(1px);
width: 22px; width: 22px;

4
apps/spreadsheeteditor/main/resources/less/layout.less
View file

@ -2,6 +2,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
.user-select(none); .user-select(none);
color: @text-normal-ie;
color: @text-normal; color: @text-normal;
&.safari { &.safari {
@ -33,6 +34,7 @@ label {
top:0; top:0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
overflow: hidden; overflow: hidden;
} }
@ -52,7 +54,9 @@ label {
} }
#editor_sdk { #editor_sdk {
border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-top: @scaled-one-px-value solid @border-toolbar; border-top: @scaled-one-px-value solid @border-toolbar;
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar; border-left: @scaled-one-px-value solid @border-toolbar;
} }

14
apps/spreadsheeteditor/main/resources/less/leftmenu.less
View file

@ -5,7 +5,9 @@
border-right: 0 none; border-right: 0 none;
&.move { &.move {
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar; border-left: @scaled-one-px-value solid @border-toolbar;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value solid @border-toolbar;
opacity: 0.4; opacity: 0.4;
} }
@ -20,6 +22,7 @@
top: 0; top: 0;
position: absolute; position: absolute;
z-index: @zindex-dropdown - 5; z-index: @zindex-dropdown - 5;
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
overflow: hidden; overflow: hidden;
} }
@ -57,11 +60,13 @@
margin-bottom: 3px; margin-bottom: 3px;
&:hover:not(.disabled) { &:hover:not(.disabled) {
background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover; background-color: @highlight-button-hover;
} }
&.active:not(.disabled) { &.active:not(.disabled) {
outline: 0; outline: 0;
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed; background-color: @highlight-button-pressed;
> a { > a {
@ -71,6 +76,7 @@
&.disabled > a { &.disabled > a {
cursor: default; cursor: default;
color: @border-regular-control-ie;
color: @border-regular-control; color: @border-regular-control;
} }
} }
@ -105,6 +111,7 @@
.panel-context { .panel-context {
width: 100%; width: 100%;
padding-left: 260px; padding-left: 260px;
background-color: @background-normal-ie;
background-color: @background-normal; background-color: @background-normal;
.content-box { .content-box {
@ -155,6 +162,7 @@
#id-settings-menu { #id-settings-menu {
.dataview { .dataview {
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value solid @border-toolbar;
& > div:not([class^=ps-scrollbar]) { & > div:not([class^=ps-scrollbar]) {
@ -178,10 +186,12 @@
&:hover, &:hover,
&.over { &.over {
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
} }
&.selected { &.selected {
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed; background-color: @highlight-button-pressed;
color: @dropdown-link-active-color; color: @dropdown-link-active-color;
@ -323,6 +333,7 @@
&:hover, &:hover,
&.over { &.over {
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
} }
@ -364,6 +375,7 @@
} }
.dataview { .dataview {
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value solid @border-toolbar;
& > div:not([class^=ps-scrollbar]) { & > div:not([class^=ps-scrollbar]) {
@ -378,10 +390,12 @@
&:not(.header-name) { &:not(.header-name) {
&:hover, &:hover,
&.over { &.over {
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
} }
&.selected { &.selected {
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed; background-color: @highlight-button-pressed;
color: @dropdown-link-active-color; color: @dropdown-link-active-color;
} }

3
apps/spreadsheeteditor/main/resources/less/rightmenu.less
View file

@ -15,9 +15,11 @@
.combo-dataview-menu { .combo-dataview-menu {
.form-control { .form-control {
cursor: pointer; cursor: pointer;
background-color: @background-normal-ie;
background-color: @background-normal; background-color: @background-normal;
&.text { &.text {
background: @background-normal-ie;
background: @background-normal; background: @background-normal;
vertical-align: bottom; vertical-align: bottom;
} }
@ -162,6 +164,7 @@
&:hover, &:hover,
&.over { &.over {
background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover; background-color: @highlight-button-hover;
.caret { .caret {

1
apps/spreadsheeteditor/main/resources/less/spellcheck.less
View file

@ -19,6 +19,7 @@
#spellcheck-suggestions-list { #spellcheck-suggestions-list {
width: 100%; width: 100%;
height: 116px; height: 116px;
background-color: @background-normal-ie;
background-color: @background-normal; background-color: @background-normal;
margin-bottom: 8px; margin-bottom: 8px;
} }

24
apps/spreadsheeteditor/main/resources/less/statusbar.less
View file

@ -23,6 +23,7 @@
text-align: center; text-align: center;
&.disabled { &.disabled {
color: @border-preview-select-ie;
color: @border-preview-select; color: @border-preview-select;
cursor: default; cursor: default;
} }
@ -93,6 +94,7 @@
height: 12px; height: 12px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border: @scaled-one-px-value-ie solid @border-toolbar-ie;
border: @scaled-one-px-value solid @border-toolbar; border: @scaled-one-px-value solid @border-toolbar;
} }
@ -111,7 +113,9 @@
#status-addtabs-box { #status-addtabs-box {
float: left; float: left;
padding: 3px 8px 0 8px; padding: 3px 8px 0 8px;
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar; border-left: @scaled-one-px-value solid @border-toolbar;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value solid @border-toolbar;
height: 25px; height: 25px;
} }
@ -155,6 +159,7 @@
display: flex; display: flex;
> li { > li {
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
&:first-of-type { &:first-of-type {
@ -175,22 +180,31 @@
padding: 0 10px 0; padding: 0 10px 0;
line-height: 24px; line-height: 24px;
margin-right: -1px; margin-right: -1px;
background-color: @background-toolbar-additional-ie;
background-color: @background-toolbar-additional; background-color: @background-toolbar-additional;
outline: none; outline: none;
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar; border-left: @scaled-one-px-value solid @border-toolbar;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value solid @border-toolbar;
border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-top: @scaled-one-px-value solid @border-toolbar; border-top: @scaled-one-px-value solid @border-toolbar;
&:hover { &:hover {
border-top-color: @border-toolbar-ie;
border-top-color: @border-toolbar; border-top-color: @border-toolbar;
border-bottom-color: @border-toolbar-ie;
border-bottom-color: @border-toolbar; border-bottom-color: @border-toolbar;
color: @text-normal-ie !important;
color: @text-normal !important; color: @text-normal !important;
} }
} }
&.active { &.active {
> span { > span {
border-bottom-color: @background-toolbar-ie;
border-bottom-color: @background-toolbar; border-bottom-color: @background-toolbar;
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
outline: none; outline: none;
@ -203,9 +217,12 @@
&.selected { &.selected {
> span { > span {
border-bottom-color: @highlight-header-button-hover-ie;
border-bottom-color: @highlight-header-button-hover; border-bottom-color: @highlight-header-button-hover;
background-color: @background-normal-ie;
background-color: @background-normal; background-color: @background-normal;
box-shadow: 0px 4px 0 #49795d inset; box-shadow: 0px 4px 0 #49795d inset;
color: @text-normal-ie;
color: @text-normal; color: @text-normal;
} }
} }
@ -257,6 +274,7 @@
&:not(.active) { &:not(.active) {
> span { > span {
color: @text-secondary-ie;
color: @text-secondary; color: @text-secondary;
} }
} }
@ -270,13 +288,16 @@
} }
> span { > span {
border-left: 2px solid @text-normal-ie;
border-left: 2px solid @text-normal; border-left: 2px solid @text-normal;
padding-left: 9px; padding-left: 9px;
} }
&.right { &.right {
> span { > span {
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar; border-left: @scaled-one-px-value solid @border-toolbar;
border-right: 2px solid @text-normal-ie;
border-right: 2px solid @text-normal; border-right: 2px solid @text-normal;
padding-right: 9px; padding-right: 9px;
padding-left: 10px; padding-left: 10px;
@ -295,10 +316,12 @@
} }
&.separator-item { &.separator-item {
margin-left: 20px; margin-left: 20px;
width: @scaled-one-px-value-ie;
width: @scaled-one-px-value; width: @scaled-one-px-value;
> span { > span {
padding: 0; padding: 0;
margin: 0; margin: 0;
width: @scaled-one-px-value-ie;
width: @scaled-one-px-value; width: @scaled-one-px-value;
&::after { &::after {
content: none; content: none;
@ -390,6 +413,7 @@
width: 36px; width: 36px;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
z-index: @zindex-modal - 1; z-index: @zindex-modal - 1;
} }

4
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

@ -106,7 +106,9 @@
#id-toolbar-menu-auto-fontcolor > a.selected, #id-toolbar-menu-auto-fontcolor > a.selected,
#id-toolbar-menu-auto-fontcolor > a:hover { #id-toolbar-menu-auto-fontcolor > a:hover {
span { span {
outline: @scaled-one-px-value-ie solid @border-regular-control-ie;
outline: @scaled-one-px-value solid @border-regular-control; outline: @scaled-one-px-value solid @border-regular-control;
border: @scaled-one-px-value-ie solid @background-normal-ie;
border: @scaled-one-px-value solid @background-normal; border: @scaled-one-px-value solid @background-normal;
} }
} }
@ -115,7 +117,9 @@
#autocorrect-paste-container { #autocorrect-paste-container {
position: absolute; position: absolute;
z-index: @zindex-dropdown - 20; z-index: @zindex-dropdown - 20;
background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control; border: @scaled-one-px-value solid @border-regular-control;
} }

1
apps/spreadsheeteditor/main/resources/less/variables.less
View file

@ -1,6 +1,7 @@
// //
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
@header-background-color-ie: @toolbar-header-spreadsheet-ie;
@header-background-color: var(--toolbar-header-spreadsheet); @header-background-color: var(--toolbar-header-spreadsheet);
// Active color // Active color