778 lines
18 KiB
Plaintext
778 lines
18 KiB
Plaintext
label {
|
|
&.link,
|
|
span.link{
|
|
border-bottom: @scaled-one-px-value-ie dotted @text-secondary-ie;
|
|
border-bottom: @scaled-one-px-value dotted @text-secondary;
|
|
cursor: pointer;
|
|
}
|
|
&.disabled {
|
|
&.link,
|
|
span.link {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
&.link-solid {
|
|
border-bottom: @scaled-one-px-value-ie solid @text-secondary-ie;
|
|
border-bottom: @scaled-one-px-value solid @text-secondary;
|
|
cursor: pointer;
|
|
|
|
&.disabled {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: @component-disabled-opacity-ie;
|
|
opacity: @component-disabled-opacity;
|
|
}
|
|
|
|
&.fixed {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&.light {
|
|
color: @text-tertiary-ie;
|
|
color: @text-tertiary;
|
|
}
|
|
}
|
|
|
|
.menu-shapes {
|
|
.item {
|
|
.box-shadow(none);
|
|
}
|
|
}
|
|
|
|
.combobox.fonts {
|
|
> .dropdown-menu {
|
|
max-height: 388px;
|
|
}
|
|
}
|
|
|
|
.user-select {
|
|
.user-select(text);
|
|
}
|
|
|
|
.tool-menu {
|
|
height: 100%;
|
|
display: block;
|
|
|
|
&.left {
|
|
overflow: hidden;
|
|
|
|
.tool-menu-btns {
|
|
border-right: @border-sidemenu-ie;
|
|
border-right: @border-sidemenu;
|
|
|
|
.rtl & {
|
|
border-left: @border-sidemenu-ie;
|
|
border-left: @border-sidemenu;
|
|
border-right: 0 none;
|
|
}
|
|
|
|
.separator.horizontal {
|
|
position: relative;
|
|
width: 33px;
|
|
margin: 0 3px;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.right {
|
|
.tool-menu-btns {
|
|
//position: absolute;
|
|
border-left: @border-sidemenu-ie;
|
|
border-left: @border-sidemenu;
|
|
background-color: @background-pane-ie;
|
|
background-color: @background-pane;
|
|
right: 0;
|
|
overflow: hidden;
|
|
|
|
.rtl & {
|
|
left: 0;
|
|
right: auto;
|
|
|
|
border-right: @border-sidemenu-ie;
|
|
border-right: @border-sidemenu;
|
|
border-left: 0 none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tool-menu-btns {
|
|
width: 40px;
|
|
height: 100%;
|
|
display: inline-block;
|
|
position: absolute;
|
|
padding-top: 15px;
|
|
padding-right: @layout-padding-x-side-panel-ie;
|
|
padding-right: @layout-padding-x-side-panel;
|
|
padding-left: @layout-padding-x-side-panel-ie;
|
|
padding-left: @layout-padding-x-side-panel;
|
|
|
|
button {
|
|
margin-bottom: @category-btn-y-margin-large-ie;
|
|
margin-bottom: @category-btn-y-margin-large;
|
|
}
|
|
}
|
|
|
|
.btn-side-more.btn {
|
|
z-index: 0;
|
|
}
|
|
|
|
.btn-category.plugin-buttons {
|
|
.icon-custom {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
img {
|
|
max-width: @x-small-btn-icon-size-ie;
|
|
max-width: @x-small-btn-icon-size;
|
|
max-height: @x-small-btn-icon-size-ie;
|
|
max-height: @x-small-btn-icon-size;
|
|
}
|
|
}
|
|
|
|
.left-panel {
|
|
height: 100%;
|
|
padding: @layout-padding-left-panel-ie;
|
|
padding: @layout-padding-left-panel;
|
|
border-right: @border-sidemenu-ie;
|
|
border-right: @border-sidemenu;
|
|
|
|
.rtl & {
|
|
padding: @layout-padding-left-panel-rtl-ie;
|
|
padding: @layout-padding-left-panel-rtl;
|
|
border-left: @border-sidemenu-ie;
|
|
border-left: @border-sidemenu;
|
|
border-right: 0 none;
|
|
}
|
|
|
|
#left-panel-chat,
|
|
#left-panel-comments,
|
|
#left-panel-search {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
#left-panel-history {
|
|
left: 40px;
|
|
width: 300px;
|
|
height: 100%;
|
|
display: none;
|
|
|
|
padding: @layout-padding-left-panel-ie;
|
|
padding: @layout-padding-left-panel;
|
|
padding-left: 0;
|
|
border-right: @border-sidemenu-ie;
|
|
border-right: @border-sidemenu;
|
|
|
|
.rtl & {
|
|
padding: @layout-padding-left-panel-rtl-ie;
|
|
padding: @layout-padding-left-panel-rtl;
|
|
padding-right: 0;
|
|
border-left: @border-sidemenu-ie;
|
|
border-left: @border-sidemenu;
|
|
border-right: 0 none;
|
|
}
|
|
}
|
|
|
|
.right-panel {
|
|
width: 220px;
|
|
height: 100%;
|
|
display: none;
|
|
padding: @layout-padding-right-panel-ie;
|
|
padding: @layout-padding-right-panel;
|
|
|
|
border-left: @border-sidemenu-ie;
|
|
border-left: @border-sidemenu;
|
|
|
|
.rtl & {
|
|
padding: @layout-padding-right-panel-rtl-ie;
|
|
padding: @layout-padding-right-panel-rtl;
|
|
border-right: @border-sidemenu-ie;
|
|
border-right: @border-sidemenu;
|
|
border-left: 0 none;
|
|
}
|
|
|
|
.content-box {
|
|
height: 100%;
|
|
width: 100%;
|
|
.settings-panel {
|
|
padding: @layout-padding-right-panel-content-ie;
|
|
padding: @layout-padding-right-panel-content;
|
|
|
|
.rtl & {
|
|
padding: @layout-padding-right-panel-content-rtl-ie;
|
|
padding: @layout-padding-right-panel-content-rtl;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
#file-menu-panel {
|
|
> div {
|
|
height: 100%;
|
|
}
|
|
|
|
.panel-menu {
|
|
width: 260px;
|
|
max-height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.float-left();
|
|
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
|
border-right: @scaled-one-px-value solid @border-toolbar;
|
|
background-color: @background-pane-ie;
|
|
background-color: @background-pane;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 15px 0 24px;
|
|
|
|
.rtl & {
|
|
border-right: none;
|
|
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
|
border-left: @scaled-one-px-value solid @border-toolbar;
|
|
}
|
|
|
|
svg.menu-item-icon {
|
|
display: none;
|
|
}
|
|
|
|
span.menu-item-icon {
|
|
display: block;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
margin-bottom: 4px;
|
|
|
|
&.fm-btn {
|
|
height: 28px;
|
|
padding: 4px 16px 4px 12px;
|
|
cursor: pointer;
|
|
|
|
.rtl & {
|
|
padding: 4px 12px 4px 16px;
|
|
}
|
|
|
|
&:hover:not(.disabled),
|
|
&.highlight-tip {
|
|
background-color: @highlight-button-hover-ie;
|
|
background-color: @highlight-button-hover;
|
|
}
|
|
|
|
&.active:not(.disabled) {
|
|
outline: 0;
|
|
background-color: @highlight-button-pressed-ie;
|
|
background-color: @highlight-button-pressed;
|
|
|
|
> a {
|
|
color: @text-normal-pressed-ie;
|
|
color: @text-normal-pressed;
|
|
}
|
|
|
|
.menu-item-icon {
|
|
background-position-x: @button-small-active-icon-offset-x-ie;
|
|
background-position-x: @button-small-active-icon-offset-x;
|
|
}
|
|
|
|
svg.menu-item-icon {
|
|
fill: @icon-normal-pressed-ie;
|
|
fill: @icon-normal-pressed;
|
|
}
|
|
}
|
|
|
|
&.disabled > a {
|
|
cursor: default;
|
|
opacity: @component-disabled-opacity-ie;
|
|
opacity: @component-disabled-opacity;
|
|
}
|
|
}
|
|
|
|
&.devider {
|
|
height: @scaled-one-px-value-ie;
|
|
height: @scaled-one-px-value;
|
|
background-color: @border-divider-ie;
|
|
background-color: @border-divider;
|
|
margin-top: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
&.devider-small {
|
|
margin-top: 7px;
|
|
margin-bottom: 11px;
|
|
}
|
|
|
|
&.devider-last {
|
|
margin-top: auto;
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
.menu-item-icon {
|
|
width: @x-small-btn-icon-size-ie;
|
|
width: @x-small-btn-icon-size;
|
|
height: @x-small-btn-icon-size-ie;
|
|
height: @x-small-btn-icon-size;
|
|
line-height: @x-small-btn-icon-size-ie;
|
|
line-height: @x-small-btn-icon-size;
|
|
position: relative;
|
|
&:not(:disabled) {
|
|
opacity: 0.8;
|
|
opacity: @component-normal-icon-opacity;
|
|
}
|
|
}
|
|
|
|
> a {
|
|
&:extend(.dropdown-menu > li > a);
|
|
.font-size-large();
|
|
padding:0;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
height: 100%;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.menu-item-icon {
|
|
.margin-right-8();
|
|
}
|
|
|
|
&[data-no-icon] {
|
|
.padding-left-28();
|
|
.padding-left(calc(@x-small-btn-icon-size + 8px));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.flex-settings {
|
|
&.bordered {
|
|
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
|
border-bottom: @scaled-one-px-value solid @border-toolbar;
|
|
}
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.beta-hint {
|
|
background-color: #ffb400;
|
|
color: #6e4e00;
|
|
padding: 3px 5px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.new-hint {
|
|
background-color: #ffb400;
|
|
color: #6e4e00;
|
|
padding: 3px 5px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
.margin-left-10();
|
|
}
|
|
}
|
|
|
|
.pixel-ratio__2_5 {
|
|
#file-menu-panel {
|
|
.panel-menu {
|
|
svg.menu-item-icon {
|
|
fill: var(--icon-normal);
|
|
display: block;
|
|
}
|
|
|
|
span.menu-item-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-panel {
|
|
display: none;
|
|
overflow: visible;
|
|
|
|
& > table {
|
|
width: 100%;
|
|
}
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
|
|
.padding-very-small {
|
|
padding-bottom: 4px;
|
|
}
|
|
.padding-small {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.padding-medium {
|
|
padding-bottom: 12px;
|
|
}
|
|
.padding-large {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.finish-cell {
|
|
height: 15px;
|
|
}
|
|
|
|
label {
|
|
.font-size-normal();
|
|
font-weight: normal;
|
|
|
|
&.input-label{
|
|
margin-bottom: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&.header {
|
|
.font-weight-bold();
|
|
}
|
|
}
|
|
|
|
.separator { width: 100%;}
|
|
|
|
.settings-hidden {
|
|
display: none;
|
|
}
|
|
|
|
textarea {
|
|
.user-select(text);
|
|
width: 100%;
|
|
resize: none;
|
|
margin-bottom: 5px;
|
|
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
|
|
border: @scaled-one-px-value solid @border-regular-control;
|
|
height: 100%;
|
|
|
|
&.disabled {
|
|
opacity: @component-disabled-opacity-ie;
|
|
opacity: @component-disabled-opacity;
|
|
cursor: default !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.quick-access-dlg {
|
|
.padding-small {
|
|
padding-bottom: 8px;
|
|
}
|
|
.padding-medium {
|
|
padding-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.plugin-panel {
|
|
display: none;
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
> li > a {
|
|
color: @text-normal-ie;
|
|
color: @text-normal;
|
|
}
|
|
|
|
.rtl & {
|
|
left: unset;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
background-color: @background-normal-ie;
|
|
background-color: @background-normal;
|
|
color: @text-normal-ie;
|
|
color: @text-normal;
|
|
&:-ms-input-placeholder {
|
|
color: @text-tertiary-ie;
|
|
}
|
|
.placeholder();
|
|
|
|
.rtl & {
|
|
direction: rtl;
|
|
}
|
|
}
|
|
|
|
//.btn-edit-table,
|
|
//.btn-change-shape {
|
|
// .background-ximage-v2('right-panels/rowscols_icon.png', 56px);
|
|
// margin-right: 2px !important;
|
|
// margin-bottom: 1px !important;
|
|
//
|
|
// background-position-x: calc(@button-small-normal-icon-offset-x - 8px);
|
|
//
|
|
// .btn-group.open &,
|
|
// button.active:not(.disabled) &,
|
|
// button:active:not(.disabled) &
|
|
// {
|
|
// background-position-x: calc(@button-small-active-icon-offset-x - 8px);
|
|
// }
|
|
//}
|
|
//
|
|
//.btn-edit-table {
|
|
// background-position-y: 0;
|
|
//
|
|
// button.over & {
|
|
// //background-position: -28px 0;
|
|
// }
|
|
//}
|
|
//
|
|
//.btn-change-shape {
|
|
// background-position-y: -16px;
|
|
//
|
|
// button.over & {
|
|
// //background-position: -28px -16px;
|
|
// }
|
|
//}
|
|
|
|
.doc-content-color {
|
|
background-color: @canvas-content-background;
|
|
}
|
|
|
|
a {
|
|
color: @text-link;
|
|
|
|
&:hover {
|
|
color: @text-link-hover;
|
|
}
|
|
|
|
&:active {
|
|
color: @text-link-active;
|
|
}
|
|
|
|
&:visited {
|
|
color: @text-link-visited;
|
|
}
|
|
}
|
|
|
|
body {
|
|
&.pixel-ratio__1_75 {
|
|
image-rendering: crisp-edges; // FF only
|
|
}
|
|
font-family: @font-family-sans-serif;
|
|
font-family: @font-family-base;
|
|
}
|
|
|
|
.rtl .ps-container.oo {
|
|
.ps-scrollbar-y-rail {
|
|
right: unset !important;
|
|
left: 1px;
|
|
|
|
.ps-scrollbar-y {
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-margins {
|
|
.margin-vertical {
|
|
display: inline-block;
|
|
.margin-right-20();
|
|
min-width: 80px;
|
|
}
|
|
.margin-horizontal {
|
|
display: inline-block;
|
|
}
|
|
label {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.color-btn-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu-add-smart-art {
|
|
.loading-item {
|
|
.box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
|
|
.box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.loading-spinner {
|
|
display: block;
|
|
width: 28px;
|
|
height: 28px;
|
|
background-image: ~"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDQ0IiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iNy4yNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTYwJSwgNDAlIiAvPjwvc3ZnPg==)";
|
|
background-color: transparent;
|
|
opacity: 0.5;
|
|
animation-duration: .8s;
|
|
animation-name: rotation;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
|
|
.theme-type-dark & {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-rtl {
|
|
.rtl & {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
#special-paste-container,
|
|
#autocorrect-paste-container,
|
|
#equation-container,
|
|
#text-bar-container,
|
|
#annot-bar-container,
|
|
#annot-sel-bar-container {
|
|
position: absolute;
|
|
z-index: @zindex-dropdown - 20;
|
|
|
|
background-color: @background-toolbar-ie;
|
|
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-radius: @border-radius-form-control-ie;
|
|
border-radius: @border-radius-form-control;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.2);
|
|
.ie &,
|
|
.winxp & {
|
|
overflow: visible;
|
|
}
|
|
&.has-open-menu {
|
|
z-index: @zindex-navbar + 3;
|
|
}
|
|
}
|
|
|
|
#equation-container {
|
|
.separator {
|
|
height: 30px;
|
|
}
|
|
.btn-toolbar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 0px;
|
|
|
|
.icon:not(.toolbar__icon) {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#text-bar-container,
|
|
#annot-bar-container,
|
|
#annot-sel-bar-container {
|
|
padding: 4px 6px;
|
|
.btn-toolbar,
|
|
.btn-group {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.separator {
|
|
height: @x-small-btn-size-ie;
|
|
height: @x-small-btn-size;
|
|
}
|
|
& > div {
|
|
.display-inline-block-middle();
|
|
}
|
|
}
|
|
|
|
#chart-element-container {
|
|
background-color: @background-toolbar-ie;
|
|
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-radius: @border-radius-form-control-ie;
|
|
border-radius: @border-radius-form-control;
|
|
}
|
|
|
|
// only for test screen reader focus manager
|
|
.focus-mode {
|
|
:focus {
|
|
outline: 1px solid red !important;
|
|
}
|
|
}
|
|
|
|
// for colored svg icons
|
|
.icon-stroke-blue-primary {
|
|
fill: transparent;
|
|
stroke: var(--icon-blue-primary, #446eca);
|
|
}
|
|
|
|
.icon-fill-blue-primary {
|
|
fill: var(--icon-blue-primary, #446eca);
|
|
stroke: transparent;
|
|
}
|
|
|
|
.icon-stroke-gray-primary {
|
|
fill: transparent;
|
|
stroke: var(--icon-gray-primary, #383838);
|
|
}
|
|
|
|
.icon-fill-gray-primary {
|
|
fill: var(--icon-gray-primary, #383838);
|
|
stroke: transparent;
|
|
}
|
|
|
|
.icon-stroke-gray-secondary {
|
|
fill: transparent;
|
|
stroke: var(--icon-gray-secondary, #f3f3f3);
|
|
}
|
|
|
|
.icon-fill-gray-secondary {
|
|
fill: var(--icon-gray-secondary, #f3f3f3);
|
|
stroke: transparent;
|
|
}
|
|
|
|
.icon-stroke-blue-secondary {
|
|
fill: transparent;
|
|
stroke: var(--icon-blue-secondary, #b7cff5);
|
|
}
|
|
|
|
.icon-fill-blue-secondary {
|
|
fill: var(--icon-blue-secondary, #b7cff5);
|
|
stroke: transparent;
|
|
}
|
|
|
|
.icon-stroke-red {
|
|
fill: transparent;
|
|
stroke: var(--icon-red, #fca5a5);
|
|
}
|
|
|
|
.icon-fill-red {
|
|
fill: var(--icon-red, #fca5a5);
|
|
stroke: transparent;
|
|
}
|
|
|
|
.icon-stroke-success {
|
|
fill: transparent;
|
|
stroke: var(--icon-success, #78b588);
|
|
}
|
|
|
|
.icon-fill-success {
|
|
fill: var(--icon-success, #78b588);
|
|
stroke: transparent;
|
|
}
|