style.scss

@charset "utf-8";
@import "variables.scss";
@import "dark.scss";
@font-face {
  font-family: "FreeSans";
  src: url("../fonts/FreeSans.otf") format("opentype");
  src: url("../fonts/FreeSans.ttf") format("truetype");
}
@font-face {
  font-family: "FreeSansBold";
  src: url("../fonts/FreeSansBold.otf") format("opentype");
  src: url("../fonts/FreeSansBold.ttf") format("truetype");
}
html {
  height: 100%;
}
body {
  font-size: 16px;
  height: 100%;
  margin: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
body::-webkit-scrollbar {
  display: none;
}
a {
  color: $has-text-link;
}
a:hover,
a:active,
a:focus {
  color: $dark-grey;
}

//  ####################################
//  GENERIC
//  ####################################

.is-active {
  display: block!important;
}

.is-hidden {
  display: none;
}

.is-greyed-out {
  filter: opacity(75%) grayscale(100%);
}

.card {
  box-shadow: 0 0 1em $mid-grey;
}

.card-footer {
  clear: both;
  .card-footer-item,
  .card-footer-item:focus {
    border-radius: 0;
    border-right: 1px solid $light-grey;
  }
  .card-footer-item:first-child {
    border-bottom-left-radius: $radius;
  }
  .card-footer-item:last-child {
    border-right: none;
    border-bottom-right-radius: $radius;
  }
  .card-footer-item:focus-visible {
    color: $dark-grey!important;
    background-color: $almost-white!important;
  }
}

//  ####################################
//  BUTTONS
//  ####################################

button {
  font-size: 1em;
  color: $has-text-link;
  background: white;
  border: none;
  border-radius: $radius;
  outline: none;
  box-shadow: 0;
  padding: 0.55em 0.75em;
  cursor: pointer;
}
button:hover,
button:focus-visible {
  color: $dark-grey;
  background: white;
  i {
    color: inherit;
  }
}
button i {
  color: $has-text-link;
}
button:disabled,
button.is-greyed-out {
  cursor: not-allowed;
  filter: grayscale(100%);
  opacity: 0.6;
}

//  ####################################
//  INPUT
//  ####################################

input,
select,
textarea {
  border: none!important;
  box-shadow: none!important;
  outline: none!important;
}
input::placeholder {
  color: $dark-grey;
}
input[type="text"],
input[type="search"],
textarea {
  border-radius: 1.5em;
  background-color: $almost-white!important;
}

.inputWrapper {
  position: relative;
  padding-top: 0.5em;
  input[type="search"],
  input[type="text"],
  textarea {
    padding: 2em 1em 1.2em 1.5em;
  }
  textarea {
    padding-bottom: 0.75em
  }
  input::placeholder,
  textarea::placeholder {
    color: $mid-grey;
  }
  label {
    cursor: pointer;
    font-size: 0.75em;
    position: absolute;
    top: 1.3em;
    left: 2.5em;
    z-index: 65;
  }
  .todoTableSearchQuestionmark {
    display: none;
  }
}
.is-focused .inputWrapper,
.inputWrapper.is-focused {
  label,
  i {
    color: $has-text-link;
  }
  .fa-search {
    display: none;
  }
  .todoTableSearchQuestionmark {
    display: block;
  }
}

input[type="number"] {
  text-align: center;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
input[type="range"],
input[type="range"]:focus {
  height: 0.7em;
  padding: 0.1em;
  -webkit-appearance: none;
  border-radius: $radius;
  background: $lighter-grey!important;
}

input[type="range"]::-webkit-slider-thumb {
  cursor: ew-resize;
  width: 0.75em;
  height: 1.5em;
  -webkit-appearance: none;
  background: $dark-grey;
  border-radius: $radius;
}

//  ####################################
//  TABLE
//  ####################################

table {
  width: 100%;
  border-collapse: separate;
  tr {
    th {
      padding: .1em 0 !important;
      font-size: 1.2em;
      font-family: "FreeSansBold";
    }
    td {
      border: none;
      padding: .5em 2em .5em 0 !important;
    }
  }
}
table.files {
  margin: 0;
  tr {
    td {
      vertical-align: middle;
    }
    td:first-child {
      width: 3em;
      text-align: center;
    }
    td:last-child {
      a {
        font-size: 1.2em;
        padding: 0.5em;
        color: $has-text-link;
        cursor: pointer;
      }
      a:focus-visible {
        color: $dark-grey;
      }
    }
  }
  button {
    color: white;
    background: $has-text-link;
  }
  button:disabled {
    color: $dark-grey;
    background: $almost-white;
  }
}

//  ####################################
//  FOCUS OUTLINES
//  ####################################

:focus,
:focus-visible {
  box-shadow: none;
  outline: none;
}

input:focus,
select:focus {
  background-color: $almost-white!important;
}

button:focus-visible {
  color: $almost-white!important;
  background: $dark-grey!important;
}

//  ####################################
//  TEXT
//  ####################################

.title,
strong {
  font-family: "FreeSansBold";
  font-weight: normal !important;
}
code, pre {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
  background-color: $light-grey !important;
  color: inherit !important;
}

//  ####################################
//TODO
//  ####################################

#noResultContainer {
  height: 80%;
}

.contentContainer {
  height: 100%;
  p {
    padding: 0 10%;
  }
}
.contentContainer.is-active {
  display: flex!important;
}

#errorContainer {
  display: none;
  p {
    margin: .1em 0;
  }
  i {
    color: white!important;
  }
}

#datePickerInput {
  cursor: pointer;
}

//  ####################################
//  MAIN CONTAINERS
//  ####################################

.contentContainer {
  width: 100%;
  text-align: center;
  display: none;
  flex-direction: column;
  justify-content:center;
  p {
    margin: .5em;
  }
  .fa-file-alt {
    font-size: 6em;
  }
  .title.is-3 {
    font-family: "FreeSansBold";
    margin: .5em 0;
  }
  .subtitle {
    margin: .5em 0;
  }
  .btnOnboarding {
    font-size: 1em;
    margin: 0 1em;
    padding: .25em;
    text-decoration: none;
  }
  .btnOnboarding i {
    font-size: 5em;
    margin: .25em 0;
  }
  .btnOnboarding:focus-visible {
    color: $almost-black;
  }
}
.contentContainer.is-active {
  display: flex;
}

//  ####################################
//  BASIC FRAME
//  ####################################

.columns {
  height: 100%;
  margin: 0 !important;
  .column {
    position: relative;
    .is-right {
      float: right;
    }
  }
  .column.content {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

//  ####################################
//  MESSAGES
//  ####################################

#messages {
  width: 25em;
  position: fixed;
  right: 2em;
  bottom: 1em;
  z-index: 45!important;
  i {
    color: $has-text-link;
  }
  .message {
    display: none;
    .message-body .brands i {
      font-size: 2.25em;
      margin-right: .2em;
      color: $has-text-link;
    }
  }
  button {
    margin-top: .5em;
  }
  .message-body p {
    margin-bottom: .5em;
  }
  .notification.is-danger {
    background-color: $has-text-danger;
  }
}

//  ####################################
//  IMPORT MODULES
//  ####################################

@import "navigation.scss";
@import "search.scss";
@import "compact.scss";
@import "filterButtons.scss";
@import "drawer.scss";
@import "modal.scss";
@import "recurrencePicker.scss";
@import "todoTable.scss";
@import "toggle.scss";
@import "datepicker.scss";
@import "../../node_modules/bulma/bulma.sass";