220 lines
No EOL
3 KiB
CSS
220 lines
No EOL
3 KiB
CSS
/* General HTML & Body Styles */
|
|
html {
|
|
font-size: 13px;
|
|
background-color: #241917;
|
|
color: #f3bbae;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
margin: 0;
|
|
font-family: Liberation Mono, Courier New, monospace, serif;
|
|
word-wrap: break-word;
|
|
margin: auto;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Table Styles */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: px 0 0;
|
|
background-color: #342a27;
|
|
color: #f3bbae;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 5px 5px;
|
|
text-align: left;
|
|
border: 1px solid #9a756c;
|
|
}
|
|
|
|
th {
|
|
background-color: #9a756c;
|
|
color: #241917;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #3c2a26;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #503b30;
|
|
}
|
|
|
|
/* Header Styles */
|
|
h3 {
|
|
color: #f1c9c0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Paragraph Styles */
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Global Reset */
|
|
* {
|
|
box-sizing: border-box;
|
|
text-rendering: geometricPrecision;
|
|
}
|
|
|
|
/* Links and Buttons */
|
|
a {
|
|
cursor: pointer;
|
|
color: inherit !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a[itemprop="url"]:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Navigation Links */
|
|
.nav-links {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.left {
|
|
gap: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* Active and Inactive States */
|
|
.active,
|
|
.inactive {
|
|
padding: 0.85rem;
|
|
padding-bottom: 0.55rem;
|
|
display: inline-block;
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
.active {
|
|
background-color: #f3bbae;
|
|
color: #241917 !important;
|
|
}
|
|
|
|
.inactive:hover {
|
|
background-color: #503b30;
|
|
}
|
|
|
|
/* Right Section Layout */
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0.75rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Feed Icon */
|
|
.feed-icon::after {
|
|
content: none !important;
|
|
}
|
|
|
|
/* Social Icon */
|
|
.social-icon {
|
|
padding: 0.1em;
|
|
height: 1.5em;
|
|
width: auto;
|
|
display: block;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
/* Icon Styles */
|
|
.icon {
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
/* User Actions Container */
|
|
.user-actions-container {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
max-width: 100%;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
/* Main */
|
|
main {
|
|
animation: intro 0.3s both;
|
|
animation-delay: 0.15s;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
margin-top: 4rem;
|
|
font-size: 0.75rem;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Section */
|
|
section {
|
|
border-color: #9a756c;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
padding: 1rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
|
|
section svg {
|
|
background-color: #9a756c;
|
|
fill: #241917;
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 5px;
|
|
padding: 0.45rem;
|
|
cursor: pointer;
|
|
transition-duration: 100ms;
|
|
}
|
|
section svg:hover {
|
|
background-color: #503b30;
|
|
fill: #241917;
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
.grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
align-items: start;
|
|
}
|
|
|
|
.grid div {
|
|
width: 100%;
|
|
}
|
|
.grid div i {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Console */
|
|
.console-buttons {
|
|
padding: 0.35rem;
|
|
width: fit-content;
|
|
border-radius: 10px;
|
|
} |