vod-rtmp/frontend/app/static/style.default.css

222 lines
3.7 KiB
CSS

body {
background: #ffffff;
margin: 0px;
padding: 0px;
font-family: sans-serif;
font-size: 10pt;
color: #333333;
}
header {
background: #eeeeee;
margin: none;
padding: 4px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, .5);
}
header a {
text-decoration: none;
color: #333333;
}
header h1 {
margin: 2px;
}
header h2 {
text-align: right;
font-style: italic;
font-weight: normal;
font-size: 12pt;
color: #888;
margin: 2px;
}
main {
clear: both;
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
footer {
text-align: center;
color: #888;
font-size: 8pt;
font-style: italic;
}
article {
border-radius: 5px;
border: 1px solid #888;
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
margin: 15px 0px 15px 0px;
padding: 0px;
}
article h1 {
font-size: 13pt;
font-weight: normal;
color: #444;
background: #eee;
border-bottom: 1px solid #888;
border-radius: 5px 5px 0px 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 6px;
margin: 0px;
}
article table {
width: 100%;
border-style: collapse;
padding: 4px;
}
article table th {
font-weight: bold;
text-align: left;
border-bottom: 1px solid #ccc;
padding-bottom: 6px;
}
article table td {
border-bottom: 1px solid #eee;
}
article table td em.url {
font-style: normal;
font-family: monospace;
background: #eee;
border-radius: 5px;
padding: 4px;
}
article table td.btn {
width: 32px;
}
article table th.btn {
text-align: right;
}
a.btn {
color: #eee;
display: block;
border-radius: 5px;
padding: 4px 10px 4px 10px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
text-decoration: none;
text-align: center;
}
a.btn-green {
background-color: rgb(44, 57, 75);
/*background: linear-gradient(#4caf50, #2b622d);*/
}
a.btn-green:hover {
background-color: rgb(60, 78, 104);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
a.btn-large {
color: #eee;
font-size: 16pt;
display: block;
padding: 10px;
margin: 10px;
text-shadow: 1px 2px 1px rgba(0, 0, 0, .5);
border-top: 1px solid #888;
text-decoration: none;
text-align: center;
border-radius: 5px;
}
div#videocontainer {
border-radius: 5px;
border: 1px solid #888;
background: #000;
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
margin-top: 15px;
padding: 0px;
}
@media screen and (min-width: 1501px) {
div#videocontainer {
margin-left: auto;
margin-right: auto;
max-width: 80vw;
}
}
@media screen and (max-width: 1500px) {
div#videocontainer {
margin-left: 20px;
margin-right: 20px;
}
}
div#videocontainer h1 {
font-size: 13pt;
font-weight: normal;
color: #444;
background: #eee;
border-bottom: 1px solid #888;
border-radius: 5px 5px 0px 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 6px;
margin: 0px;
}
video#player {
width: 100%;
max-height: calc(100vh - 150px);
background-color: #000;
}
/* dark mode */
@media (prefers-color-scheme: dark) {
body {
background: #202020;
color: #999999;
}
header {
background: #444444;
color: #999999;
}
header a {
color: #e0e0e0;
}
header h2 {
color: #777;
}
footer {
color: #999;
}
article {
border: 1px solid #888;
box-shadow: 0px 0px 5px rgba(150, 150, 150, .5);
}
article h1 {
color: #888;
background: #121212;
}
article table th {
border-bottom: 1px solid #666;
}
article table td {
border-bottom: 1px solid #333;
}
article table td em.url {
color: #eee;
background: #121212;
}
div#videocontainer {
box-shadow: 0px 0px 5px rgba(150, 150, 150, .5);
}
div#videocontainer h1 {
color: #888;
background: #121212;
}
}