dockerizing
This commit is contained in:
217
data/browser.css
Normal file
217
data/browser.css
Normal file
@@ -0,0 +1,217 @@
|
||||
|
||||
.container { position:relative; margin:0 auto; width:959px; }
|
||||
.column { width:100%; }
|
||||
|
||||
|
||||
/* Mobile (Portrait)
|
||||
================================================== */
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container { width:100%; }
|
||||
}
|
||||
|
||||
|
||||
/* CSS Reset
|
||||
================================================== */
|
||||
|
||||
html,body,div,span,h1,h6,p,a,ul,li,audio {
|
||||
border:0;
|
||||
font:inherit;
|
||||
font-size:25px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
vertical-align:baseline;
|
||||
}
|
||||
|
||||
body { line-height:1; }
|
||||
/* ul { list-style:none; }
|
||||
|
||||
|
||||
/* Basic Styles
|
||||
================================================== */
|
||||
|
||||
html,body {
|
||||
background-color:#000000;
|
||||
color:#808080;
|
||||
font:24px Helvetica, Arial, sans-serif;
|
||||
font-weight:300;
|
||||
padding:5px 0;
|
||||
}
|
||||
|
||||
|
||||
/* Typography
|
||||
================================================== */
|
||||
|
||||
h1 { font-size:42px; line-height:44px; margin:20px 0 0; text-align: center; font-weight: bold; text-decoration:underline; }
|
||||
h2 { font-size:32px; line-height:44px; margin:20px 0 0; text-align: left; font-weight: bold; }
|
||||
|
||||
/* Links
|
||||
================================================== */
|
||||
|
||||
a,a:visited { color:#808080; outline:0; text-decoration:none; }
|
||||
a:hover,a:focus,li:hover,li:focus,label:hover { color:#bbb; }
|
||||
p a,p a:visited { line-height:inherit; }
|
||||
|
||||
|
||||
/* Misc.
|
||||
================================================== */
|
||||
|
||||
.add-bottom { margin-bottom:20px !important; }
|
||||
.left { float:left; }
|
||||
.right { float:right; }
|
||||
.center { text-align:center; }
|
||||
|
||||
|
||||
|
||||
/* Audio Player Styles
|
||||
================================================== */
|
||||
|
||||
/* Default / Desktop / Firefox */
|
||||
audio { margin:0 15px 0 14px; width:670px; }
|
||||
#mainwrap { box-shadow:0 0 6px 1px rgba(0,0,0,.25); }
|
||||
#audiowrap { background-color:#111111; margin:0 auto; }
|
||||
#plwrap { margin:0 auto; }
|
||||
#tracks { position:relative; text-align:center; }
|
||||
#nowPlay { display:inline; }
|
||||
#npTitle { margin:0; padding:21px; text-align:right; }
|
||||
#npAction { padding:21px; position:absolute; }
|
||||
#plList { margin:0; }
|
||||
#plList li { background-color:#111111; cursor:pointer; display:block; margin:0; padding:10px 0; }
|
||||
.plItem { position:relative; }
|
||||
.plTitle { left:38px; overflow:hidden; position:absolute; right:1px; text-overflow:ellipsis; top:0; white-space:nowrap; }
|
||||
.plNum { padding-left:2px; width:25px; }
|
||||
.plLength { padding-left:21px; position:absolute; right:21px; top:0; }
|
||||
.plSel,.plSel:hover { background-color:#222222!important; cursor:default!important; }
|
||||
a[id^="btn"] { background-color:#111111; cursor:pointer; display:inline-block; font-size:50px; margin:0; padding:21px 27px; text-decoration:none; }
|
||||
a[id^="btn"]:last-child { margin-left:-4px; }
|
||||
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }
|
||||
|
||||
/* Chrome / Android / Tablet
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] body { color:#373837; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:689px; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] #audiowrap { background-color:#fafafa; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"] { background-color:#fafafa; color:#373837; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"]:hover { background-color:#eee; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li { background-color:#fafafa; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li:hover { background-color:#eee; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel,
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel:hover { background-color:#eee!important; }
|
||||
*/
|
||||
|
||||
/* Audio Player Media Queries
|
||||
================================================== */
|
||||
|
||||
/* Tablet Portrait
|
||||
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
||||
audio { width:526px; }
|
||||
html[data-useragent*="MSIE 9.0"] audio { width:536px; }
|
||||
html[data-useragent*="MSIE 10.0"] audio { width:543px; }
|
||||
html[data-useragent*="rv:11.0"] audio { width:551px; }
|
||||
html[data-useragent*="OS 7"] audio { width:546px; }
|
||||
html[data-useragent*="OS 8"] audio { width:550px; }
|
||||
html[data-useragent*="OS 9"] audio { width:550px; }
|
||||
html[data-useragent*="Chrome"] audio { width:533px; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:545px; }
|
||||
}
|
||||
|
||||
/* Mobile Landscape
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
||||
audio { width:390px; }
|
||||
html[data-useragent*="MSIE 9.0"] audio { width:400px; }
|
||||
html[data-useragent*="MSIE 10.0"] audio { width:407px; }
|
||||
html[data-useragent*="rv:11.0"] audio { width:415px; }
|
||||
html[data-useragent*="OS 7"] audio { width:410px; }
|
||||
html[data-useragent*="OS 8"] audio { width:414px; }
|
||||
html[data-useragent*="OS 9"] audio { width:414px; }
|
||||
html[data-useragent*="Chrome"] audio { width:397px; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:410px; }
|
||||
#npTitle { width:245px; }
|
||||
}
|
||||
|
||||
/* Mobile Portrait
|
||||
@media only screen and (max-width: 479px) {
|
||||
audio { width:270px; }
|
||||
html[data-useragent*="MSIE 9.0"] audio { width:280px; }
|
||||
html[data-useragent*="MSIE 10.0"] audio { width:287px; }
|
||||
html[data-useragent*="rv:11.0"] audio { width:295px; }
|
||||
html[data-useragent*="OS 7"] audio { width:290px; }
|
||||
html[data-useragent*="OS 8"] audio { width:294px; }
|
||||
html[data-useragent*="OS 9"] audio { width:294px; }
|
||||
html[data-useragent*="Chrome"] audio { width:277px; }
|
||||
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:290px; }
|
||||
#npTitle { width:167px; }
|
||||
}
|
||||
*/
|
||||
|
||||
audio { width:92%; }
|
||||
|
||||
/* z.B. für VPN Login */
|
||||
input {
|
||||
width: 100%;
|
||||
font-size:25px;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #808080;
|
||||
background-color: #222222;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
font-size:12px;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #808080;
|
||||
background-color: #222222;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
pre,#footer {
|
||||
font:16px sans-serif;
|
||||
}
|
||||
|
||||
.statusok {
|
||||
font:18px sans-serif;
|
||||
background-color: #00BF40;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.statusnok {
|
||||
font:18px sans-serif;
|
||||
background-color: #E10020;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/*Ausblenden des input-Feldes */
|
||||
.toggleBox input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: -99999px;
|
||||
}
|
||||
/* Der Aufklappmechanismus */
|
||||
.toggleBox input:checked ~ div {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggleBox input:not(:checked) ~ div {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Steuerung der Sichtbarkeit der labels */
|
||||
.toggleBox input:not(:checked) ~ .open,
|
||||
.toggleBox input:checked ~ .close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr:hover {background-color: coral;}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid;
|
||||
border-collapse: collapse;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user