mirror of
https://github.com/coollabsio/coolify.git
synced 2026-11-06 13:10:37 -04:00
feat(ui): add UI scale option to appearance settings
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
c8c639e3d6
commit
bd499de1fb
@@ -482,6 +482,18 @@ select,
|
||||
/*
|
||||
* Base styles
|
||||
*/
|
||||
/* UI scale from the Appearance page. It scales rem sizes only, because CSS zoom breaks the
|
||||
mouse positions in xterm and the canvas. Phones keep 100% so inputs stay at 16px. */
|
||||
@media (min-width: 768px) {
|
||||
html[data-ui-scale="90"] {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
html[data-ui-scale="80"] {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply w-full min-h-full bg-neutral-50 dark:bg-app dark:text-fg-dim;
|
||||
@@ -2783,6 +2795,11 @@ html[data-theme="custom"]:not(.dark) :is(.application-settings-section, .applica
|
||||
box-shadow: var(--shadow-dropdown);
|
||||
}
|
||||
|
||||
/* Geist centers lowercase letters 1px below the line box center. Move the icons to match. */
|
||||
.top-user-menu-panel .listbox-option svg {
|
||||
translate: 0 1px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* The mobile top bar's backdrop filter makes it the containing block for
|
||||
fixed descendants. Keep this menu anchored below its trigger instead
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
resourceHref, save, sleep, targetFrom, TYPES, uid, uniqueLabels, withDeploy, withoutSecrets, withTarget,
|
||||
} from '../../deploy-canvas.js';
|
||||
|
||||
export const PORT_Y = 26; // header centre (3.25rem / 2)
|
||||
export const PORT_Y = 26; // header centre (.cv-node-head is 52px; px, so the UI scale does not move the ports)
|
||||
const CARD_W = 296;
|
||||
|
||||
const emptyRun = () => ({ open: false, title: 'Deploy', sub: '', steps: [], panes: [], active: null, defaultHref: '', openHref: '', showOpen: false });
|
||||
|
||||
@@ -143,7 +143,7 @@ const CSS = `
|
||||
.cv-root :is(input, textarea, .cv-logs) { user-select: text; }
|
||||
.cv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
|
||||
.cv-deploy-now { width: 100%; }
|
||||
.cv-node-head { display: flex; align-items: center; gap: 0.625rem; height: 3.25rem; padding: 0 0.5rem 0 0.75rem; cursor: grab; user-select: none; }
|
||||
.cv-node-head { display: flex; align-items: center; gap: 0.625rem; height: 52px; padding: 0 0.5rem 0 0.75rem; cursor: grab; user-select: none; }
|
||||
.cv-node-head i svg { width: 1rem; height: 1rem; }
|
||||
.cv-node-head div { display: grid; min-width: 0; margin-right: auto; }
|
||||
.cv-node-head b { overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.125rem; text-overflow: ellipsis; white-space: nowrap; }
|
||||
@@ -182,7 +182,7 @@ const CSS = `
|
||||
|
||||
/* Ports: filled dots on the header line, like the environment canvas. */
|
||||
.cv-port {
|
||||
position: absolute; top: calc(1.625rem - 0.375rem); width: 0.75rem; height: 0.75rem; border-radius: 50%;
|
||||
position: absolute; top: calc(26px - 0.375rem); width: 0.75rem; height: 0.75rem; border-radius: 50%;
|
||||
border: 2px solid var(--cv-card); background: light-dark(#a3a3a3, #737373); z-index: 2;
|
||||
box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
transition: transform 120ms ease, background-color 120ms ease;
|
||||
@@ -248,7 +248,7 @@ const CSS = `
|
||||
|
||||
/* Result pill after Deploy: the live address(es). */
|
||||
.cv-result {
|
||||
position: absolute; display: flex; align-items: center; gap: 0.25rem; height: 2.375rem; padding: 0 0.25rem 0 0.875rem;
|
||||
position: absolute; display: flex; align-items: center; gap: 0.25rem; height: 38px; padding: 0 0.25rem 0 0.875rem;
|
||||
border: 1px solid color-mix(in srgb, #10b981 45%, transparent); border-radius: 999px;
|
||||
background: var(--cv-card); box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.25); white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
'profile' => '<path d="M12.1601 10.87C12.0601 10.86 11.9401 10.86 11.8301 10.87C9.45006 10.79 7.56006 8.84 7.56006 6.44C7.56006 3.99 9.54006 2 12.0001 2C14.4501 2 16.4401 3.99 16.4401 6.44C16.4301 8.84 14.5401 10.79 12.1601 10.87Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
|
||||
'teams' => '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C9.37665 1.25 7.25 3.37665 7.25 6C7.25 8.62335 9.37665 10.75 12 10.75C14.6234 10.75 16.75 8.62335 16.75 6C16.75 3.37665 14.6234 1.25 12 1.25ZM8.75 6C8.75 4.20507 10.2051 2.75 12 2.75C13.7949 2.75 15.25 4.20507 15.25 6C15.25 7.79493 13.7949 9.25 12 9.25C10.2051 9.25 8.75 7.79493 8.75 6Z" fill="currentColor"/><path d="M18 3.25C17.5858 3.25 17.25 3.58579 17.25 4C17.25 4.41421 17.5858 4.75 18 4.75C19.3765 4.75 20.25 5.65573 20.25 6.5C20.25 7.34427 19.3765 8.25 18 8.25C17.5858 8.25 17.25 8.58579 17.25 9C17.25 9.41421 17.5858 9.75 18 9.75C19.9372 9.75 21.75 8.41715 21.75 6.5C21.75 4.58285 19.9372 3.25 18 3.25Z" fill="currentColor"/><path d="M6.75 4C6.75 3.58579 6.41421 3.25 6 3.25C4.06278 3.25 2.25 4.58285 2.25 6.5C2.25 8.41715 4.06278 9.75 6 9.75C6.41421 9.75 6.75 9.41421 6.75 9C6.75 8.58579 6.41421 8.25 6 8.25C4.62351 8.25 3.75 7.34427 3.75 6.5C3.75 5.65573 4.62351 4.75 6 4.75C6.41421 4.75 6.75 4.41421 6.75 4Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 12.25C10.2157 12.25 8.56645 12.7308 7.34133 13.5475C6.12146 14.3608 5.25 15.5666 5.25 17C5.25 18.4334 6.12146 19.6392 7.34133 20.4525C8.56645 21.2692 10.2157 21.75 12 21.75C13.7843 21.75 15.4335 21.2692 16.6587 20.4525C17.8785 19.6392 18.75 18.4334 18.75 17C18.75 15.5666 17.8785 14.3608 16.6587 13.5475C15.4335 12.7308 13.7843 12.25 12 12.25ZM6.75 17C6.75 16.2242 7.22169 15.4301 8.17338 14.7956C9.11984 14.1646 10.4706 13.75 12 13.75C13.5294 13.75 14.8802 14.1646 15.8266 14.7956C16.7783 15.4301 17.25 16.2242 17.25 17C17.25 17.7758 16.7783 18.5699 15.8266 19.2044C14.8802 19.8354 13.5294 20.25 12 20.25C10.4706 20.25 9.11984 19.8354 8.17338 19.2044C7.22169 18.5699 6.75 17.7758 6.75 17Z" fill="currentColor"/><path d="M19.2674 13.8393C19.3561 13.4347 19.7561 13.1787 20.1607 13.2674C21.1225 13.4783 21.9893 13.8593 22.6328 14.3859C23.2758 14.912 23.75 15.6352 23.75 16.5C23.75 17.3648 23.2758 18.088 22.6328 18.6141C21.9893 19.1407 21.1225 19.5217 20.1607 19.7326C19.7561 19.8213 19.3561 19.5653 19.2674 19.1607C19.1787 18.7561 19.4347 18.3561 19.8393 18.2674C20.6317 18.0936 21.2649 17.7952 21.6829 17.4532C22.1014 17.1108 22.25 16.7763 22.25 16.5C22.25 16.2237 22.1014 15.8892 21.6829 15.5468C21.2649 15.2048 20.6317 14.9064 19.8393 14.7326C19.4347 14.6439 19.1787 14.2439 19.2674 13.8393Z" fill="currentColor"/><path d="M3.83935 13.2674C4.24395 13.1787 4.64387 13.4347 4.73259 13.8393C4.82132 14.2439 4.56525 14.6439 4.16065 14.7326C3.36829 14.9064 2.73505 15.2048 2.31712 15.5468C1.89863 15.8892 1.75 16.2237 1.75 16.5C1.75 16.7763 1.89863 17.1108 2.31712 17.4532C2.73505 17.7952 3.36829 18.0936 4.16065 18.2674C4.56525 18.3561 4.82132 18.7561 4.73259 19.1607C4.64387 19.5653 4.24395 19.8213 3.83935 19.7326C2.87746 19.5217 2.0107 19.1407 1.36719 18.6141C0.724248 18.088 0.25 17.3648 0.25 16.5C0.25 15.6352 0.724248 14.912 1.36719 14.3859C2.0107 13.8593 2.87746 13.4783 3.83935 13.2674Z" fill="currentColor"/>',
|
||||
'subscription' => '<path fill-rule="evenodd" clip-rule="evenodd" d="M9.94358 3.25H14.0564C15.8942 3.24998 17.3498 3.24997 18.489 3.40314C19.6614 3.56076 20.6104 3.89288 21.3588 4.64124C22.1071 5.38961 22.4392 6.33856 22.5969 7.51098C22.6873 8.18385 22.7244 8.9671 22.7395 9.87428C22.7464 9.91516 22.75 9.95716 22.75 10C22.75 10.0353 22.7476 10.0699 22.7429 10.1039C22.75 10.6696 22.75 11.2818 22.75 11.9436V12.0564C22.75 13.8942 22.75 15.3498 22.5969 16.489C22.4392 17.6614 22.1071 18.6104 21.3588 19.3588C20.6104 20.1071 19.6614 20.4392 18.489 20.5969C17.3498 20.75 15.8942 20.75 14.0564 20.75H9.94359C8.10583 20.75 6.65019 20.75 5.51098 20.5969C4.33856 20.4392 3.38961 20.1071 2.64124 19.3588C1.89288 18.6104 1.56076 17.6614 1.40314 16.489C1.24997 15.3498 1.24998 13.8942 1.25 12.0564V11.9436C1.24999 11.2818 1.24999 10.6696 1.25714 10.1039C1.25243 10.0699 1.25 10.0352 1.25 10C1.25 9.95716 1.25359 9.91517 1.26049 9.87429C1.27564 8.96711 1.31267 8.18385 1.40314 7.51098C1.56076 6.33856 1.89288 5.38961 2.64124 4.64124C3.38961 3.89288 4.33856 3.56076 5.51098 3.40314C6.65019 3.24997 8.10582 3.24998 9.94358 3.25ZM2.75199 10.75C2.75009 11.1384 2.75 11.5541 2.75 12C2.75 13.9068 2.75159 15.2615 2.88976 16.2892C3.02502 17.2952 3.27869 17.8749 3.7019 18.2981C4.12511 18.7213 4.70476 18.975 5.71085 19.1102C6.73851 19.2484 8.09318 19.25 10 19.25H14C15.9068 19.25 17.2615 19.2484 18.2892 19.1102C19.2952 18.975 19.8749 18.7213 20.2981 18.2981C20.7213 17.8749 20.975 17.2952 21.1102 16.2892C21.2484 15.2615 21.25 13.9068 21.25 12C21.25 11.5541 21.2499 11.1384 21.248 10.75H2.75199ZM21.2239 9.25H2.77607C2.79564 8.66327 2.82987 8.15634 2.88976 7.71085C3.02502 6.70476 3.27869 6.12511 3.7019 5.7019C4.12511 5.27869 4.70476 5.02502 5.71085 4.88976C6.73851 4.75159 8.09318 4.75 10 4.75H14C15.9068 4.75 17.2615 4.75159 18.2892 4.88976C19.2952 5.02502 19.8749 5.27869 20.2981 5.7019C20.7213 6.12511 20.975 6.70476 21.1102 7.71085C21.1701 8.15634 21.2044 8.66327 21.2239 9.25ZM5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H10C10.4142 15.25 10.75 15.5858 10.75 16C10.75 16.4142 10.4142 16.75 10 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16ZM11.75 16C11.75 15.5858 12.0858 15.25 12.5 15.25H14C14.4142 15.25 14.75 15.5858 14.75 16C14.75 16.4142 14.4142 16.75 14 16.75H12.5C12.0858 16.75 11.75 16.4142 11.75 16Z" fill="currentColor"/>',
|
||||
'paintbrush' => '<path d="M 9.2746 12.0586 L 18.0453 3.288 c 0.828 -0.828 2.172 -0.828 3 0 h 0 c 0.828 0.828 0.828 2.172 0 3 l -8.7706 8.7706" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M 2.3333 19.608 c 3.604 1.0827 6.528 1.1733 8.9186 -1.2733 1.4413 -1.4467 1.4413 -3.7933 0 -5.2413 s -3.768 -1.4693 -5.2213 0 c -2.364 2.3893 -0.3 4.6587 -3.6973 6.5147 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>',
|
||||
'settings' => '<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 8.25C9.92881 8.25 8.24988 9.92893 8.24988 12C8.24988 14.0711 9.92881 15.75 11.9999 15.75C14.0709 15.75 15.7499 14.0711 15.7499 12C15.7499 9.92893 14.0709 8.25 11.9999 8.25ZM9.74988 12C9.74988 10.7574 10.7572 9.75 11.9999 9.75C13.2425 9.75 14.2499 10.7574 14.2499 12C14.2499 13.2426 13.2425 14.25 11.9999 14.25C10.7572 14.25 9.74988 13.2426 9.74988 12Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.00227 12.8734C1.80404 13.5665 1.39452 15.1002 2.0855 16.2991L3.32494 18.4497C4.01637 19.6495 5.5489 20.0616 6.7479 19.3681C7.41601 18.9816 8.2552 19.4633 8.2552 20.2416C8.2552 21.6257 9.37555 22.75 10.7604 22.75H13.2392C14.6241 22.75 15.7445 21.6256 15.7445 20.2416C15.7445 19.4632 16.5837 18.9816 17.2518 19.368C18.4508 20.0614 19.9833 19.6494 20.6747 18.4496L21.9142 16.299C22.6052 15.1 22.1957 13.5664 20.9975 12.8734C20.3267 12.4854 20.3267 11.5143 20.9975 11.1264C22.1957 10.4334 22.6052 8.8997 21.9142 7.70078L20.6747 5.55011C19.9833 4.35038 18.4508 3.93833 17.2518 4.6318C16.5837 5.01823 15.7445 4.53654 15.7445 3.7583C15.7445 2.37427 14.6242 1.25 13.2393 1.25H10.7603C9.37552 1.25 8.2552 2.37425 8.2552 3.75827C8.2552 4.53644 7.41606 5.01814 6.74793 4.6317C5.54896 3.93824 4.01638 4.35027 3.32494 5.55001L2.0855 7.70061C1.39452 8.89956 1.80404 10.4333 3.00227 11.1263C3.6731 11.5143 3.6731 12.4854 3.00227 12.8734ZM3.38512 15.5502C3.10671 15.0671 3.27247 14.45 3.75327 14.1719C5.42276 13.2063 5.42276 10.7935 3.75327 9.82786C3.27247 9.54977 3.10671 8.93268 3.38512 8.4496L4.62456 6.29901C4.90249 5.81675 5.51691 5.65253 5.99693 5.93016C7.66898 6.89724 9.7552 5.68712 9.7552 3.75827C9.7552 3.20015 10.2065 2.75 10.7603 2.75L13.2393 2.75C13.7932 2.75 14.2445 3.20017 14.2445 3.7583C14.2445 5.68715 16.3307 6.89737 18.0028 5.93026C18.4828 5.65263 19.0972 5.81685 19.3751 6.29911L20.6146 8.44978C20.893 8.93282 20.7273 9.54986 20.2465 9.82792C18.577 10.7935 18.577 13.2063 20.2465 14.1718C20.7273 14.4499 20.893 15.0669 20.6146 15.55L19.3751 17.7006C19.0972 18.1829 18.4828 18.3471 18.0028 18.0695C16.3306 17.1023 14.2445 18.3128 14.2445 20.2416C14.2445 20.7998 13.7932 21.25 13.2392 21.25H10.7604C10.2065 21.25 9.7552 20.7998 9.7552 20.2416C9.7552 18.3128 7.66905 17.1025 5.99689 18.0696C5.51689 18.3472 4.9025 18.183 4.62456 17.7008L3.38512 15.5502Z" fill="currentColor"/>',
|
||||
'admin' => '<path fill-rule="evenodd" clip-rule="evenodd" d="M8.72339 2.05112C10.1673 1.55658 11.0625 1.25 12 1.25C12.9375 1.25 13.8327 1.55658 15.2766 2.05112L16.004 2.30013C17.4854 2.8072 18.6286 3.19852 19.447 3.53099C19.8592 3.69846 20.2136 3.86067 20.499 4.02641C20.7737 4.1859 21.0492 4.38484 21.2364 4.65154C21.4214 4.91516 21.5171 5.23924 21.5772 5.55122C21.6397 5.87556 21.6774 6.26464 21.7017 6.71136C21.75 7.5984 21.75 8.81361 21.75 10.3898V11.9914C21.75 18.0924 17.142 21.0175 14.4017 22.2146L14.3746 22.2264C14.0348 22.3749 13.7154 22.5144 13.3484 22.6084C12.9609 22.7076 12.5493 22.75 12 22.75C11.4507 22.75 11.0391 22.7076 10.6516 22.6084C10.2846 22.5144 9.96523 22.3749 9.62543 22.2264L9.59833 22.2146C6.85803 21.0175 2.25 18.0924 2.25 11.9914V10.3899C2.25 8.81378 2.25 7.59836 2.2983 6.71136C2.32262 6.26464 2.36031 5.87556 2.42281 5.55122C2.48293 5.23924 2.5786 4.91516 2.76363 4.65154C2.95082 4.38484 3.22634 4.1859 3.50098 4.02641C3.78637 3.86067 4.14078 3.69846 4.55303 3.53099C5.3714 3.19852 6.51462 2.8072 7.99595 2.30014L8.72339 2.05112ZM11.25 2.83792C10.7525 2.94604 10.1152 3.16015 9.08062 3.5143L8.5078 3.71037C6.99521 4.22814 5.8921 4.60605 5.11759 4.92069C4.731 5.07774 4.4509 5.20935 4.25429 5.32353C4.15722 5.3799 4.09034 5.42642 4.04567 5.46273C4.0078 5.49351 3.99336 5.51095 3.99129 5.51349C3.98936 5.51663 3.97693 5.5374 3.95943 5.58654C3.93944 5.64265 3.91729 5.72309 3.89571 5.83506C3.85204 6.06169 3.81894 6.37301 3.79608 6.79292C3.75473 7.55226 3.75048 8.58298 3.75005 9.95941L11.25 7.45943V2.83792ZM12.75 2.83792V7.45943L20.25 9.95941C20.2495 8.58298 20.2453 7.55226 20.2039 6.79292C20.1811 6.37301 20.148 6.06169 20.1043 5.83506C20.0827 5.72309 20.0606 5.64265 20.0406 5.58654C20.0231 5.53737 20.0106 5.5166 20.0087 5.51348C20.0066 5.51092 19.9922 5.49349 19.9543 5.46273C19.9097 5.42642 19.8428 5.3799 19.7457 5.32353C19.5491 5.20935 19.269 5.07774 18.8824 4.92069C18.1079 4.60605 17.0048 4.22814 15.4922 3.71037L14.9194 3.5143C13.8848 3.16015 13.2475 2.94604 12.75 2.83792ZM11.25 9.04057L3.75 11.5406V11.9914C3.75 17.1665 7.6199 19.7135 10.1988 20.84C10.5703 21.0023 10.7848 21.0941 11.0236 21.1552C11.0931 21.173 11.1672 21.1888 11.25 21.2021V9.04057ZM12.75 21.2021V9.04057L20.25 11.5406V11.9914C20.25 17.1665 16.3801 19.7135 13.8012 20.84C13.4297 21.0023 13.2152 21.0941 12.9764 21.1552C12.9069 21.173 12.8328 21.1888 12.75 21.2021Z" fill="currentColor"/>',
|
||||
'sponsor' => '<path fill-rule="evenodd" clip-rule="evenodd" d="M5.62436 4.4241C3.96537 5.18243 2.75 6.98614 2.75 9.13701C2.75 11.3344 3.64922 13.0281 4.93829 14.4797C6.00072 15.676 7.28684 16.6675 8.54113 17.6345C8.83904 17.8642 9.13515 18.0925 9.42605 18.3218C9.95208 18.7365 10.4213 19.1004 10.8736 19.3647C11.3261 19.6292 11.6904 19.7499 12 19.7499C12.3096 19.7499 12.6739 19.6292 13.1264 19.3647C13.5787 19.1004 14.0479 18.7365 14.574 18.3218C14.8649 18.0925 15.161 17.8642 15.4589 17.6345C16.7132 16.6675 17.9993 15.676 19.0617 14.4797C20.3508 13.0281 21.25 11.3344 21.25 9.13701C21.25 6.98614 20.0346 5.18243 18.3756 4.4241C16.7639 3.68739 14.5983 3.88249 12.5404 6.02065C12.399 6.16754 12.2039 6.25054 12 6.25054C11.7961 6.25054 11.601 6.16754 11.4596 6.02065C9.40166 3.88249 7.23607 3.68739 5.62436 4.4241ZM12 4.45873C9.68795 2.39015 7.09896 2.10078 5.00076 3.05987C2.78471 4.07283 1.25 6.42494 1.25 9.13701C1.25 11.8025 2.3605 13.836 3.81672 15.4757C4.98287 16.7888 6.41022 17.8879 7.67083 18.8585C7.95659 19.0785 8.23378 19.292 8.49742 19.4998C9.00965 19.9036 9.55954 20.3342 10.1168 20.6598C10.6739 20.9853 11.3096 21.2499 12 21.2499C12.6904 21.2499 13.3261 20.9853 13.8832 20.6598C14.4405 20.3342 14.9903 19.9036 15.5026 19.4998C15.7662 19.292 16.0434 19.0785 16.3292 18.8585C17.5898 17.8879 19.0171 16.7888 20.1833 15.4757C21.6395 13.836 22.75 11.8025 22.75 9.13701C22.75 6.42494 21.2153 4.07283 18.9992 3.05987C16.901 2.10078 14.3121 2.39015 12 4.45873Z" fill="currentColor"/>',
|
||||
|
||||
@@ -68,6 +68,40 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="application-settings-section">
|
||||
<div class="application-settings-section-header">
|
||||
<div>
|
||||
<h2>UI scale</h2>
|
||||
<p>Choose the size of text and controls. Phones always use 100%.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="application-settings-section-body grid gap-3 sm:grid-cols-3">
|
||||
@foreach ([
|
||||
['value' => '80', 'label' => '80%', 'description' => 'Show more content on the screen.', 'size' => 'text-base'],
|
||||
['value' => '90', 'label' => '90%', 'description' => 'Smaller text and controls.', 'size' => 'text-lg'],
|
||||
['value' => '100', 'label' => '100%', 'description' => 'The default size.', 'size' => 'text-xl'],
|
||||
] as $option)
|
||||
<button type="button" @click="setUiScale('{{ $option['value'] }}')"
|
||||
class="group overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"
|
||||
:class="uiScale === '{{ $option['value'] }}'
|
||||
? 'border-coollabs! bg-coollabs/[0.06]! ring-2 ring-coollabs/25 dark:border-brand-light! dark:bg-brand-light/[0.08]! dark:ring-brand-light/25'
|
||||
: ''">
|
||||
<div class="flex h-20 items-center justify-center border-b border-neutral-200 bg-neutral-50 px-4 dark:border-white/[0.07] dark:bg-black/15">
|
||||
<span class="{{ $option['size'] }} font-semibold text-black dark:text-fg">Aa</span>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="text-sm font-semibold text-black dark:text-fg">{{ $option['label'] }}</span>
|
||||
<x-reicon name="check-circle" class="size-4 text-coollabs dark:text-brand-light"
|
||||
x-show="uiScale === '{{ $option['value'] }}'" x-cloak />
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-5 text-neutral-500 dark:text-fg-dim">{{ $option['description'] }}</p>
|
||||
</div>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="application-settings-section">
|
||||
<div class="application-settings-section-header">
|
||||
<div>
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
</a>
|
||||
<a href="{{ route('profile.appearance') }}" {{ wireNavigate() }} class="listbox-option">
|
||||
<span class="flex items-center gap-2">
|
||||
<x-reicon name="settings" class="size-4 opacity-80" />
|
||||
<x-reicon name="paintbrush" class="size-4 opacity-80" />
|
||||
Appearance
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@@ -159,11 +159,13 @@
|
||||
}
|
||||
document.querySelector('meta[name=theme-color]')?.setAttribute('content', theme.background);
|
||||
};
|
||||
window.storedUiScale = () => ['80', '90', '100'].includes(localStorage.uiScale) ? localStorage.uiScale : '100';
|
||||
window.applyStoredTheme = () => {
|
||||
const root = document.documentElement;
|
||||
const theme = localStorage.theme === 'purple' ? 'custom' : (localStorage.theme || 'dark');
|
||||
root.dataset.navStyle = localStorage.navStyle === 'floating' ? 'floating' : 'default';
|
||||
root.dataset.navItems = localStorage.navItems === 'flat' ? 'flat' : '3d';
|
||||
root.dataset.uiScale = window.storedUiScale();
|
||||
localStorage.theme = theme;
|
||||
if (localStorage.themeColor) localStorage.themeColor = window.normalizeThemeColor(localStorage.themeColor);
|
||||
if (theme === 'custom') {
|
||||
@@ -253,6 +255,7 @@
|
||||
navStyle: localStorage.getItem('navStyle') === 'floating' ? 'floating' : 'default',
|
||||
navItems: localStorage.getItem('navItems') === 'flat' ? 'flat' : '3d',
|
||||
chartTimes: localStorage.getItem('chartTimes') === 'utc' ? 'utc' : 'local',
|
||||
uiScale: window.storedUiScale(),
|
||||
presets: window.customThemePresets,
|
||||
// The custom theme dialog edits a draft; Save applies it. A null draft is the built-in Dark theme.
|
||||
dialogOpen: false,
|
||||
@@ -341,6 +344,11 @@
|
||||
localStorage.setItem('navItems', style);
|
||||
document.documentElement.dataset.navItems = style;
|
||||
},
|
||||
setUiScale(scale) {
|
||||
this.uiScale = scale;
|
||||
localStorage.setItem('uiScale', scale);
|
||||
document.documentElement.dataset.uiScale = scale;
|
||||
},
|
||||
setChartTimes(value) {
|
||||
this.chartTimes = value;
|
||||
localStorage.setItem('chartTimes', value);
|
||||
|
||||
Reference in New Issue
Block a user