@charset "utf-8";

// -------------------------------------------------------------------------
// Fonts
// -------------------------------------------------------------------------

// https://fonts.google.com/?sort=popularity
// TODO: use https://google-webfonts-helper.herokuapp.com
//@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url("https://fonts.googleapis.com/css?family=Roboto");
$family-sans-serif: "Roboto", sans-serif;

// https://fonts.google.com/specimen/Open+Sans+Condensed?selection.family=Open+Sans+Condensed:300
@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap");

// https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");

$default-font-size: 0.75rem;

// -------------------------------------------------------------------------
// Bulma customization/overrides
// -------------------------------------------------------------------------

@import "../node_modules/bulma/sass/utilities/initial-variables.sass";

// Dropdown customization
// https://bulma.io/documentation/components/dropdown/#variables
$dropdown-item-active-background-color: hsl(217, 61%, 19%);
$dropdown-content-shadow: 2px 2px 25px 0px rgba($black, 0.3), 0px 0px 0px 1px rgba($black, 0.1); // the spread is used to generate a border
// TODO: Maybe adjust radius, but has to be synced with other components
// $dropdown-content-radius: 8px;

// Button customization (currently optimized for dropdown, maybe we need a special class)
// https://bulma.io/documentation/elements/button/
//$control-radius: 6px; // doesn't affect buttons if the "is-small" is used, because it resets the border radius to 2px
//$button-padding-vertical: calc(0.2rem - 1px);
//$button-padding-horizontal: 0.5rem;

@import "../node_modules/bulma/bulma.sass";

/* -------------------------------------------------------------------------
 * Leaflet integration
 * ------------------------------------------------------------------------- */

// important to omit the .css extension to statically import.
// See: https://sass-lang.com/documentation/at-rules/import#importing-css
@import "../node_modules/leaflet/dist/leaflet";

/* -------------------------------------------------------------------------
 * General style
 * ------------------------------------------------------------------------- */

.font-mono {
  font-family: "monospace";
}

.is-hidden {
  display: none;
}

.is-tiny {
  font-size: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Navbar
 * ------------------------------------------------------------------------- */

$ui-navbar-height: 3rem;

.ui-has-navbar-fixed-top {
  padding-top: $ui-navbar-height - 0.5rem;
}

.ui-navbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 30;

  padding-top: 0.03rem;
  padding-bottom: 0.03rem;
  padding-right: 0;
  padding-left: 0;

  min-height: $ui-navbar-height;

  box-shadow: 0 3px 3px rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1);
  background: #1b1d1f;

  display: flex;
  align-items: center;
}

.ui-navbar-button {
  border-radius: 0.25rem;
  background: #25282c;
  padding: 0.3rem 1rem;
  font-size: 0.9rem;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 900;

  transition: 0.1s;
  color: #3273dc;
}
.ui-navbar-button:not(:first-child) {
  margin-left: 0.75rem;
}

.ui-navbar-button:hover {
  background: rgb(59, 63, 70);
  color: #337aec;
}

.ui-navbar-button.is-active {
  box-shadow: 0px 0px 3px 0px #080808, 0px 0px 0px 1px #888888; // the spread is used to generate a border
}

$sidebar-placeholder-width: 8rem;

.ui-sidebar-placeholder {
  min-width: $sidebar-placeholder-width;
}

// Helper to use an auto margin but with a minium margin
// https://stackoverflow.com/a/24488747/1804173
.ui-padded-container {
  padding-left: $sidebar-placeholder-width;
  padding-right: $sidebar-placeholder-width;
}

.ui-navbar-logo {
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: bold;
  font-size: 23px; // giving height of 32px

  border-radius: 0.25rem;
  background: #25282c;
  padding: 2px 1rem; // giving height of 36px
  margin-left: 6px; // navbar 48px, this is 36px, leaving 12px for vertical, 6px to make it symmetrical

  color: #f0f1f1;

  transition: 0.1s;
}
.ui-navbar-logo:hover {
  color: #f0f1f1;
  background: rgb(59, 63, 70);
}

// -------------------------------------------------------------------------
// Widget header / form helpers
// -------------------------------------------------------------------------

$margin-bottom-widget: 0.2rem;

.ui-widget-header {
  background: #f5f5f9;
  border: 1px solid #ddd;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  padding: 6px 10px;
}

.ui-form-row {
  display: flex;
  align-items: center;
}
.ui-form-row:not(:last-child) {
  margin-bottom: $margin-bottom-widget;
}

.ui-form-label {
  font-size: $default-font-size;
  font-weight: bold;
  margin-right: 1rem;
  min-width: 5rem;
  display: inline-block;
}

.ui-form-input.is-small {
  //margin-bottom: 0.4rem;
  border-radius: 4px;
  flex-grow: 1;
}
.ui-form-input.is-small:focus {
  box-shadow: 0 0 5px 2px rgba(50, 115, 220, 0.25);
}

// TODO: We probably have to get the dropdown to fullwidth.
// => https://github.com/jgthms/bulma/issues/2055

// -------------------------------------------------------------------------
// Table
// -------------------------------------------------------------------------

/*
// No longer used
.table-container {
  // By wrapping the table into a div with display: inline-block, we achieve that
  // the table-container is only as wide as its widest child (the table). Setting
  // the width of e.g. the filter input element to 100% makes it as wide as the
  // table.
  // https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents
  display: inline-block;
  overflow: visible; // to avoid cropping box shadows
  margin-bottom: 0.5rem;
}
*/

.ui-table-wrapper {
  overflow-x: auto;
  margin-bottom: $margin-bottom-widget;
}

.compact-table {
  font-size: $default-font-size;
}

/* For cell truncation / avoiding line breaks */
.table-fixed {
  table-layout: fixed; /* https://stackoverflow.com/questions/5932018/fluid-table-with-td-nowrap-text-overflow */
}

/*
TODO: decide which of the two I actually want... (copy pasted from other projects...)
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
see https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell for better solutions.
*/
.truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;  // https://stackoverflow.com/questions/22260240/width-of-element-with-white-space-nowrap-doesnt-adjust-to-child-content
  // consider switching to box-sizing: border-box

  // overflow: hidden seems to affect the height: https://stackoverflow.com/questions/32190967/why-does-overflow-hidden-affect-height-and-how-can-i-fix-it-in-this-example
  // Apparently we have to mess with vertical-align to fix it...
  vertical-align: top;
}
*/

.column-header {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  // border: 1px solid #000;
}
.column-header span {
  // padding-left: 0.2rem;
}

.th-sort-symbol {
  padding-left: 0.2rem;
  white-space: nowrap; // avoid linebreaks between symbols
}

// -------------------------------------------------------------------------
// Dropdown
// -------------------------------------------------------------------------

.dropdown-text {
  text-align: left;
  font-size: $default-font-size;
  min-width: 10rem; // TODO: use the same size as the content popup element
}

.dropdown-item.modified {
  padding: 0.2rem 1rem;
  font-size: $default-font-size;
}

.dropdown-menu.customz {
  z-index: 1000; // to force on top of leaflet
}

// -------------------------------------------------------------------------
// Input helpers
// -------------------------------------------------------------------------

.complete-selection {
  background: rgb(196, 227, 255);
}

// -------------------------------------------------------------------------
// Text area helpers
// -------------------------------------------------------------------------

/* https://stackoverflow.com/questions/6795981/textarea-to-fill-a-parent-container-exactly-with-padding/6796064 */
.is-maximized {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* For IE and modern versions of Chrome */
  -moz-box-sizing: border-box; /* For Firefox                          */
  -webkit-box-sizing: border-box; /* For Safari                           */
}

.ui-text-area:not([rows]) {
  // need to overrule Bulma's text-area:not([rows])
  height: 100%;
  min-height: 600px;
}

// -------------------------------------------------------------------------
// Dropdowns
// -------------------------------------------------------------------------

.ui-compact-dropdown-item {
  font-size: 0.75rem;
}

.button.is-small {
  border-radius: 4px;
}

// -------------------------------------------------------------------------
// Float overlays
// -------------------------------------------------------------------------

/*
.float-wrapper {
  position: relative;
  overflow-x: visible;
  overflow-y: visible;
}

.float-box {
  width: 100%;
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  z-index: 999;
  // card has only light box-shadow => make more pronounced
  box-shadow: 0 10px 30px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
  // display: inline-block;
  // position: absolute;
  // float: left;
}
*/

// -------------------------------------------------------------------------
// Scrollbar styling
// -------------------------------------------------------------------------

/*
::-webkit-scrollbar {
  background-color: #fff;
  width: .4em
}
::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb {
  background:  black
}
*/
