Subversion Repositories cheapmusic

/* body to start below sticky navigation bar */
body {
    padding-top: 50px;
}

/* height of sticky header */
html, body {
  scroll-padding-top: 60px;
}

/* Override Progress Bar Transition Time */
.progress-bar {
        transition: width 0.1s ease !important;
        width: 0;
}

/* Black Background */
.bg-black {
        background-color: black !important;
        color: white !important;
}

/* Black Background */
.bg-white {
        background-color: white !important;
        color: black !important;
}

/* Invert element */
.invert {
        filter: invert(20%);
}

/* Three additional bigger font sizes */
.display-5 {
        font-size: 2.5rem;
        font-weight: 300;
        line-height: 1.2;
}

.display-6 {
        font-size: 1.5rem;
        font-weight: 300;
        line-height: 1.2;
}

.display-7 {
        font-size: 1.25rem;
        font-weight: 300;
        line-height: 1.2;
}

/* Pagination */
.paginateNav {
        padding: 5px 5px;
}

.paginateNav a {
        padding: 3px 3px;
        color: black;
}

.paginateNav .current {
        font-weight: bold;
        text-decoration: underline;
        color: white;
}

/* Do not wrap */
.nowrap {
    white-space: nowrap;    
}

/* User Images */
.user-img {
        max-height: 45px;
}

/* wishlist image */
.wl-img {
        min-width: 80px;
}

.btn-dismiss {
        font-size: 1.5rem;
}

/* Icons */
.media-icon {
        font-size: 2.25rem;
        text-shadow: 2px 2px 4px #000000;
}

.media-icon-silver {
        color: silver;
}

.media-icon-black {
        color: black;
}

/* Material Icons */
.material-text {
    vertical-align: -3px;
}

/* Material Icon on Button */    
button.material-icons, a.material-icons {
    vertical-align: middle !important;;
    line-height: 0 !important;
    position: relative;
    top: -1px;
}

/* Negative left and right margins */
.material-nlm {
    margin-left: -.2em;
}

.material-nrm {
    margin-right: -.2em;
}

.material-icons.md-12 { font-size: 0.75ren; }
.material-icons.md-18 { font-size: 1.125rem; }
.material-icons.md-24 { font-size: 1.5rem; }
.material-icons.md-36 { font-size: 2.25rem; }
.material-icons.md-48 { font-size: 3rem; }

.svg-24 { width:1.5rem; height:1.25rem; }
.svg-yt { color:red; width:2.25rem; height:2.25rem; }

.hidden-default-btn { width: 0; height: 0; overflow: hidden; }

/* Cursor Pointer */
.cursor-pointer {
        cursor: pointer;
}

/* Cards and their images */
.result-card {
        min-width: 160px !important;
        max-width: 160px !important;
}
.result-card:hover {
    transform: scale(1.1);
}
.result-card-image {
        max-height: 160px !important;
        min-height: 160px !important;
}

/* Table Images */
.result-table-image {
        max-height: 160px !important;
}

/* Discogs Cards */
.discogs-card {
        min-width: 180px !important;
        max-width: 180px !important;
}
.discogs-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Youtube list bullet */
.youtube {
        color: #ff0000;
}

/* Social Buttons */
.socialBtn {
    max-height:32px;
}

/* Filter Button Counters */
.filterButton {
  text-decoration: none;
}

.filterButton .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 3px 6px;
  border-radius: 50%;
  background-color: black;
  color: white;
}

/* Sticky Table header below the navigation bar */
.table-header-sticky {
    position: -webkit-sticky !important;
    position: -moz-sticky !important;
    position: -ms-sticky !important;
    position: -o-sticky !important;
    position: sticky !important;
    top: 50px !important; /* bugbug: size of panigation bar */
}

/* Hide on larger and smaller screens */
/* search term entry width */
@media screen and (min-width: 1200px) {
        .searchTerm-width {
            width:30em!important;
        }
}

@media screen and (max-width: 1199px) {
        .hide-large {
                display: none !important;
        }
        
        .searchTerm-width {
            width:25em!important;
        }
}

/* Hide on medium and smaller screens */
@media screen and (max-width: 991px) {
        .hide-medium {
                display: none !important;
        }
        
        .searchTerm-width {
            width:20em!important;
        }
}

/* Hide on small and extra-small screens */
@media screen and (max-width: 767px) {
        .hide-small {
                display: none !important;
        }
        
        .searchTerm-width {
            width:15em!important;
        }
}

/* Hide on extra-small screens */
/* Wider cards */
@media screen and (max-width: 575px) {
        .hide-extra-small {
                display: none !important;
        }

        .result-card {
                min-width: 80% !important;
                max-width: 80% !important;
        }

        .result-image {
                max-height: none !important;
                min-height: none !important;
        }

        .discogs-card {
                max-height: none !important;
                min-height: none !important;
        }
        
        .searchTerm-width {
            width:15em!important;
        }
}

/* Social bar on bottom on smaller screen */
@media screen and (max-width: 991px) {
    .social-icon-bar {
      position: fixed;
      display: inline;
      padding: 0;
      left: 0%;
      bottom: -1%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    
    .social-icon-bar a, .social-icon-bar button {
        display: inline;
    }
}

/* Social bar on side on larger screen */
@media screen and (min-width: 992px) {
    .social-icon-bar {
      position: fixed;
      display: block;
      top: 80%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .social-icon-bar a, .social-icon-bar button {
      display: block;
    }
}

.social-icon-bar a, .social-icon-bar button {
  text-align: center;
  transition: all 0.3s ease;
  color: white;
  font-size: 1.25rem;
  border-radius: 0;
}

.social-icon-bar a:hover, .social-icon-bar button:hover {
  background-color: #000;
  color: #fff;
}

.cfacebook {
  background: #3B5998;
}

.ctwitter {
  background: #55ACEE;
}

.jump-top {
  background: grey;
}

.social-icon-svg {
  width: 24px;
}

/* .col-form-label to align label text and input field (from twitter bootstrap */
.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Clearable input fields */
.clearable{
  background: #fff url("data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=") no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */