filesafe/src/css/style.scss

@charset "utf-8";

@import "_variables";

/** Bulma: Utilities **/

@import "../../node_modules/bulma/sass/utilities/animations.sass";
@import "../../node_modules/bulma/sass/utilities/mixins.sass";
@import "../../node_modules/bulma/sass/utilities/controls.sass";

/** Bulma: Base **/

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

/** Bulma: Elements **/

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

/** Bulma: Form **/

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

/** Bulma: Componenets **/

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

/** Bulma: Grid **/

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

/** Bulma: Helpers **/

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

/** Bulma: Layout **/

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

/** Animations **/

@-webkit-keyframes fadeInOpacity {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes floatUp {
  0% {
    opacity: 0;
    transform: scale(0.86)
  }

  25% {
    opacity: 100
  }

  67% {
    transform: scale(1)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes floatUp {
  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: fadeInOpacity 0.5s
}

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

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

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

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

.input:-ms-input-placeholder,
.textarea:-ms-input-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: rgba(0, 0, 0, 0.7);

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

    &.is-active,
    &:not([disabled]):active {
      background-color: #ff5722;
      border-color: transparent;
      color: rgba(0, 0, 0, 0.7)
    }

    &.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: rgba(0, 0, 0, 0.7)
      }
    }
  }
}

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

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

.select:not(.is-multiple):not(.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;

    &.capitalize {
      text-transform: capitalize
    }
  }

  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
  }
}

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

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