/* Kitty client theme. * * Ported 1:1 from the RuneLite client's side panels. Source of truth: * kittyAPI/kittyapi/src/main/java/net/runelite/client/plugins/kittyloader/ui/KittyTheme.java * kittyAPI/kittyapi/src/main/java/net/runelite/client/plugins/kittyloader/ui/KittyPanel.java * Change a value there first, then mirror it here. The reasoning behind each colour — in * particular why the accent is not the brand purple — lives in KittyTheme's comments. */ @font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/Barlow-Regular.ttf") format("truetype"); } @font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/Barlow-Medium.ttf") format("truetype"); } :root { /* KittyTheme.Builder defaults, in declaration order. */ --kitty-bg: #1c1c1e; --kitty-card-top: #303033; --kitty-card-bottom: #262629; --kitty-card-edge: rgba(255, 255, 255, .071); --kitty-text: #e4e4e4; --kitty-label: #c0c0c0; --kitty-muted: #7c7c7c; --kitty-divider: #343434; --kitty-track-top: #0f0f11; --kitty-track-bottom: #19191c; --kitty-track-rim: rgba(0, 0, 0, .353); --kitty-chip-well-top: #18181a; --kitty-chip-well-bottom: #202023; /* Text accent: 4.61:1 on a card. Deliberately NOT the #8c52c0 logo body, which measures 2.74:1. */ --kitty-accent: #b677ee; /* The same purple at fill strength, for bars and filled runs rather than glyphs. */ --kitty-accent-deep: #a25be1; --kitty-field: #1e1e20; --kitty-toggle-off-top: #18181a; --kitty-toggle-off-bottom: #1e1e21; --kitty-toggle-on-top: #8d3ed4; --kitty-toggle-on-bottom: #5e209c; --kitty-knob-top: #fcfcfc; --kitty-knob-bottom: #dedee2; --kitty-disabled: #2d2d2d; --kitty-track-inner: rgba(0, 0, 0, .235); --kitty-text-shadow: rgba(0, 0, 0, .588); /* Below the panel background, not above it: a recess the title sits in. */ --kitty-section-header: #131315; --kitty-knob-shadow: rgba(0, 0, 0, .275); /* Logo palette, quoted in KittyTheme for provenance. */ --kitty-logo-body: #8c52c0; --kitty-logo-shade: #5e308c; --kitty-logo-rim: #c49ce8; /* Geometry: KittyTheme arc/shadow, KittyPanel padding and row metrics. */ --kitty-arc: 10px; --kitty-panel-pad: 8px; --kitty-card-pad: 10px; --kitty-row-height: 30px; --kitty-title-bar-height: 34px; /* paintCard's shadow loop: four hard 1px steps, fainter as they fall away. No blur — the original fills four offset round-rects at alpha 25, 20, 15 and 10. */ --kitty-card-shadow: 0 1px 0 rgba(0, 0, 0, .098), 0 2px 0 rgba(0, 0, 0, .078), 0 3px 0 rgba(0, 0, 0, .059), 0 4px 0 rgba(0, 0, 0, .039); /* The top-edge highlight paintCard clips to the first `arc` rows, so it lights the top only. */ --kitty-card-lip: inset 0 1px 0 var(--kitty-card-edge); --kitty-card-surface: linear-gradient(180deg, var(--kitty-card-top), var(--kitty-card-bottom)); /* KittyPanel.paintHatch: 1px accent lines at alpha 26, stepping 15px horizontally — which is 15 * sin(45deg) = 10.607px measured perpendicular, the axis a CSS gradient repeats along. */ --kitty-hatch: repeating-linear-gradient(135deg, rgba(182, 119, 238, .102) 0 1px, transparent 1px 10.607px); --font: Barlow, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } :root{--bg:var(--kitty-bg);--panel:var(--kitty-card-bottom);--panel2:var(--kitty-field);--panel3:var(--kitty-card-top);--line:var(--kitty-card-bottom);--line2:var(--kitty-divider);--text:var(--kitty-text);--muted:var(--kitty-label);--green:var(--kitty-accent);--green2:var(--kitty-logo-rim);--danger:#ff7777;--amber:var(--kitty-logo-body);font-family:var(--font);color:var(--text);background:var(--bg);font-synthesis:none} *{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 62% -12%,#5e308c 0,transparent 31%),var(--bg);overflow-x:hidden}.ambient{position:fixed;pointer-events:none;border-radius:50%;filter:blur(110px);opacity:.1}.ambient-a{width:420px;height:420px;background:#a25be1;top:-220px;left:22%}.ambient-b{width:300px;height:300px;background:#8c52c0;right:-150px;top:46%}.hidden{display:none!important} .topbar{height:76px;border-bottom:1px solid #ffffff0c;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1c1c1ed9;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}.brand-mark,.brand-mark img{width:38px;height:38px;display:block}.brand-mark{border-radius:var(--kitty-arc);box-shadow:0 0 28px #b677ee25}.brand>span:last-child{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:15px}.brand small{color:var(--green);font-size:9px;text-transform:uppercase;letter-spacing:.18em;margin-top:6px}.account{display:flex;align-items:center;gap:10px;font-size:12px}.account>div{display:flex;flex-direction:column}.account small{color:var(--muted);margin-top:3px}.avatar{width:34px;height:34px;display:grid;place-items:center;background:#5e308c;color:var(--green2);font-weight:850;border-radius:var(--kitty-arc)}.account .button{margin-left:8px} .login-wrap{width:min(1120px,calc(100% - 40px));margin:auto;padding:9vh 0}.login-card{width:min(680px,100%);margin:auto;padding:68px 60px;text-align:center;border:1px solid #ffffff14;border-radius:var(--kitty-arc);background:linear-gradient(145deg,#303033ee,#262629f5);box-shadow:0 40px 120px #0009}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--green);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.17em}.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green)}h1{letter-spacing:-.052em}.login-card h1{font-size:clamp(42px,6vw,68px);line-height:1;margin:21px 0 18px}.login-card h1 span,.page-hero h1 span{color:var(--green)}p{color:var(--muted);line-height:1.65}.login-card p{max-width:500px;margin:0 auto 30px}.login-card>small{display:block;color:#7c7c7c;font-size:10px;margin-top:20px} .app{min-height:calc(100vh - 76px);display:grid;grid-template-columns:220px 1fr;position:relative;z-index:1}.sidebar{position:sticky;top:76px;height:calc(100vh - 76px);border-right:1px solid #ffffff0c;background:#18181aaa;padding:28px 16px 20px;display:flex;flex-direction:column;justify-content:space-between}.sidebar nav{display:grid;gap:6px}.nav{border:0;background:transparent;color:#7c7c7c;padding:12px 14px;border-radius:var(--kitty-arc);text-align:left;font:700 12px inherit;cursor:pointer;display:flex;gap:12px;align-items:center}.nav span{font-size:17px;color:#7c7c7c;width:18px;text-align:center}.nav:hover{background:#ffffff07;color:#e4e4e4}.nav.active{background:linear-gradient(90deg,#5e308c,#2d2d2d);color:var(--green2);box-shadow:inset 0 0 0 1px #b677ee16}.nav.active span{color:var(--green)} .workspace{width:min(1240px,calc(100% - 56px));margin:0 auto;padding:54px 0 100px}.view{display:none;animation:appear .25s ease-out}.view.active{display:block}.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:8px 0 38px}.page-hero h1{font-size:clamp(42px,5vw,64px);line-height:1.01;margin:15px 0 12px}.page-hero p,.page-title p{margin:0;max-width:630px}.page-title{margin:5px 0 35px}.page-title.split{display:flex;justify-content:space-between;align-items:flex-end;gap:25px}.page-title h1{font-size:48px;margin:13px 0 7px}.button,.icon-button,.switch{font:inherit;cursor:pointer}.button{border:0;border-radius:var(--kitty-arc);padding:10px 14px;font-size:11px;font-weight:750;white-space:nowrap}.primary{background:linear-gradient(140deg,var(--green2),#a25be1);color:#1c1c1e;box-shadow:0 10px 28px #b677ee17}.primary:hover{filter:brightness(1.07);transform:translateY(-1px)}.ghost{background:#ffffff07;border:1px solid #ffffff0f;color:#c0c0c0}.ghost:hover{background:#ffffff0d}.back{margin-bottom:28px} .stats{display:grid;gap:13px;margin-bottom:18px}.stats.four{grid-template-columns:repeat(4,1fr)}.stats.three{grid-template-columns:repeat(3,1fr)}.stats article{min-height:132px;padding:22px;border:1px solid var(--line);border-radius:var(--kitty-arc);background:linear-gradient(145deg,#2b2b2e,#262629)}.stats small,.panel-head small,.section-title small,.store-switch small{display:block;text-transform:uppercase;letter-spacing:.13em;color:#7c7c7c;font-size:8px;font-weight:850}.stats strong{display:block;font-size:31px;margin:13px 0 7px}.stats span{color:#7c7c7c;font-size:10px} .panel{background:linear-gradient(155deg,#2b2b2e,#262629);border:1px solid var(--line);border-radius:var(--kitty-arc);margin-top:15px;overflow:hidden}.panel.flush{margin-top:0}.panel-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.panel-head h2{font-size:15px;margin:5px 0 0}.plugin-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:15px}.plugin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.compact-grid{padding:16px}.plugin-card{position:relative;min-height:280px;border:1px solid var(--line);border-radius:var(--kitty-arc);padding:21px;background:linear-gradient(150deg,#303033,#262629);overflow:hidden;transition:.2s}.plugin-card:before{content:"";position:absolute;width:160px;height:160px;right:-90px;top:-90px;border-radius:50%;background:#b677ee0d;filter:blur(10px)}.plugin-card:hover{border-color:#343434;transform:translateY(-2px);box-shadow:0 16px 42px #0004}.compact-card{min-height:230px}.plugin-card-top{display:flex;justify-content:space-between;align-items:flex-start}.plugin-glyph{width:39px;height:39px;border-radius:var(--kitty-arc);display:grid;place-items:center;background:#5e308c;color:var(--green2);font-size:16px;font-weight:900;box-shadow:inset 0 0 0 1px #b677ee18}.plugin-glyph.large{width:66px;height:66px;border-radius:var(--kitty-arc);font-size:25px;flex:0 0 auto}.plugin-card h3{margin:21px 0 8px;font-size:16px}.plugin-card p{font-size:11px;min-height:38px;margin:0}.plugin-metrics{display:flex;gap:18px;margin:20px 0 14px;color:#7c7c7c;font-size:10px}.plugin-metrics strong{color:#e4e4e4;margin-right:3px}.owner-line{display:block;color:#7c7c7c;margin:-4px 0 13px}.card-action{position:absolute;left:20px;right:20px;bottom:20px;width:calc(100% - 40px);background:#ffffff08;border:1px solid #ffffff0e;color:#c0c0c0}.badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:var(--kitty-arc);font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;background:#ffffff08;color:#c0c0c0}.badge.success{color:var(--green);background:#b677ee14}.badge.waiting{color:var(--amber);background:#8c52c012}.badge.danger{color:var(--danger);background:#ff777712}.empty{color:#7c7c7c;text-align:center;padding:28px;font-size:11px}.big-empty{grid-column:1/-1;padding:80px;border:1px dashed var(--line);border-radius:var(--kitty-arc)} .plugin-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:30px;border:1px solid var(--line);border-radius:var(--kitty-arc);background:linear-gradient(130deg,#303033,#262629 68%);box-shadow:0 20px 60px #0003}.plugin-identity{display:flex;align-items:center;gap:20px}.plugin-identity h1{font-size:42px;margin:7px 0 5px}.plugin-identity p{margin:0;max-width:600px}.store-switch{display:flex;align-items:center;gap:16px;border:1px solid #ffffff0e;border-radius:var(--kitty-arc);padding:14px 16px;background:#1e1e20bd;min-width:265px}.store-switch>div{display:flex;flex-direction:column;flex:1}.store-switch strong{font-size:13px;margin:4px 0 2px}.store-switch span{color:#7c7c7c;font-size:9px}.switch{width:43px;height:24px;border:0;border-radius:var(--kitty-arc);background:#2d2d2d;padding:3px;transition:.2s}.switch i{display:block;width:18px;height:18px;border-radius:50%;background:#7c7c7c;transition:.2s}.switch.on{background:#a25be1}.switch.on i{transform:translateX(19px);background:var(--green2)}.section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:42px 0 16px}.section-title h2{font-size:22px;margin:5px 0 4px}.section-title p{font-size:11px;margin:0}.customer-title{margin-top:48px}.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.price-card{padding:19px;border:1px solid var(--line);border-radius:var(--kitty-arc);background:linear-gradient(145deg,#2b2b2e,#262629)}.price-card>div:first-child{display:flex;justify-content:space-between;align-items:center}.price-card>div small{color:#7c7c7c;font-size:8px}.price-card h3{font-size:13px;margin:20px 0 8px}.price-card .price{font-size:25px;display:block}.price-card ul{list-style:none;padding:0;margin:18px 0;color:#7c7c7c;font-size:10px;line-height:1.9}.price-card ul li:before{content:"✓";color:var(--green);margin-right:7px}.price-card .button{width:100%}.muted-card{opacity:.58}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;padding:12px 21px;color:#7c7c7c;text-transform:uppercase;letter-spacing:.11em;font-size:8px;border-bottom:1px solid var(--line)}td{padding:14px 21px;border-bottom:1px solid #ffffff08;color:#c0c0c0}tbody tr:last-child td{border-bottom:0}td strong{display:block;color:var(--text);font-size:11px}td small{display:block;margin-top:4px}.mono{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#7c7c7c} dialog{width:min(540px,calc(100% - 28px));border:1px solid #343434;border-radius:var(--kitty-arc);padding:0;background:#262629;color:var(--text);box-shadow:0 36px 120px #000e}dialog::backdrop{background:#0f0f11dc;backdrop-filter:blur(8px)}dialog form{padding:25px}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}.dialog-head small{color:var(--green);font-size:8px;letter-spacing:.16em;font-weight:850}.dialog-head h2{font-size:20px;margin:5px 0 0}.icon-button{border:0;background:transparent;color:#7c7c7c;font-size:27px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:block;margin-top:14px;color:#7c7c7c;font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}input,select{display:block;width:100%;margin-top:7px;padding:12px 13px;border:1px solid #343434;border-radius:var(--kitty-arc);background:#18181a;color:var(--text);outline:none;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}select{font-family:inherit}input:focus,select:focus{border-color:#b677ee;box-shadow:0 0 0 3px #b677ee13}.hint{font-size:10px;margin:16px 0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.form-error{color:var(--danger);background:#ff77770d;border:1px solid #ff777723;border-radius:8px;padding:10px;font-size:10px}.toast{position:fixed;right:22px;bottom:22px;z-index:50;background:#303033;color:#e4e4e4;border-radius:var(--kitty-arc);padding:12px 16px;font-size:11px;font-weight:800;box-shadow:0 16px 50px #000a}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(max-width:1050px){.stats.four{grid-template-columns:repeat(2,1fr)}.plugin-grid{grid-template-columns:repeat(2,1fr)}.plugin-strip{grid-template-columns:repeat(2,1fr)}.price-grid{grid-template-columns:repeat(2,1fr)}.plugin-hero{align-items:flex-start;flex-direction:column}.store-switch{width:100%}} @media(max-width:760px){.topbar{padding:0 16px}.account>div{display:none}.app{display:block}.sidebar{position:sticky;top:76px;height:auto;border-right:0;border-bottom:1px solid #ffffff0c;padding:8px 12px;z-index:15;background:#1c1c1efa}.sidebar nav{display:grid;grid-template-columns:repeat(4,1fr)}.nav{justify-content:center;padding:10px 4px;font-size:9px;gap:5px}.nav span{font-size:14px;width:auto}.workspace{width:min(100% - 28px,1240px);padding:32px 0 70px}.page-hero,.page-title.split{align-items:flex-start;flex-direction:column}.page-hero h1{font-size:43px}.page-title h1{font-size:39px}.stats.four,.stats.three,.plugin-grid,.plugin-strip,.price-grid{grid-template-columns:1fr}.plugin-card{min-height:250px}.plugin-identity{align-items:flex-start}.plugin-glyph.large{width:52px;height:52px}.plugin-identity h1{font-size:31px}.section-title{align-items:flex-start}.field-row{grid-template-columns:1fr}.login-card{padding:45px 22px}.login-card h1{font-size:44px}} .skip-link{position:fixed;left:16px;top:-60px;z-index:100;background:#fff;color:#111;padding:12px 16px;border-radius:8px}.skip-link:focus{top:12px}:focus-visible{outline:3px solid var(--green);outline-offset:3px}.actions{display:flex;align-items:center;gap:9px}.nav{text-decoration:none}.wide-dialog{width:min(760px,calc(100% - 28px))}textarea{display:block;width:100%;margin-top:7px;padding:12px 13px;border:1px solid #343434;border-radius:var(--kitty-arc);background:#18181a;color:var(--text);outline:none;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical}textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #b677ee13}.media-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px} .accent-raisin{--plugin-accent:#b677ee}.accent-deep{--plugin-accent:#a25be1}.accent-grape{--plugin-accent:#8c52c0}.accent-plum{--plugin-accent:#5e308c}.accent-lilac{--plugin-accent:#c49ce8} .merch-panel{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(320px,.95fr);margin-top:16px;border:1px solid var(--line);border-radius:var(--kitty-arc);overflow:hidden;background:linear-gradient(140deg,color-mix(in srgb,var(--plugin-accent) 12%,#262629),#262629 50%)}.merch-media{min-height:360px;background:#0f0f11;display:grid;place-items:center;overflow:hidden}.listing-media{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}.listing-placeholder{color:#7c7c7c;font-size:12px;letter-spacing:.06em}.merch-copy{padding:34px}.merch-copy>small{font-size:9px;font-weight:900;letter-spacing:.16em;color:var(--plugin-accent)}.merch-copy h2{font-size:28px;line-height:1.12;margin:11px 0 16px}.rich-preview{color:#c0c0c0;font-size:12px;line-height:1.7;max-height:190px;overflow:auto}.rich-preview h2,.rich-preview h3{color:#e4e4e4}.rich-preview a{color:var(--plugin-accent)}.readiness{list-style:none;padding:0;margin:20px 0;font-size:10px;color:#c49ce8;display:flex;gap:7px;flex-wrap:wrap}.readiness li{background:#8c52c012;border:1px solid #8c52c025;padding:6px 8px;border-radius:var(--kitty-arc)}.readiness li:before{content:"○";margin-right:5px}.readiness li.done{color:var(--green);background:#b677ee10;border-color:#b677ee25}.readiness li.done:before{content:"✓"}.merch-copy .actions{margin-top:20px;flex-wrap:wrap} @media(max-width:850px){.merch-panel{grid-template-columns:1fr}.merch-media,.listing-media{min-height:240px}.media-fields{grid-template-columns:1fr}.actions{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} .payment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.payment-card{display:grid;grid-template-columns:52px 1fr;gap:17px;padding:24px;border:1px solid var(--line);border-radius:var(--kitty-arc);background:linear-gradient(145deg,#2b2b2e,#262629)}.payment-card>div:nth-child(2){min-width:0}.payment-logo{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--kitty-arc);font-size:21px;font-weight:900}.stripe-logo{color:#c8c5ff;background:#635bff26;box-shadow:inset 0 0 0 1px #635bff42}.payment-card small{color:#7c7c7c;font-size:8px;font-weight:850;letter-spacing:.14em}.payment-card h2{margin:5px 0 7px;font-size:20px}.payment-card p{margin:0;font-size:10px}.payment-state{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:15px;border-top:1px solid #ffffff0b}.payment-state code,.callback-list code{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#c0c0c0;overflow-wrap:anywhere}.payment-card>.button{grid-column:1/-1;width:100%;padding:12px}.payment-card>.button:disabled{opacity:.55;cursor:not-allowed}.payment-callbacks{margin-top:18px}.payment-callbacks .panel-head p{margin:6px 0 0;font-size:10px}.callback-list{padding:8px 22px 18px}.callback-list>div{display:grid;grid-template-columns:190px 1fr;gap:15px;padding:13px 0;border-bottom:1px solid #ffffff08}.callback-list>div:last-child{border-bottom:0}.callback-list span{color:#7c7c7c;font-size:10px} @media(max-width:900px){.payment-grid{grid-template-columns:1fr}}@media(max-width:600px){.callback-list>div{grid-template-columns:1fr;gap:6px}} .plugin-strip,.plugin-grid{grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr))} .plugin-card,.compact-card{min-height:310px;display:flex;flex-direction:column;overflow:hidden} .plugin-card-copy{min-width:0;margin-top:20px}.plugin-id{display:block;color:#7c7c7c;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plugin-card h3{margin:8px 0 8px;font-size:17px;line-height:1.25}.plugin-card p{min-height:0;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.plugin-metrics{margin:19px 0 17px;padding-top:14px;border-top:1px solid #ffffff0a}.plugin-card-footer{display:grid;gap:10px;margin-top:auto}.owner-line{display:block;min-height:13px;margin:0;color:#7c7c7c;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-action{position:static;left:auto;right:auto;bottom:auto;width:100%;display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:#ffffff08;border:1px solid #ffffff0e;color:#e4e4e4}.card-action b{color:var(--green);font-size:13px}.card-action:hover{border-color:#b677ee35;background:#b677ee0c} .plugin-hero{align-items:center}.plugin-hero-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.publishing-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:14px;padding:16px 19px;border:1px solid var(--line);border-radius:var(--kitty-arc);background:#1e1e20}.publishing-bar>div{display:flex;flex-direction:column}.publishing-bar small{color:#7c7c7c;font-size:8px;font-weight:850;letter-spacing:.14em}.publishing-bar strong{font-size:13px;margin:4px 0}.publishing-bar span{color:#7c7c7c;font-size:9px}.merch-copy h2{margin-bottom:7px}.merch-tagline{margin:0 0 18px;color:color-mix(in srgb,var(--plugin-accent) 72%,#fff);font-size:13px;line-height:1.55}.listing-placeholder{padding:30px;text-align:center} .storefront-dialog{width:min(900px,calc(100% - 28px));max-height:min(900px,calc(100vh - 36px));padding:0;overflow:hidden}.storefront-dialog form{display:flex;flex-direction:column;width:100%;height:min(900px,calc(100vh - 36px));min-height:0;overflow:hidden;padding:0}.storefront-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 28px 28px;scrollbar-gutter:stable}.storefront-dialog .dialog-head{position:sticky;top:0;z-index:3;margin:0 -28px 18px;padding:26px 28px 20px;background:linear-gradient(#262629 82%,#26262900)}.dialog-head p{margin:7px 0 0;font-size:10px}.editor-block{padding:20px;margin:14px 0;border:1px solid var(--line);border-radius:var(--kitty-arc);background:#1e1e20aa}.editor-block h3{margin:0 0 12px;color:var(--text);font-size:12px}.editor-block h3 small{margin-left:6px;color:#7c7c7c;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.editor-copy{margin:0 0 3px;font-size:10px}.field-status{display:block;margin-top:7px;color:#7c7c7c;font-size:9px;line-height:1.45;text-transform:none;letter-spacing:0}.field-status.selected{color:var(--green)}.field-status.error{color:#ff7d7d}.media-selection-preview{display:block;width:100%;height:112px;margin-top:10px;object-fit:cover;border:1px solid var(--line);border-radius:var(--kitty-arc);background:#0f0f11}.storefront-footer{flex:0 0 auto;padding:13px 28px 17px;border-top:1px solid #343434;background:#262629f5;box-shadow:0 -18px 44px #0007}.storefront-actions{margin:0;justify-content:flex-end}.storefront-actions .button.primary{min-width:170px}.storefront-actions .button:disabled{cursor:wait;opacity:.7}.upload-progress{margin:0 0 11px}.upload-progress>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;color:#c0c0c0;font-size:9px;font-weight:750}.upload-progress strong{color:var(--green);font-size:9px}.upload-progress progress{display:block;width:100%;height:6px;border:0;border-radius:var(--kitty-arc);overflow:hidden;background:#2d2d2d;accent-color:var(--green)}.upload-progress progress::-webkit-progress-bar{background:#2d2d2d}.upload-progress progress::-webkit-progress-value{background:linear-gradient(90deg,var(--green),var(--green2))}.upload-progress progress::-moz-progress-bar{background:linear-gradient(90deg,var(--green),var(--green2))}.upload-progress.error span,.upload-progress.error strong{color:var(--danger)} @media(max-width:1180px){.plugin-strip,.plugin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.plugin-strip,.plugin-grid{grid-template-columns:1fr}.plugin-card,.compact-card{min-height:290px}.plugin-hero-actions{width:100%}.plugin-hero-actions .button{flex:1;text-align:center}.publishing-bar{align-items:flex-start}.storefront-scroll{padding-left:18px;padding-right:18px}.storefront-dialog .dialog-head{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}.editor-block{padding:16px}.storefront-footer{padding:12px 18px max(14px,env(safe-area-inset-bottom))}.storefront-actions .button{flex:1}.media-selection-preview{height:96px}} @media(max-width:900px){} input:disabled{opacity:.5;cursor:not-allowed} /* --------------------------------------------------------------------------- * Client panel language. * * This is the surface closest to the client: a fixed-width rail of nav rows * beside a scrolling stack of cards, which is exactly KittyPanel's shape. The * three registers below are its whole vocabulary — raised card, recessed well, * and the accent reserved for headings and filled controls. * ------------------------------------------------------------------------- */ .panel, .stats article, .plugin-card, .price-card, .payment-card, .plugin-hero, .editor-block, .login-card, .merch-panel, dialog { border-radius: var(--kitty-arc); background: var(--kitty-card-surface); box-shadow: var(--kitty-card-lip), var(--kitty-card-shadow); } /* A section title is a recess the card sits under, not a second raised bar. */ .panel-head, .publishing-bar, .store-switch { border-radius: var(--kitty-arc); background: var(--kitty-section-header); box-shadow: inset 0 1px 0 var(--kitty-track-inner); } /* Inputs are wells cut into the card, so they sit below it. */ input, select, textarea { border-radius: var(--kitty-arc); border-color: transparent; background: var(--kitty-field); box-shadow: inset 0 1px 0 var(--kitty-track-inner); } input:focus, select:focus, textarea:focus { border-color: var(--kitty-accent); box-shadow: 0 0 0 3px rgba(182, 119, 238, .13); } /* The rail. KittyPanel rows are ROW_HEIGHT (30px) tall with PANEL_PAD gutters. */ .sidebar { background: var(--kitty-bg); background-image: var(--kitty-hatch); } .nav { min-height: var(--kitty-row-height); border-radius: var(--kitty-arc); color: var(--kitty-label); } .nav:hover { color: var(--kitty-text); background: var(--kitty-chip-well-bottom); } .nav.active { color: var(--kitty-text); background: linear-gradient(180deg, var(--kitty-toggle-on-top), var(--kitty-toggle-on-bottom)); box-shadow: var(--kitty-card-lip); } .nav.active span { color: var(--kitty-knob-top); } /* The one metric not taken 1:1. KittyPanel's TITLE_BAR_HEIGHT is 34px, sized for a * 225px-wide sidebar; this topbar carries a 38px brand mark and a 34px avatar, which * do not fit in 34px. The band keeps its height and takes the hatch backdrop. */ .topbar { background-image: var(--kitty-hatch); } /* KittyToggle: an off switch is a recess, an on switch is the logo's * body-over-shade pair, and the knob is the one near-white in the palette. */ .switch { background: linear-gradient(180deg, var(--kitty-toggle-off-top), var(--kitty-toggle-off-bottom)); box-shadow: inset 0 1px 0 var(--kitty-track-inner), 0 0 0 1px var(--kitty-track-rim); } .switch.on { background: linear-gradient(180deg, var(--kitty-toggle-on-top), var(--kitty-toggle-on-bottom)); } .switch i, .switch.on i { background: linear-gradient(180deg, var(--kitty-knob-top), var(--kitty-knob-bottom)); box-shadow: 0 1px 2px var(--kitty-knob-shadow); } /* Filled controls share accentDeep. */ .primary { color: var(--kitty-bg); background: var(--kitty-accent-deep); box-shadow: var(--kitty-card-shadow); } .primary:hover { background: var(--kitty-accent); filter: none; } .toast { border-radius: var(--kitty-arc); color: var(--kitty-text); background: var(--kitty-card-surface); box-shadow: var(--kitty-card-lip), var(--kitty-card-shadow); } /* The mark is 657x920. Give it a height and let the width follow, or it squashes. */ .brand-mark, .brand-mark img { width: auto; height: 38px; } /* Preserve production-only repository, publication and access controls under the skin. */ .repo, .store-access-panel, .publishing-bar, .role-callout { background: var(--kitty-card-surface); } .discord-button { color: var(--kitty-bg); background: var(--kitty-accent-deep); } .discord-button:hover { background: var(--kitty-accent); } .sidebar-foot { color: var(--kitty-muted); } .sidebar-foot i { background: var(--kitty-accent); }