go-pkg/mercury/public/style.css
2024-04-05 13:26:14 -06:00

218 lines
3.3 KiB
CSS

* {
font-weight: lighter;
font-family: 'fira code', monospace;
}
body {
margin: 0;
min-height: 100vh;
background: rgb(210, 221, 240);
}
header {
margin: 0 50px;
background: rgb(63, 94, 251);
background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
height: 100px;
user-select: none;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
input,
textarea {
font-size: small;
border: 2px solid cornflowerblue;
}
input.invalid {
border-color: red;
}
button {
border: 2px solid cornflowerblue;
}
code,
pre {
font-size: small;
-webkit-user-select: text;
user-select: text;
}
code strong {
font-weight: bold;
}
code dfn {
color: green
}
code i {
color: grey
}
code em {
color: orangered;
}
code small {
font-size-adjust: 50%;
color: orange;
}
code:focus {
animation: select 100ms step-end forwards;
}
footer {
position: fixed;
font-size: x-small;
bottom: 0;
left: 0;
right: 0;
height: 1em;
padding: 4px;
color: white;
border-top: 1px solid black;
background: cornflowerblue;
}
footer>span {
float: right;
}
.container {
margin: 0 50px;
display: grid;
min-height: 100vh;
}
.container .open {
grid-template-columns: 1fr 1fr;
}
.container>div {
overflow: auto;
padding: 10px;
background-color: white;
border: 0px ;
}
.container>div>code {
-webkit-user-select: all;
/* for Safari */
user-select: all;
}
.search {
display: flex
}
.search>div {
background-color: lightgrey;
border-radius: 5px 0px 0px 5px;
border: 2px solid cornflowerblue;
border-right: 0;
user-select: none;
padding: 0 2px;
}
.search>button {
border-left: 0;
}
.search>div {
line-height: 30px;
}
.search>input {
flex-grow: 5;
}
.search>button {
flex-grow: 2;
border-radius: 0px 5px 5px 0px;
}
.edit {
display: grid;
grid-template-columns: 1fr;
}
.edit>button {
line-height: 28px;
border-bottom: 0;
border-radius: 5px 5px 0 0;
}
.edit>textarea {
margin-top: 0;
border-radius: 0 0 5px 5px;
}
@keyframes select {
to {
-webkit-user-select: text;
user-select: text;
}
}
@media (prefers-color-scheme: dark) {
html, body {
color: white;
background: #111
}
header {
background: #111;
background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(7, 80, 29, 1) 35%, rgba(0, 0, 0, 1) 100%);
}
h1 {
color: white;
}
.container>div {
background: #111;
/* background: linear-gradient(304deg, rgba(2, 0, 36, 1) 0%, rgba(77, 77, 77, 1) 18%, rgba(0, 0, 0, 1) 100%); */
border: 2px solid rgb(117, 117, 117);
}
.search>div {
background-color: grey;
border-color: rgb(117, 117, 117);
}
button {
color: white;
background: rgba(7, 80, 29, 1);
border: 2px solid rgb(117, 117, 117);
}
button:hover {
background: rgb(11, 121, 44);
}
button:active {
background: rgb(5, 59, 21);
}
input,
textarea {
color: white;
background-color: #111;
border: 2px solid rgb(117, 117, 117);
}
footer {
color: white;
border-top: 1px solid white;
background: #222;
}
}