10fastfingers Everblush by veillain

/* ==UserStyle==
@name         10fastfingers Everblush
@namespace    NONE
@author       Veillain
@description  Everblush theme for 10fastfingers
@version      0.0.1
@license      NONE
@preprocessor uso
==/UserStyle== */
/*
  
  Author: Veillain (Undefined)
  
  Version 0.0.1:
   - Initial release.
   - Glitches and 'floating' elements might be present, will be fixed in the next version of the theme.
  
*/
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("10fastfingers.com") {
/* global variables */
:root {
  --font: 'MonaspiceNe Nerd Font', Arial, sans-serif;
  
  /* dark preset */
  --bgn: #141B1E; /* main bg color */
  --bgd: #1C2528; /* darker highlight color */
  --bgh: #3B4143; /* lighter highlight color */
  --bgt: #b6babf; /* faded text color */
  --bgo: #e9f4fe; /* text color */
  --bga: #00ff7f; /* accent color */
  
  /* white preset */
  /*--bgn: #ddd; /* main bg color */
  /*--bgd: #aaa; /* darker highlight color */
  /*--bgh: #e7e7e7; /* lighter highlight color */
  /*--bgt: #4a4a4a; /* faded text color */
  /*--bgo: #2a2a2a; /* text color */
  /*--bga: #00ff7f; /* accent color */

  
  /* red/green/blue colors */
  --bgr: #E74C3C; /* red color */
  --bgg: #26A65B; /* green color */
  --bgb: #3A539B; /* blue color */
  
  /* test colors */
  --bgb: #467Bc6; /* blue color */
  /*--bgn: #2c3e50; /* main bg color */
  /*--bgd: #34495e; /* darker highlight color */
  /*--bgd: #994f5c; /* pinkish red color */
  /*--bgd: #4f5c99; /* purpleish blue color */
  
  
}

/* global styles */
*, *::before, *::after {
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  text-shadow: none !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
  border-radius: 0 !important;
}

/* icon font */
.fa, .fa::before, .fa::after {
  font-family: 'FontAwesome' !important;
}

/* icon font */
.glyphicon, .glyphicon::before, .glyphicon::after {
  font-family: "Glyphicons Halflings" !important;
}

/* default text color */
div, td, h3 {
  color: var(--bgt) !important;
}

/* text styles */
a {
  color: var(--bgt) !important;
}

/* correct */
.correct, #correct .value strong, #wpm strong {
  color: var(--bgg) !important;
}

/* correct words */
.correct {
  border-bottom: 3px solid var(--bgg) !important;
}

/* wrong */
.wrong, #wrong .value strong {
  color: var(--bgr) !important;
}

/* wrong words */
.wrong {
  border-bottom: 3px solid var(--bgr) !important;
}

/* highlighted wrong words */
.highlight-wrong {
  color: var(--bgo) !important;
  background-color: var(--bgr) !important;
}

/* highlight on current word */
.highlight {
  background-color: var(--bgt) !important;
  background-color: transparent !important;
  color: var(--bgo) !important;
  border-bottom: 3px solid var(--bgt) !important;
}

/* blue buttons and such */
#timer, #reload-btn, .btn-primary {
  background-color: var(--bgd) !important;
}

/* green buttons */
.btn-success {
  background-color: var(--bgg) !important;
}

/* body fixes */
body {
/*   overflow: hidden !important; */
  background: var(--bgn) !important;
  min-height: 100vh !important;
}
  
/* body background */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  margin: -40px !important;
  height: calc(100% + 80px) !important;
  width: calc(100% + 80px) !important;
  z-index: 0 !important;
  background-color: var(--bgn) !important;
  background-size: cover !important;
  background-position: center !important;
  /*background-image: url('http://goo.gl/jV3MM9') !important; /**/
  filter: blur(10px) !important;
}

/* top navigation */
.top-first-bg {
  z-index: 99 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: fixed !important;
  height: 80px !important;
  margin-top: -48px !important;
  background: var(--bgd) !important;
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.2) !important;
  transition: ease-in-out 200ms !important;
} /* hover */
  .top-first-bg:hover {
    margin-top: 0px !important;
    transition-delay: 2000ms !important;
  } /* top navigation logo*/
    .navbar-brand {
/*       display: none !important; */
    }

/* side navigation */
#sidebar-md-lg {
  position: fixed !important;
  top: 30px !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 340px !important;
  margin-left: -340px !important;
  border-radius: 0 !important;
  background-color: var(--bgd) !important;
  transition: ease-in-out 450ms !important;
  z-index: 98 !important;
} /* hover area */
  #sidebar-md-lg:after {
   position: absolute !important;
   top: 0 !important;
   right: -10vw !important;
   bottom: 0 !important;
   width: 10vw !important;
   content: '' !important;
   background-color: rgba(255,255,255,0.0) !important;
  } /* hover */
    #sidebar-md-lg:hover {
      margin-left: 0px !important;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.2) !important;
    } /* sidebar items */
      .list-group-item  {
        background-color: var(--bgh) !important;
        color: var(--bgt) !important;
        transition: 300ms ease-in-out !important;
      } /* hover */
        .list-group-item:hover {
          background-color: var(--bgd) !important;
          color: var(--bgt) !important;
        }

/* responsive */
@media (min-width: 0px) and (max-width: 1000px) {
  #sidebar-md-lg {
    display: block !important;
  }
    #sidebar-md-lg:after {
     right: -5vw !important;
     width: 5vw !important;
     background-color: rgba(255,255,255,0.0) !important;
  }
  
}


/* main content */
#main {
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  float: none!important;
} /* children */
  .row.main-layout {
    padding: 0 !important;
    margin-top: 10px !important;
/*     box-shadow: 0 0 12px 0 rgba(0,0,0,0.1) !important; */
  } /* speedtest container */
    #speedtest-main {
      width: 100% !important;
      /* took me 30 minutes to resolve this..... */
      padding: 0 !important;
    } /* login/language */
    #speedtest-main > .row {
      width: 820px !important;
      margin: 20px auto 0 !important;
    } /* child element */
      #speedtest-main > .row > div {
        padding: 0 !important;
      } /* button fix */
        #speedtest-main > .row > div > .btn-group {
          margin: 0 !important;
        }
      /* language list */
      #language-list {
        padding: 10px !important;
        display: none;
        background: var(--bgd) !important;
        margin: 0 0 20px 0 !important;
      } /* switch language */
        #language-list > h4 {
          text-align: center !important;
          background: var(--bgh) !important;
        } /* switch language */
        #language-list > a {
          text-align: center !important;
          transition: 300ms ease-in-out !important;
        } /* hover over the elements */
          #language-list > a:hover {
            text-align: center !important;
            background: var(--bgh) !important;
          }
  
    /* speedtest box */
    #reload-box {
      max-width: 820px !important;
      margin: 0 auto !important;
    } /* child elements */
      #reload-box > div {
        width: 100% !important;
        margin: 0 auto !important;
      } /* words */
        #words {
          text-align: center !important;
          padding: 6px 6px 30px 6px !important;
          margin-bottom: 0 !important;
          background-color: var(--bgh) !important;
        } /* words row */
          #row1 {
            color: var(--bgt) !important;
          }
        /* input row */
        #input-row {
          background-color: var(--bgh) !important;
        } /* child */
          #input-row > div {
            max-width: calc(100% - 130px) !important;
            }
          /* input bar */
          #inputfield {
            width: calc(100% - 130px) !important;
            margin-left: 130px !important;
            text-align: center !important;
            border-bottom: 3px solid rgba(0,0,0,0.1) !important;
            background: rgba(50,50,50,0.0) !important;
            color: var(--bgt) !important;
          }



/* first result element */
#auswertung-box.row {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
} /* children */
  #advertisement {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  } /* result wrapper */
    #auswertung-result {
      float: none !important;
      margin: 20px auto 0 !important;
      color: var(--bgt) !important;
      background-color: var(--bgh) !important;
      box-shadow: 0 0 12px 0 rgba(0,0,0,0.1) !important;
    } /* title */
      #auswertung-result h3 {
        text-align: center !important;
        color: var(--bgt) !important;
        background: var(--bgd) !important;
      } /* table bg fix */
        .table-striped > tbody > tr:nth-child(2n+1) > td {
          background-color: transparent !important;
        } 
        /* share on facebook button */
        #share-on-facebook-button {
          margin-bottom: 0 !important;
          margin: 0 !important;
          width: 100% !important;
          box-shadow: 0 0 6px 0 rgba(0,0,0,0.1) !important;
        }
  #result-table {
    margin-bottom: 0 !important;
  }
  #result-table tbody tr td {
    padding: 10px !important;
    margin-bottom: 0 !important;
  }

/* top score */
#top-score {
  width: 100% !important;
  text-align: center !important;
  left: 0 !important;
/*   top: 5px !important; */
  background: none !important;
} /* childred */
  #top-score > div {
    transform: none !important;
    left: 0 !important;
    top: 3px !important;
  }


/* second result element*/
#badge-box {
  float: none !important;
  margin: 20px auto 0 !important;
  min-height: 380px !important;
  max-width: 820px !important;
  width: 100% !important;
  background-color: var(--bgh) !important;
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.1) !important;
} /* header */
  #badge-box h3#box-title {
    text-align: center !import...