gitmedia/b2in
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First commit

Browse source
This commit is contained in:
Kevin Adametz 2025-10-20 17:50:35 +02:00
commit 7cf3558ba7
12933 changed files with 1180047 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

437
resources/css/web/shared-styles.css Normal file
View file

@ -0,0 +1,437 @@
/* Shared styles for all web themes - no @apply directives */
*,
::before,
::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: hsl(var(--border));
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
letter-spacing: -0.025em;
font-family: var(--font-secondary, 'Inter'), var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
}
/* Typography scales */
.text-hero {
font-size: clamp(3rem, 4vw, 6rem);
line-height: 1.1;
font-weight: 300;
letter-spacing: -0.025em;
}
.text-section-title {
font-size: clamp(1.6rem, 3vw, 3rem);
font-weight: 300;
letter-spacing: -0.025em;
}
.text-large {
font-size: clamp(1.1rem, 2vw, 1.2rem);
line-height: 1.625;
}
/* Border utilities to override the global border-width: 0 */
.border-t {
border-top-width: 1px !important;
}
.border-b {
border-bottom-width: 1px !important;
}
.border-l {
border-left-width: 1px !important;
}
.border-r {
border-right-width: 1px !important;
}
.border {
border-width: 1px !important;
}
/* Button styles */
.btn-primary {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
display: inline-block;
text-decoration: none;
}
.btn-primary:hover {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.btn-primary-accent {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
display: inline-block;
text-decoration: none;
}
.btn-primary-accent:hover {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.btn-secondary {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
display: inline-block;
text-decoration: none;
}
.btn-secondary:hover {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.btn-secondary-accent {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
text-decoration: none;
}
.btn-secondary-accent:hover {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
}
.btn-accent {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
display: inline-block;
text-decoration: none;
}
.btn-accent:hover {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
box-shadow: var(--shadow-accent-glow);
}
/* Card styles */
.card-elevated {
background-color: hsl(var(--card));
border-radius: 1rem;
box-shadow: var(--shadow-card);
border: 1px solid hsl(var(--border) / 0.5);
}
/* Section styles */
.section-padding {
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 1024px) {
.section-padding {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.section-dark {
background-color: hsl(var(--dark-bg));
color: hsl(var(--dark-text));
}
.text-dark-muted {
color: hsl(var(--dark-muted));
}
/* Container styles */
.container-padding {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container-padding {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container-padding {
padding-left: 2rem;
padding-right: 2rem;
}
}
.container-narrow {
max-width: 56rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container-narrow {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container-narrow {
padding-left: 2rem;
padding-right: 2rem;
}
}
/* Spacing utilities */
.spacing-section > * + * {
margin-top: 2rem;
}
.spacing-content > * + * {
margin-top: 1.5rem;
}
.spacing-small > * + * {
margin-top: 1rem;
}
/* Additional utility classes for better consistency */
.text-muted-foreground {
color: hsl(var(--muted-foreground));
}
.bg-background {
background-color: hsl(var(--background));
}
.text-foreground {
color: hsl(var(--foreground));
}
.bg-card {
background-color: hsl(var(--card));
}
.text-card-foreground {
color: hsl(var(--card-foreground));
}
.border-border {
border-color: hsl(var(--border));
}
.text-secondary {
color: hsl(var(--secondary));
}
.bg-secondary {
background-color: hsl(var(--secondary));
}
.text-secondary-foreground {
color: hsl(var(--secondary-foreground));
}
.bg-primary {
background-color: hsl(var(--primary));
}
.text-primary-foreground {
color: hsl(var(--primary-foreground));
}
.bg-accent {
background-color: hsl(var(--accent));
}
.text-accent-foreground {
color: hsl(var(--accent-foreground));
}
.bg-muted {
background-color: hsl(var(--muted));
}
.bg-muted\/20 {
background-color: hsl(var(--muted) / 0.2);
}
.bg-secondary\/10 {
background-color: hsl(var(--secondary) / 0.1);
}
.bg-secondary\/20 {
background-color: hsl(var(--secondary) / 0.2);
}
.bg-card\/95 {
background-color: hsl(var(--card) / 0.95);
}
.border-border\/50 {
border-color: hsl(var(--border) / 0.5);
}
.border-border\/30 {
border-color: hsl(var(--border) / 0.3);
}
.text-dark-muted {
color: hsl(var(--dark-muted));
}
.border-dark-muted\/30 {
border-color: hsl(var(--dark-muted) / 0.3);
}
.text-dark-text {
color: hsl(var(--dark-text));
}
.bg-dark-bg {
background-color: hsl(var(--dark-bg));
}
.bg-hero-container {
background-color: hsl(var(--hero-container));
}
.shadow-elevated {
box-shadow: var(--shadow-elevated);
}
.shadow-card {
box-shadow: var(--shadow-card);
}
.shadow-accent-glow {
box-shadow: var(--shadow-accent-glow);
}
/* Theme-spezifische Farben für Tailwind-Kompatibilität */
.text-primary {
color: hsl(var(--primary));
}
.text-secondary {
color: hsl(var(--secondary));
}
.text-muted-foreground {
color: hsl(var(--muted-foreground));
}
.bg-primary {
background-color: hsl(var(--primary));
}
.bg-secondary {
background-color: hsl(var(--secondary));
}
.border-primary {
border-color: hsl(var(--primary));
}
.border-secondary {
border-color: hsl(var(--secondary));
}
/* Hover-Effekte für Navigation */
.hover-text-secondary:hover {
color: hsl(var(--secondary));
}
.hover-text-primary:hover {
color: hsl(var(--primary));
}
.hover-bg-primary:hover {
background-color: hsl(var(--primary));
}
.hover-bg-secondary:hover {
background-color: hsl(var(--secondary));
}
.hover-border-secondary:hover {
border-color: hsl(var(--secondary));
}
.hover-shadow-accent-glow:hover {
box-shadow: var(--shadow-accent-glow);
}
/* TopBar specific styles */
.topbar-normal {
background-color: hsl(var(--muted) / 0.2);
border-bottom: 1px solid hsl(var(--border) / 0.3);
}
/* Sticky Header Verhalten */
.header-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background-color: hsl(var(--background) / 0.8);
backdrop-filter: blur(8px);
border-bottom: 1px solid hsl(var(--border));
transition: all 0.3s ease-in-out;
}
.header-normal {
position: relative;
transition: all 0.3s ease-in-out;
}
.bg-muted\/20 {
background-color: hsl(var(--muted) / 0.2);
}
.border-border\/30 {
border-color: hsl(var(--border) / 0.3);
}