site/style.css

245 lines
4.9 KiB
CSS

/* {font-size:13pt;font-weight:normal;} */
table {
border-collapse: collapse;
}
td {
border: 6px double darkorange;
padding: 10px;
}
ol {
margin-left: 1em;
}
body {
margin: 1em;
font-family: "courier new", monospace;
color: darkorange;
background: #000400;
word-wrap: break-word;
}
a {
background: darkorange;
color: #223;
font-weight: bold;
padding-right: 0.25em;
}
hr {
border-color: darkorange;
}
.advisory {
background: darkorange;
color: #223;
font-weight: bold;
padding-right: 0.25em;
}
h1 {
text-transform: uppercase;
font-weight: bold;
color: #000400;
background: darkorange;
}
.advisory {
-webkit-animation-name: blinker;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 8s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.sourceCode {
color:#06287e;
}
/* Style the navbar */
#navbar {
overflow: hidden;
background-color: darkorange;
z-index: 99;
position: relative;
top: 0;
left: 0;
width: 100%;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Page content */
.content {
padding-top: 5px;
}
input[type="text"],
textarea {
background-color: #333;
color: darkorange;
}
div.alert-warning {
background-color: darkred;
}
div.alert-success {
background-color: darkgreen;
}
@-moz-keyframes blinker {
0% {
opacity: 1;
}
50% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes blinker {
0% {
opacity: 1;
}
50% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
@keyframes blinker {
0% {
opacity: 1;
}
50% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
/* Mobile */
@media (max-width: 768px) {
td {
display: block;
}
}
/*christmas lights */
$globe-width: 12px;
$globe-height: 28px;
$globe-spacing: 40px;
$globe-spread: 3px;
$light-off-opacity: 0.4;
body {
background: #000;
}
.lightrope {
text-align: center;
white-space: nowrap;
overflow: hidden;
position: absolute;
z-index: 1;
margin: -15px 0 0 0;
padding: 0;
pointer-events: none;
width: 100%;
li {
position: relative;
animation-fill-mode: both;
animation-iteration-count:infinite;
list-style: none;
margin: 0;
padding: 0;
display: block;
width: $globe-width;
height: $globe-height;
border-radius: 50%;
margin: $globe-spacing/2;
display: inline-block;
background: rgba(0,247,165,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);
animation-name: flash-1;
animation-duration: 2s;
&:nth-child(2n+1) {
background: rgba(0,255,255,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.5);
animation-name: flash-2;
animation-duration: 0.4s;
}
&:nth-child(4n+2) {
background: rgba(247,0,148,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);
animation-name: flash-3;
animation-duration: 1.1s;
}
&:nth-child(odd) {
animation-duration: 1.8s;
}
&:nth-child(3n+1) {
animation-duration: 1.4s;
}
&:before {
content: "";
position: absolute;
background: #222;
width: ($globe-width - 2);
height: $globe-height/3;
border-radius: 3px;
top: (0 - ($globe-height/6));
left: 1px;
}
&:after {
content: "";
top: (0 - $globe-height/2);
left: $globe-width - 3;
position: absolute;
width: $globe-spacing + 12;
height: ($globe-height/3 * 2);
border-bottom: solid #222 2px;
border-radius: 50%;
}
&:last-child:after {
content: none;
}
&:first-child {
margin-left: -$globe-spacing;
}
}
}
@keyframes flash-1 {
0%, 100% { background: rgba(0,247,165,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);}
50% { background: rgba(0,247,165,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,0.2);}
}
@keyframes flash-2 {
0%, 100% { background: rgba(0,255,255,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,1);}
50% { background: rgba(0,255,255,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.2);}
}
@keyframes flash-3 {
0%, 100% { background: rgba(247,0,148,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);}
50% { background: rgba(247,0,148,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,0.2);}
}