src/adminer.scss
/*!
 * Material Design for Adminer, version 1.1.4
 * https://github.com/arcs-/Adminer-Material-Theme
 */

$header-background-color: #263238;
$primary-color: #1E88E5;
$primary-color-light: lighten($primary-color, 10%);
$primary-color-dark: darken($primary-color, 20%);
$inactive-color: #AFB3B5;
$inactive-color-light: lighten($inactive-color, 20%);

$checkbox-link: 'check.svg';
$radio-link: 'radio.svg';

$font-link: 'https://fonts.googleapis.com/css?family=Noto+Sans:400,700';
$font: "Noto Sans", sans-serif;

@mixin hover-links {
  background     : $primary-color;
  color          : #fff;
  text-decoration: none;
  font-weight    : auto;
}

@import url(#{$font-link});

body {
  display       : flex;
  overflow      : hidden;
  height        : 100vh;
  background    : #FAFAFA;
  font-family   : $font;
  text-rendering: optimizeLegibility !important;
}

* {
  outline-color: $primary-color;
}

::selection {
  background: $primary-color-light;
  color     : #fff;
}

::-moz-selection {
  background: $primary-color-light;
  color     : #fff;
}

::-webkit-scrollbar {
  width           : 9px;
  height          : 12px;
  background-color: #CCC;
}

::-webkit-scrollbar-corner {
  background-color: #CCC;
}

::-webkit-scrollbar-thumb {
  background-color: $header-background-color;
}

::-webkit-scrollbar-corner {
  background-color: $header-background-color;
  width           : 8px;
  height          : 8px;
}

.scrollable {
  overflow-x: visible;
}

/*    Menu    */
/*------------*/
#lang {
  position  : fixed;
  top       : auto;
  bottom    : 0;
  z-index   : 3;
  padding   : .8em 1em;
  width     : 245px;
  border-top: 1px solid #ccc;
  background: #fff;

  select {
    width: 66%;
  }

}

#menu {
  position  : fixed;
  top       : 0;
  z-index   : 2;
  display   : flex;
  margin    : 0;
  padding   : 0;
  height    : 100%;
  background: #fff;
  box-shadow: 0 85px 5px 0 rgba(0,0,0,.14),0 85px 10px 0 rgba(0,0,0,.12),0 85px 4px -1px rgba(0,0,0,.2);
  flex-flow : column;

  h1 {
    position     : fixed;
    right        : 54px;
    border-bottom: none;
    font-size    : 12px;
    background   : transparent;
    padding      : 4px 0;
  }

  select {
    width: 86%;
  }

  #logins {
    padding: 10px 14px 0;
    height : 100%;

    &:before {
      content  : 'Saved Logins';
      display  : block;
      font-size: 1.2em;
      margin   : 40px 0 10px;
    }

    a {
      display        : inline-block;
      margin         : 4px 0;
      padding        : 6px 12px;
      height         : 36px;
      width          : 86%;
      border-radius  : 2px;
      color          : #fff;
      background     : $primary-color;
      box-shadow     : 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
      text-decoration: none;
      transition     : all .2s;
      border-radius  : 2px;
      text-align     : center;
      font-weight    : bold;
      font-size      : 13px;
      line-height    : 30px;

      &:hover {
        background: $primary-color-dark;
      }
    }

  }

  &.active {
    background : $primary-color!important;
    color      : #fff!important;
    font-weight: auto;
  }

  .links {
    a {
      display       : inline-block;
      margin        : 4px 2px;
      padding       : 5px;
      width         : 42%;
      border-radius : 2px;
      background    : #fff;
      color         : $primary-color;
      text-align    : center;
      text-transform: uppercase;
      font-weight   : bold;
      font-size     : 13px;
      line-height   : 24px;
      transition    : all .2s;

      &:hover {
        @include hover-links;
      }
    }
  }
}

a {
  #h1 {
    color: $inactive-color;
  }
}

.version {
  color: $inactive-color;
}

#tables {
  overflow-x   : hidden!important;
  margin-bottom: 47px;
  padding      : 9px 12px 0 6px;
  flex         : 1;

  .select:hover {
    @include hover-links;
  }

  a {
    display      : inline-block;
    overflow     : hidden;
    padding      : 6px 0 6px 8px;
    width        : 175px;
    border-radius: 2px;
    text-overflow: ellipsis;
    transition   : all .2s;
    color        : #000;

    &:hover {
      background     : $inactive-color-light;
      color          : #000;
      text-decoration: none;
    }

    &.select {
      position      : relative;
      float         : right;
      padding       : 5px;
      width         : auto;
      border-radius : 2px;
      background    : #fff;
      color         : $primary-color;
      text-align    : center;
      text-transform: uppercase;
      font-weight   : bold;
      font-size     : 13px;
      line-height   : 18px;
    }

  }
}
/*    Nav     */
/*------------*/
#content {
  display       : flex;
  flex-direction: column;
  overflow-x    : auto;
  margin        : 83px 0 0 19em;
  padding       : 17px 27px 100px;
  min-width     : 600px;
  width         : 100%;

  h2 {
    position    : fixed;
    top         : 0;
    z-index     : 1;
    margin-left : -28px;
    padding-top : 0;
    padding-left: 30px;
    width       : 100%;
    height      : 65px;
    background  : $header-background-color;
    color       : $inactive-color;
    line-height : 104px;
  }
}

#breadcrumb {
  position    : fixed;
  z-index     : 2;
  padding-top : 10px;
  padding-left: 20px;
  background  : $header-background-color;
  color       : $header-background-color;

  a {
    color      : $primary-color;
    font-size  : 13px;
    line-height: 18px;
    transition : all .2s;

    &:hover {
      color          : $primary-color-dark;
      text-decoration: none;
    }
  }
}

#logout {
  position      : fixed;
  top           : 21px;
  right         : 50px;
  z-index       : 2;
  margin        : 4px 2px;
  padding       : 5px;
  min-width     : 88px;
  outline       : none;
  border        : none;
  border-radius : 2px;
  background    : $primary-color;
  box-shadow    : 0 1px 4px rgba(48, 48, 48, 0.41), 0 2px 3px rgba(0, 0, 0, 0.26);
  color         : #fff;
  text-align    : center;
  text-transform: uppercase;
  font-weight   : bold;
  font-size     : 13px;
  line-height   : 24px;
  transition    : all .2s;

  &:hover {
    background: $primary-color-dark;
  }
}
/*    Element    */
/*---------------*/
select {
  margin       : 0;
  padding      : 3px;
  border       : none;
  border       : 1px solid rgba(0,0,0,.12);
  border-radius: 2px;
  color        : #666;
  background   : #fff;
  cursor       : pointer;
}

a,
a:link {
  color     : $primary-color;
  transition: all .2s;

  &:hover {
    color          : $primary-color-dark;
    text-decoration: none;
  }
}

input:not([type]),
input[type=number],
input[type=password],
input[type=search],
input[type=text] {
  padding      : 8px;
  border       : 1px solid rgba(0,0,0,.12);
  border-radius: 2px;
  font-size    : 15px;
}

input[type=search]:first-child {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
}

input[type=submit] {
  padding       : 0 16px;
  min-width     : 64px;
  height        : 36px;
  border        : none;
  border-radius : 2px;
  background    : $primary-color;
  box-shadow    : 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  color         : #fff;
  text-transform: uppercase;
  font-size     : 14px;
  cursor        : pointer;
  transition    : all .2s;
}

input[type=submit]:hover {
  background: $primary-color-dark;
}

input[type=button][disabled],
input[type=submit][disabled] {
  background: $inactive-color!important;
  color     : invert($inactive-color);
  cursor    : no-drop;
}

div input[name=delete],
div input[name=drop],
div input[name=truncate],
input[value=Kill] {
  background: repeating-linear-gradient(-55deg, $primary-color, $primary-color 5px, $primary-color-light 5px, $primary-color-light 10px);
  transition: all .2s;

  &:hover {
    background: repeating-linear-gradient(-55deg, $primary-color-dark, $primary-color-dark 5px, $primary-color 5px, $primary-color 10px);
  }
}

input[type=checkbox] {
  display            : inline-block;
  padding-left       : 25px;
  height             : 20px;
  outline            : 0;
  background-image   : url('#{$checkbox-link}');
  background-position: 0 0;
  background-size    : 20px;
  background-repeat  : no-repeat;
  vertical-align     : middle;
  font-size          : 20px;
  line-height        : 20px;
  cursor             : pointer;
  -webkit-appearance : none;
  -webkit-user-select: none;
  user-select        : none;
}

input[type=checkbox]:checked {
  background-position: 0 -20px;
}

input[type=radio] {
  display            : inline-block;
  padding-left       : 25px;
  height             : 20px;
  outline            : 0;
  background-image   : url('#{$radio-link}');
  background-position: 0 0;
  background-size    : 20px;
  background-repeat  : no-repeat;
  vertical-align     : middle;
  font-size          : 20px;
  line-height        : 20px;
  cursor             : pointer;
  -webkit-appearance : none;
  -webkit-user-select: none;
  user-select        : none;
}

input[type=radio]:checked {
  background-position: 0 -21px;
}

input[type=number] {
  padding: 8px;
}

#help {
  display: none;
}

.sqlarea.jush-sql.jush {
  border    : 1px solid rgba(0,0,0,.12)!important;
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.js .column {
  left         : -50px;
  margin       : -6px 0 0;
  padding      : 5px 0 7px 3px;
  border       : 1px solid rgba(0,0,0,0.12);
  border-radius: 3px;
  background   : #fff;
  box-shadow   : 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

  a {
    padding      : 1px 8px 3px 5px;
    margin-right : 3px;
    border-radius: 2px;
    color        : $primary-color;
    transition   : all .2s;

    &:hover {
      color     : #fff;
      background: $primary-color;
    }

  }

}

/*    Table      */
/*---------------*/
table {
  margin-top     : 20px;
  min-width      : 800px;
  border-collapse: collapse;
  box-shadow     : 0 1px 4px rgba(88, 88, 88, 0.01), 0 2px 3px rgba(88, 88, 88, 0.26);
  white-space    : nowrap;
  font-size      : 13px;
  order          : 4;
}

form table {
  width: 100%;
}

thead td,
thead th {
  background: #ececec;
  position  : sticky;
  top       : 0;
  z-index   : 2;

  &:before {
    content   : '';
    position  : absolute;
    background: #fafafa;
    top       : -20px;
    left      : -10px;
    width     : 120%;
    height    : 20px;
  }

  &:after {
    content      : '';
    position     : absolute;
    left         : 0;
    bottom       : 0;
    width        : 100%;
    border-bottom: 1px solid #cecece;
  }
}

thead th {
  padding   : 0 18px;
  text-align: left;
}

th {
  box-sizing : border-box;
  padding    : 5px 18px !important;
  width      : 20%;
  border     : 1px solid #ececec;
  background : #fff;
  font-weight: normal;
  font-size  : 14px;
}

td {
  box-sizing: border-box;
  padding   : 2px 10px 0;
  height    : 45px;
  border    : 1px solid #ececec;
  background: #fff;
  color     : #000;
}

.odd td,
.odd th {
  background: #fafafa;
}

td a,
td a:visited,
th a,
th a:visited {
  color      : $primary-color;
  font-weight: 700;
}

.js .checkable .checked td,
.js .checkable .checked th {
  background: #e0e0e0;
}

#noindex,
sup {
  display: none;
}

.pages {
  position        : absolute;
  padding         : 10px 20px 0;
  height          : 35px;
  border          : 1px solid rgba(0,0,0,.12);
  background-color: #fff;
  box-shadow      : 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  font-size       : 15px;

  a:not(:first-child) {
    margin-top   : 5px;
    padding      : 5px;
    border       : 1px solid $primary-color;
    border-radius: 2px;
    color        : $header-background-color;
    text-align   : center;
  }

  a:not(:first-child):hover {
    background     : $primary-color;
    color          : #fff;
    text-decoration: none;
  }
}

.icon {
  width        : 24px;
  height       : 24px;
  border-radius: 2px;
  background   : #000;
  opacity      : .8;
  -webkit-filter: contrast(125%) invert(1);
  filter: contrast(125%) invert(1);
  transition   : all .2s;

  &:hover {
    background: invert($primary-color);
  }
}

.footer {
  background  : none;
  border      : none;
  border-color: transparent;
  position    : relative;

  > div {
    background: transparent;
  }
}
/*    content      */
/*-----------------*/
#content {
  form {
    display: table;
    order  : 1;
  }

  table:nth-of-type(1) {
    order : 1;
    margin: 38px 0;
  }

  .links,
  h3,
  h3 + .error {
    margin: 15px 0 0;
    order : 4;
  }

  .links {
    &:nth-of-type(2) {
      margin-top: 30px;
      order     : 1;
    }

    a {
      display       : inline-block;
      margin        : 4px;
      padding       : 6px 12px;
      min-width     : 88px;
      border-radius : 2px;
      background    : #fff;
      box-shadow    : 0 1px 4px rgba(88, 88, 88, 0.41), 0 2px 3px rgba(88, 88, 88, 0.26);
      color         : $primary-color;
      text-align    : center;
      text-transform: uppercase;
      font-weight   : bold;
      font-size     : 13px;
      line-height   : 24px;
      transition    : all .2s;

      &:hover {
        background     : $primary-color;
        color          : #fff;
        text-decoration: none;
      }
    }

    .active {
      background: $primary-color;
      color     : #fff;
      cursor    : default;
    }
  }

  form > fieldset:first-child {
    // search box
    background-color: transparent;
    border          : none;
    box-shadow      : none;
    float           : right;
    margin          : 0;
    padding         : 0;
    margin-bottom   : 4px;
    margin-top      : -40px;

    legend {
      display: none;
    }
  }

  #form fieldset:nth-of-type(1) {
    margin-bottom   : 10px;
    margin-top      : 0;
    padding-bottom  : 11px;
    min-height      : 57px;
    border          : 1px solid rgba(0,0,0,0.12);
    background-color: #fff;
    box-shadow      : 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
    padding         : .5em .8em;
    margin          : .8em .5em 0 0;
    float           : initial;

    legend {
      display: block;
    }

  }

  fieldset:nth-of-type(2).jsonly {
    float       : right;
    margin-top  : -30px;
    margin-right: 8px;
    border      : none;

    legend {
      display: none;
    }
  }

  fieldset:first-child #fieldset-import,
  fieldset:nth-of-type(1),
  fieldset:nth-of-type(2):not(.jsonly),
  fieldset:nth-of-type(3),
  fieldset:nth-of-type(4),
  fieldset:nth-of-type(5) {
    margin-bottom   : 10px;
    padding-bottom  : 11px;
    min-height      : 57px;
    border          : 1px solid rgba(0,0,0,.12);
    background-color: #fff;
    box-shadow      : 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  }

  fieldset:nth-of-type(6) {
    border: none;

    legend {
      visibility: hidden;
    }
  }

  legend a {
    padding    : 5px;
    color      : $primary-color;
    font-weight: bold;
    font-size  : 13px;
    line-height: 18px;
    transition : all .2s;

    &:hover {
      color          : $primary-color-dark;
      text-decoration: none;
    }
  }

  fieldset:first-child #fieldset-import {
    margin-top : 36px;
    padding    : 13px 10px 0 9px;
    margin-left: -12px;

    &:before {
      content   : 'Import';
      position  : absolute;
      top       : 8px;
      left      : 20px;
      background: #fff;
      padding   : 0 7px;
    }
  }

  input[name=copy],
  input[name=move] {
    float       : right;
    margin-right: -20px;
    margin-left : 25px;
  }

  input[name=copy],
  input[name=move] {
    float       : right;
    margin-right: -20px;
    margin-left : 25px;
  }

  select {
    margin-bottom: 2px;
    padding      : 8px;
  }

}
