Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
411 lines (387 sloc) 7.7 KB
.hidden {
display: none;
}
#editor {
height: 100%;
border: 1px solid #0A0A0A;
background: #111;
color: #888;
opacity: 0.9;
z-index: 69;
position: absolute;
left: 0;
top: 0;
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}
#editor a {
display: inline-block;
cursor: pointer;
text-decoration: none;
color: inherit;
}
#help a:hover,
#editor tr:hover {
color: #BBB;
}
#editor .highlighted .editor-col2 {
color: white;
}
#editor #playlist-controls {
font-variant: small-caps;
letter-spacing:0.1em;
font-size: 0.8em;
min-height: 2em;
line-height: 2em;
border-bottom: 1px solid #222;
}
#editor #playlist-controls::before {
content: 'playlist';
display: block;
padding-left: 0.25em;
float: left;
}
#editor #playlist-controls a {
display: block;
float: right;
}
#editor table {
table-layout: fixed;
position: relative;
text-align: left;
font-size: 0.8em;
line-height: 1em;
font-family: "Lucida Sans Typewriter","Lucida Console",Monaco,"Bitstream Vera Sans Mono",monospace;
}
#editor table,
#editor .editor-col2 {
min-width: 20em;
}
#editor .editor-col2 {
text-align: left;
}
#editor .editor-col1,
#editor .editor-col3,
#editor .editor-col4 {
width: 1em;
text-align: center;
}
#editor input {
width: 100%;
display: inline-block;
color: #DFBA92 !important;
background-color: transparent;
text-decoration: none;
outline: 0;
border: none;
border-bottom: 1px #FFF dotted !important;
}
#editor input::selection {
background-color: #DFBA92;
color: #000;
}
#editor input::-moz-selection {
background-color: #DFBA92;
color: #000;
}
#editor input::-o-selection {
background-color: #DFBA92;
color: #000;
}
#editor input::-ms-selection {
background-color: #DFBA92;
color: #000;
}
#editor input::-webkit-selection {
background-color: #DFBA92;
color: #000;
}
#editor .truncate {
width: 20em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#editor .broken {
text-decoration: line-through;
color: #844;
opacity: 0.5;
}
body {
display: table;
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
font-family: sans-serif;
margin: 0;
background-color: #111111;
background-image: url(assets/zwartevilt.jpg),url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%23161616' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
/* zwartevilt.png from http://subtlepatterns.com/black-felt/ (CC BY-SA) */
/* svg pattern from http://www.heropatterns.com/ */
}
body>div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#box {
display: inline-block;
text-align: left;
color: #EEE;
box-shadow: 0 1em 3em rgba(0,0,0,0.80);
border: 1px solid #111;
background-color: #1B1B1B;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
}
#box.embedded,
#box.embedded #player {
border: none;
box-shadow: none;
}
#help {
display: none;
color: #ccc;
text-align: left;
max-width: 640px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #0A0A0A;
background: #111;
opacity: 0.9;
z-index: 69;
position: absolute;
right: 0;
top: 0;
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
padding: 0 1em;
}
#help h1, #help h2 {
font-weight: normal;
}
#help h1 {
font-size: 1.75em;
margin: 0.5em 1.5em 0.25em 0;
text-align: right;
}
#close-help:hover,
#editor table tr:hover,
#menu a:hover,
#help a:hover {
color: #eee;
/* Glow?
text-shadow: #23e0f7 0 0 6em,#23e0f7 0 0 4em,#23e0f7 0 0 2em,#23e0f7 0 0 1em;
*/
}
#help h2 {
font-size: 1.25em;
line-height: 1.225em;
padding-bottom: 0.25em;
border-bottom: 1px solid #0A0A0A;
}
#help h3 {
font-size: 0.9em;
}
#help div#version {
margin: -.75em 5em 1em 0;
font-size: x-small;
color: #666;
text-align: right;
}
#help a {
color: #888;
text-decoration: none;
}
#help .example>a,
#help kbd,
#help tt {
font-family: "Lucida Sans Typewriter","Lucida Console",Monaco,"Bitstream Vera Sans Mono",monospace;
font-size: 0.95em;
}
#help tt {
border-radius: 1em;
text-decoration: none;
border: 1px #333 solid;
padding: .25em .5em!important;
background: #090909;
color: #c0c0c0;
line-height: 2em;
}
#help p, ul {
font-size: 0.8em;
padding:0;
list-style-type: none;
}
#help p {
line-height:1.5em;
}
#help .example {
font-size:0.8em;
color: #888;
}
#help .feature-list {
font-size:0.75rem;
text-align:left;
}
#help ul>li {
padding:0.3em 0;
}
#help kbd {
display:inline-block;
padding: 3px 5px;
font-weight: bold;
font-size:11px;
line-height:10px;
color:#111;
vertical-align:middle;
background-color:#aaa;
border:solid 1px #888;
border-bottom-color:#bbb;
border-radius:3px;
box-shadow:inset 0 -1px 0 #bbb
}
#close-help {
float: right;
}
#embed {
display: block;
position: fixed;
top: 0px;
left: 0px;
width: 1em;
height: 1em;
color: #c0c0c0;
font-size: .8em;
padding: 0.25em;
opacity: 0.5;
z-index: 999;
text-decoration:none;
border-radius:50%;
}
#embed:hover {
background: #000;
color: #FFF;
opacity: .75;
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}
#menu {
position: absolute;
bottom: 0;
right: 0;
color: #333;
text-align: right;
width: 100%;
text-shadow: 0 0 6px #000;
font-size: .9em;
padding: 1em;
}
#menu a, #close-help {
display: inline-block;
cursor: pointer;
text-decoration: none;
color: #777;
}
#menu input {
color: #fff !important;
background-color: #111;
text-align: center;
text-decoration: none;
border: 1px #333 solid;
border-radius: 1em;
padding: .25em 0 !important;
}
#menu input::selection {
background-color: #111;
}
#menu input::-moz-selection {
background-color: #111;
}
#menu input::-o-selection {
background-color: #111;
}
#menu input::-ms-selection {
background-color: #111;
}
#menu input::-webkit-selection {
background-color: #111;
}
#shortened>a,
#shortened>a:link,
#shortened>a:visited {
font-size:1.5em;
color: #555;
}
#shortened>a:hover {
color: #888;
}
.ticker:before {
color: #888;
content: '\2714';
}
#panicOverlay {
background-color: #808080;
position: absolute;
top: 0; left: 0;
width:100%;
height:100%;
z-index: 1000;
}
#spinner { /* credit: https://github.com/tobiasahlin/SpinKit */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
width: 200px;
height: 200px;
background-color: #fff;
-webkit-animation: scaleout 1.0s infinite ease-in-out;
animation: scaleout 1.0s infinite ease-in-out;
z-index: 1;
pointer-events: none;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0.0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes scaleout {
0% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity: 0;
}
}
/* FULLSCREEN fix for Chrome */
body:-webkit-full-screen {
position:relative !important;
}
/* Custom toaster style (notifications) */
#toast-container > div {
box-shadow: 0px 0px 12px #000 !important;
}
.toast-success {
background-color: rgba(13, 51, 62, 0.5) !important;
}
.toast-info {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.toast-warning {
background-color: rgba(192, 113, 0, 0.5) !important;
}
/* UX fix for SoundCloud player */
iframe#player[src*="soundcloud.com"] {
margin-left: -2px;
margin-top: -2px;
}
/* stuff for styling HTML5Player */
video#video {
background-color: black; // poorman's default
}
/* vim: set ai ts=2 sw=2 et!: */