gristlabs_grist-core/app/client/app.css

189 lines
4.5 KiB
CSS
Raw Normal View History

/* 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;
--scroll-bar-bg: #f0f0f0;
/* 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);
}
.show_scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.3);
-webkit-border-radius: 100px;
border: 2px solid var(--scroll-bar-bg);
}
.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: rgba(0,0,0,0.4); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}
.show_scrollbar::-webkit-scrollbar-thumb:active {
background-color: rgba(0,0,0,0.5); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}
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: 5000;
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;
}