a6ebc1e570
- Fix Borders - Make sure the borders that divide the document container and its surroundings are always visible at all times not matter what is open (sidebar) or what is visible (status bar, ruler) Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Idea765f4438981af66bb760f25f7c553be7da728
698 lines
14 KiB
CSS
698 lines
14 KiB
CSS
:root {
|
|
/*All used fonts (except w2ui)
|
|
----------------------------------*/
|
|
--loleaflet-font: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif;
|
|
/*investigate what are the drawback in consisntly use --loleaflet-fonts
|
|
for vex, jquery-ui and perhaps mobile*/
|
|
--mobile-font: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
|
|
--vex-font: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
|
|
--jquery-ui-font: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
|
|
|
|
--docs-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
--docs--pre-font: 'Consolas', 'Menlo', 'Lucida Console', 'Courier New', monospace;
|
|
}
|
|
/* clip technique: hide visually but keep it available to screen readers */
|
|
.visuallyhidden {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
#document-container {
|
|
background: #DFDFDF;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
flex: 1;
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
#toolbar-wrapper.readonly {
|
|
display: none;
|
|
}
|
|
|
|
#map {
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
z-index: 10;
|
|
cursor: auto;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
}
|
|
|
|
.leaflet-progress-layer
|
|
{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.bucket-cursor {
|
|
cursor: url('images/cursors/fill.png') 4 9, auto !important;/*setting coordinates to align the tip of the bucket icon */
|
|
}
|
|
.loleaflet-scrollbar-show {
|
|
opacity: 1 !important;
|
|
filter: 'alpha(opacity=100)' !important;
|
|
-ms-filter: 'alpha(opacity=100)' !important;
|
|
}
|
|
|
|
.table-column-resize-marker {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('images/table-column-resize-marker.svg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.table-column-resize-marker:hover {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('images/table-column-resize-marker-hover.svg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.table-row-resize-marker {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('images/table-row-resize-marker.svg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: row-resize;
|
|
}
|
|
|
|
.table-row-resize-marker:hover {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('images/table-row-resize-marker-hover.svg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: row-resize;
|
|
}
|
|
|
|
.table-select-marker {
|
|
margin: 0px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url('images/table-row-or-column-select-marker.svg') no-repeat center center /12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.table-select-marker::before {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
|
|
.table-select-marker--column::before {
|
|
bottom: 50%;
|
|
border-bottom: 1px dashed lightgray;
|
|
width: 100%;
|
|
}
|
|
|
|
.table-select-marker--row::before {
|
|
left: 50%;
|
|
border-left: 1px dashed lightgray;
|
|
height: 100%;
|
|
}
|
|
|
|
.table-select-marker:hover {
|
|
background: url('images/table-row-or-column-select-marker-selected.svg') no-repeat center center /12px;
|
|
}
|
|
|
|
.table-select-marker:hover::before {
|
|
border-color: #1C99E0;
|
|
}
|
|
|
|
.table-move-marker {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('images/table-move-marker.svg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: move;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
overscroll-behavior-y: none; /* disable the pull to reload gesture */
|
|
background: #ffffff;
|
|
touch-action: none;
|
|
line-height: normal;
|
|
}
|
|
|
|
#presentation-controls-wrapper {
|
|
background: #dfdfdf;
|
|
position: relative;
|
|
border-top: 1px solid var(--gray-color);
|
|
display: none;
|
|
}
|
|
|
|
#sidebar-dock-wrapper {
|
|
display: none;
|
|
background: #fff;
|
|
position: relative;
|
|
border-top: 1px solid var(--gray-color);
|
|
border-left: 1px solid var(--gray-color);
|
|
overflow: hidden;
|
|
z-index: 990;
|
|
}
|
|
nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
|
|
bottom: 72px;
|
|
}
|
|
#sidebar-panel {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
position: relative;
|
|
width: auto;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
z-index: 1200;
|
|
}
|
|
|
|
#toolbar-wrapper {
|
|
table-layout: fixed;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
border-top: none;
|
|
z-index: 11;
|
|
}
|
|
|
|
#toolbar-logo {
|
|
width: 0;
|
|
}
|
|
|
|
/* Hide hamburger except on mobile phones */
|
|
#toolbar-hamburger {
|
|
width: 0;
|
|
}
|
|
|
|
#mobile-edit-button {
|
|
position: absolute;
|
|
width: 56px;
|
|
height: 56px;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
background-color: #0b87e7;
|
|
border-radius: 50%;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
z-index: 1001;
|
|
transform: scale(1);
|
|
transition: transform 0.5s;
|
|
}
|
|
|
|
#mobile-edit-button.impress.portrait{
|
|
bottom: 70px;
|
|
}
|
|
|
|
#mobile-edit-button-image {
|
|
position: relative;
|
|
left: 16px;
|
|
top: 16px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url('images/baseline-edit-24px.svg') no-repeat center !important;
|
|
transform: rotate(0deg);
|
|
transition: transform 0.5s;
|
|
}
|
|
#mobile-edit-button:active{
|
|
transform: scale(1.2);
|
|
}
|
|
#mobile-edit-button:active > #mobile-edit-button-image {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.loleaflet-font {
|
|
font-family: var(--loleaflet-font) !important;
|
|
font-size: 12px !important;
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.loleaflet-character {
|
|
table-layout: fixed;
|
|
font: 17px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
|
text-align: center;
|
|
}
|
|
|
|
.loleaflet-character td {
|
|
width: 20px;
|
|
}
|
|
|
|
.annotation-button {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.annotation-marker {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('images/note.svg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
outline: none;
|
|
}
|
|
|
|
.loleaflet-scrolled {
|
|
overflow: auto;
|
|
}
|
|
|
|
.loleaflet-mobile-container {
|
|
top: 30px;
|
|
margin: 0;
|
|
width: 1px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.loleaflet-context-down {
|
|
border: 1px solid #aaaaaa;
|
|
background-color: #dddddd;
|
|
}
|
|
|
|
.loleaflet-mobile-input {
|
|
width: 1px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
}
|
|
|
|
/* Important to override context-menu-icon's font-family here otherwise, jquery-contextmenu.css
|
|
* will try to load its own font file which is not available in dist/ */
|
|
.context-menu-icon::before {
|
|
font-family: var(--loleaflet-font) !important;
|
|
content: '\2713';
|
|
color: #000 !important;
|
|
}
|
|
.context-menu-icon-lo-checkmark:before {
|
|
content: '\2713';
|
|
}
|
|
|
|
.context-menu-hover {
|
|
background-color: #0b87e7 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.context-menu-hover > span > a {
|
|
color: #fff;
|
|
}
|
|
|
|
.context-menu-submenu.context-menu-hover:after {
|
|
border-color: transparent transparent transparent #fff;
|
|
}
|
|
|
|
.loleaflet-annotation {
|
|
position: absolute;
|
|
text-align: center;
|
|
user-select: text;
|
|
-moz-user-select: text;
|
|
-webkit-user-select: text;
|
|
-ms-user-select: text;
|
|
z-index: 10;
|
|
}
|
|
|
|
.loleaflet-annotation-content-wrapper, .loleaflet-annotation-redline-content-wrapper {
|
|
padding: 8px;
|
|
font-family: var(--loleaflet-font) !important;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
background-color: #EFEFEF; /* Fallback color for IE11. */
|
|
background-color: var(--gray-light-bg-color);
|
|
box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
|
|
color: #222;
|
|
border: none;
|
|
border-radius: 2px;
|
|
width: 240px;
|
|
}
|
|
|
|
.loleaflet-annotation-content {
|
|
margin: 3px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.loleaflet-dont-break {
|
|
/* These are technically the same, but use both */
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
|
|
/* Don't eat new lines */
|
|
white-space: pre-wrap;
|
|
|
|
/* Adds a hyphen where the word breaks, if supported (No Blink) */
|
|
-ms-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.loleaflet-annotation-content-author {
|
|
margin: 0;
|
|
margin-top: 2px;
|
|
height: 18px;
|
|
}
|
|
|
|
.loleaflet-annotation-content-resolved {
|
|
color: green;
|
|
}
|
|
|
|
.loleaflet-annotation-edit {
|
|
margin: 3px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.loleaflet-annotation-textarea {
|
|
font-family: var(--loleaflet-font) !important;
|
|
font-size: 13px;
|
|
border: 1px solid #c8c8c8;
|
|
background-color: white;
|
|
overflow-x: hidden;
|
|
height: 50px;
|
|
width: 95%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loleaflet-div-layer {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.loleaflet-annotation-table {
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.loleaflet-annotation-img {
|
|
max-width: 32px;
|
|
display: inline-block;
|
|
border: solid 2px;
|
|
border-radius: 50%;
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
.loleaflet-annotation-img .avatar-img{
|
|
border: none;
|
|
}
|
|
.loleaflet-annotation-img > .avatar-img{
|
|
display: block;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
width: 32px; /* Width of new image */
|
|
height: 32px; /* Height of new image */
|
|
background: url('images/user.svg') center 3px no-repeat;
|
|
}
|
|
|
|
.leaflet-container .leaflet-pane.leaflet-calc-background-pane {
|
|
z-index: 0;
|
|
}
|
|
|
|
.avatar-img {
|
|
border: solid 2px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-info {
|
|
border-radius: 50%;
|
|
width: 24px;
|
|
height: 24px;
|
|
overflow: auto;
|
|
margin: auto;
|
|
}
|
|
|
|
.loleaflet-annotation-author {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
vertical-align: top;
|
|
display: table-cell;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
max-width: 110px;
|
|
}
|
|
|
|
.loleaflet-annotation-menu, .loleaflet-annotation-menu-redline, .loleaflet-redline-accept-button, .loleaflet-redline-reject-button {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
vertical-align: top;
|
|
border: 1px solid transparent;
|
|
display: inline-block;
|
|
}
|
|
|
|
.loleaflet-redline-accept-button {
|
|
background: url('images/lc_accepttrackedchanges.svg') no-repeat center !important;
|
|
}
|
|
|
|
.loleaflet-redline-reject-button {
|
|
background: url('images/lc_rejecttrackedchange.svg') no-repeat center !important;
|
|
}
|
|
|
|
.loleaflet-annotation-menu, .loleaflet-annotation-menu-redline {
|
|
background: url('images/submenu.svg') no-repeat center/contain !important;
|
|
}
|
|
|
|
.loleaflet-annotation-menu:hover, .loleaflet-annotation-menu-redline:hover, .loleaflet-redline-accept-button:hover, .loleaflet-redline-reject-button:hover {
|
|
border: 1px solid darkgrey;
|
|
}
|
|
|
|
.loleaflet-annotation-date {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.loleaflet-annotation-menubar {
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: top;
|
|
}
|
|
/*Tooltips
|
|
----------------------------------*/
|
|
[data-title]:hover:after {
|
|
opacity: 1;
|
|
transition: all 0.1s ease 0.5s;
|
|
visibility: visible;
|
|
}
|
|
[data-title]:after {
|
|
content: attr(data-title);
|
|
font-size: 1em !important;
|
|
bottom: -1.6em;
|
|
left: 100%;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
border-color: #2a2a2a;
|
|
visibility: hidden;
|
|
}
|
|
.loleaflet-ruler-left[data-title]:after,
|
|
.loleaflet-ruler-right[data-title]:after {
|
|
bottom: -2.8em;
|
|
left: auto;
|
|
}
|
|
[data-title] {
|
|
position: relative;
|
|
}
|
|
|
|
.loleaflet-annotation-caption {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.loleaflet-bar {
|
|
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
margin: 3px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.loleaflet-bar a,
|
|
.loleaflet-bar a:hover {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #ccc;
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
display: block;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
.loleaflet-bar a:hover {
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
.loleaflet-bar a:first-child {
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
|
|
.loleaflet-bar a:last-child {
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.loleaflet-bar a.leaflet-disabled {
|
|
cursor: default;
|
|
background-color: #f4f4f4;
|
|
color: #bbb;
|
|
}
|
|
|
|
.loleaflet-bar a {
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.loleaflet-control-scroll-up,
|
|
.loleaflet-control-scroll-down {
|
|
font: bold 18px 'Lucida Console', Monaco, monospace;
|
|
text-indent: 1px;
|
|
}
|
|
|
|
.lokdialog_container.lokdialog_notitle .ui-dialog-titlebar {
|
|
display: none;
|
|
}
|
|
|
|
.lokdialog_container.ui-dialog.ui-widget-content {
|
|
padding: 0px;
|
|
overflow: visible;
|
|
width: auto;
|
|
height: auto;
|
|
border: none;
|
|
background-color: transparent;
|
|
z-index: 1105;
|
|
}
|
|
|
|
.lokdialog.ui-dialog-content.ui-widget-content {
|
|
padding: 0px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.lokdialog_canvas {
|
|
cursor: default;
|
|
display: block; /* required to remove all borders around canvas element */
|
|
caret-color: transparent; /* firefox shows a caret otherwise on top-left of the canvas */
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-o-user-select: none;
|
|
}
|
|
|
|
.lokblink {
|
|
animation: lokblink 150ms infinite alternate;
|
|
}
|
|
|
|
@keyframes lokblink {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
.form-field-frame {
|
|
border: 1px solid;
|
|
position: absolute;
|
|
height: 100%;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.form-field-button {
|
|
background: #FFFFFF;
|
|
position: absolute;
|
|
border: 1px solid;
|
|
height: 100%;
|
|
box-sizing: content-box;
|
|
padding: 0px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.form-field-button:hover, .form-field-button:focus {
|
|
background: #DDDDDD;
|
|
outline: 0;
|
|
}
|
|
|
|
.form-field-button-image {
|
|
margin: 3px;
|
|
}
|
|
|
|
.drop-down-field-list {
|
|
position: absolute;
|
|
border: 1px solid;
|
|
cursor: pointer;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.drop-down-field-list-item {
|
|
width: calc(100% - 10px);
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.drop-down-field-list-item.selected {
|
|
background: #99CCFF;
|
|
}
|
|
.drop-down-field-list-item:hover {
|
|
background: #0b87e7;
|
|
}
|
|
|
|
.word-wrap-for-vex-dialog {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.hyperlink-popup .leaflet-popup-content {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.leaflet-canvas-container .cell-cursor-data {
|
|
border-style: solid; /* required for ie11 */
|
|
display: none; /* prevent cypress failure */
|
|
|
|
border-top-color: #000000; /* color */
|
|
border-top-width: 2px; /* weight */
|
|
}
|
|
|
|
.leaflet-canvas-container .selections-data {
|
|
border-style: solid; /* required for ie11 */
|
|
display: none; /* prevent cypress failure */
|
|
|
|
background-color: #43ACE8; /* fill color */
|
|
opacity: 0.25; /* opacity */
|
|
border-top-width: 2px; /* weight */
|
|
}
|
|
|
|
.leaflet-canvas-container .splitters-data {
|
|
border-style: solid; /* required for ie11 */
|
|
display: none; /* prevent cypress failure */
|
|
|
|
color: #e0e0e0; /* color */
|
|
opacity: 1; /* opacity */
|
|
border-top-width: 3px; /* weight */
|
|
}
|