Apollo-Guidance-Computer/css/main.css
Dhruv 01ad54a5b7
added Dark mode to website and styled it up a little (#778)
* added dark mode

* added css and js files
2024-12-30 19:07:16 +00:00

131 lines
No EOL
2.4 KiB
CSS

:root {
--accent-color: #e3e3e39a;
--link-color: #9e1bd6;
--bg-color: white;
}
a {
color: var(--link-color, #9e1bd6);
}
body {
margin: 1rem;
font-size: 16px;
font-family: "IBM Plex Mono", monospace;
background-color: var(--bg-color, white);
}
.header {
margin-bottom: -0.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: center;
align-content: center;
}
button {
font: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 10px;
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
background-color: var(--accent-color, #e3e3e39a);
border: none;
border-radius: 5px;
cursor: pointer;
}
form {
font-family: "IBM Plex Mono", monospace;
}
form select {
font-family: "IBM Plex Mono", monospace;
font-size: inherit;
-moz-appearance: none;
appearance: none;
padding: 10px;
padding-right: 30px;
background-color: var(--accent-color, #e3e3e39a);
border: none;
border-radius: 5px;
line-height: 1;
background: url("../assets/bx-chevron-down.svg") no-repeat right var(--accent-color, #e3e3e39a);
-webkit-appearance: none;
background-position: 97%;
margin-right: 10px;
margin-bottom: 1rem;
}
form input {
font-family: "IBM Plex Mono", monospace;
padding: 10px;
background-color: var(--accent-color, #e3e3e39a);
border: none;
border-radius: 5px;
font-size: 16px;
line-height: 1;
margin-bottom: 1rem;
}
form input:not(:last-child) {
margin-right: 10px;
}
form input[type="button"] {
min-width: 80px;
}
form input[type="text"] {
text-align: center;
font-weight: 500;
min-width: 160px;
border: var(--accent-color, #e3e3e39a) solid 2px;
background: transparent;
cursor: text;
}
form input[type="text"]:active, form input[type="text"]:hover {
background-color: transparent;
}
img {
min-width: 100%;
height: auto;
}
.invert {
-webkit-filter: invert(100%) contrast(120%);
filter: invert(100%) contrast(120%);
}
select,
input {
cursor: pointer;
}
span {
font-weight: 500;
margin-left: 1rem;
vertical-align: middle;
}
.hover:hover {
background-color: #fff;
}
.muted-color {
color: var(--accent-color);
}
.white {
color: white;
}
/*# sourceMappingURL=main.css.map */