160 lines
2.8 KiB
CSS
160 lines
2.8 KiB
CSS
@import "../larry/styles.css";
|
|
|
|
:root {
|
|
--ink: #e7e2d3;
|
|
--paper: #161210;
|
|
--acid: #8fae3d;
|
|
--orange: #e4632c;
|
|
--line: #4a3f33;
|
|
--muted: #a89a86;
|
|
--field: #211b17;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#mainscreen,
|
|
#layout,
|
|
#main-menu,
|
|
#taskbar,
|
|
#mailboxlist,
|
|
#messagelist,
|
|
#messageframe {
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
}
|
|
|
|
body {
|
|
font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
|
|
background-image: linear-gradient(90deg, transparent 49.5%, rgb(228 98 44 / 7%) 50%, transparent 50.5%), linear-gradient(rgb(228 98 44 / 5%) 1px, transparent 1px);
|
|
background-size: 70px 70px, 7px 7px;
|
|
}
|
|
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(circle at 12% 20%, rgb(143 174 61 / 12%), transparent 35%), radial-gradient(circle at 85% 75%, rgb(228 98 44 / 14%), transparent 40%);
|
|
}
|
|
|
|
a,
|
|
#taskbar a,
|
|
#mailboxlist li a,
|
|
#messagelist tr td {
|
|
color: var(--ink);
|
|
}
|
|
|
|
a:hover,
|
|
#taskbar a:hover,
|
|
#mailboxlist li a:hover {
|
|
color: var(--orange);
|
|
}
|
|
|
|
#taskbar,
|
|
#mailboxlist,
|
|
#messagelist,
|
|
#messagelist-header,
|
|
#mailboxlist-header,
|
|
.box,
|
|
.boxcontent,
|
|
.popupmenu,
|
|
.menu,
|
|
.toolbar {
|
|
border-color: var(--line);
|
|
box-shadow: none;
|
|
}
|
|
|
|
#taskbar a.selected,
|
|
#taskbar a:hover,
|
|
#mailboxlist li.selected > a,
|
|
#mailboxlist li a:hover,
|
|
#messagelist tr:hover td {
|
|
background: var(--acid);
|
|
color: var(--paper);
|
|
}
|
|
|
|
#messagelist tr.selected td {
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
textarea,
|
|
select {
|
|
border: 1px solid var(--line);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background: var(--field);
|
|
color: var(--ink);
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: 3px solid var(--acid);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
button,
|
|
.button,
|
|
.toolbar .button {
|
|
border: 1px solid var(--ink);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
font-family: "DM Mono", "Courier New", monospace;
|
|
}
|
|
|
|
input[type="submit"]:hover,
|
|
input[type="button"]:hover,
|
|
button:hover,
|
|
.button:hover,
|
|
.toolbar .button:hover {
|
|
background: var(--acid);
|
|
color: var(--paper);
|
|
}
|
|
|
|
#login-form,
|
|
#login-form .box-inner,
|
|
#login-form .boxcontent {
|
|
border-color: var(--line);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background: var(--paper);
|
|
}
|
|
|
|
#login-form #logo {
|
|
max-width: 260px;
|
|
height: auto;
|
|
}
|
|
|
|
#toplogo {
|
|
display: block;
|
|
width: 180px;
|
|
max-width: calc(100% - 40px);
|
|
height: auto;
|
|
max-height: 36px;
|
|
margin: 8px 12px;
|
|
}
|
|
|
|
#topnav {
|
|
background: var(--paper);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
#taskbar a.button-selected,
|
|
#taskbar a.button-selected:hover {
|
|
background: var(--acid);
|
|
border-color: var(--acid);
|
|
color: var(--paper);
|
|
}
|
|
|
|
#taskbar a.button-selected::before,
|
|
#taskbar a.button-selected:hover::before {
|
|
color: var(--paper);
|
|
} |