You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
4.6 KiB
191 lines
4.6 KiB
/* global variables */
|
|
:root {
|
|
--color-logo-row: #F9AE41;
|
|
--color-logo-col: #2CB0AF;
|
|
--color-logo-cell: #DEDDDD;
|
|
--color-logo-bg: #42494B;
|
|
|
|
--color-link-default: #336;
|
|
--color-link-visited: #336;
|
|
--color-link-hover: #66c;
|
|
--color-link-active: #66c;
|
|
|
|
--color-link-bright: orange;
|
|
|
|
--color-start-page-bg: #f0f0f0;
|
|
|
|
--color-navbar-bg: var(--color-logo-bg);
|
|
--color-navbar-btn-bg: #fefefe;
|
|
--color-navbar-btn-bg-hover: #f6f6f6;
|
|
--color-navbar-btn-disabled: #ccc;
|
|
|
|
--color-tab-bar-bg: #d6d6d6;
|
|
|
|
--color-border-light: #ddd;
|
|
--color-border-medium: #bbb;
|
|
|
|
--color-btn-login: #ffb749;
|
|
--color-btn-login-background: #fff1dc;
|
|
--color-btn-createdoc: #3fda2c;
|
|
--color-btn-uploaddoc: #00dcff;
|
|
--color-btn-decline: #c74646;
|
|
--color-btn-accept: #3eda2c;
|
|
|
|
--layout-top-spacer: 20px;
|
|
|
|
--color-list-row-hover: #f0f0f0;
|
|
|
|
--color-list-item: #f6f6f6;
|
|
--color-list-item-hover: #e0e0e0;
|
|
--color-list-item-selected: #e8d53d;
|
|
--color-list-item-disabled: #ccc;
|
|
--color-list-item-action: #6eec6e;
|
|
|
|
--color-hint-text: #888;
|
|
|
|
--scroll-bar-width: 12px;
|
|
|
|
/* fonts */
|
|
--font-navbar-title: "Helvetica", "Arial", sans-serif;
|
|
--font-btn-symbols: "Apple Symbols", "Arial Unicode MS";
|
|
}
|
|
|
|
|
|
|
|
.flexhbox {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
.flexvbox {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.flexitem {
|
|
/* Makes the flex item flexible and sets the flex basis to zero (disregards content size). */
|
|
-webkit-flex: 1 1 0px;
|
|
flex: 1 1 0px;
|
|
/* Min-width of 0 is needed to allow the flex box to shrink below its minimum content size. */
|
|
min-width: 0px;
|
|
}
|
|
.flexnone {
|
|
/* Sizes the item based on content or width/height, and makes it fully inflexible. */
|
|
-webkit-flex: none;
|
|
flex: none;
|
|
}
|
|
.flexauto {
|
|
/* Sizes the item based on content or width/height, and makes it fully flexible. */
|
|
-webkit-flex: auto;
|
|
flex: auto;
|
|
}
|
|
.clipped {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
/* This seems logically appropriate since we never want body to scroll, but the real reason is
|
|
* to avoid a major slowdown when using $().modal() dialogs (a JQuery plugin in bootstrap).
|
|
* Those add/remove a class to body which sets "overflow: hidden", which causes great slowness on
|
|
* Firefox (not Chrome). If body is already "overflow: hidden", it's much faster.
|
|
*/
|
|
overflow: hidden;
|
|
}
|
|
|
|
.show_scrollbar::-webkit-scrollbar {
|
|
width: var(--scroll-bar-width);
|
|
height: var(--scroll-bar-width);
|
|
background-color: var(--scroll-bar-bg, #f0f0f0);
|
|
}
|
|
.show_scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: var(--scroll-bar-fg, #a8a8a8);
|
|
-webkit-border-radius: 100px;
|
|
border: 2px solid var(--scroll-bar-bg, #f0f0f0);
|
|
}
|
|
.show_scrollbar::-webkit-scrollbar-thumb:vertical {
|
|
min-height: 4rem;
|
|
}
|
|
.show_scrollbar::-webkit-scrollbar-thumb:horizontal {
|
|
min-width: 4rem;
|
|
}
|
|
.show_scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scroll-bar-hover-fg, #8f8f8f);
|
|
-webkit-border-radius: 100px;
|
|
}
|
|
.show_scrollbar::-webkit-scrollbar-thumb:active {
|
|
background-color: var(--scroll-bar-active-fg, #7c7c7c);
|
|
-webkit-border-radius: 100px;
|
|
}
|
|
.show_scrollbar::-webkit-scrollbar-corner {
|
|
background-color: var(--scroll-bar-bg, #f0f0f0);
|
|
}
|
|
div.dev_warning {
|
|
position: absolute;
|
|
z-index: 10;
|
|
width: 100%;
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
font-size: 200%;
|
|
color: white;
|
|
background: red;
|
|
text-align: center;
|
|
}
|
|
#browser-check-problem {
|
|
display: none;
|
|
width: 100%;
|
|
position: absolute;
|
|
z-index: var(--grist-browser-check-z-index);
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 4px;
|
|
|
|
/* Copy common styles that are normally set from JS-generated CSS */
|
|
box-sizing: border-box;
|
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.browser-check-wrapper {
|
|
margin: auto;
|
|
max-width: 600px;
|
|
padding: 8px 24px;
|
|
background-color: #040404;
|
|
border-radius: 4px;
|
|
border: none;
|
|
color: white;
|
|
box-shadow: 0 0 4px 0 white;
|
|
}
|
|
.browser-check-wrapper td {
|
|
vertical-align: middle;
|
|
padding: 8px 16px;
|
|
}
|
|
.browser-check-mobile {
|
|
display: none;
|
|
}
|
|
.browser-check-is-mobile .browser-check-mobile {
|
|
display: inline;
|
|
}
|
|
.browser-check-is-mobile .browser-check-desktop {
|
|
display: none;
|
|
}
|
|
.browser-check-wrapper a {
|
|
color: #16B378;
|
|
text-decoration: underline;
|
|
}
|
|
.browser-check-wrapper a:hover {
|
|
color: #b1ffe2;
|
|
}
|
|
|
|
.browser-check-close {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
background-color: #009058;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
.browser-check-close:hover {
|
|
background-color: #16B378;
|
|
}
|