filesafe/src/css/style.scss

@charset "utf-8";
@import "_variables";

/** Bulma: Utilities **/

@import "../../node_modules/bulma/sass/utilities/controls";
@import "../../node_modules/bulma/sass/utilities/extends";

/** Bulma: Base **/

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

/** Bulma: Elements **/

@import "../../node_modules/bulma/sass/elements/button";
@import "../../node_modules/bulma/sass/elements/container";
@import "../../node_modules/bulma/sass/elements/content";
@import "../../node_modules/bulma/sass/elements/icon";
@import "../../node_modules/bulma/sass/elements/notification";
@import "../../node_modules/bulma/sass/elements/progress";
@import "../../node_modules/bulma/sass/elements/table";
@import "../../node_modules/bulma/sass/elements/title";
@import "../../node_modules/bulma/sass/elements/other";

/** Bulma: Form **/

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

/** Bulma: Componenets **/

@import "../../node_modules/bulma/sass/components/level";
@import "../../node_modules/bulma/sass/components/menu";
@import "../../node_modules/bulma/sass/components/message";
@import "../../node_modules/bulma/sass/components/pagination";
@import "../../node_modules/bulma/sass/components/tabs";

/** Bulma: Grid **/

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

/** Bulma: Helpers **/

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

/** Bulma: Layout **/

@import "../../node_modules/bulma/sass/layout/hero";
@import "../../node_modules/bulma/sass/layout/section";

/** Animations **/

@keyframes fade-in-opacity {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes float-up {
  0% {
    opacity: 0;
    transform: scale(0.86)
  }

  25% {
    opacity: 100
  }

  67% {
    transform: scale(1)
  }

  100% {
    transform: scale(1)
  }
}

/** General **/

html {
  overflow-y: auto
}

body {
  animation: fade-in-opacity 0.5s
}

code,
.message-body code {
  background-color: $black;
  border-radius: 5px;
  font-size: 1rem
}

.input::placeholder,
.textarea::placeholder {
  color: $grey-lightest
}

.label {
  color: $white-ter;
  font-weight: normal
}

.help {
  color: $grey-lightest
}

.progress {
  background-color: $grey
}

.button.is-info.is-hovered [class^="icon-"]::before,
.button.is-info.is-hovered [class*=" icon-"]::before,
.button.is-info:hover [class^="icon-"]::before,
.button.is-info:hover [class*=" icon-"]::before {
  fill: #fff
}

.button {
  &.is-wrappable {
    white-space: break-spaces;
    min-height: 2.25em;
    height: auto
  }

  /* TODO: Use variables for colors */
  &.is-dangerish {
    background-color: #ff7043;
    border-color: transparent;
    color: rgb(0 0 0 / 70%);

    &.is-hovered,
    &:not([disabled]):hover {
      background-color: #ff8a65;
      border-color: transparent;
      color: rgb(0 0 0 / 70%)
    }

    &.is-active,
    &:not([disabled]):active {
      background-color: #ff5722;
      border-color: transparent;
      color: rgb(0 0 0 / 70%)
    }

    &.is-outlined {
      background-color: transparent;
      border-color: #ff7043;
      color: #ff7043;

      &.is-focused,
      &.is-hovered,
      &:not([disabled]):focus,
      &:not([disabled]):hover {
        background-color: #ff7043;
        border-color: #ff7043;
        color: rgb(0 0 0 / 70%)
      }
    }
  }
}

.checkbox:hover,
.radio:hover {
  color: $grey-light
}

.select:not(.is-multiple,.is-loading)::after {
  border-color: $white-ter
}

.select:not(.is-multiple,.is-loading):hover::after {
  border-color: $white-ter
}

.select select[disabled]:hover,
fieldset[disabled] .select select:hover {
  border-color: $grey
}

.message {
  background-color: #2f2f2f
}

.message-body {
  color: $white-ter;
  border: 0
}

.table {
  color: $grey-lightest;
  background-color: $black;

  &.is-narrow {
    font-size: 0.75rem
  }

  &.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: #2f2f2f
  }

  td,
  th {
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid $grey
  }

  th {
    color: $white-ter;
    height: 2.25em;
    font-weight: normal
  }

  thead {
    td,
    th {
      color: $white-ter;
      background-color: #383838;
      border-bottom: 0;
      height: 31px
    }
  }

  tbody tr:last-child {
    td,
    th {
      border-bottom-width: 1px
    }
  }

  .cell-indent {
    padding-left: 2.25em
  }
}

.delete {
  &::before,
  &::after {
    background-color: $text
  }
}

.has-word-break-all {
  word-break: break-all
}

.anim-fade-in {
  animation: fade-in-opacity 0.5s
}

/** Fontello overrides **/

.icon-gauge::before {
  margin-top: -2px
}

/** Cookie Consent **/

.cc-window {
  font-family: inherit !important
}

.cc-link {
  padding: 0 !important
}

/* floating button's bottom offset + height + bottom offset */
.section.has-extra-bottom-padding {
  padding-bottom: 6.5rem
}

/** SimpleLightbox **/

.sl-wrapper {
  .sl-close,
  .sl-counter,
  .sl-navigation button {
    color: $white
  }

  .sl-image .sl-caption {
    background: rgb(0 0 0 / 60%)
  }
}

.sl-overlay {
  background: $black
}

/** Floating home button **/

a.floating-home-button {
  display: flex;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  border-radius: 100%;
  background-color: $link;
  color: $white;
  width: 3.5rem;
  height: 3.5rem;
  justify-content: center;
  align-items: center;
  transition: background-color 0.25s, color 0.25s;

  &:hover {
    background-color: $link-hover;
    color: $scheme-main
  }

  > .icon {
    margin-top: -2px
  }
}

.hero.is-fullheight {
  /* https://github.com/philipwalton/flexbugs#flexbug-3 */
  > .hero-body {
    min-height: 100vh;
    height: 100%;

    /* https://github.com/philipwalton/flexbugs#flexbug-2 */
    > .container {
      width: 100%
    }
  }
}