222 lines
3.7 KiB
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;
|
|
}
|
|
} |