1/* 2 * Base CSS stylesheet used by all themes. 3 * 4 * Note that attributes that are typically changed by theme authors are 5 * placed at the top. 6 * 7 * Author: Sindre Mehus 8 */ 9 10/* The primary background color (light gray). */ 11.bgcolor1, table.music tr:nth-of-type(even) { 12 background-color: #FDFDFD; 13} 14 15/* The secondary background color (darker gray). */ 16.bgcolor2, .ruleTableHeader, .log, table.music tr:nth-of-type(odd) { 17 background-color: #666; 18} 19 20.headerSelected { 21 border-bottom: 3px solid #E65100; 22} 23 24/* Background color for form controls (use default). */ 25input, select { 26} 27 28/* The primary foreground color (black). */ 29body { 30 color: black; 31} 32 33/* The secondary foreground color used for h1, h2, details etc (gray). */ 34h1, h2, .detail, .albumComment, .icon { 35 color: #565656; 36} 37 38/* Foreground color used for bold and tr. */ 39b, tr { 40 color: #333333; 41} 42 43b { 44 font-weight: 500; 45} 46 47/* Link color */ 48a:link, a:active, a:visited, a:link *, a:active *, a:visited * { 49 color: inherit 50} 51 52/* Link hover color */ 53a:hover, a:hover * { 54 text-decoration: underline; 55} 56 57/* Color for warning messages. */ 58.warning { 59 color: #E65100; 60} 61 62/* Simple dark border. */ 63.border1, .ruleTableHeader, .ruleTableCell, .log { 64 border: 1px solid black; 65} 66 67/* Scrollbar colors (supported on IE and Opera) */ 68body { 69 scrollbar-face-color: #DEE3E7; 70 scrollbar-highlight-color: #FFFFFF; 71 scrollbar-shadow-color: #DEE3E7; 72 scrollbar-3dlight-color: #D1D7DC; 73 scrollbar-arrow-color: #006699; 74 scrollbar-track-color: #EFEFEF; 75 scrollbar-darkshadow-color: #98AAB1; 76} 77 78body, form, label, table, a { 79 font-family: 'Roboto', arial, sans-serif; 80} 81 82h1, h1 a { 83 font-family: 'Ubuntu', arial, sans-serif; 84 font-weight: normal; 85} 86 87h2, h2 a, .topHeader a { 88 font-family: 'Roboto', arial, sans-serif; 89 font-weight: normal; 90} 91 92/* Put stuff here if you need to customize any of the frames. */ 93.mainframe { 94 padding-left:1em 95} 96.topframe { 97} 98.leftframe { 99} 100.rightframe { 101} 102.playlistframe { 103} 104 105.topframe::-webkit-scrollbar:vertical { 106 display:none 107} 108.playlistframe::-webkit-scrollbar:vertical { 109 display:none 110} 111.leftframe::-webkit-scrollbar:horizontal { 112 display:none 113} 114 115/*************************************************************************************** 116 * The rest of the CSS is typically not changed in other themes (but not necessarily so). 117 ***************************************************************************************/ 118 119body { 120 padding:0; 121 border:0; 122 margin:0.75em; 123 font-size: 10.5pt; 124 line-height: 1.5em; 125} 126 127p { 128 padding:0; 129 border:0; 130 margin:0 0 1em 0; 131} 132 133.dense { 134 white-space: nowrap; 135 margin: 0; 136 line-height: 1.5em 137} 138 139h1 { 140 white-space: nowrap; 141 font-size: 150%; 142 padding: 0 0 0.1em; 143 border: 0; 144 margin: 0; 145} 146 147h2 { 148 white-space: nowrap; 149 font-size: 108%; 150 margin: 0.8em 0 0.2em 0; 151} 152 153form { 154 font-size: 100%; 155 line-height: 140%; 156 padding: 0; 157 border: 0; 158 margin: 0; 159} 160 161input, textarea, select { 162 font-size: 90%; 163 padding: 3px; 164 border-radius: 3px; 165 border: 1px solid lightgray; 166} 167 168input[type=submit], input[type=button] { 169 background: white; 170 padding-left: 1em; 171 padding-right: 1em; 172} 173 174input[type=submit]:active, input[type=button]:active { 175 background: #e9e9e9; 176} 177 178input:hover, textarea:hover, select:hover { 179 border: 1px solid darkgray; 180} 181 182label { 183 font-size: 100%; 184 line-height: 140%; 185} 186 187table { 188 font-size: 100%; 189 line-height: 140%; 190 padding: 0; 191 border: 0; 192 margin: 0 0 0.4em 0; 193} 194 195 196/* Table with some white space above it.*/ 197table.indent { 198 margin: 1em 0 0.4em 0; 199} 200 201table.music { 202 line-height: 230%; 203 border-collapse:collapse; 204 white-space:nowrap; 205 width: 100%; 206} 207 208td.fit { 209 width:1px; 210 padding-left:4px; 211 padding-right:4px; 212} 213 214td.truncate { 215 max-width:50px; 216 overflow:hidden; 217 text-overflow:ellipsis; 218 white-space: nowrap; 219 padding-left:10px; 220 padding-right:10px; 221} 222 223td.rightalign { 224 text-align:right; 225 padding-right: 20px; 226} 227 228a { 229 font-size: 100%; 230 text-decoration: none 231} 232 233img { 234 border-style: none; 235 border: 0; 236 margin: 0; 237 padding: 0; 238 vertical-align: middle; 239} 240 241img.circle { 242 border-radius:50%; 243 object-fit:cover; 244 object-position:center; 245} 246 247.dropshadow { 248 box-shadow: 2px 2px 10px #333333; 249} 250 251.shadow { 252 box-shadow: 0 0 20px 3px #555555; 253} 254 255.space-above { 256 margin-top: 1em; 257} 258 259.coverart { 260 background-color: white; 261 color: #323232; 262 border-radius:2px; 263} 264 265.coverart .caption1 { 266 overflow:hidden; 267 text-overflow:ellipsis; 268 white-space:nowrap; 269 padding:6px 8px 4px 8px; 270 line-height: 100%; 271 font-weight: 300; 272} 273 274.coverart .caption1 a:link, .coverart .caption1 a:visited { 275 color: #323232; 276} 277 278.coverart .caption2 { 279 overflow:hidden; 280 text-overflow:ellipsis; 281 white-space:nowrap; 282 padding:0px 8px 5px 8px; 283 font-size: 90%; 284 color: #aaaaaa; 285 line-height: 100%; 286 font-weight: 300; 287} 288 289.coverart .caption3 { 290 overflow:hidden; 291 text-overflow:ellipsis; 292 white-space:nowrap; 293 padding:0px 8px 5px 8px; 294 font-size: 90%; 295 color: #aaaaaa; 296 line-height: 100%; 297 font-weight: 300; 298} 299 300::-webkit-scrollbar { 301 width: 6px; 302 height: 6px; 303} 304 305::-webkit-scrollbar-thumb { 306 background: rgba(128, 128, 128, 0.5); 307 border-radius: 6px; 308} 309 310.header, .header a, .headerSelected, .headerSelected a { 311 padding-left: 0.25em; 312 padding-right: 0.25em; 313 font-weight: 300; 314 white-space: nowrap; 315} 316 317.similar-artist-divider { 318 padding-left: 0.5em; 319 padding-right: 0.5em; 320} 321 322.detail { 323 white-space: nowrap; 324 font-size: 90%; 325 line-height: 1.25em; 326} 327 328.songTitle { 329 font-style: italic; 330} 331 332.topHeader, .topHeader a { 333 font-size: 102%; 334 font-weight: 300; 335 padding: 0.15em 0 0 0; 336 margin: 0; 337 border: 0; 338 white-space: nowrap; 339} 340 341.back, .forward { 342 background-position:center left; 343 background-repeat:no-repeat; 344 padding-left: 12px; 345 line-height: 16px; 346} 347 348.back { 349 background-image:url("../icons/default_light/back.png"); 350} 351 352.forward { 353 background-image:url("../icons/default_light/forward.png"); 354} 355 356.albumComment { 357 width: 50em; 358 font-size: 90%; 359 line-height: 1.4em; 360 padding-top: 0.25em; 361} 362 363.albumThumb { 364 display:inline-block; 365 vertical-align: top; 366 padding-bottom: 20px; 367 padding-right: 20px; 368} 369 370.albumOverflowButton { 371 display:inline-block; 372 cursor:pointer; 373 vertical-align:bottom; 374 margin-left:15px; 375 margin-bottom:20px 376} 377 378.log { 379 white-space: nowrap; 380 font-size: 90%; 381 line-height: 1em; 382} 383 384.checkbox { 385 border: 0 386} 387 388/* Table with simple lines between the cells. */ 389.ruleTable { 390 border-collapse: collapse; 391} 392 393.ruleTableHeader, .ruleTableCell { 394 margin: 5px; 395 padding: 5px; 396} 397 398.ruleTableHeader { 399 font-weight: bold; 400} 401 402.context-menu-item { 403 color: black; 404} 405 406.clickable { 407 cursor: pointer; 408} 409 410.ellipsis { 411 overflow: hidden; 412 text-overflow: ellipsis; 413 white-space: nowrap; 414} 415 416.starred { 417 color: #FF9800; 418} 419 420.nospace { 421 margin: 0; 422 padding: 0; 423 border: 0; 424}