bitburner-src/css/styles.css

225 lines
4.4 KiB
CSS
Raw Normal View History

2016-10-16 01:23:04 +02:00
/** This removes all padding and margins as well as
setting a default font size and family for the page **/
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Times New Roman';
background-color: #252527;
background-color: black;
2016-10-16 01:23:04 +02:00
}
p {
color: #66ff33;
2016-10-16 01:23:04 +02:00
}
h1 {
font-size: 22px;
color: #66ff33;
}
2016-11-24 23:30:33 +01:00
h2 {
color: #66ff33;
}
ul {
padding: 6px;
list-style-type: none;
}
li {
list-style-type: none;
}
2017-04-24 17:35:10 +02:00
span {
margin: 4px;
padding: 4px;
}
/* Disable border highlight on elements */
input:focus,
textarea:focus,
button:focus,
td:focus,
tr:focus {
outline:none;
}
/* Main menu */
.mainmenu {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
position: fixed;
height: 100%;
overflow: auto;
border: 0;
border-bottom: 1px solid #000000;
border-radius: 0;
background-color: #333;
}
.mainmenu>li a {
display: block;
color: #e6e6e6;
background-color: #333;
padding: 16px;
text-decoration: none;
}
.mainmenu>li a:hover:not(.active) {
background-color: #555;
color: white;
2016-10-16 01:23:04 +02:00
}
.mainmenu>li a:focus {
background-color: #555;
2016-10-16 01:23:04 +02:00
}
.mainmenu>li a.active {
background-color: #555;
color: white;
2016-10-16 01:23:04 +02:00
}
/* Make html links ("a" elements) nice looking buttons with this class */
.a-link-button {
text-decoration: none;
background-color: #555;
color: #FFFFFF;
2017-04-19 23:39:25 +02:00
padding: 6px;
margin: 6px;
border: 1px solid #333333;
width: 50%;
2016-10-16 01:23:04 +02:00
}
.a-link-button:hover {
background-color: #666;
}
/* Make anchor tags ("a" elements) inactive (not clickable) */
.a-link-button-inactive {
text-decoration: none;
background-color: #333;
color: #FFFFFF;
2017-04-19 23:39:25 +02:00
padding: 6px;
margin: 6px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
pointer-events: none;
cursor: default;
width: 50%;
}
/* Notification icon (for create program right now only) */
.create-program-tab {
position:relative;
}
#create-program-notification {
font-size: 10px;
position: absolute; /* Position the badge within the relatively positioned button */
top: 0;
right: 0;
}
.notification-on {
background-color: #fa3e3e;
color: white;
border-radius: 2px;
padding: 1px 3px;
}
.notification-off {
background-color: #333;
color: #333;
border-radius: 0px;
padding: 0px;
}
/* Tool tips (when hovering over an element */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
2017-05-10 22:21:15 +02:00
width: 300px;
background-color: black;
border: 2px solid white;
color: white;
text-align: center;
padding: 4px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
2017-05-15 07:09:14 +02:00
}
/* Flashing button (Red) */
2017-05-15 07:09:14 +02:00
@-webkit-keyframes glowing {
0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}
@-moz-keyframes glowing {
0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}
@-o-keyframes glowing {
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
@keyframes glowing {
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
.flashing-button {
-webkit-animation: glowing 1500ms infinite;
-moz-animation: glowing 1500ms infinite;
-o-animation: glowing 1500ms infinite;
animation: glowing 1500ms infinite;
}
/* Status text */
@-webkit-keyframes status-text{
from{
opacity:1;
top:0px;
}
to{
opacity:0;
top:0px;
}
}
.status-text{
display:inline;
position:fixed;
top:0px;
-webkit-animation:status-text 3s 1;
}
#status-text {
font-size: 20px;
color: #FFFFFF;
right: 0;
bottom: 0;
}