vikunja-frontend/src/vikunja.scss

*, *:hover, *:active, *:focus{
  outline: none;
}

@import '../node_modules/bulmaswatch/lumen/variables';
@import "../node_modules/bulma/bulma";
@import '../node_modules/bulmaswatch/lumen/overrides';

@import url('/fonts/fonts.css');

*, *:focus, *:active{
  outline: none;
}

body {
  background: url('../public/images/llama.svg') no-repeat bottom right fixed darken(#fff, 7%);
  min-height: 100vh;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Quicksand', sans-serif;
  font-weight: 400 !important;
}

/* Logout-icon */
.logout-icon {
  padding-right: 2em !important;
}

/* Logo */
.logo {

  padding-left: 2rem !important;

  img {
    max-height: 3rem !important;
    margin-right: 1rem;
  }
}

/* Buttons icons */
.button .icon.is-small {
  margin-right: 0.05rem !important;
}

/* List active link */
.menu-list a.router-link-active{
  background: darken(#fff, 5%);
}

/* menu buttons */
.button-bottom {
  margin-bottom: 1rem;
}

/* Namespaces list */
.namespaces-lists{
  .menu-label {
    font-size: 1em;
    font-weight: 400;
    min-height: 2.5em;
    padding-top: 0.3em;
  }

  /* Namespace settings */
  .nsettings{
    vertical-align: middle;
    float: right;
    margin-left: 0.5rem;
    min-width: 2.648em;
    color: rgb(74, 74, 74);
  }
}

.bigbuttons{
  margin-top: 0.5rem;
}

.card{
  margin-bottom: 1rem;
}

.buttonright {
  margin-right: 0.5rem;
}

.tasks {
  margin-top: 1rem;
  padding: 0;
  text-align: left;

  .task {
    display: block;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid darken(#fff, 10%);

    label{
      width: 96%;
      display: inline-block;
      cursor: pointer;

      .tasktext {
        vertical-align: top;
      }
    }

    input[type="checkbox"] {
      vertical-align: middle;
    }

    .settings{
      float: right;
      width: 4%;
      cursor: pointer;
    }
  }

  .task:last-child {
    border-bottom: none;
  }
}

.taskedit{
  min-height: calc(100% - 1rem);
  margin-top: 1rem;

  .reminder-input{
    margin: 0;

    &.overdue input{
      color: $red;
    }

    &:last-child {
      margin-bottom: 0.75rem;
    }

    a {
      color: $red;
      vertical-align: sub;
    }

    input {
      width: 90%;
      border: none;

      &:focus {
        border: none;
        box-shadow: none;
      }
    }
  }
}

.settings{
  float: right;
  color: rgb(74, 74, 74);
}

.column.container {
  padding:0;

  .box.shadow {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: 2px 2px 5px lighten(#000, 85%);
  }
}

/* Loading spinner */
.loader-container {
  &.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
    &:after {
      @include loader;
      position: absolute;
      top: calc(50% - 2.5em);
      left: calc(50% - 2.5em);
      width: 5em;
      height: 5em;
      border-width: 0.25em;
    }
  }
}

// Fancy Checkboxes
.fancycheckbox {
  display: inline-block;
  padding-right: 5px;
  padding-top: 3px;

  .check {
    cursor: pointer;
    position: relative;
    margin: auto;
    width: 18px;
    height: 18px;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);

    &:hover svg {
      stroke: $primary;
    }

    svg {
      position: relative;
      z-index: 1;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke: #c8ccd4;
      stroke-width: 1.5;
      transform: translate3d(0, 0, 0);
      transition: all 0.2s ease;

      path {
        stroke-dasharray: 60;
        stroke-dashoffset: 0;
      }

      polyline {
        stroke-dasharray: 22;
        stroke-dashoffset: 66;
      }
    }
  }

  input[type=checkbox]:checked + .check svg {
    stroke: $primary;
  }

  input[type=checkbox]:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
  }

  input[type=checkbox]:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
  }
}