chore: complete update
This commit is contained in:
99
resources/css/components/buttons.css
Normal file
99
resources/css/components/buttons.css
Normal file
@@ -0,0 +1,99 @@
|
||||
:where(button, input):where(:not(:active)):focus-visible {
|
||||
outline-offset: 5px;
|
||||
}
|
||||
|
||||
/* All buttons */
|
||||
:where(
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="file"]
|
||||
),
|
||||
/* ::file-selector-button does not work inside of :where() */
|
||||
:where(input[type="file"])::file-selector-button {
|
||||
--_color: var(--color, var(--accent));
|
||||
|
||||
background-color: var(--_color);
|
||||
color: black;
|
||||
|
||||
border: 2px solid var(--_color);
|
||||
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: 1.5;
|
||||
|
||||
border-radius: 1rem;
|
||||
padding: 0.5em;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
object-fit: contain;
|
||||
|
||||
/*display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 1ch;*/
|
||||
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-out;
|
||||
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
&:is(:hover, :focus-visible) {
|
||||
--_hoverColor: oklch(from var(--color, var(--accent)) 40% c h);
|
||||
--_color: var(--hoverColor, var(--_hoverColor));
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
--color: lightgreen;
|
||||
/*--hoverColor: lawngreen;*/
|
||||
}
|
||||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
color: var(--_color);
|
||||
}
|
||||
}
|
||||
|
||||
/* on hover but not active */
|
||||
:where(
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"]):where(:not(:active):hover
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
:where([type="reset"]) {
|
||||
color: red;
|
||||
}
|
||||
|
||||
:where([type="reset"]:focus-visible) {
|
||||
outline-color: currentColor;
|
||||
}
|
||||
|
||||
|
||||
:where(button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"]
|
||||
)[disabled] {
|
||||
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:where(input[type="file"]) {
|
||||
inline-size: 100%;
|
||||
max-inline-size: max-content;
|
||||
}
|
||||
|
||||
:where(input[type="button"]),
|
||||
:where(input[type="file"])::file-selector-button {
|
||||
appearance: none;
|
||||
}
|
||||
202
resources/css/components/card.css
Normal file
202
resources/css/components/card.css
Normal file
@@ -0,0 +1,202 @@
|
||||
.card {
|
||||
--_bg: var(--card-bg, var(--bg-alt));
|
||||
--_border: var(--card-border, var(--border));
|
||||
--_accent: var(--card-accent, var(--accent));
|
||||
|
||||
background-color: var(--_bg);
|
||||
border: 1px solid var(--_border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
transition: all 0.2s ease;
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--_accent);
|
||||
}
|
||||
|
||||
/* Strukturelle Elemente mit Selektoren */
|
||||
.card > header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.card > main {
|
||||
flex: 1;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: var(--space-sm);
|
||||
border-top: 1px solid var(--_border);
|
||||
}
|
||||
|
||||
/* Typografie mit Selektoren */
|
||||
.card h1,
|
||||
.card h2,
|
||||
.card h3 {
|
||||
margin: 0;
|
||||
color: var(--_accent);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0 0 var(--space-sm) 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.card small {
|
||||
color: oklch(70% 0.01 var(--h-bg));
|
||||
}
|
||||
|
||||
/* Button-Gruppen mit Selektoren */
|
||||
.card footer > div {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.card button {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--_accent);
|
||||
background: transparent;
|
||||
color: var(--_accent);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card button:first-child {
|
||||
background-color: var(--_accent);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.card button:hover {
|
||||
background-color: var(--_accent);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
======================
|
||||
VARIANTEN MIT KLASSEN
|
||||
======================
|
||||
*/
|
||||
|
||||
/* Status-Varianten */
|
||||
.card--success {
|
||||
--card-bg: var(--success-subtle);
|
||||
--card-border: var(--success-border);
|
||||
--card-accent: var(--success);
|
||||
}
|
||||
|
||||
.card--error {
|
||||
--card-bg: var(--error-subtle);
|
||||
--card-border: var(--error-border);
|
||||
--card-accent: var(--error);
|
||||
}
|
||||
|
||||
/* Größen-Varianten */
|
||||
.card--compact {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.card--compact > * {
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.card--spacious {
|
||||
padding: calc(var(--space-lg) * 1.5);
|
||||
}
|
||||
|
||||
/* Layout-Varianten */
|
||||
.card--horizontal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card--horizontal > header,
|
||||
.card--horizontal > main {
|
||||
margin-bottom: 0;
|
||||
margin-right: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Media-Variante */
|
||||
.card--media img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
======================
|
||||
RESPONSIVE MIT CONTAINER QUERIES
|
||||
======================
|
||||
*/
|
||||
|
||||
/* Automatische Anpassung basierend auf Card-Größe */
|
||||
@container (max-width: 300px) {
|
||||
.card > header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Demo-Styles */
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--space-lg);
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.demo-grid--wide {
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
}
|
||||
|
||||
h1 {
|
||||
/*text-align: center;*/
|
||||
background: linear-gradient(45deg, var(--accent), var(--success));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
color: var(--accent);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Badge mit semantischem Selector */
|
||||
.card [role="status"] {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--_accent);
|
||||
color: var(--bg);
|
||||
}
|
||||
36
resources/css/components/footer.css
Normal file
36
resources/css/components/footer.css
Normal file
@@ -0,0 +1,36 @@
|
||||
footer {
|
||||
text-align: center;
|
||||
padding-block: 1.5rem;
|
||||
|
||||
a {
|
||||
--link-color: var(--muted);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
footer > p {
|
||||
display: block;
|
||||
margin-inline: auto;
|
||||
|
||||
letter-spacing: -0.01em;
|
||||
font-size: 1rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem; /* Abstand zwischen Links */
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0.5rem 0 0; /* leichter Abstand nach dem Text */
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.footer-nav {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
50
resources/css/components/header.css
Normal file
50
resources/css/components/header.css
Normal file
@@ -0,0 +1,50 @@
|
||||
main > .header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 4000;
|
||||
}
|
||||
|
||||
main > .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 3rem; /* Optional: Abstand innen */
|
||||
|
||||
padding-inline: clamp(1.5rem, 4vw + 1rem, 3rem);
|
||||
|
||||
user-select: none;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #eee;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
transition: all 0.2s ease-in;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
|
||||
z-index: 9999;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
3
resources/css/components/nav.css
Normal file
3
resources/css/components/nav.css
Normal file
@@ -0,0 +1,3 @@
|
||||
:root{
|
||||
|
||||
}
|
||||
119
resources/css/components/sidebar.css
Normal file
119
resources/css/components/sidebar.css
Normal file
@@ -0,0 +1,119 @@
|
||||
body:has(aside.show) {
|
||||
overflow: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
aside {
|
||||
--sidebar-width: min(50ch, 100vw);
|
||||
|
||||
position: absolute;
|
||||
z-index: 3000;
|
||||
|
||||
visibility: hidden;
|
||||
|
||||
background-color: #2c1c59;
|
||||
color: #fff;
|
||||
padding: 3rem;
|
||||
border: none;
|
||||
|
||||
/*position: fixed;*/
|
||||
/*position: sticky;*/
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: calc(100vw - var(--sidebar-width));
|
||||
width: var(--sidebar-width);
|
||||
height: 100vh;
|
||||
|
||||
transition: opacity 0.25s, translate 0.25s, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
|
||||
|
||||
opacity: 0;
|
||||
translate: 100% 0;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
|
||||
button {
|
||||
place-content: end;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
|
||||
margin-inline-end: 0.5rem;
|
||||
float: right;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Backdrop */
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1000;
|
||||
|
||||
/*cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg), auto;*/
|
||||
}
|
||||
:is(aside.show) .backdrop {
|
||||
opacity: 1;
|
||||
}
|
||||
body:has(aside.show) .backdrop {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
aside > nav > ul {
|
||||
|
||||
padding-block-start: 10rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
list-style: none;
|
||||
gap: 3rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
/*font-size: 1.5rem;*/
|
||||
}
|
||||
|
||||
@media (hover) and (prefers-reduced-motion: no-preference) {
|
||||
& > li {
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
&:has(:hover) > li:not(:hover) {
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
/* for keyboard support */
|
||||
&:is(:hover, :focus-within) > li:not(:hover, :focus-within) {
|
||||
opacity: .85;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.backdrop:has( ~ #sidebar a:hover, ~ #sidebar a:focus)/*, .backdrop:has( ~ #sidebar a:focus)*/ {
|
||||
background-color: rgba(0 0 0 / 0.1);
|
||||
}
|
||||
Reference in New Issue
Block a user