Andrew DeMaria
7 years ago
commit
989ca8cfb9
@ -0,0 +1,429 @@ |
|||||||
|
/* The primary background color (light gray). */ |
||||||
|
.bgcolor1, table.music tr:nth-of-type(even) { |
||||||
|
background-color: #F9F9F9; |
||||||
|
} |
||||||
|
|
||||||
|
/* The secondary background color (darker gray). */ |
||||||
|
.bgcolor2, .ruleTableHeader, .log, table.music tr:nth-of-type(odd) { |
||||||
|
background-color: #F1F1F1 |
||||||
|
} |
||||||
|
|
||||||
|
.headerSelected { |
||||||
|
border-bottom: 3px solid darkorange; |
||||||
|
} |
||||||
|
|
||||||
|
/* Put stuff here if you need to customize any of the frames. */ |
||||||
|
.mainframe { |
||||||
|
padding-left:1em |
||||||
|
} |
||||||
|
.topframe { |
||||||
|
} |
||||||
|
.leftframe { |
||||||
|
} |
||||||
|
.rightframe { |
||||||
|
} |
||||||
|
.playlistframe { |
||||||
|
} |
||||||
|
|
||||||
|
.topframe::-webkit-scrollbar:vertical { |
||||||
|
display:none |
||||||
|
} |
||||||
|
.leftframe::-webkit-scrollbar:horizontal { |
||||||
|
display:none |
||||||
|
} |
||||||
|
|
||||||
|
/* Background color for form controls (use default). */ |
||||||
|
input, select { |
||||||
|
} |
||||||
|
|
||||||
|
/* The primary foreground color (black). */ |
||||||
|
body { |
||||||
|
color: black; |
||||||
|
} |
||||||
|
|
||||||
|
/* The secondary foreground color used for h1, h2, details etc (gray). */ |
||||||
|
h1, h2, .detail, .albumComment { |
||||||
|
color: #696969; |
||||||
|
} |
||||||
|
|
||||||
|
/* Foreground color used for bold and tr. */ |
||||||
|
b, tr { |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
|
||||||
|
/* Link color */ |
||||||
|
a:link, a:active, a:visited, a:link *, a:active *, a:visited * { |
||||||
|
color: #006699 |
||||||
|
} |
||||||
|
|
||||||
|
/* Link hover color */ |
||||||
|
a:hover, a:hover * { |
||||||
|
text-decoration: underline; |
||||||
|
color: #DD6900 |
||||||
|
} |
||||||
|
|
||||||
|
/* Color for warning messages. */ |
||||||
|
.warning { |
||||||
|
color: red; |
||||||
|
} |
||||||
|
|
||||||
|
/* Simple dark border. */ |
||||||
|
.border1, .ruleTableHeader, .ruleTableCell, .log { |
||||||
|
border: 1px solid black; |
||||||
|
} |
||||||
|
|
||||||
|
/* Scrollbar colors (supported on IE and Opera) */ |
||||||
|
body { |
||||||
|
scrollbar-face-color: #DEE3E7; |
||||||
|
scrollbar-highlight-color: #FFFFFF; |
||||||
|
scrollbar-shadow-color: #DEE3E7; |
||||||
|
scrollbar-3dlight-color: #D1D7DC; |
||||||
|
scrollbar-arrow-color: #006699; |
||||||
|
scrollbar-track-color: #EFEFEF; |
||||||
|
scrollbar-darkshadow-color: #98AAB1; |
||||||
|
} |
||||||
|
|
||||||
|
body, form, label, table, a { |
||||||
|
font-family: 'Roboto', arial, sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
h1, h1 a { |
||||||
|
font-family: 'Ubuntu', arial, sans-serif; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
h2, h2 a, .topHeader a { |
||||||
|
font-family: 'Roboto', arial, sans-serif; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
/* Login page */ |
||||||
|
|
||||||
|
#loginframe { |
||||||
|
padding: 20px 50px; |
||||||
|
margin: 100px 50px; |
||||||
|
display: list-item; |
||||||
|
list-style: none; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
#loginframe > * { |
||||||
|
margin: 0 auto; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
#loginframe .loginmessagetop { |
||||||
|
margin-bottom: 1em; |
||||||
|
max-width: 30rem; |
||||||
|
} |
||||||
|
|
||||||
|
#loginframe input[type=text], |
||||||
|
#loginframe input[type=submit], |
||||||
|
#loginframe input[type=password] { |
||||||
|
width: 20rem; |
||||||
|
margin-bottom: 0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
#loginframe input[type=submit] { |
||||||
|
margin: 1rem auto; |
||||||
|
padding: 0.3rem; |
||||||
|
background: #2f7bd9; |
||||||
|
color: #f2f2f2; |
||||||
|
transition: color 0.2s ease, background 0.2s ease; |
||||||
|
} |
||||||
|
|
||||||
|
#loginframe input[type=submit]:hover { |
||||||
|
background: #f2f2f2; |
||||||
|
color: #2d2d2d; |
||||||
|
} |
||||||
|
|
||||||
|
#loginremember { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
#loginframe .loginmessagebottom { |
||||||
|
margin-top: 1em; |
||||||
|
max-width: 50em; |
||||||
|
} |
||||||
|
|
||||||
|
/*************************************************************************************** |
||||||
|
* The rest of the CSS is typically not changed in other themes (but not necessarily so). |
||||||
|
***************************************************************************************/ |
||||||
|
|
||||||
|
body { |
||||||
|
padding:0; |
||||||
|
border:0; |
||||||
|
margin:0.75em; |
||||||
|
font-size: 10.5pt; |
||||||
|
line-height: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
padding:0; |
||||||
|
border:0; |
||||||
|
margin:0 0 1em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.dense { |
||||||
|
white-space: nowrap; |
||||||
|
margin: 0; |
||||||
|
line-height: 1.5em |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 150%; |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 108%; |
||||||
|
margin: 0.8em 0 0.2em 0; |
||||||
|
} |
||||||
|
|
||||||
|
form { |
||||||
|
font-size: 100%; |
||||||
|
line-height: 140%; |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
input, textarea, select { |
||||||
|
font-size: 90%; |
||||||
|
padding: 3px; |
||||||
|
border-radius: 3px; |
||||||
|
border: 1px solid lightgray; |
||||||
|
} |
||||||
|
|
||||||
|
input[type=submit], input[type=button] { |
||||||
|
background: white; |
||||||
|
padding-left: 1em; |
||||||
|
padding-right: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
input[type=submit]:active, input[type=button]:active { |
||||||
|
background: #e9e9e9; |
||||||
|
} |
||||||
|
|
||||||
|
input:hover, textarea:hover, select:hover { |
||||||
|
border: 1px solid darkgray; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
font-size: 100%; |
||||||
|
line-height: 140%; |
||||||
|
} |
||||||
|
|
||||||
|
table { |
||||||
|
font-size: 100%; |
||||||
|
line-height: 140%; |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
margin: 0 0 0.4em 0; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* Table with some white space above it.*/ |
||||||
|
table.indent { |
||||||
|
margin: 1em 0 0.4em 0; |
||||||
|
} |
||||||
|
|
||||||
|
table.music { |
||||||
|
line-height: 190%; |
||||||
|
border-collapse:collapse; |
||||||
|
white-space:nowrap; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
td.fit { |
||||||
|
width:1px; |
||||||
|
padding-left:4px; |
||||||
|
padding-right:4px; |
||||||
|
} |
||||||
|
|
||||||
|
td.truncate { |
||||||
|
max-width:50px; |
||||||
|
overflow:hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
padding-left:10px; |
||||||
|
padding-right:10px; |
||||||
|
} |
||||||
|
|
||||||
|
td.rightalign { |
||||||
|
text-align:right; |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
font-size: 100%; |
||||||
|
text-decoration: none |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
border-style: none; |
||||||
|
border: 0; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
.dropshadow { |
||||||
|
box-shadow: 2px 2px 10px #333333; |
||||||
|
} |
||||||
|
|
||||||
|
.shadow { |
||||||
|
box-shadow: 0 0 20px 3px #555555; |
||||||
|
} |
||||||
|
|
||||||
|
.coverart { |
||||||
|
background-color: white; |
||||||
|
color: #323232; |
||||||
|
border-radius:2px; |
||||||
|
} |
||||||
|
|
||||||
|
.coverart .caption1 { |
||||||
|
overflow:hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space:nowrap; |
||||||
|
padding:6px 8px 4px 8px; |
||||||
|
line-height: 100%; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
.coverart .caption1 a:link, .coverart .caption1 a:visited { |
||||||
|
color: #323232; |
||||||
|
} |
||||||
|
|
||||||
|
.coverart .caption2 { |
||||||
|
overflow:hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space:nowrap; |
||||||
|
padding:0px 8px 5px 8px; |
||||||
|
font-size: 90%; |
||||||
|
color: #aaaaaa; |
||||||
|
line-height: 100%; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
.coverart .caption3 { |
||||||
|
overflow:hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space:nowrap; |
||||||
|
padding:0px 8px 5px 8px; |
||||||
|
font-size: 90%; |
||||||
|
color: #aaaaaa; |
||||||
|
line-height: 100%; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 6px; |
||||||
|
height: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb { |
||||||
|
background: rgba(128, 128, 128, 0.5); |
||||||
|
border-radius: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
.header, .headerSelected { |
||||||
|
padding-left: 0.25em; |
||||||
|
padding-right: 0.25em; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
.similar-artist-divider { |
||||||
|
padding-left: 0.5em; |
||||||
|
padding-right: 0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
.detail { |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 90%; |
||||||
|
line-height: 1.25em; |
||||||
|
} |
||||||
|
|
||||||
|
.songTitle { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
.topHeader, .topHeader a { |
||||||
|
font-size: 102%; |
||||||
|
padding: 0.15em 0 0 0; |
||||||
|
margin: 0; |
||||||
|
border: 0; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.back, .forward { |
||||||
|
background-position:center left; |
||||||
|
background-repeat:no-repeat; |
||||||
|
padding-left: 12px; |
||||||
|
line-height: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.back { |
||||||
|
background-image:url("../icons/default_light/back.png"); |
||||||
|
} |
||||||
|
|
||||||
|
.forward { |
||||||
|
background-image:url("../icons/default_light/forward.png"); |
||||||
|
} |
||||||
|
|
||||||
|
.albumComment { |
||||||
|
width: 50em; |
||||||
|
font-size: 90%; |
||||||
|
line-height: 1.4em; |
||||||
|
padding-top: 0.25em; |
||||||
|
} |
||||||
|
|
||||||
|
.albumThumb { |
||||||
|
display:inline-block; |
||||||
|
vertical-align: top; |
||||||
|
padding-bottom: 20px; |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.albumOverflowButton { |
||||||
|
display:inline-block; |
||||||
|
cursor:pointer; |
||||||
|
vertical-align:bottom; |
||||||
|
margin-left:15px; |
||||||
|
margin-bottom:20px |
||||||
|
} |
||||||
|
|
||||||
|
.log { |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 90%; |
||||||
|
line-height: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
.checkbox { |
||||||
|
border: 0 |
||||||
|
} |
||||||
|
|
||||||
|
/* Table with simple lines between the cells. */ |
||||||
|
.ruleTable { |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
|
||||||
|
.ruleTableHeader, .ruleTableCell { |
||||||
|
margin: 5px; |
||||||
|
padding: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.ruleTableHeader { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.context-menu-item { |
||||||
|
color: black; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,93 @@ |
|||||||
|
|
||||||
|
.mejs__overlay-loading-bg-img { |
||||||
|
background-image: url("mejs-controls-dark.svg"); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__button > button { |
||||||
|
background-image: url("mejs-controls-dark.svg"); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__overlay-button { |
||||||
|
background-image: url("mejs-controls-dark.svg"); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__container { |
||||||
|
background: #F1F1F1; |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__container .me_cannotplay a { |
||||||
|
color: #F1F1F1; |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__controls:not([style*="display: none"]) { |
||||||
|
background: #F1F1F1; |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__time { |
||||||
|
color: black; |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__time-total { |
||||||
|
background: rgba(190, 190, 190, 0.7); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__time-buffering { |
||||||
|
background: linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent 50%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.85) 75%, transparent 75%, transparent); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__time-loaded { |
||||||
|
background: rgba(0, 0, 0, .7); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__time-current, .mejs__time-handle-content { |
||||||
|
background: rgba(0, 0, 0, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__time-hovered { |
||||||
|
background: rgba(0, 0, 0, .4); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__time-hovered.negative { |
||||||
|
background: rgba(255, 255, 255, 0.4); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__volume-button > .mejs__volume-slider { |
||||||
|
background: rgba(50, 50, 50, 0.3); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__volume-current { |
||||||
|
background: rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__volume-handle { |
||||||
|
background: rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__horizontal-volume-total { |
||||||
|
background: rgba(50, 50, 50, 0.2); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__horizontal-volume-current { |
||||||
|
background: rgba(0, 0, 0, 0.2); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector { |
||||||
|
background: rgba(50, 50, 50, 0.3); |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__captions-selector-list-item, .mejs__chapters-selector-list-item { |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__captions-selector-list-item:hover, .mejs__chapters-selector-list-item:hover { |
||||||
|
background-color: rgb(100, 100, 100) !important; |
||||||
|
background-color: rgba(0, 0, 0, 0.6) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__captions-layer { |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
|
||||||
|
.mejs__captions-layer a { |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 6.7 KiB |
Loading…
Reference in new issue