libreoffice-online/loleaflet/css/loleaflet.css
Tor Lillqvist 532e70db8d tdf#122572: Use a context toolbar in the iOS app that looks more native
Not icons, but white text on black background, etc. This is how the
native context toolbar (whatever it actually is called in iOS) looks
in Notes and Pages and in text input fields in general.

Change-Id: Ibfa149fa8a951046de25c71022ea5c5684cfcc02
2019-05-31 19:51:34 +03:00

535 lines
10 KiB
CSS

#document-container {
border-top: 1px solid #B6B6B6;
background: #DFDFDF;
position: absolute;
top: 77px;
bottom: 33px;
right: 0px;
left: 0px;
}
#document-container.tablet {
top: 36px;
}
#document-container.readonly {
top: 36px;
}
#toolbar-wrapper.readonly {
display: none;
}
#map {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 10;
cursor: default;
}
.scroll-container .mCSB_scrollTools.mCSB_1_scrollbar {
position: absolute;
z-index: 1000;
}
.loleaflet-scrollbar-show {
opacity: 1 !important;
filter: "alpha(opacity=100)" !important;
-ms-filter: "alpha(opacity=100)" !important;
}
body {
margin: 0;
overflow: hidden;
overscroll-behavior-y: none; /* disable the pull to reload gesture */
background: #ffffff;
touch-action: none;
}
#presentation-controls-wrapper {
background: #dfdfdf;
position: absolute;
top: 77px;
left: 0px;
bottom: 66px;
max-width: 218px;
border-top: 1px solid #b6b6b6;
display: block;
}
#presentation-controls-wrapper.drawing {
bottom: 40px; /* Hide the presentation toolbar (insert slide etc.) for doctype = drawing */
}
#presentation-controls-wrapper.readonly {
top: 36px;
}
#toolbar-wrapper {
position: relative;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border-top: 1px solid #bbbbbb;
}
#toolbar-logo {
width: 0;
}
#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: 2000;
}
#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;
}
@media (max-width: 900px) {
#menu-last-mod {
display: none;
}
}
@media (max-width: 767px),(max-device-height: 767px) {
/* Show slidesorter beyond 768px only */
#presentation-controls-wrapper {
display: none;
}
#document-container.tablet {
top: 41px;
}
#document-container.readonly {
top: 41px;
}
#document-container.parts-preview-document {
left: 0px !important;
}
#document-container.spreadsheet-document {
top: 103px !important;
}
#document-container.spreadsheet-document.readonly {
top: 61px !important;
}
#document-container {
top: 41px;
}
#spreadsheet-row-column-frame {
top: 83px !important;
}
#spreadsheet-row-column-frame.readonly {
top: 41px !important;
}
#toolbar-hamburger {
width: 41px;
}
#closebuttonwrapper {
display: none;
}
/* Show menubar even if folded */
.main-nav {
display: block !important;
}
}
.loleaflet-font {
font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !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;
}
.loleaflet-controls {
margin-right: 10px;
}
.loleaflet-scrolled {
overflow: auto;
}
.loleaflet-mobile-container {
top: 30px;
margin: 0;
width: 1px;
opacity: 0;
}
.loleaflet-context-table {
table-layout: fixed;
background-color: #efefef;
border-collapse: separate;
border-spacing: 0;
border: none;
width: 100%;
}
.loleaflet-context-button {
width: 40px;
height: 40px;
}
.loleaflet-context-down {
border: 1px solid #aaaaaa;
background-color: #dddddd;
}
.loleaflet-mobile-input {
width: 1px;
padding: 0px;
border: 0px;
}
.loleaflet-context-toolbar {
position: absolute;
float: none;
border: 1px solid #999;
}
/* 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: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
}
.context-menu-icon-lo-checkmark:before {
content: '\2713';
}
.loleaflet-annotation {
position: absolute;
text-align: center;
user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
}
.loleaflet-annotation-content-wrapper, .loleaflet-annotation-redline-content-wrapper {
padding: 8px;
font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
font-size: 13px;
text-align: left;
background-color: #efefef;
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 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-edit {
margin: 3px 3px;
line-height: 1.4;
}
.loleaflet-annotation-textarea {
font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
font-size: 13px;
border: 1px solid #c8c8c8;
background-color: white;
overflow-x: hidden;
height: 50px;
width: 95%;
}
.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;
}
.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-context-copy {
background: url('images/lc_copy.svg') no-repeat center !important;
}
.loleaflet-context-cut {
background: url('images/lc_cut.svg') no-repeat center !important;
}
.loleaflet-context-paste {
background: url('images/lc_paste.svg') no-repeat center !important;
}
.loleaflet-ios-context-table {
color: white;
text-decoration: underline;
font-size: 15px;
border-spacing: 0;
}
.loleaflet-ios-context-button {
background-color: black;
height: 40px;
}
.loleaflet-ios-context-left {
padding-left: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.loleaflet-ios-context-first-and-middle-entry {
padding-left: 8px;
padding-right: 8px;
border-right: 1px solid white;
}
.loleaflet-ios-context-last-entry {
padding-left: 8px;
padding-right: 8px;
}
.loleaflet-ios-context-right {
padding-right: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.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;
}
.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 {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.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 {
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;
}
/* Infobar */
.vex-theme-bottom-right-corner .vex-dialog-message {
font-size: 1em;
}
/* Place above statusbar */
.vex.vex-theme-bottom-right-corner .vex-content {
bottom: 40px !important;
right: 10px !important;
}
/* Vex dialogs */
.vex-open .vex-overlay {
/* TODO: remove specific z-index from our codebase
so that the following line can also be removed */
z-index: 1001;
}
/* dialog shown when user is idle */
.vex-open .loleaflet-user-idle {
background: rgba(0, 0, 0, 0)!important;
font-size: xx-large!important;
color: #fff!important;
text-align: center!important;
}
.vex-open .loleaflet-user-idle .vex-dialog-buttons {
display: none!important;
}