128 lines
2.6 KiB
CSS
128 lines
2.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@import "preline/variants.css";
|
|
@source "../node_modules/preline/dist/*.js";
|
|
|
|
@import 'flag-icons/css/flag-icons.min.css';
|
|
@import '@fortawesome/fontawesome-free/css/all.min.css';
|
|
|
|
@keyframes shake {
|
|
0% { transform: rotate(0deg); }
|
|
25% { transform: rotate(10deg); }
|
|
50% { transform: rotate(-10deg); }
|
|
75% { transform: rotate(10deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
/* Adds pointer cursor to buttons */
|
|
@layer base {
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
/* Defaults hover styles on all devices */
|
|
@custom-variant hover (&:hover);
|
|
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto-Regular';
|
|
src: url('/assets/fonts/Roboto-Regular.ttf') format('truetype');
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
html, body {
|
|
min-height: 100%;
|
|
background: var(--background);
|
|
font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Apple Color Emoji,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
|
|
}
|
|
|
|
.dark {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
|
|
.animate-shake {
|
|
animation: shake 0.4s ease-in-out;
|
|
}
|
|
|
|
.premier-rank-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.rank-stripes {
|
|
width: 24px;
|
|
height: 28px;
|
|
margin-right: -14px;
|
|
z-index: 2;
|
|
position: relative;
|
|
transform: skewX(-10deg);
|
|
}
|
|
|
|
.rank-box {
|
|
height: 28px;
|
|
max-width: 60px;
|
|
padding: 3px 12px;
|
|
border-radius: 1px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
transform: skewX(-10deg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rank-box span {
|
|
transform: skewX(-5deg);
|
|
font-family: 'Roboto-Regular', Helvetica, sans-serif;
|
|
}
|
|
|
|
/* --- Tabelle/Load-More Integration ohne extra Props (nutzt :has) --- */
|
|
|
|
/* Standard: Tabellen-Shell hat volle Rundung */
|
|
.matches-card .table-shell {
|
|
border-radius: 0.75rem; /* = rounded-xl */
|
|
}
|
|
|
|
.matches-card:has(.load-more) .table-shell {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.matches-card:has(.load-more) .table-divider {
|
|
display: block;
|
|
}
|
|
|
|
.matches-card:not(:has(.load-more)) tbody > tr:last-child > td:first-child {
|
|
overflow: hidden;
|
|
}
|
|
.matches-card:not(:has(.load-more)) tbody > tr:last-child > td:last-child {
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
}
|