Subversion Repositories cheapmusic

Rev

Rev 114 | Rev 116 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
115 - 1 
/* root */
2 
:root {
3 
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
4 
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
5 
}
6 
 
81 - 7 
/* body to start bewlow sticky navigation bar */
8 
body {
83 - 9 
    padding-top: 50px;
81 - 10 
}
11 
 
1 - 12 
/* Override Progress Bar Transition Time */
13 
.progress-bar {
65 - 14 
	transition: width 0.1s ease !important;
1 - 15 
}
16 
 
62 - 17 
/* Black Background */
18 
.bg-black {
65 - 19 
	background-color: black !important;
20 
	color: white !important;
62 - 21 
}
22 
 
68 - 23 
/* Black Background */
24 
.bg-white {
25 
	background-color: white !important;
26 
	color: black !important;
27 
}
28 
 
62 - 29 
/* Invert element */
30 
.invert {
65 - 31 
	filter: invert(20%);
62 - 32 
}
33 
 
17 - 34 
/* Three additional bigger font sizes */
3 - 35 
.display-5 {
65 - 36 
	font-size: 2.5rem;
37 
	font-weight: 300;
38 
	line-height: 1.2;
3 - 39 
}
65 - 40 
 
3 - 41 
.display-6 {
65 - 42 
	font-size: 1.5rem;
43 
	font-weight: 300;
44 
	line-height: 1.2;
5 - 45 
}
46 
 
17 - 47 
.display-7 {
65 - 48 
	font-size: 1.25rem;
49 
	font-weight: 300;
50 
	line-height: 1.2;
17 - 51 
}
52 
 
43 - 53 
/* Pagination */
65 - 54 
.paginateNav {
55 
	padding: 5px 5px;
56 
}
43 - 57 
 
65 - 58 
.paginateNav a {
59 
	padding: 3px 3px;
60 
	color: black;
61 
}
62 
 
114 - 63 
.paginateNav .current {
65 - 64 
	font-weight: bold;
65 
	text-decoration: underline;
66 
	color: white;
67 
}
68 
 
47 - 69 
/* Images */
65 - 70 
.user-img {
71 
	max-height: 45px;
72 
}
47 - 73 
 
65 - 74 
.wishlist-img {
75 
	max-height: 3em;
76 
}
77 
 
47 - 78 
/* Buttons */
65 - 79 
.btn-search {
80 
	font-size: 25px;
81 
}
47 - 82 
 
65 - 83 
.btn-dismiss {
84 
	font-size: 24px;
85 
}
86 
 
87 
.btn-shop {
88 
	font-size: 20px;
89 
}
90 
 
91 
.btn-wishlist {
92 
	font-size: 1.5em;
93 
}
94 
 
47 - 95 
/* Icons */
66 - 96 
.media-icon {
65 - 97 
	font-size: 32px;
98 
	text-shadow: 2px 2px 4px #000000;
99 
}
47 - 100 
 
66 - 101 
.media-icon-silver {
65 - 102 
	color: silver;
103 
}
104 
 
68 - 105 
.media-icon-black {
106 
	color: black;
107 
}
108 
 
47 - 109 
/* Cursor Pointer */
65 - 110 
.cursor-pointer {
111 
	cursor: pointer;
112 
}
47 - 113 
 
61 - 114 
/* Cards and their images */
65 - 115 
.result-card {
116 
	min-width: 160px !important;
117 
	max-width: 160px !important;
118 
}
61 - 119 
 
68 - 120 
.result-card:hover {
121 
    transform: scale(1.1);
122 
}
65 - 123 
.result-image {
124 
	max-height: 160px !important;
125 
	min-height: 160px !important;
126 
}
127 
 
128 
.discogs-card {
129 
	min-width: 180px !important;
130 
	max-width: 180px !important;
131 
}
132 
 
68 - 133 
.discogs-card:hover {
134 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
135 
}
136 
 
65 - 137 
.responsive-image {
138 
	width: 100%;
139 
	height: auto;
140 
}
141 
 
62 - 142 
/* Youtube list bullet */
68 - 143 
.youtube {
144 
	color: #ff0000;
62 - 145 
}
146 
 
114 - 147 
/* Social Buttons */
148 
.socialBtn {
149 
    max-height:32px;
150 
}
151 
 
66 - 152 
/* Filter Button Counters */
153 
.filterButton {
154 
  text-decoration: none;
155 
  padding: 10px 20px;
156 
  position: relative;
157 
  display: inline-block;
158 
}
159 
 
160 
.filterButtonSmall {
161 
  text-decoration: none;
162 
}
163 
 
164 
.filterButton .badge {
165 
  position: absolute;
166 
  top: -10px;
167 
  right: -10px;
168 
  padding: 3px 6px;
169 
  border-radius: 50%;
170 
  background-color: black;
171 
  color: white;
172 
}
173 
 
81 - 174 
/* Floating Top Button */
175 
#topBtn {
176 
    display: none;
177 
    position: fixed;
178 
    bottom: 20px;
179 
    right: 30px;
180 
    z-index: 99;
181 
    border: none;
182 
    outline: none;
183 
    background-color: red;
184 
    color: white;
185 
    cursor: pointer;
186 
    padding: 15px;
187 
    border-radius: 10px;
188 
    font-size: 18px;
189 
}
190 
 
191 
#topBtn:hover {
192 
    background-color: #555;
193 
}
62 - 194 
 
81 - 195 
/* Sticky Table header below the navigation bar */
196 
.table-header-sticky {
197 
    position: -webkit-sticky !important;
198 
    position: -moz-sticky !important;
199 
    position: -ms-sticky !important;
200 
    position: -o-sticky !important;
201 
    position: sticky !important;
114 - 202 
    top: 50px !important; /* bugbug: size of panigation bar */
81 - 203 
}
204 
 
17 - 205 
/* Hide on larger and smaller screens */
68 - 206 
/* search term entry width */
207 
@media screen and (min-width: 1200px) {
208 
	.searchTerm-width {
209 
	    width:30em!important;
210 
	}
211 
}
212 
 
17 - 213 
@media screen and (max-width: 1199px) {
65 - 214 
	.hide-large {
215 
		display: none !important;
216 
	}
68 - 217 
 
218 
	.searchTerm-width {
219 
	    width:25em!important;
220 
	}
17 - 221 
}
222 
 
223 
/* Hide on medium and smaller screens */
224 
@media screen and (max-width: 991px) {
65 - 225 
	.hide-medium {
226 
		display: none !important;
227 
	}
68 - 228 
 
229 
	.searchTerm-width {
230 
	    width:20em!important;
231 
	}
17 - 232 
}
233 
 
234 
/* Hide on small and extra-small screens */
235 
@media screen and (max-width: 767px) {
65 - 236 
	.hide-small {
237 
		display: none !important;
238 
	}
68 - 239 
 
240 
	.searchTerm-width {
241 
	    width:15em!important;
242 
	}
17 - 243 
}
244 
 
245 
/* Hide on extra-small screens */
61 - 246 
/* Wider cards */
17 - 247 
@media screen and (max-width: 575px) {
65 - 248 
	.hide-extra-small {
249 
		display: none !important;
250 
	}
251 
 
252 
	.result-card {
253 
		min-width: 80% !important;
254 
		max-width: 80% !important;
255 
	}
256 
 
257 
	.result-image {
258 
		max-height: none !important;
259 
		min-height: none !important;
260 
	}
261 
 
262 
	.discogs-card {
263 
		max-height: none !important;
264 
		min-height: none !important;
265 
	}
68 - 266 
 
267 
	.searchTerm-width {
268 
	    width:15em!important;
269 
	}
65 - 270 
}