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
}