StartTree/skeletons/style.css

134 lines
1.9 KiB
CSS
Raw Normal View History

@font-face {
font-family: "Roboto Mono";
src: url("./Hack.ttf");
}
:root {
--font: "Roboto Mono";
/* --background: var(--background) !important; */
/* --foreground: #fffffe; */
/* --pink: #e53170; */
/* --red: #f25f4c; */
/* --orange: #ff8906; */
/* --branch: 1px solid #a7a9be; */
--branch: 1px solid var(--color12);
}
html {
2020-08-25 00:07:28 +02:00
/* font-size */
}
body {
background: var(--background);
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.prompt {
font-family: var(--font);
color: var(--color5);
}
.prompt~.prompt {
padding: 1.5rem 0 0.3125rem;
}
span {
color: var(--color10);
}
h1 {
display: inline;
font-family: var(--font);
font-size: 1rem;
font-weight: normal;
color: var(--color9);
}
.tree > ul {
margin: 0;
padding-left: 1rem;
padding-right: 1rem;
}
ul {
list-style: none;
padding-left: 2.5rem;
white-space:nowrap;
}
li {
position: relative;
}
li::before, li::after {
content: "";
position: absolute;
left: -0.75rem;
}
li::before {
border-top: var(--branch);
top: 0.75rem;
width: 0.5rem;
}
li::after {
border-left: var(--branch);
height: 100%;
top: 0.25rem;
}
li:last-child::after {
height: 0.5rem;
}
a {
font-family: var(--font);
font-size: 1rem;
color: var(--color6);
text-decoration: none;
outline: none;
}
a:hover {
color: var(--color12);
background: var(--background);
}
form h1 {
padding-left: 0.125rem;
}
input {
font-family: var(--font);
font-size: 1rem;
color: var(--color6);
background-color: var(--background);
border-width: 1px;
border-color: var(--color12);
border-style: solid;
padding-top: 4px;
padding-bottom: 4px;
}
.column {
flex: 50%;
padding: 5px;
}
.row {
display: flex;
}
.row:after {
content: "";
display: table;
clear: both;
}