bitburner-src/css/styles.css

401 lines
8.1 KiB
CSS

/** This removes all padding and margins as well as
setting a default font size and family for the page **/
:root{
--my-font-color: #66ff33;
--my-background-color: #000000;
--my-highlight-color: #ffffff;
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
}
body {
background-color: var(--my-background-color);
}
p, pre, h2 {
color: var(--my-font-color);
}
h1 {
font-size: 22px;
color: var(--my-font-color);
}
ul {
padding: 2px;
list-style-type: none;
}
li {
list-style-type: none;
}
span {
margin: 4px;
padding: 4px;
}
#entire-game-container {
background-color:transparent;
}
/* Disable border highlight on elements */
input:focus,
textarea:focus,
button:focus,
td:focus,
tr:focus {
outline:none;
}
/* Main navigation 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;
}
/* Default buttons */
.mainmenu>li a {
display: block;
color: #e6e6e6;
background-color: #555;
padding: 16px;
text-decoration: none;
}
/* Hovering makes them lighter */
.mainmenu>li a:hover,
.mainmenu>li a:hover:not(.active),
.mainmenu>li a:focus {
background-color: #777;
color: white;
}
/* Panel headers can become active, and they are "lighter" than the rest */
.mainmenu>li a.active {
background-color: #777;
color: white;
}
.mainmenu>li a.active:hover {
background-color:#aaa;
}
/* Plus and minus signs */
.mainmenu-accordion-header:after {
content: '\02795';
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.mainmenu-accordion-header.opened:after {
content: "\2796";
}
.mainmenu-accordion-header.opened {
background-color:#222;
}
/* Slide down transition */
.mainmenu-accordion-panel {
max-height: 0;
opacity: 1;
transition: max-height 0.2s ease-out;
}
/* Borders */
.mainmenu-accordion-header {
border:2px solid white;
}
/* Make html links ("a" elements) nice looking buttons with this class */
a:link, a:visited {
color:white;
}
.a-link-button {
text-decoration: none;
background-color: #555;
color: #FFFFFF;
padding: 5px;
margin: 5px;
border: 1px solid #333333;
}
.a-link-button:hover {
background-color: #666;
}
.a-link-button:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Make anchor tags ("a" elements) inactive (not clickable) */
.a-link-button-inactive {
text-decoration: none;
background-color: #333;
color: #FFFFFF;
padding: 5px;
margin: 5px;
border: 1px solid #333333;
pointer-events: none;
cursor: default;
}
/* 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;
width: 300px;
background-color: var(--my-background-color);
border: 2px solid var(--my-highlight-color);;
color: white;
text-align: center;
padding: 4px;
left: 101%;
position: absolute;
z-index: 99;
}
/* Same thing as a normal tooltip except its a bit higher */
.tooltip .tooltiptexthigh {
visibility: hidden;
width: 300px;
background-color: var(--my-background-color);
border: 2px solid var(--my-highlight-color);;
color: white;
text-align: center;
padding: 4px;
left: 101%;
bottom:-25%;
position: absolute;
z-index: 99;
}
.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptexthigh {
visibility: visible;
}
/* Flashing button (Red) */
@-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;
}
/* Blinking Cursor */
/* ----- blinking cursor animation ----- */
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.95s infinite;
-moz-animation: blink 0.95s infinite;
-ms-animation: blink 0.95s infinite;
-o-animation: blink 0.95s infinite;
animation: blink 0.95s infinite;
}
@-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* 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;
background-color: transparent;
}
#status-text-container {
background-color: transparent;
}
#status-text {
font-size: 20px;
color: #FFFFFF;
right: 0;
bottom: 0;
padding: 4px;
margin-right: 14px;
background-color: transparent;
z-index: 2;
width: auto;
}
/* Character Overview */
#character-overview-wrapper {
position: relative;
}
#character-overview-container {
display: none;
position: absolute; /* Stay in place */
right: 0;
top: 0;
height: 205px; /* Full height */
/*margin: 50% auto;*/
padding: 5px;
border: 2px solid var(--my-highlight-color);
width: 19%;
overflow: auto; /* Enable scroll if needed */
background-color: #444; /* Fallback color */
z-index: 1;
}
#character-overview-text {
padding: 4px;
margin: 8px;
color: white;
background-color: #444;
}
#character-overview-save-button,
#character-overview-options-button {
color: #aaa;
font-size: 14px;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
height: 22px;
background-color:black;
}
#character-overview-save-button:hover,
#character-overview-save-button:focus,
#character-overview-options-button:hover,
#character-overview-options-button:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
#character-overview-options-button {
display: inline;
}
/* Scan analyze links from AutoLink */
.scan-analyze-link {
cursor:pointer;
color:#FFFFFF;
text-decoration:underline;
}
.scan-analyze-link:hover {
text-decoration:none;
}