Subversion Repositories cheapmusic

Rev

Rev 118 | Rev 128 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

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

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

/* 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 you wrap */
.nowrap {
    white-space: nowrap;    
}

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

/* wishlist image */
.wl-img {
        max-height: 4em;
}

.btn-dismiss {
        font-size: 24px;
}

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

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

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

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

/* 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-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.svg-24 { width:24px; height:24px; }
.svg-yt { color:red; width:36px; height:36px; }

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

.progress-bar { width: 0%; }

/* 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-image {
        max-height: 160px !important;
        min-height: 160px !important;
}

.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);
}

.responsive-image {
        width: 100%;
        height: auto;
}

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

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

/* Filter Button Counters */
.filterButton {
  text-decoration: none;
  padding: 10px 20px;
  position: relative;
  display: inline-block;
}

.filterButtonSmall {
  text-decoration: none;
}

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

/* Floating Top Button */
#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
}

#topBtn:hover {
    background-color: #555;
}
 
/* 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;
        }
}