nelle-observer/frontend/public/styles/css/classes.css
2024-10-30 19:42:02 -06:00

139 lines
2.2 KiB
CSS

@import "nav-buttons.css";
.container {
display: flex;
align-content: center;
gap: 10px;
}
.content {
width: 90%;
max-width: 75em;
margin: auto;
padding: 0.5em;
margin-top: 1em;
margin-bottom: 1em;
border: 2.5px solid var(--accent);
border-radius: 3px;
opacity: 0.9;
background: var(--content-gradient);
-webkit-box-shadow: 0 0 8px var(--accent);
-moz-box-shadow: 0 0 8px var(--accent);
box-shadow: 0 0 8px var(--accent);
}
.nav {
width: 50%;
max-width: 75em;
margin: auto;
padding: 0.5em;
margin-top: 1em;
margin-bottom: 1em;
border: 2.5px solid var(--accent);
border-radius: 3px;
opacity: 0.9;
background: var(--content-gradient);
-webkit-box-shadow: 0 0 8px var(--accent);
-moz-box-shadow: 0 0 8px var(--accent);
box-shadow: 0 0 8px var(--accent);
}
.center {
text-align: center;
}
h1::before {
content: "> ";
}
h1 {
font-size: 42px;
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
a:link {
color: var(--link);
}
a:visited {
color: var(--visited);
}
a:hover {
color: var(--hover);
}
textarea {
-webkit-box-shadow: 0 0 20px var(--accent-color);
-moz-box-shadow: 0 0 20px var(--accent-color);
box-shadow: 0 0 20px var(--accent-color);
resize: vertical;
}
textarea,
select {
width: 82%;
outline: none;
font-family: inherit;
color: inherit;
border-bottom: 1px solid currentColor;
border-radius: 10px;
background: var(--content-gradient);
}
button {
font-family: inherit;
}
hr {
width: 32%;
color: var(--gray);
}
.ntfyForm {
display: flex;
justify-content: space-between;
}
.badgeContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.badge {
image-rendering: pixelated;
}
.ntfyOpts {
-webkit-box-shadow: 0 0 20px var(--accent-color);
-moz-box-shadow: 0 0 20px var(--accent-color);
box-shadow: 0 0 20px var(--accent-color);
border: 2.5px solid var(--accent);
border-radius: 3px;
display: inherit;
margin-left: 35%;
margin-right: 35%;
margin-bottom: -4%;
margin-top: 2%;
}
.beep-buttons {
width: 25%;
margin-top: 4%;
margin-bottom: 2%;
}