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