Show sourcecode
The following files exists in this folder. Click to view.
public_html/smartkortet/assets/css/
style.css
715 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715
:root {
color-scheme: light;
--bg: #eef3f8;
--card: rgba(255, 255, 255, 0.8);
--card-solid: #ffffff;
--card-border: rgba(148, 163, 184, 0.42);
--inset-border: rgba(148, 163, 184, 0.5);
--text: #0f172a;
--muted: #526175;
--accent: #0f766e;
--accent-2: #0ea5e9;
--danger: #dc2626;
--success: #047857;
--radius: 18px;
--shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
--tab-bar-bg: rgba(255, 255, 255, 0.8);
}
body[data-theme="dark"] {
--bg: #0b1220;
--card: rgba(15, 23, 42, 0.78);
--card-solid: #111827;
--card-border: rgba(71, 85, 105, 0.78);
--inset-border: rgba(100, 116, 139, 0.72);
--text: #e5edf8;
--muted: #9fb0c7;
--accent: #14b8a6;
--accent-2: #38bdf8;
--success: #34d399;
--shadow: 0 16px 44px rgba(2, 6, 23, 0.55);
--tab-bar-bg: rgba(255, 255, 255, 0.086);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--text);
background: radial-gradient(circle at top left, #376d67 0%, transparent 40%),
radial-gradient(circle at bottom right, #432f5a 0%, transparent 35%),
var(--bg);
min-height: 100vh;
}
a {
color: var(--accent);
text-decoration: none;
}
.app-shell,
.auth-shell {
position: relative;
z-index: 1;
max-width: 1080px;
margin: 0 auto;
padding: 20px;
}
.auth-shell {
min-height: 100vh;
display: grid;
place-items: center;
}
.card {
background: var(--card);
box-shadow: var(--shadow);
border-radius: var(--radius);
/* backdrop-filter: blur(12px); */
padding: 10px;
}
.inset-card {
background: var(--card-solid);
box-shadow: none;
}
.auth-card {
width: min(480px, 96vw);
padding: 28px;
}
.topbar,
.tabs,
.panel {
padding: 18px;
margin-bottom: 16px;
}
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.topbar h1 {
margin: 0;
font-size: 1.35rem;
}
.subtitle {
margin: 6px 0 0;
color: var(--muted);
}
.tabs {
display: flex;
overflow-x: auto;
gap: 10px;
padding: 10px;
background: var(--tab-bar-bg);
backdrop-filter: blur(12px);
}
.tab-link {
padding: 10px 14px;
border-radius: 12px;
color: var(--text);
font-weight: 600;
white-space: nowrap;
}
.tab-link.active {
background: linear-gradient(120deg, var(--accent), var(--accent-2));
color: #ffffff;
}
.tab-link.active .tab-icon svg {
fill: #ffffff;
}
.content-grid {
display: grid;
gap: 16px;
padding-bottom: 28px;
}
.hero-panel {
display: grid;
gap: 16px;
}
.pill {
display: inline-block;
margin: 0;
padding: 5px 10px;
border-radius: 999px;
color: var(--accent);
background: rgba(15, 118, 110, 0.1);
font-weight: 700;
font-size: 0.8rem;
}
.hero-panel h2 {
margin: 10px 0 4px;
font-size: 2.1rem;
}
.kpi-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi {
background: #ffffff;
border-radius: 14px;
border: 1px solid #e2e8f0;
padding: 12px;
}
.kpi span {
display: block;
color: var(--muted);
font-size: 0.84rem;
}
.kpi strong {
font-size: 1.1rem;
}
h3,
h4 {
margin-top: 0;
}
.form-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-actions {
grid-column: 1 / -1;
}
.field,
.stack {
display: grid;
gap: 8px;
}
.field>span,
.field-label {
font-size: 0.86rem;
color: var(--muted);
font-weight: 600;
}
input,
select,
button {
font: inherit;
}
input,
select {
border: 1px solid #cdd7e5;
border-radius: 12px;
background: #ffffff;
padding: 12px;
min-height: 46px;
color: var(--text);
}
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] .history-item,
body[data-theme="dark"] .kpi,
body[data-theme="dark"] .chart-card,
body[data-theme="dark"] .chip {
background: #0f172a;
border-color: #334155;
color: var(--text);
}
.btn {
border: none;
border-radius: 12px;
background: linear-gradient(120deg, var(--accent), var(--accent-2));
color: #ffffff;
font-weight: 700;
padding: 12px 16px;
min-height: 46px;
cursor: pointer;
text-align: center;
}
.btn-secondary {
background: #e2e8f0;
color: #0f172a;
}
.btn-danger {
background: #fee2e2;
color: #991b1b;
}
.quick-amounts {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.chip {
border: 1px solid #d1d5db;
background: #ffffff;
color: #0f172a;
border-radius: 999px;
padding: 10px 16px;
min-height: 42px;
font-weight: 700;
cursor: pointer;
}
.checkbox-row {
display: flex;
gap: 8px;
align-items: center;
color: var(--muted);
font-size: 0.92rem;
}
.notice {
padding: 12px 14px;
border-radius: 12px;
margin-bottom: 14px;
font-weight: 600;
}
.notice.success {
background: #dcfce7;
color: var(--success);
}
.notice.error {
background: #fee2e2;
color: #b91c1c;
}
.row-between {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.inline-form {
display: flex;
gap: 8px;
}
.history-list {
display: grid;
gap: 10px;
margin-top: 12px;
}
.history-item {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
border: 1px solid #e2e8f0;
background: #ffffff;
border-radius: 12px;
padding: 12px;
}
.history-entry {
align-items: flex-end;
gap: 12px;
}
.history-edit-form {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
gap: 10px;
width: 100%;
}
.history-actions,
.history-delete-form {
display: flex;
align-items: end;
}
.history-delete-form {
align-self: flex-end;
}
.restaurants-map {
height: 320px;
border-radius: 0.75rem;
overflow: hidden;
}
.restaurants-page .favorite-name {
word-break: break-word;
}
.restaurants-page .restaurant-row {
align-items: flex-start;
}
.restaurants-page .restaurant-meta {
min-width: 0;
}
.restaurants-page .restaurant-actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
}
.restaurants-page .restaurant-actions form {
margin: 0;
}
.restaurants-page .restaurant-actions .btn {
white-space: nowrap;
}
.tab-link {
display: inline-flex;
align-items: center;
gap: 8px;
}
.tab-icon {
width: 20px;
height: 20px;
display: inline-flex;
}
.tab-icon svg {
width: 20px;
height: 20px;
fill: var(--text);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.chart-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 12px;
}
.chart-card {
border: 1px solid #e2e8f0;
background: #ffffff;
border-radius: 14px;
padding: 14px;
min-height: 320px;
}
.chart-card canvas {
width: 100% !important;
display: block;
aspect-ratio: 1 / 1;
height: auto !important;
margin: 0 auto;
}
.settings-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-16 {
margin-top: 16px;
}
.mt-1rem {
margin-top: 1rem;
}
.tips-images {
display: flex;
}
.tips-image {
width: 50%;
}
.tips-image-left {
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.tips-image-right {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.auth-switch {
color: var(--muted);
margin-bottom: 0;
}
.admin-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.admin-subnav {
display: flex;
gap: 8px;
margin-top: 4px;
}
.admin-subnav .tab-link {
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 10px 12px;
}
.admin-table-wrap {
overflow: auto;
border: 1px solid var(--card-border);
border-radius: 12px;
}
.admin-table {
width: 100%;
border-collapse: collapse;
min-width: 920px;
}
.admin-table th,
.admin-table td {
padding: 10px;
border-bottom: 1px solid var(--card-border);
text-align: left;
vertical-align: top;
}
.admin-row-actions {
display: grid;
gap: 8px;
}
.inline-admin-form {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.inline-admin-form input[type="password"] {
min-width: 160px;
}
.admin-chart-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-chart-grid .chart-card {
min-height: 360px;
height: auto !important;
aspect-ratio: 1 / 1;
}
@media (max-width: 880px) {
body, html {
background: var(--bg);
}
.form-grid,
.settings-grid,
.kpi-grid {
grid-template-columns: 1fr;
}
.chart-grid {
grid-template-columns: 1fr;
}
.chart-card {
min-height: 300px;
}
.topbar {
align-items: flex-start;
flex-direction: column;
}
.btn {
width: 100%;
}
.tabs {
position: fixed;
left: 10px;
right: 10px;
bottom: 20px;
margin: 0;
z-index: 20;
justify-content: space-around;
border-radius: 18px;
padding: 8px 10px;
}
.tab-link {
flex: 1;
justify-content: center;
min-height: 52px;
border-radius: 14px;
padding: 10px;
}
.tab-label {
display: none;
}
.content-grid {
padding-bottom: 96px;
}
.app-shell {
padding: 14px;
}
.inline-form {
width: 100%;
flex-wrap: wrap;
}
.history-entry {
flex-direction: column;
align-items: stretch;
}
.restaurants-map {
height: 260px;
}
.restaurants-page .favorite-row,
.restaurants-page .restaurant-row {
flex-direction: column;
align-items: stretch;
}
.restaurants-page .restaurant-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.restaurants-page .restaurant-actions form,
.restaurants-page .restaurant-actions .btn {
width: 100%;
}
.restaurants-page .restaurant-actions form .btn {
width: 100%;
}
.history-edit-form {
grid-template-columns: 1fr;
}
.history-actions,
.history-delete-form {
width: 100%;
}
.admin-actions {
width: 100%;
}
.admin-subnav {
flex-wrap: wrap;
}
.admin-subnav .tab-link {
flex: 1;
text-align: center;
}
.admin-chart-grid {
grid-template-columns: 1fr;
}
.admin-table {
min-width: 0;
}
.admin-table thead {
display: none;
}
.admin-table,
.admin-table tbody,
.admin-table tr,
.admin-table td {
display: block;
width: 100%;
}
.admin-table tr {
padding: 10px;
border-bottom: 1px solid var(--card-border);
}
.admin-table td {
border: 0;
padding: 6px 0;
}
.admin-table td::before {
content: attr(data-label);
display: block;
font-size: 0.75rem;
color: var(--muted);
margin-bottom: 2px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
}
@media (max-width: 520px) {
.restaurants-page .restaurant-actions {
grid-template-columns: 1fr;
}
.tips-images {
flex-direction: column;
}
.tips-image {
width: 100%;
}
.tips-image-left {
border-radius: 16px 16px 0 0;
}
.tips-image-right {
border-radius: 0 0 16px 16px;
}
}