gristlabs_grist-core/app/client/app.css

/* 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;
}