[dark theme] @gray-deep to @text-normal, @gray to @border-regular-control

This commit is contained in:
Maxim Kadushkin 2020-11-17 15:27:32 +03:00
parent 8ea4360f6e
commit 6f20a5b958
33 changed files with 85 additions and 85 deletions

View file

@ -4,7 +4,7 @@
.btn { .btn {
border-radius: 1px; border-radius: 1px;
color: @gray-deep; color: @text-normal;
.btnsize(@value) { .btnsize(@value) {
min-width: @value; min-width: @value;
@ -125,7 +125,7 @@
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: transparent; background-color: transparent;
border: solid 1px @gray-deep; border: solid 1px @text-normal;
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
} }
@ -617,7 +617,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
box-shadow: inset 0 0 0 1px @gray; box-shadow: inset 0 0 0 1px @border-regular-control;
.border-radius(@border-radius-small); .border-radius(@border-radius-small);
&:hover, &:hover,
@ -834,7 +834,7 @@
.dlg-btn { .dlg-btn {
font-weight: bold; font-weight: bold;
width: 86px; width: 86px;
color: @gray-deep; color: @text-normal;
background-color: @secondary; background-color: @secondary;
&:hover:not(.disabled), &:hover:not(.disabled),

View file

@ -101,7 +101,7 @@
} }
.user-name { .user-name {
color: @gray-deep; color: @text-normal;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;

View file

@ -13,7 +13,7 @@
width: 14px; width: 14px;
height: 14px; height: 14px;
background: #fff; background: #fff;
border: 1px solid @gray; border: 1px solid @border-regular-control;
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
left: 0; left: 0;
@ -25,7 +25,7 @@
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
border: solid @gray-deep; border: solid @text-normal;
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg); transform: rotate(45deg);
width: 5px; width: 5px;
@ -40,7 +40,7 @@
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
border: 1px solid @gray-deep; border: 1px solid @text-normal;
background: @gray-soft; background: @gray-soft;
width: 8px; width: 8px;
height: 8px; height: 8px;

View file

@ -43,7 +43,7 @@
} }
.dropdown-menu { .dropdown-menu {
border-color: @gray; border-color: @border-regular-control;
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 2px; border-top-left-radius: 2px;
margin: 0; margin: 0;
@ -84,13 +84,13 @@
.item { .item {
padding: 3px; padding: 3px;
border: 1px solid @gray; border: 1px solid @border-regular-control;
.box-shadow(none); .box-shadow(none);
margin: 0 -1px -1px 0; margin: 0 -1px -1px 0;
&:hover { &:hover {
.box-inner-shadow(0 0 0 2px @gray); .box-inner-shadow(0 0 0 2px @border-regular-control);
} }
&.selected { &.selected {
@ -188,7 +188,7 @@
&.disabled { &.disabled {
.item { .item {
&:hover:not(.selected) { &:hover:not(.selected) {
.box-shadow(0 0 0 1px @gray); .box-shadow(0 0 0 1px @border-regular-control);
} }
} }
} }
@ -238,7 +238,7 @@
.item { .item {
&:hover { &:hover {
.box-shadow(0 0 0 1px @gray); .box-shadow(0 0 0 1px @border-regular-control);
} }
} }
@ -265,13 +265,13 @@
.item { .item {
margin-left: 4px; margin-left: 4px;
.box-shadow(0 0 0 1px @gray); .box-shadow(0 0 0 1px @border-regular-control);
} }
&.disabled { &.disabled {
.item { .item {
&:hover:not(.selected) { &:hover:not(.selected) {
.box-shadow(0 0 0 1px @gray); .box-shadow(0 0 0 1px @border-regular-control);
} }
} }
} }

View file

@ -11,7 +11,7 @@
} }
.user-name { .user-name {
color: @gray-deep; color: @text-normal;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;

View file

@ -93,7 +93,7 @@
border: 1px solid @border-toolbar; border: 1px solid @border-toolbar;
word-break: break-all; word-break: break-all;
line-height: 15px; line-height: 15px;
color: @gray-deep; color: @text-normal;
&:focus { &:focus {
border-color: @gray-darker; border-color: @gray-darker;
} }
@ -119,7 +119,7 @@
} }
.user-name { .user-name {
color: @gray-deep; color: @text-normal;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;

View file

@ -22,7 +22,7 @@
margin: 4px; margin: 4px;
cursor: pointer; cursor: pointer;
.box-shadow(0 0 0 1px @gray); .box-shadow(0 0 0 1px @border-regular-control);
&:hover, &:hover,
&.selected { &.selected {
@ -58,7 +58,7 @@
opacity: 0.5; opacity: 0.5;
} }
.box-shadow(0 0 0 1px @gray); .box-shadow(0 0 0 1px @border-regular-control);
&:hover:not(.disabled), &:hover:not(.disabled),
&.selected:not(.disabled) { &.selected:not(.disabled) {

View file

@ -62,7 +62,7 @@
.dropdown-menu { .dropdown-menu {
label { label {
color: @gray-deep; color: @text-normal;
} }
} }
@ -227,7 +227,7 @@
} }
label { label {
color: @gray-deep; color: @text-normal;
} }
.cousers-list { .cousers-list {
@ -261,7 +261,7 @@
} }
.user-name { .user-name {
color: @gray-deep; color: @text-normal;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;

View file

@ -88,7 +88,7 @@
.history-item-wrap { .history-item-wrap {
padding: 10px 2px 15px 20px; padding: 10px 2px 15px 20px;
color: @gray-deep; color: @text-normal;
text-overflow: ellipsis; text-overflow: ellipsis;
.user-date { .user-date {

View file

@ -1,7 +1,7 @@
.form-control { .form-control {
.border-radius(@border-radius-small); .border-radius(@border-radius-small);
.box-shadow(none); .box-shadow(none);
color: @gray-deep; color: @text-normal;
.user-select(text); .user-select(text);
&:focus { &:focus {

View file

@ -52,7 +52,7 @@
.left-panel & { .left-panel & {
line-height: @loadmask-small-image-height; line-height: @loadmask-small-image-height;
background-color: transparent; background-color: transparent;
color: @gray-deep; color: @text-normal;
padding: 8px; padding: 8px;
top: 78px; top: 78px;
transform: translate(-50%, 0); transform: translate(-50%, 0);

View file

@ -1,6 +1,6 @@
.masked-field { .masked-field {
text-align: right; text-align: right;
border: 1px solid @gray; border: 1px solid @border-regular-control;
border-radius: 2px; border-radius: 2px;
padding: 0 3px; padding: 0 3px;

View file

@ -19,7 +19,7 @@
height: 14px; height: 14px;
background: #fff; background: #fff;
border: 1px solid @gray; border: 1px solid @border-regular-control;
border-radius: 50%; border-radius: 50%;
} }
@ -28,7 +28,7 @@
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
background: @gray-deep; background: @text-normal;
border-radius: 50%; border-radius: 50%;
width: 8px; width: 8px;
height: 8px; height: 8px;

View file

@ -31,7 +31,7 @@
background-position: center 0; background-position: center 0;
.border-radius(2px); .border-radius(2px);
border: 1px solid @gray; border: 1px solid @border-regular-control;
-o-transition: background-color .5s 0 linear; -o-transition: background-color .5s 0 linear;
-webkit-transition: background-color .5s 0 linear; -webkit-transition: background-color .5s 0 linear;
-moz-transition: background-color .5s 0 linear; -moz-transition: background-color .5s 0 linear;
@ -43,7 +43,7 @@
.hover { .hover {
.ps-scrollbar-x { .ps-scrollbar-x {
&.always-visible-x { &.always-visible-x {
background-color: @gray; background-color: @border-regular-control;
background-position: center -7px; background-position: center -7px;
} }
} }
@ -85,7 +85,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 center; background-position: 0 center;
.border-radius(2px); .border-radius(2px);
border: 1px solid @gray; border: 1px solid @border-regular-control;
-o-transition: background-color .5s 0 linear; -o-transition: background-color .5s 0 linear;
-webkit-transition: background-color .5s 0 linear; -webkit-transition: background-color .5s 0 linear;
-moz-transition: background-color .5s 0 linear; -moz-transition: background-color .5s 0 linear;
@ -97,7 +97,7 @@
.hover { .hover {
.ps-scrollbar-y { .ps-scrollbar-y {
&.always-visible-y { &.always-visible-y {
background-color: @gray; background-color: @border-regular-control;
background-position: -7px center; background-position: -7px center;
} }
} }

View file

@ -16,7 +16,7 @@
.sw-right { .sw-right {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
background-color: @gray; background-color: @border-regular-control;
border-top-right-radius: 2px; border-top-right-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
} }
@ -43,11 +43,11 @@
cursor: default; cursor: default;
.sw-left { .sw-left {
background-color: @gray; background-color: @border-regular-control;
} }
.thumb { .thumb {
border-color: @gray; border-color: @border-regular-control;
} }
} }
} }

View file

@ -246,7 +246,7 @@
} }
&.border { &.border {
border: 1px solid @gray; border: 1px solid @border-regular-control;
.border-radius(1px); .border-radius(1px);
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -305,7 +305,7 @@
.tabs, .extra { .tabs, .extra {
background-color: transparent; background-color: transparent;
box-shadow: inset 0 -1px 0 0 @gray; box-shadow: inset 0 -1px 0 0 @border-regular-control;
} }
.tabs { .tabs {
@ -319,7 +319,7 @@
&:after { &:after {
//transition: opacity .1s; //transition: opacity .1s;
//transition: bottom .1s; //transition: bottom .1s;
border-top: @underscore_height solid @gray-deep; border-top: @underscore_height solid @text-normal;
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -342,7 +342,7 @@
} }
> a { > a {
color: @gray-deep; color: @text-normal;
&::after { &::after {
display:block; display:block;
@ -376,7 +376,7 @@
} }
&:after { &:after {
border-color: @gray-deep; border-color: @text-normal;
} }
} }
@ -387,11 +387,11 @@
} }
svg.icon { svg.icon {
fill: @gray-deep; fill: @text-normal;
} }
.caption { .caption {
color: @gray-deep; color: @text-normal;
} }
&:hover:not(.disabled) { &:hover:not(.disabled) {
@ -414,7 +414,7 @@
} }
#rib-doc-name { #rib-doc-name {
color: @gray-deep; color: @text-normal;
} }
&.editor-native-color { &.editor-native-color {
@ -460,7 +460,7 @@
svg.icon { svg.icon {
background-image: none; background-image: none;
fill: @gray-deep; fill: @text-normal;
} }
&.borders--small { &.borders--small {

View file

@ -39,7 +39,7 @@
.tooltip-inner { .tooltip-inner {
font-size: 11px; font-size: 11px;
background-color: @body-bg; background-color: @body-bg;
color: @gray-deep; color: @text-normal;
padding: 5px 12px; padding: 5px 12px;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
.box-shadow(0 6px 12px rgba(0, 0, 0, 0.175)); .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));

View file

@ -13,10 +13,10 @@
// Grays // Grays
// ------------------------- // -------------------------
@gray-deep: #444444; //rgb(68, 68, 68) //@gray-deep: #444444; //rgb(68, 68, 68)
@gray-darker: #848484; //rgb(132, 132, 132) @gray-darker: #848484; //rgb(132, 132, 132)
//@gray-dark: #cbcbcb; //rgb(203, 203, 203) //@gray-dark: #cbcbcb; //rgb(203, 203, 203)
@gray: #cfcfcf; //rgb(207, 207, 207) //@gray: #cfcfcf; //rgb(207, 207, 207)
@gray-light: #f1f1f1; //rgb(241, 241, 241) @gray-light: #f1f1f1; //rgb(241, 241, 241)
@gray-lighter: #ededed; //rgb(237, 237, 237) @gray-lighter: #ededed; //rgb(237, 237, 237)
@gray-soft: #adadad; //rgb(173, 173, 173) @gray-soft: #adadad; //rgb(173, 173, 173)
@ -41,7 +41,7 @@
// ------------------------- // -------------------------
@body-bg: #fff; @body-bg: #fff;
@text-color: #cbcbcb; @text-color: #cbcbcb; // @gray-dark
// Links // Links
// ------------------------- // -------------------------
@ -176,7 +176,7 @@
@input-bg-disabled: @gray-lighter; @input-bg-disabled: @gray-lighter;
@input-color: #000; @input-color: #000;
@input-border: @gray; @input-border: #cfcfcf; // @gray;
@input-border-radius: @border-radius-base; @input-border-radius: @border-radius-base;
@input-border-radius-large: @border-radius-large; @input-border-radius-large: @border-radius-large;
@input-border-radius-small: @border-radius-small; @input-border-radius-small: @border-radius-small;
@ -191,7 +191,7 @@
//** Small `.form-control` border radius //** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small; @input-border-radius-small: @border-radius-small;
@input-color-placeholder: @gray; @input-color-placeholder: #cfcfcf; // @gray;
@input-height-base: (floor(@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + 5); @input-height-base: (floor(@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + 5);
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); @input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@ -199,7 +199,7 @@
@form-group-margin-bottom: 15px; @form-group-margin-bottom: 15px;
@legend-color: #cbcbcb; @legend-color: #cbcbcb; // @gray-dark
@legend-border-color: #e5e5e5; @legend-border-color: #e5e5e5;
@input-group-addon-bg: @input-bg; @input-group-addon-bg: @input-bg;
@ -216,16 +216,16 @@
@dropdown-fallback-border: #ccc; @dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5; @dropdown-divider-bg: #e5e5e5;
@dropdown-link-color: @gray-deep; @dropdown-link-color: #444; // @gray-deep;
@dropdown-link-hover-color: darken(@gray-deep, 5%); @dropdown-link-hover-color: darken(#444, 5%); // darken(@gray-deep, 5%);
@dropdown-link-hover-bg: @secondary; @dropdown-link-hover-bg: @secondary;
@dropdown-link-active-color: @component-active-color; @dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg; @dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray; @dropdown-link-disabled-color: #cfcfcf; // @gray;
@dropdown-header-color: @gray; @dropdown-header-color: #cfcfcf; // @gray;
// COMPONENT VARIABLES // COMPONENT VARIABLES
@ -373,7 +373,7 @@
@nav-tabs-link-hover-border-color: @gray-lighter; @nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg; @nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray; @nav-tabs-active-link-hover-color: #cfcfcf; // @gray;
@nav-tabs-active-link-hover-border-color: #ddd; @nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd; @nav-tabs-justified-link-border-color: #ddd;

View file

@ -180,10 +180,10 @@
a { a {
text-decoration: underline; text-decoration: underline;
color: @gray-deep; color: @text-normal;
&:focus, &:hover { &:focus, &:hover {
color: @gray-deep; color: @text-normal;
} }
} }
} }

View file

@ -33,7 +33,7 @@
&.disabled > a { &.disabled > a {
cursor: default; cursor: default;
color: @gray; color: @border-regular-control;
} }
} }
@ -123,7 +123,7 @@
.flex-settings { .flex-settings {
#file-menu-panel & { #file-menu-panel & {
&.bordered { &.bordered {
border-bottom: 1px solid @gray; border-bottom: 1px solid @border-regular-control;
} }
overflow: hidden; overflow: hidden;
position: relative; position: relative;

View file

@ -2,7 +2,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
.user-select(none); .user-select(none);
color: @gray-deep; color: @text-normal;
&.safari { &.safari {
position: absolute; position: absolute;

View file

@ -7,7 +7,7 @@
.status-label { .status-label {
font-weight: bold; font-weight: bold;
color: @gray-deep; color: @text-normal;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
top: 1px; top: 1px;

View file

@ -49,7 +49,7 @@
width: 246px; width: 246px;
height: @contents-menu-item-height; height: @contents-menu-item-height;
.box-shadow(0 0 0 1px @gray); .box-shadow(0 0 0 1px @border-regular-control);
&:hover, &:hover,
&.selected { &.selected {
@ -125,7 +125,7 @@
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
.box-shadow(0 0 0 1px @gray); .box-shadow(0 0 0 1px @border-regular-control);
} }
} }
} }
@ -181,7 +181,7 @@
} }
.item-equation { .item-equation {
border: 1px solid @gray; border: 1px solid @border-regular-control;
.background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true); .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
} }
@ -189,8 +189,8 @@
cursor: default; cursor: default;
position: relative; position: relative;
padding: 14px 11px; padding: 14px 11px;
border-left: 1px solid @gray; border-left: 1px solid @border-regular-control;
border-top: 1px solid @gray; border-top: 1px solid @border-regular-control;
} }
.save-style-link { .save-style-link {
@ -239,5 +239,5 @@
position: absolute; position: absolute;
z-index: @zindex-dropdown - 20; z-index: @zindex-dropdown - 20;
background-color: @gray-light; background-color: @gray-light;
border: 1px solid @gray; border: 1px solid @border-regular-control;
} }

View file

@ -150,7 +150,7 @@
.slidenum-div { .slidenum-div {
background-color: @body-bg; background-color: @body-bg;
color: @gray-deep; color: @text-normal;
padding: 5px 12px; padding: 5px 12px;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
.box-shadow(0 6px 12px rgba(0, 0, 0, 0.175)); .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));

View file

@ -2,7 +2,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
.user-select(none); .user-select(none);
color: @gray-deep; color: @text-normal;
&.safari { &.safari {
position: absolute; position: absolute;

View file

@ -191,7 +191,7 @@
.flex-settings { .flex-settings {
&.bordered { &.bordered {
border-bottom: 1px solid @gray; border-bottom: 1px solid @border-regular-control;
} }
overflow: hidden; overflow: hidden;
position: relative; position: relative;

View file

@ -7,7 +7,7 @@
.status-label { .status-label {
font-weight: bold; font-weight: bold;
color: @gray-deep; color: @text-normal;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
top: 1px; top: 1px;

View file

@ -118,7 +118,7 @@
} }
.item-equation { .item-equation {
border: 1px solid @gray; border: 1px solid @border-regular-control;
.background-ximage-v2('toolbar/math.png', 1500px); .background-ximage-v2('toolbar/math.png', 1500px);
} }
@ -132,7 +132,7 @@
position: absolute; position: absolute;
z-index: @zindex-dropdown - 20; z-index: @zindex-dropdown - 20;
background-color: @gray-light; background-color: @gray-light;
border: 1px solid @gray; border: 1px solid @border-regular-control;
} }
.item-theme { .item-theme {

View file

@ -23,7 +23,7 @@
&.selected { &.selected {
background-color: @secondary; background-color: @secondary;
border-color: @secondary; border-color: @secondary;
color: @gray-deep; color: @text-normal;
border-style: solid; border-style: solid;
border-width: 1px 0; border-width: 1px 0;
} }
@ -94,7 +94,7 @@
} }
&.border { &.border {
border: 1px solid @gray; border: 1px solid @border-regular-control;
.border-radius(1px); .border-radius(1px);
width: 22px; width: 22px;
height: 22px; height: 22px;

View file

@ -2,7 +2,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
.user-select(none); .user-select(none);
color: @gray-deep; color: @text-normal;
&.safari { &.safari {
position: absolute; position: absolute;

View file

@ -117,7 +117,7 @@
&.disabled > a { &.disabled > a {
cursor: default; cursor: default;
color: @gray; color: @border-regular-control;
} }
} }
@ -181,7 +181,7 @@
.flex-settings { .flex-settings {
&.bordered { &.bordered {
border-bottom: 1px solid @gray; border-bottom: 1px solid @border-regular-control;
} }
overflow: hidden; overflow: hidden;
position: relative; position: relative;

View file

@ -272,14 +272,14 @@
} }
> span { > span {
border-left: 2px solid @gray-deep; border-left: 2px solid @text-normal;
padding-left: 9px; padding-left: 9px;
} }
&.right { &.right {
> span { > span {
border-left: 1px solid @border-toolbar; border-left: 1px solid @border-toolbar;
border-right: 2px solid @gray-deep; border-right: 2px solid @text-normal;
padding-right: 9px; padding-right: 9px;
padding-left: 10px; padding-left: 10px;
} }
@ -318,7 +318,7 @@
.status-label { .status-label {
font-weight: bold; font-weight: bold;
color: @gray-deep; color: @text-normal;
white-space: nowrap; white-space: nowrap;
} }

View file

@ -136,7 +136,7 @@
} }
.item-equation { .item-equation {
border: 1px solid @gray; border: 1px solid @border-regular-control;
.background-ximage-v2('toolbar/math.png', 1500px); .background-ximage-v2('toolbar/math.png', 1500px);
} }
@ -145,7 +145,7 @@
position: absolute; position: absolute;
z-index: @zindex-dropdown - 20; z-index: @zindex-dropdown - 20;
background-color: @gray-light; background-color: @gray-light;
border: 1px solid @gray; border: 1px solid @border-regular-control;
} }
#slot-field-fontname { #slot-field-fontname {