1793 lines
38 KiB
CSS
1793 lines
38 KiB
CSS
@import "tailwindcss";
|
|
|
|
@layer base {
|
|
:root {
|
|
--bg: #f5f7fb;
|
|
--surface: #ffffff;
|
|
--surface-strong: #ffffff;
|
|
--surface-soft: #eef2f8;
|
|
--border: #dfe7f3;
|
|
--text: #1f2a44;
|
|
--muted: #6b7280;
|
|
--accent: #10b981;
|
|
--accent-strong: #059669;
|
|
--success-bg: #dcfce7;
|
|
--success-text: #166534;
|
|
--danger-bg: #fee2e2;
|
|
--danger-text: #b91c1c;
|
|
--warning-bg: #fef3c7;
|
|
--warning-text: #92400e;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--bg: #111827;
|
|
--surface: #182131;
|
|
--surface-strong: #101826;
|
|
--surface-soft: #243247;
|
|
--border: #314155;
|
|
--text: #e5eefc;
|
|
--muted: #9db0cc;
|
|
--accent: #34d399;
|
|
--accent-strong: #10b981;
|
|
--success-bg: #14532d;
|
|
--success-text: #dcfce7;
|
|
--danger-bg: #7f1d1d;
|
|
--danger-text: #fee2e2;
|
|
--warning-bg: #78350f;
|
|
--warning-text: #fef3c7;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#__nuxt {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
body {
|
|
@apply m-0 antialiased;
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
@apply inline-flex items-center justify-center rounded-2xl px-4 py-3 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60;
|
|
border: 1px solid transparent;
|
|
background-color: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
button:hover:not(:disabled) {
|
|
background-color: var(--accent-strong);
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
@apply mt-1.5 w-full rounded-2xl px-4 py-3 text-sm outline-none transition;
|
|
border: 1px solid var(--border);
|
|
background-color: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--muted);
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.sakai-shell {
|
|
@apply min-h-screen;
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 24%),
|
|
var(--bg);
|
|
}
|
|
|
|
.sakai-main {
|
|
@apply min-h-screen;
|
|
}
|
|
|
|
.sakai-shell--guest .sakai-main {
|
|
@apply mx-auto w-full max-w-7xl;
|
|
}
|
|
|
|
.sakai-sidebar {
|
|
@apply hidden;
|
|
}
|
|
|
|
.sakai-topbar {
|
|
@apply flex flex-col gap-4 px-4 py-4;
|
|
}
|
|
|
|
.sakai-topbar--guest {
|
|
@apply py-6;
|
|
}
|
|
|
|
.sakai-topbar__headline {
|
|
@apply grid gap-1;
|
|
}
|
|
|
|
.sakai-topbar__headline h1 {
|
|
@apply m-0 text-2xl font-semibold;
|
|
}
|
|
|
|
.sakai-topbar__headline p {
|
|
@apply m-0 text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-topbar__actions {
|
|
@apply flex flex-wrap items-center gap-3;
|
|
}
|
|
|
|
.sakai-user-chip {
|
|
@apply inline-flex items-center gap-3 rounded-2xl border px-3 py-2;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.sakai-user-chip strong,
|
|
.sakai-user-chip span {
|
|
@apply block;
|
|
}
|
|
|
|
.sakai-user-chip span {
|
|
@apply text-xs;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-content {
|
|
@apply px-4 pb-24;
|
|
}
|
|
|
|
.sakai-shell--guest .sakai-content {
|
|
@apply pb-10;
|
|
}
|
|
|
|
.sakai-bottom-bar {
|
|
@apply fixed inset-x-4 bottom-4 z-40 flex items-center justify-around rounded-[22px] border px-2 py-2;
|
|
border-color: color-mix(in srgb, var(--border) 85%, transparent);
|
|
background-color: color-mix(in srgb, var(--surface) 88%, transparent);
|
|
box-shadow: 0 12px 32px color-mix(in srgb, var(--text) 12%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.sakai-bottom-bar__item {
|
|
@apply flex min-w-0 flex-1 flex-col items-center gap-1 rounded-2xl px-2 py-2 text-center text-[0.7rem] font-medium transition;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-bottom-bar__item i {
|
|
@apply text-base;
|
|
}
|
|
|
|
.sakai-bottom-bar__item--active {
|
|
background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
|
|
color: var(--text);
|
|
}
|
|
|
|
.sakai-page {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.sakai-hero-card {
|
|
@apply flex flex-col gap-4 rounded-[24px] border p-5;
|
|
border-color: var(--border);
|
|
background:
|
|
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%),
|
|
var(--surface);
|
|
box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 4%, transparent);
|
|
}
|
|
|
|
.sakai-hero-card h2 {
|
|
@apply m-0 text-3xl font-semibold;
|
|
}
|
|
|
|
.sakai-hero-card p {
|
|
@apply m-0 text-sm leading-6;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-hero-card__tags {
|
|
@apply flex flex-wrap items-center gap-2;
|
|
}
|
|
|
|
.sakai-section-label {
|
|
@apply mb-2 inline-block text-xs font-semibold uppercase tracking-[0.18em];
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-bot-grid {
|
|
@apply grid gap-4;
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.sakai-bot-card {
|
|
@apply overflow-hidden aspect-square rounded-[24px];
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 5%, transparent);
|
|
}
|
|
|
|
.sakai-bot-card .p-card-body,
|
|
.sakai-filter-card .p-card-body,
|
|
.sakai-signal-panel .p-card-body,
|
|
.sakai-summary-panel .p-card-body {
|
|
@apply p-0;
|
|
}
|
|
|
|
.sakai-bot-card .p-card-content,
|
|
.sakai-filter-card .p-card-content,
|
|
.sakai-signal-panel .p-card-content,
|
|
.sakai-summary-panel .p-card-content {
|
|
@apply p-0;
|
|
}
|
|
|
|
.sakai-bot-card .p-card-content {
|
|
@apply grid gap-4 p-5;
|
|
}
|
|
|
|
.sakai-bot-card__top {
|
|
@apply flex items-center justify-between gap-3;
|
|
}
|
|
|
|
.sakai-bot-card__icon {
|
|
@apply grid h-12 w-12 place-items-center rounded-2xl;
|
|
background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.sakai-bot-card__body {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.sakai-bot-card__eyebrow {
|
|
@apply text-xs font-semibold uppercase tracking-[0.18em];
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-bot-card__body h3 {
|
|
@apply m-0 text-2xl font-semibold leading-tight;
|
|
}
|
|
|
|
.sakai-bot-card__body p {
|
|
@apply m-0 text-sm leading-6;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-bot-card__loading {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.sakai-bot-card__link {
|
|
@apply block;
|
|
}
|
|
|
|
.sakai-page-back {
|
|
@apply mb-3;
|
|
}
|
|
|
|
.sakai-filter-card,
|
|
.sakai-signal-panel,
|
|
.sakai-summary-panel {
|
|
@apply rounded-[24px];
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 4%, transparent);
|
|
}
|
|
|
|
.sakai-filter-card .p-card-content {
|
|
@apply p-5;
|
|
}
|
|
|
|
.sakai-filter-grid {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.sakai-field {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.sakai-field label {
|
|
@apply text-sm font-medium;
|
|
color: var(--text);
|
|
}
|
|
|
|
.sakai-tab-scroll {
|
|
position: relative;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: thin;
|
|
overscroll-behavior-x: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding-bottom: 0.125rem;
|
|
}
|
|
|
|
.sakai-tab-scroll::before,
|
|
.sakai-tab-scroll::after {
|
|
content: "";
|
|
position: sticky;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1rem;
|
|
display: block;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sakai-tab-scroll::before {
|
|
left: 0;
|
|
float: left;
|
|
margin-right: -1rem;
|
|
background: linear-gradient(90deg, var(--surface-strong), color-mix(in srgb, var(--surface-strong) 0%, transparent));
|
|
}
|
|
|
|
.sakai-tab-scroll::after {
|
|
right: 0;
|
|
float: right;
|
|
margin-left: -1rem;
|
|
background: linear-gradient(270deg, var(--surface-strong), color-mix(in srgb, var(--surface-strong) 0%, transparent));
|
|
}
|
|
|
|
.sakai-tab-scroll .p-selectbutton {
|
|
display: inline-flex;
|
|
min-width: max-content;
|
|
flex-wrap: nowrap;
|
|
gap: 0.5rem;
|
|
padding-inline: 0.125rem;
|
|
}
|
|
|
|
.sakai-tab-scroll .p-togglebutton {
|
|
flex: 0 0 auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sakai-signal-layout {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.sakai-signal-layout--detail {
|
|
@apply items-start;
|
|
}
|
|
|
|
.sakai-signal-detail-main,
|
|
.sakai-signal-detail-aside {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.sakai-signal-panel .p-card-title,
|
|
.sakai-summary-panel .p-card-title {
|
|
@apply text-2xl font-semibold;
|
|
color: var(--text);
|
|
}
|
|
|
|
.sakai-signal-panel .p-card-subtitle {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-signal-panel .p-card-caption,
|
|
.sakai-summary-panel .p-card-caption {
|
|
@apply px-5 pt-5;
|
|
}
|
|
|
|
.sakai-signal-panel .p-card-content,
|
|
.sakai-summary-panel .p-card-content {
|
|
@apply p-5 pt-4;
|
|
}
|
|
|
|
.sakai-signal-list {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.sakai-signal-link {
|
|
@apply block rounded-[20px] no-underline transition-transform duration-150;
|
|
color: inherit;
|
|
}
|
|
|
|
.sakai-signal-link:hover {
|
|
@apply -translate-y-0.5;
|
|
}
|
|
|
|
.sakai-signal-link:focus-visible {
|
|
@apply outline-none;
|
|
}
|
|
|
|
.sakai-signal-link:focus-visible .sakai-signal-card {
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
|
|
}
|
|
|
|
.sakai-signal-skeleton {
|
|
@apply grid gap-3 rounded-2xl border p-4;
|
|
border-color: var(--border);
|
|
background-color: var(--surface-soft);
|
|
}
|
|
|
|
.sakai-signal-card {
|
|
@apply flex flex-col gap-4 rounded-[20px] border p-4;
|
|
border-color: var(--border);
|
|
background-color: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
|
|
}
|
|
|
|
.sakai-signal-card__main {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.sakai-signal-card__meta {
|
|
@apply flex flex-wrap gap-3 text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-signal-card__meta span {
|
|
@apply inline-flex items-center gap-2;
|
|
}
|
|
|
|
.sakai-signal-card__teams {
|
|
@apply grid gap-1 text-lg;
|
|
}
|
|
|
|
.sakai-signal-card__actions {
|
|
@apply flex;
|
|
}
|
|
|
|
.sakai-copy-button {
|
|
@apply inline-flex items-center justify-center gap-2 shrink-0 rounded-full;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-copy-button--wide {
|
|
@apply justify-center flex rounded-2xl px-4 py-3 text-sm font-semibold;
|
|
width: 100%;
|
|
min-height: 3.25rem;
|
|
}
|
|
|
|
.sakai-copy-button:hover:not(:disabled) {
|
|
background-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
|
|
color: var(--text);
|
|
}
|
|
|
|
.sakai-signal-card__market {
|
|
@apply flex flex-wrap gap-2 text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-signal-card__market span {
|
|
@apply inline-flex items-center rounded-full px-3 py-1;
|
|
background-color: var(--surface-soft);
|
|
}
|
|
|
|
.sakai-signal-card__forecast {
|
|
@apply overflow-hidden rounded-2xl;
|
|
/* background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-soft)); */
|
|
color: var(--text);
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
:root[data-theme="dark"] .sakai-signal-card__forecast {
|
|
background-color: rgb(255 255 255 / 0.8);
|
|
}
|
|
|
|
.sakai-signal-card__forecast-image {
|
|
@apply block h-auto w-full;
|
|
max-height: 220px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
:root[data-theme="dark"] .sakai-signal-card__forecast-image {
|
|
/* filter: grayscale(1) brightness(1.18) contrast(1.05); */
|
|
}
|
|
|
|
.sakai-signal-card__forecast-text {
|
|
@apply m-0 flex min-h-[3rem] items-center rounded-2xl px-4 py-3 text-sm font-semibold leading-6;
|
|
background:
|
|
linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
|
|
color-mix(in srgb, var(--surface-soft) 92%, white 8%);
|
|
color: var(--text);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.sakai-signal-card__forecast-text--empty {
|
|
color: var(--muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sakai-signal-card__side {
|
|
@apply flex flex-wrap items-center justify-between gap-3;
|
|
}
|
|
|
|
.sakai-signal-card__side > .sakai-signal-card__forecast {
|
|
flex: 1 0 100%;
|
|
}
|
|
|
|
.sakai-signal-card__odds {
|
|
@apply rounded-2xl px-4 py-2 text-lg font-bold;
|
|
background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
|
|
color: var(--text);
|
|
}
|
|
|
|
.sakai-signal-card--detail {
|
|
@apply gap-5;
|
|
}
|
|
|
|
.sakai-signal-card__side--detail {
|
|
@apply items-stretch;
|
|
}
|
|
|
|
.sakai-signal-card__forecast-image--detail {
|
|
max-height: 26rem;
|
|
}
|
|
|
|
.sakai-signal-detail-loading {
|
|
@apply grid;
|
|
}
|
|
|
|
.sakai-signal-detail-skeleton {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.sakai-signal-detail__timezone {
|
|
@apply m-0 text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-signal-detail__status-row {
|
|
@apply flex flex-wrap items-center justify-between gap-3;
|
|
}
|
|
|
|
.sakai-signal-detail-grid {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.sakai-signal-detail-item {
|
|
@apply flex items-center justify-between gap-4 rounded-2xl border px-4 py-3;
|
|
border-color: var(--border);
|
|
background-color: color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
|
|
}
|
|
|
|
.sakai-signal-detail-item span {
|
|
@apply text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-signal-detail-item strong {
|
|
@apply text-right font-semibold;
|
|
color: var(--text);
|
|
}
|
|
|
|
.sakai-signal-detail-note {
|
|
@apply mt-4 rounded-[20px] border p-4;
|
|
border-color: var(--border);
|
|
background-color: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
|
|
}
|
|
|
|
.sakai-signal-detail-note span {
|
|
@apply text-sm font-semibold uppercase tracking-[0.16em];
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-signal-detail-note p {
|
|
@apply mb-0 mt-3 text-sm leading-6;
|
|
color: var(--text);
|
|
}
|
|
|
|
.sakai-summary-panel--sticky {
|
|
position: static;
|
|
}
|
|
|
|
.sakai-summary-list {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.sakai-summary-item {
|
|
@apply flex items-center justify-between rounded-2xl border px-4 py-3;
|
|
border-color: var(--border);
|
|
background-color: color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
|
|
}
|
|
|
|
.sakai-summary-item span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-summary-item strong {
|
|
@apply text-xl font-semibold;
|
|
}
|
|
|
|
.app-shell {
|
|
@apply min-h-screen;
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
.app-shell--single {
|
|
@apply mx-auto flex min-h-screen w-full max-w-7xl flex-col px-4 py-4;
|
|
}
|
|
|
|
.brand {
|
|
@apply text-xl font-extrabold uppercase tracking-[0.18em];
|
|
}
|
|
|
|
.topbar {
|
|
@apply mb-4 flex flex-col gap-4 rounded-[28px] border p-4;
|
|
border-color: var(--border);
|
|
background-color: var(--surface-strong);
|
|
}
|
|
|
|
.topbar__brand {
|
|
@apply grid gap-1;
|
|
}
|
|
|
|
.topbar__subtitle {
|
|
@apply text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.topbar__actions {
|
|
@apply flex flex-col gap-3;
|
|
}
|
|
|
|
.topbar__nav {
|
|
@apply flex flex-wrap gap-2;
|
|
}
|
|
|
|
.topbar__extras {
|
|
@apply flex flex-col gap-3;
|
|
}
|
|
|
|
.user-chip {
|
|
@apply grid gap-1 rounded-2xl border px-4 py-3 text-sm;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.topbar__link,
|
|
.theme-toggle,
|
|
button.secondary,
|
|
.sort-toggle {
|
|
@apply rounded-2xl border px-4 py-3 text-sm font-medium;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
.topbar__link--accent {
|
|
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
|
|
background-color: color-mix(in srgb, var(--accent) 14%, var(--surface));
|
|
}
|
|
|
|
.topbar__link:hover,
|
|
.theme-toggle:hover,
|
|
button.secondary:hover,
|
|
.sort-toggle:hover:not(:disabled) {
|
|
background-color: var(--surface-soft);
|
|
}
|
|
|
|
.content--single {
|
|
@apply flex-1;
|
|
}
|
|
|
|
.push-consent,
|
|
.panel,
|
|
.signal-card {
|
|
@apply rounded-[28px] border p-4;
|
|
border-color: var(--border);
|
|
background-color: var(--surface-strong);
|
|
}
|
|
|
|
.push-consent {
|
|
@apply mb-4 flex flex-col gap-4;
|
|
margin-top: calc(0.5rem + env(safe-area-inset-top, 0px));
|
|
}
|
|
|
|
.app-update {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.app-update--blocking {
|
|
@apply fixed inset-0 z-[120] flex items-center justify-center p-5;
|
|
background: color-mix(in srgb, var(--bg) 84%, black 16%);
|
|
}
|
|
|
|
.app-update--blocking .push-consent__content,
|
|
.app-update--blocking .push-consent__actions {
|
|
width: min(100%, 26rem);
|
|
}
|
|
|
|
.app-update--blocking .push-consent__content,
|
|
.app-update--blocking .push-consent__actions button {
|
|
max-width: 26rem;
|
|
}
|
|
|
|
.app-update--blocking::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.app-update--blocking .push-consent__content,
|
|
.app-update--blocking .push-consent__actions {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.app-update--blocking .push-consent__content {
|
|
@apply rounded-[28px] border p-5;
|
|
border-color: var(--border);
|
|
background-color: var(--surface-strong);
|
|
}
|
|
|
|
.app-update--blocking .push-consent__actions {
|
|
@apply mt-4 flex flex-col gap-3;
|
|
}
|
|
|
|
.push-consent--install {
|
|
background-color: color-mix(in srgb, var(--warning-bg) 16%, var(--surface-strong));
|
|
}
|
|
|
|
.push-consent__content {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.push-consent__content p,
|
|
.push-consent__message {
|
|
@apply m-0 text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.push-consent__hint {
|
|
color: var(--warning-text);
|
|
}
|
|
|
|
.push-consent__actions {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.push-consent__message {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.password-field {
|
|
@apply relative;
|
|
}
|
|
|
|
.password-field input {
|
|
@apply pr-12;
|
|
}
|
|
|
|
.password-field__toggle {
|
|
@apply absolute right-2 top-1/2 grid h-9 w-9 -translate-y-1/2 place-items-center rounded-full;
|
|
color: var(--muted);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.password-field__toggle i {
|
|
@apply text-base;
|
|
}
|
|
|
|
.password-field__toggle:hover {
|
|
background-color: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
color: var(--text);
|
|
}
|
|
|
|
.page,
|
|
.page-signals,
|
|
.admin-grid,
|
|
.signals-table,
|
|
.admin-list,
|
|
.auth-panel {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.admin-users-toolbar {
|
|
@apply my-4;
|
|
}
|
|
|
|
.button-row {
|
|
@apply mt-4;
|
|
}
|
|
|
|
.page-header,
|
|
.button-row,
|
|
.admin-row,
|
|
.admin-user-card__header,
|
|
.admin-user-card__body,
|
|
.push-row__heading,
|
|
.admin-users-toolbar,
|
|
.filters,
|
|
.signals-toolbar__row,
|
|
.signals-toolbar__tabs,
|
|
.signals-toolbar__per-page,
|
|
.signals-pagination__controls,
|
|
.toggle,
|
|
.admin-user-subscription,
|
|
.admin-bot-chip-list {
|
|
@apply flex flex-col gap-3;
|
|
}
|
|
|
|
.page-header {
|
|
@apply rounded-[28px] border p-4;
|
|
border-color: var(--border);
|
|
background-color: var(--surface-strong);
|
|
}
|
|
|
|
.page-header--admin-section {
|
|
@apply items-start;
|
|
}
|
|
|
|
.page-header--signals h1 {
|
|
@apply my-1 text-3xl font-bold leading-tight;
|
|
}
|
|
|
|
.eyebrow {
|
|
@apply m-0 text-xs font-semibold uppercase tracking-[0.18em];
|
|
color: var(--muted);
|
|
}
|
|
|
|
.muted,
|
|
.meta,
|
|
.signal-row__league,
|
|
.signal-row__status-hint,
|
|
.signal-row__time,
|
|
.signals-pagination__summary {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.signals-toolbar__search,
|
|
.admin-users-toolbar__search,
|
|
.signals-pagination__input {
|
|
@apply mt-0;
|
|
}
|
|
|
|
.signals-toolbar__row--desktop {
|
|
@apply hidden;
|
|
}
|
|
|
|
.signals-toolbar__row--mobile {
|
|
@apply flex;
|
|
}
|
|
|
|
.signals-toolbar__compact-grid {
|
|
@apply grid gap-3;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.signals-table {
|
|
@apply overflow-hidden rounded-[28px] border;
|
|
border-color: var(--border);
|
|
background-color: var(--surface-strong);
|
|
}
|
|
|
|
.signal-row {
|
|
@apply grid gap-4 p-4;
|
|
border-bottom: 1px solid var(--border);
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.signal-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.signal-row__teams,
|
|
.signal-row__status,
|
|
.signal-row__market,
|
|
.signal-row__bank,
|
|
.signal-row__team-list {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.signal-row__teams {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.signal-row__time {
|
|
@apply flex items-center gap-2 text-sm;
|
|
}
|
|
|
|
.signal-row__clock {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.signal-row__sport {
|
|
@apply inline-flex w-fit items-center gap-2 rounded-full border px-3 py-1.5 text-xs;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.signal-row__sport-name {
|
|
@apply max-w-[10rem] truncate;
|
|
}
|
|
|
|
.signal-row__team-list {
|
|
@apply text-base;
|
|
}
|
|
|
|
.signal-row__bot {
|
|
@apply text-xs font-semibold uppercase tracking-[0.14em];
|
|
color: var(--accent);
|
|
}
|
|
|
|
.signal-row__badge,
|
|
.status-pill {
|
|
@apply inline-flex w-fit min-h-10 mt-2 items-center rounded-full px-3 py-1 text-xs font-bold uppercase tracking-[0.08em];
|
|
}
|
|
|
|
.signal-row__badge--pending,
|
|
.status-pending,
|
|
.status-void,
|
|
.status-unpublished {
|
|
background-color: var(--surface-soft);
|
|
color: var(--text);
|
|
}
|
|
|
|
.signal-row__badge--inactive {
|
|
background-color: var(--surface-soft);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.signal-row__badge--win,
|
|
.status-win {
|
|
background-color: var(--success-bg);
|
|
color: var(--success-text);
|
|
}
|
|
|
|
.signal-row__badge--lose,
|
|
.status-lose {
|
|
background-color: var(--danger-bg);
|
|
color: var(--danger-text);
|
|
}
|
|
|
|
.signal-row__badge--void,
|
|
.signal-row__badge--unpublished {
|
|
background-color: var(--surface-soft);
|
|
color: var(--text);
|
|
}
|
|
|
|
.signal-row__badge--manual_review,
|
|
.status-manual_review {
|
|
background-color: var(--warning-bg);
|
|
color: var(--warning-text);
|
|
}
|
|
|
|
.signal-row__odds {
|
|
@apply w-fit rounded-2xl px-4 py-2 text-lg font-extrabold;
|
|
background-color: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
.signal-main {
|
|
@apply text-base leading-7;
|
|
}
|
|
|
|
.auth-page {
|
|
@apply grid min-h-[calc(100vh-12rem)] w-full items-center gap-8;
|
|
}
|
|
|
|
.auth-panel {
|
|
@apply w-full max-w-md;
|
|
}
|
|
|
|
.auth-page__intro {
|
|
@apply grid gap-3;
|
|
max-width: 32rem;
|
|
}
|
|
|
|
.auth-page__intro h1 {
|
|
@apply m-0 text-4xl font-semibold leading-tight;
|
|
}
|
|
|
|
.auth-page__intro .muted {
|
|
@apply m-0 text-base leading-7;
|
|
}
|
|
|
|
.detail-grid,
|
|
.admin-summary-grid,
|
|
.admin-bot-access-grid,
|
|
.admin-subscription-grid {
|
|
@apply grid gap-4 mt-3;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.detail-grid dt {
|
|
@apply mb-1 text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.detail-panel h1,
|
|
.panel h1,
|
|
.panel h2 {
|
|
@apply m-0;
|
|
}
|
|
|
|
.info-box,
|
|
.error,
|
|
.success {
|
|
@apply rounded-2xl p-4 text-sm;
|
|
}
|
|
|
|
.info-box {
|
|
background-color: color-mix(in srgb, var(--accent) 12%, var(--surface));
|
|
}
|
|
|
|
.error {
|
|
background-color: var(--danger-bg);
|
|
color: var(--danger-text);
|
|
}
|
|
|
|
.success {
|
|
background-color: var(--success-bg);
|
|
color: var(--success-text);
|
|
}
|
|
|
|
.toggle {
|
|
@apply items-center;
|
|
}
|
|
|
|
.toggle input,
|
|
.admin-bot-access-option input {
|
|
@apply mt-0 h-4 w-4 shrink-0 rounded border;
|
|
}
|
|
|
|
.admin-row,
|
|
.admin-user-card,
|
|
.push-row {
|
|
@apply border-t pt-4;
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.admin-summary-card {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.admin-summary-card strong {
|
|
@apply text-4xl leading-none;
|
|
}
|
|
|
|
.admin-user-subscriptions {
|
|
@apply mt-3 grid gap-2;
|
|
}
|
|
|
|
.admin-subscription-manager {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.admin-subscription-manager__toggle {
|
|
@apply flex list-none items-center justify-between gap-3 rounded-2xl border px-4 py-3 text-left;
|
|
border-color: var(--border);
|
|
background-color: color-mix(in srgb, var(--surface-strong) 72%, transparent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.admin-subscription-manager__toggle-icon {
|
|
@apply inline-flex h-7 w-7 items-center justify-center rounded-full text-base font-semibold leading-none;
|
|
color: var(--muted);
|
|
background-color: color-mix(in srgb, var(--surface) 88%, transparent);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.admin-subscription-manager__toggle::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.admin-subscription-manager__toggle::marker {
|
|
content: "";
|
|
}
|
|
|
|
.admin-subscription-manager[open] .admin-subscription-manager__toggle-icon {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.admin-bot-access-option {
|
|
@apply flex items-start gap-3 rounded-2xl border p-4;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.admin-subscription-card {
|
|
@apply grid gap-3 rounded-2xl border p-4;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.admin-subscription-select {
|
|
border-width: 1px;
|
|
}
|
|
|
|
.admin-subscription-select--active {
|
|
background-color: color-mix(in srgb, var(--success-bg) 45%, var(--surface));
|
|
border-color: color-mix(in srgb, var(--success-text) 35%, var(--border));
|
|
color: var(--success-text);
|
|
}
|
|
|
|
.admin-subscription-select--expired {
|
|
background-color: color-mix(in srgb, var(--danger-bg) 30%, var(--surface));
|
|
border-color: color-mix(in srgb, var(--danger-text) 28%, var(--border));
|
|
color: var(--danger-text);
|
|
}
|
|
|
|
.admin-subscription-select--canceled {
|
|
background-color: color-mix(in srgb, var(--surface-strong) 85%, var(--surface));
|
|
border-color: var(--border);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.admin-subscription-table-wrap {
|
|
@apply hidden mt-3 overflow-x-auto rounded-2xl border;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.admin-subscription-table {
|
|
@apply w-full border-collapse;
|
|
}
|
|
|
|
.admin-subscription-table th,
|
|
.admin-subscription-table td {
|
|
@apply p-4 align-top text-left;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.admin-subscription-table th {
|
|
@apply text-xs font-semibold uppercase tracking-[0.12em];
|
|
color: var(--muted);
|
|
background: color-mix(in srgb, var(--surface-strong) 75%, transparent);
|
|
}
|
|
|
|
.admin-subscription-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.admin-subscription-table__bot {
|
|
@apply min-w-[12rem];
|
|
}
|
|
|
|
.admin-subscription-table__bot strong,
|
|
.admin-subscription-table__bot small {
|
|
@apply block;
|
|
}
|
|
|
|
.admin-subscription-table__bot small {
|
|
@apply mt-1;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.admin-subscription-table__field {
|
|
@apply grid gap-3 min-w-[12rem];
|
|
}
|
|
|
|
.admin-subscription-table td input,
|
|
.admin-subscription-table td select {
|
|
@apply w-full;
|
|
}
|
|
|
|
.admin-subscription-table__actions {
|
|
@apply grid gap-2 min-w-[11rem];
|
|
}
|
|
|
|
.admin-subscription-card__header {
|
|
@apply flex items-start justify-between gap-3;
|
|
}
|
|
|
|
.admin-subscription-card__header small {
|
|
@apply block mt-1;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.admin-bot-access-option span {
|
|
@apply grid gap-1;
|
|
}
|
|
|
|
.admin-bot-access-option small {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.push-row {
|
|
@apply grid gap-4;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.push-row__main,
|
|
.push-row__meta,
|
|
.push-row__event {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.push-row__endpoint {
|
|
@apply m-0 break-all text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.notification-settings {
|
|
@apply grid gap-5;
|
|
}
|
|
|
|
.notification-settings__header {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.notification-settings__header h1 {
|
|
@apply m-0 text-2xl font-bold leading-tight;
|
|
}
|
|
|
|
.notification-settings__header .muted {
|
|
@apply m-0 text-sm;
|
|
}
|
|
|
|
.notification-settings__list {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.notification-option {
|
|
@apply flex items-start gap-3 rounded-2xl border p-4;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.notification-option input {
|
|
@apply mt-1 h-4 w-4 shrink-0 rounded border;
|
|
}
|
|
|
|
.notification-option__body {
|
|
@apply grid gap-1;
|
|
}
|
|
|
|
.notification-option__body strong {
|
|
@apply text-sm font-semibold;
|
|
}
|
|
|
|
.notification-option__body small {
|
|
@apply text-sm leading-5;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.notification-settings__actions {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.settings-version {
|
|
@apply px-2 pb-2 text-center text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.mobile-nav__icon-wrap {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.75rem;
|
|
min-height: 1.5rem;
|
|
}
|
|
|
|
.mobile-nav__badge {
|
|
position: absolute;
|
|
top: -0.55rem;
|
|
right: -0.85rem;
|
|
display: inline-flex;
|
|
min-width: 1.2rem;
|
|
height: 1.2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0.3rem;
|
|
border-radius: 999px;
|
|
background: #ef4444;
|
|
color: #fff;
|
|
font-size: 0.68rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
box-shadow: 0 6px 16px color-mix(in srgb, #ef4444 35%, transparent);
|
|
}
|
|
|
|
.bots-page {
|
|
@apply gap-5;
|
|
}
|
|
|
|
.bots-hero,
|
|
.bot-feed-hero,
|
|
.bot-feed-filters,
|
|
.bot-feed-pagination {
|
|
@apply rounded-[28px] border p-4;
|
|
border-color: var(--border);
|
|
background:
|
|
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 32%),
|
|
var(--surface-strong);
|
|
}
|
|
|
|
.bots-hero h1,
|
|
.bot-feed-hero h1 {
|
|
@apply m-0 text-3xl font-bold leading-tight;
|
|
}
|
|
|
|
.bots-hero {
|
|
background: var(--surface-strong);
|
|
}
|
|
|
|
.bots-hero__copy {
|
|
@apply grid gap-2;
|
|
max-width: 34rem;
|
|
}
|
|
|
|
.bot-grid {
|
|
@apply grid gap-4;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.bot-tile {
|
|
@apply grid gap-4 rounded-3xl border p-3.5 transition;
|
|
min-height: 11.25rem;
|
|
align-content: space-between;
|
|
border-color: color-mix(in srgb, var(--border) 92%, white 8%);
|
|
background: var(--surface);
|
|
/* box-shadow:
|
|
0 1px 2px color-mix(in srgb, var(--bg) 5%, transparent),
|
|
0 10px 24px color-mix(in srgb, var(--bg) 6%, transparent); */
|
|
}
|
|
|
|
.bot-tile:hover {
|
|
border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
|
|
box-shadow:
|
|
0 1px 2px color-mix(in srgb, var(--bg) 8%, transparent),
|
|
0 14px 32px color-mix(in srgb, var(--bg) 10%, transparent);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.bot-tile__top {
|
|
@apply flex items-center justify-between gap-3;
|
|
}
|
|
|
|
.bot-tile__icon {
|
|
@apply grid h-10 w-10 place-items-center rounded-2xl;
|
|
border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
|
|
color: var(--accent);
|
|
}
|
|
|
|
.bot-tile__icon span {
|
|
@apply text-base font-semibold;
|
|
}
|
|
|
|
.bot-tile__eyebrow {
|
|
@apply text-xs font-semibold uppercase tracking-[0.14em];
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.bot-tile__count,
|
|
.bot-feed-hero__pill {
|
|
@apply inline-flex min-w-9 items-center justify-center rounded-full px-2.5 py-1 text-xs font-semibold;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
|
|
background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-strong));
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
|
|
.bot-tile__body,
|
|
.bot-feed-hero__copy,
|
|
.bot-feed-hero__meta,
|
|
.bot-feed-filters__selects {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.bot-tile__body h2 {
|
|
@apply m-0 text-[1.35rem] font-semibold leading-tight;
|
|
}
|
|
|
|
.bot-tile__meta {
|
|
@apply m-0 text-sm leading-5;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.bot-tile__footer {
|
|
@apply mt-1 flex flex-row items-center justify-between rounded-2xl border px-3 py-2;
|
|
border-color: color-mix(in srgb, var(--border) 82%, transparent);
|
|
background-color: color-mix(in srgb, var(--surface-strong) 80%, var(--surface));
|
|
}
|
|
|
|
.bot-tile__action {
|
|
@apply text-sm font-medium;
|
|
color: var(--text);
|
|
}
|
|
|
|
.bot-tile__arrow {
|
|
@apply text-base leading-none;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.bot-feed-hero__back {
|
|
@apply inline-flex w-fit items-center rounded-full border px-3 py-1.5 text-sm font-medium transition;
|
|
border-color: var(--border);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.bot-feed-hero__back:hover {
|
|
color: var(--text);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.bot-feed-hero__meta {
|
|
@apply gap-2;
|
|
}
|
|
|
|
.bot-feed-filters {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.bot-feed-filters__tabs {
|
|
@apply flex flex-wrap gap-2;
|
|
}
|
|
|
|
.bot-feed-filters__selects {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.surface-card {
|
|
background-color: var(--surface-strong);
|
|
border-color: var(--border);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
@layer components {
|
|
.sakai-shell {
|
|
@apply grid;
|
|
grid-template-columns: 18rem minmax(0, 1fr);
|
|
}
|
|
|
|
.sakai-shell--guest {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.sakai-sidebar {
|
|
@apply sticky top-0 flex h-screen flex-col gap-6 border-r px-5 py-6;
|
|
border-color: var(--border);
|
|
background-color: color-mix(in srgb, var(--surface) 90%, white 10%);
|
|
}
|
|
|
|
.sakai-bottom-bar {
|
|
@apply hidden;
|
|
}
|
|
|
|
.sakai-sidebar__brand {
|
|
@apply flex items-center gap-3;
|
|
}
|
|
|
|
.sakai-sidebar__brand strong {
|
|
@apply block text-lg;
|
|
}
|
|
|
|
.sakai-sidebar__brand p {
|
|
@apply m-0 text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-sidebar__logo {
|
|
@apply grid h-12 w-12 place-items-center rounded-2xl text-xl;
|
|
background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.sakai-sidebar__nav {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.sakai-nav-item {
|
|
@apply inline-flex items-center gap-3 rounded-2xl px-3 py-3 text-sm font-medium transition;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-nav-item:hover,
|
|
.sakai-nav-item--active {
|
|
background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
|
|
color: var(--text);
|
|
}
|
|
|
|
.sakai-sidebar__footer {
|
|
@apply mt-auto;
|
|
}
|
|
|
|
.sakai-sidebar__hint {
|
|
@apply grid gap-1 rounded-2xl border p-4;
|
|
border-color: var(--border);
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.sakai-sidebar__hint span {
|
|
@apply text-sm;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sakai-topbar {
|
|
@apply flex flex-row items-center justify-between px-6 py-6;
|
|
}
|
|
|
|
.sakai-topbar--guest {
|
|
@apply mx-auto w-full max-w-7xl items-start;
|
|
}
|
|
|
|
.sakai-content {
|
|
@apply px-6 pb-8;
|
|
}
|
|
|
|
.sakai-shell--guest .sakai-content {
|
|
@apply mx-auto w-full max-w-7xl px-6;
|
|
}
|
|
|
|
.sakai-hero-card {
|
|
@apply flex flex-row items-start justify-between;
|
|
}
|
|
|
|
.sakai-filter-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.sakai-signal-card {
|
|
@apply flex flex-row items-center justify-between;
|
|
}
|
|
|
|
.sakai-signal-card--detail {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.sakai-signal-card__side {
|
|
@apply grid justify-items-end;
|
|
min-width: 8rem;
|
|
}
|
|
|
|
.sakai-copy-button--wide {
|
|
width: auto;
|
|
min-width: 11rem;
|
|
min-height: 2.75rem;
|
|
padding-inline: 1rem;
|
|
padding-block: 0.65rem;
|
|
}
|
|
|
|
.sakai-signal-card__side > .sakai-signal-card__forecast {
|
|
width: auto;
|
|
max-width: 240px;
|
|
justify-self: stretch;
|
|
flex: initial;
|
|
}
|
|
|
|
.sakai-signal-card__side--detail {
|
|
/* min-width: min(24rem, 38%); */
|
|
}
|
|
|
|
.sakai-signal-card__side--detail > .sakai-signal-card__forecast {
|
|
max-width: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.sakai-signal-layout--detail {
|
|
grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.75fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.sakai-signal-detail-main {
|
|
min-width: 0;
|
|
}
|
|
|
|
.sakai-signal-detail-aside {
|
|
align-self: start;
|
|
}
|
|
|
|
.sakai-summary-panel--sticky {
|
|
position: sticky;
|
|
top: calc(1rem + env(safe-area-inset-top, 0px));
|
|
}
|
|
|
|
.auth-page {
|
|
@apply mx-auto;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 28rem);
|
|
max-width: 72rem;
|
|
min-height: calc(100vh - 10rem);
|
|
}
|
|
|
|
.app-shell--single {
|
|
@apply px-6 py-5;
|
|
}
|
|
|
|
.topbar {
|
|
@apply flex flex-row items-start justify-between p-5;
|
|
}
|
|
|
|
.topbar__actions,
|
|
.topbar__extras {
|
|
@apply items-end;
|
|
}
|
|
|
|
.topbar__nav,
|
|
.push-consent__actions,
|
|
.filters,
|
|
.signals-toolbar__row,
|
|
.signals-toolbar__tabs,
|
|
.signals-toolbar__per-page,
|
|
.signals-pagination__controls,
|
|
.button-row,
|
|
.admin-users-toolbar,
|
|
.admin-bot-chip-list,
|
|
.push-row__heading {
|
|
@apply flex flex-row items-center;
|
|
}
|
|
|
|
.user-chip {
|
|
@apply min-w-64;
|
|
}
|
|
|
|
.page-header {
|
|
@apply items-start justify-between p-5;
|
|
}
|
|
|
|
.page-header--signals h1 {
|
|
@apply text-5xl;
|
|
}
|
|
|
|
.bots-hero h1,
|
|
.bot-feed-hero h1 {
|
|
@apply text-4xl;
|
|
}
|
|
|
|
.signals-toolbar__search,
|
|
.admin-users-toolbar__search {
|
|
@apply flex-1;
|
|
}
|
|
|
|
.signals-toolbar__row--desktop {
|
|
@apply hidden;
|
|
}
|
|
|
|
.signals-toolbar__row--mobile {
|
|
@apply flex;
|
|
}
|
|
|
|
.signal-row {
|
|
@apply items-center;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.signal-row__status {
|
|
@apply items-end text-right;
|
|
}
|
|
|
|
.detail-grid,
|
|
.admin-summary-grid,
|
|
.admin-bot-access-grid,
|
|
.admin-subscription-grid {
|
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.bot-feed-hero {
|
|
@apply flex flex-row items-end justify-between;
|
|
}
|
|
|
|
.bot-feed-filters__selects {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.admin-user-card__header,
|
|
.admin-row {
|
|
@apply flex flex-row items-start justify-between;
|
|
}
|
|
|
|
.admin-user-card__body {
|
|
@apply flex flex-col items-stretch;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
@layer components {
|
|
.sakai-bot-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.sakai-filter-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.sakai-signal-layout {
|
|
grid-template-columns: minmax(0, 2.1fr) minmax(280px, 0.9fr);
|
|
align-items: start;
|
|
}
|
|
|
|
.topbar__actions {
|
|
@apply flex flex-row items-start justify-end;
|
|
}
|
|
|
|
.topbar__extras {
|
|
@apply flex flex-row items-stretch;
|
|
}
|
|
|
|
.signals-toolbar {
|
|
@apply gap-3;
|
|
}
|
|
|
|
.signals-toolbar__row--desktop {
|
|
@apply flex;
|
|
}
|
|
|
|
.signals-toolbar__row--mobile {
|
|
@apply hidden;
|
|
}
|
|
|
|
.signals-toolbar__row {
|
|
@apply flex flex-row flex-wrap justify-end;
|
|
}
|
|
|
|
.bot-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.bot-feed-filters {
|
|
grid-template-columns: minmax(240px, 1.2fr) minmax(220px, auto) minmax(320px, 1.4fr);
|
|
align-items: start;
|
|
}
|
|
|
|
.bot-feed-filters__selects {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.signal-row {
|
|
grid-template-columns: minmax(0, 1fr) minmax(9rem, auto);
|
|
}
|
|
|
|
.push-row {
|
|
grid-template-columns: minmax(280px, 2fr) minmax(220px, 1.2fr) minmax(240px, 1.4fr);
|
|
}
|
|
|
|
.detail-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.admin-summary-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.admin-bot-access-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.admin-subscription-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.admin-subscription-grid--mobile {
|
|
@apply hidden;
|
|
}
|
|
|
|
.admin-subscription-table-wrap {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|