fediglam/static/site.css

107 lines
1.7 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
* {
--theme-color: #713c8c;
--theme-color-highlight: #9b52bf;
}
body {
margin: 0px;
font-family: "Quicksand", sans-serif;
}
nav {
padding: 5px;
border-bottom: solid 1px black;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
}
h1 {
margin: 0px;
}
h1 > a {
color: #000;
text-decoration: none;
}
nav > ul {
margin: 0px;
padding: 0px;
flex-grow: 1;
display: flex;
list-style: none;
justify-content: flex-end;
}
nav > ul > li > * {
padding: 5px;
margin: 0px 5px;
}
nav > ul > li.title > a {
border: none;
justify-self: start;
}
main {
padding: 1em;
}
form {
display: flex;
flex-direction: column;
max-width: 400px;
}
.textinput {
display: inline-block;
padding: 6px;
border: solid 1px black;
border-radius: 8px;
/* max-width: 300px;*/
}
form {
padding: 1em;
}
form > * {
margin: 5px 0px;
}
form[action*=login] .textinput {
display: flex;
outline: solid 2px transparent;
transition: outline 0.2s;
}
form[action*=login] .textinput input {
flex-grow: 1;
}
form[action*=login] .textinput:focus-within {
outline: solid 2px var(--theme-color);
}
form[action*=login] .textinput span.prefix,
form[action*=login] .textinput span.suffix {
user-select: none;
flex-basis: 1.5em;
text-align: center;
}
.textinput > input {
appearance: none;
border: none;
}
.textinput > input:focus-visible{
outline: none;
}
button, a.button {
padding: 5px;
border-radius: 10px;
border: none;
color: #fff;
background-color: var(--theme-color);
font-weight: bold;
}
button:hover, a.button:hover {
cursor: pointer;
background-color: var(--theme-color-highlight);
}