Subversion Repositories cheapmusic

Rev

Rev 151 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
118 - 1
/* body to start below sticky navigation bar */
81 - 2
body {
83 - 3
    padding-top: 50px;
81 - 4
}
5
 
137 - 6
/* height of sticky header */
7
html, body {
151 - 8
  scroll-padding-top: 60px;
137 - 9
}
10
 
1 - 11
/* Override Progress Bar Transition Time */
12
.progress-bar {
65 - 13
	transition: width 0.1s ease !important;
137 - 14
	width: 0;
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
 
149 - 69
/* Do not wrap */
118 - 70
.nowrap {
71
    white-space: nowrap;
72
}
73
 
74
/* User Images */
65 - 75
.user-img {
76
	max-height: 45px;
77
}
47 - 78
 
118 - 79
/* wishlist image */
80
.wl-img {
124 - 81
	min-width: 80px;
118 - 82
}
83
 
65 - 84
.btn-dismiss {
161 - 85
	font-size: 1.5rem;
65 - 86
}
87
 
47 - 88
/* Icons */
66 - 89
.media-icon {
161 - 90
	font-size: 2.25rem;
65 - 91
	text-shadow: 2px 2px 4px #000000;
92
}
47 - 93
 
66 - 94
.media-icon-silver {
65 - 95
	color: silver;
96
}
97
 
68 - 98
.media-icon-black {
99
	color: black;
100
}
101
 
116 - 102
/* Material Icons */
103
.material-text {
149 - 104
    vertical-align: -3px;
116 - 105
}
106
 
107
/* Material Icon on Button */
108
button.material-icons, a.material-icons {
109
    vertical-align: middle !important;;
110
    line-height: 0 !important;
111
    position: relative;
112
    top: -1px;
113
}
114
 
115
/* Negative left and right margins */
116
.material-nlm {
117
    margin-left: -.2em;
118
}
119
 
120
.material-nrm {
121
    margin-right: -.2em;
122
}
123
 
161 - 124
.material-icons.md-12 { font-size: 0.75ren; }
125
.material-icons.md-18 { font-size: 1.125rem; }
126
.material-icons.md-24 { font-size: 1.5rem; }
127
.material-icons.md-36 { font-size: 2.25rem; }
128
.material-icons.md-48 { font-size: 3rem; }
116 - 129
 
161 - 130
.svg-24 { width:1.5rem; height:1.25rem; }
131
.svg-yt { color:red; width:2.25rem; height:2.25rem; }
119 - 132
 
133
.hidden-default-btn { width: 0; height: 0; overflow: hidden; }
134
 
47 - 135
/* Cursor Pointer */
65 - 136
.cursor-pointer {
137
	cursor: pointer;
138
}
47 - 139
 
61 - 140
/* Cards and their images */
65 - 141
.result-card {
142
	min-width: 160px !important;
143
	max-width: 160px !important;
144
}
68 - 145
.result-card:hover {
146
    transform: scale(1.1);
147
}
124 - 148
.result-card-image {
65 - 149
	max-height: 160px !important;
150
	min-height: 160px !important;
151
}
152
 
124 - 153
/* Table Images */
154
.result-table-image {
155
	max-height: 160px !important;
156
}
157
 
158
/* Discogs Cards */
65 - 159
.discogs-card {
160
	min-width: 180px !important;
161
	max-width: 180px !important;
162
}
68 - 163
.discogs-card:hover {
164
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
165
}
65 - 166
 
62 - 167
/* Youtube list bullet */
68 - 168
.youtube {
169
	color: #ff0000;
62 - 170
}
171
 
114 - 172
/* Social Buttons */
173
.socialBtn {
174
    max-height:32px;
175
}
176
 
66 - 177
/* Filter Button Counters */
178
.filterButton {
179
  text-decoration: none;
180
}
181
 
182
.filterButton .badge {
183
  position: absolute;
184
  top: -10px;
185
  right: -10px;
186
  padding: 3px 6px;
187
  border-radius: 50%;
188
  background-color: black;
189
  color: white;
190
}
191
 
81 - 192
/* Sticky Table header below the navigation bar */
193
.table-header-sticky {
194
    position: -webkit-sticky !important;
195
    position: -moz-sticky !important;
196
    position: -ms-sticky !important;
197
    position: -o-sticky !important;
198
    position: sticky !important;
114 - 199
    top: 50px !important; /* bugbug: size of panigation bar */
81 - 200
}
201
 
17 - 202
/* Hide on larger and smaller screens */
68 - 203
/* search term entry width */
204
@media screen and (min-width: 1200px) {
205
	.searchTerm-width {
206
	    width:30em!important;
207
	}
208
}
209
 
17 - 210
@media screen and (max-width: 1199px) {
65 - 211
	.hide-large {
212
		display: none !important;
213
	}
68 - 214
 
215
	.searchTerm-width {
216
	    width:25em!important;
217
	}
17 - 218
}
219
 
220
/* Hide on medium and smaller screens */
221
@media screen and (max-width: 991px) {
65 - 222
	.hide-medium {
223
		display: none !important;
224
	}
68 - 225
 
226
	.searchTerm-width {
227
	    width:20em!important;
228
	}
17 - 229
}
230
 
231
/* Hide on small and extra-small screens */
232
@media screen and (max-width: 767px) {
65 - 233
	.hide-small {
234
		display: none !important;
235
	}
68 - 236
 
237
	.searchTerm-width {
238
	    width:15em!important;
239
	}
17 - 240
}
241
 
242
/* Hide on extra-small screens */
61 - 243
/* Wider cards */
17 - 244
@media screen and (max-width: 575px) {
65 - 245
	.hide-extra-small {
246
		display: none !important;
247
	}
248
 
249
	.result-card {
250
		min-width: 80% !important;
251
		max-width: 80% !important;
252
	}
253
 
254
	.result-image {
255
		max-height: none !important;
256
		min-height: none !important;
257
	}
258
 
259
	.discogs-card {
260
		max-height: none !important;
261
		min-height: none !important;
262
	}
68 - 263
 
264
	.searchTerm-width {
265
	    width:15em!important;
266
	}
124 - 267
}
128 - 268
 
151 - 269
/* Social bar on bottom on smaller screen */
128 - 270
@media screen and (max-width: 991px) {
271
    .social-icon-bar {
272
      position: fixed;
273
      display: inline;
274
      padding: 0;
151 - 275
      left: 0%;
276
      bottom: -1%;
128 - 277
      -webkit-transform: translateY(-50%);
278
      -ms-transform: translateY(-50%);
279
      transform: translateY(-50%);
280
    }
281
 
282
    .social-icon-bar a, .social-icon-bar button {
283
        display: inline;
284
    }
285
}
286
 
151 - 287
/* Social bar on side on larger screen */
128 - 288
@media screen and (min-width: 992px) {
289
    .social-icon-bar {
290
      position: fixed;
291
      display: block;
292
      top: 80%;
293
      -webkit-transform: translateY(-50%);
294
      -ms-transform: translateY(-50%);
295
      transform: translateY(-50%);
296
    }
297
 
298
    .social-icon-bar a, .social-icon-bar button {
299
      display: block;
300
    }
301
}
302
 
303
.social-icon-bar a, .social-icon-bar button {
304
  text-align: center;
305
  transition: all 0.3s ease;
306
  color: white;
161 - 307
  font-size: 1.25rem;
128 - 308
  border-radius: 0;
309
}
310
 
311
.social-icon-bar a:hover, .social-icon-bar button:hover {
312
  background-color: #000;
313
  color: #fff;
314
}
315
 
316
.cfacebook {
317
  background: #3B5998;
318
}
319
 
320
.ctwitter {
321
  background: #55ACEE;
322
}
323
 
324
.jump-top {
325
  background: grey;
326
}
327
 
328
.social-icon-svg {
329
  width: 24px;
330
}
137 - 331
 
332
/* .col-form-label to align label text and input field (from twitter bootstrap */
333
.col-form-label {
334
  padding-top: calc(0.375rem + 1px);
335
  padding-bottom: calc(0.375rem + 1px);
336
  margin-bottom: 0;
337
  font-size: inherit;
338
  line-height: 1.5;
339
}
340
 
341
.col-form-label-lg {
342
  padding-top: calc(0.5rem + 1px);
343
  padding-bottom: calc(0.5rem + 1px);
344
  font-size: 1.25rem;
345
  line-height: 1.5;
346
}
347
 
348
.col-form-label-sm {
349
  padding-top: calc(0.25rem + 1px);
350
  padding-bottom: calc(0.25rem + 1px);
351
  font-size: 0.875rem;
352
  line-height: 1.5;
141 - 353
}
143 - 354
 
355
/* Clearable input fields */
356
.clearable{
357
  background: #fff url("data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=") no-repeat right -10px center;
358
  border: 1px solid #999;
359
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
360
  border-radius: 3px;
361
  transition: background 0.4s;
362
}
363
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
364
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
365
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */