create-pmos 0.133.0 → 0.135.0

package/workspace/public/pm/c3-settings.css

@@ -0,0 +1,74 @@
+/* pm/c3-settings.css — the console3 Settings page (c3-settings.js, initiative console3-settings). The page is drawn with console3
+ * classes (.card.sect, ul.list > li.nrow, .seg, .tag, .chip2, .fold, .lh). The rules here are the approved mockup's Settings rules
+ * (mockup src/pages/35-settings.css, .mk-settings), under the product class .c3set, plus the switch and the effects of two settings. */
+/* The controls are primitives.js buttons (.pmc-btn); this resets them to the look each console3 class gives them. */
+:where(.c3set) .c3set-b{height:auto;min-height:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;gap:6px;justify-content:flex-start;line-height:inherit;white-space:normal;text-align:left}
+.c3 .c3set,.c3 .c3set .calwrap,.c3 .c3set .calwrap>*,.c3 .c3set .st-hd .tools{min-width:0;max-width:100%}
+.c3 .c3set .st-hd{display:flex;gap:var(--sp-3);align-items:center;justify-content:space-between;flex-wrap:wrap}
+.c3 .c3set .st-lead{font-size:var(--fs-3)}
+.c3 .c3set .st-hd .tools{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
+.c3 .c3set .st-hd input[type=text]{width:240px;max-width:100%}
+.c3 .c3set .st-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--sp-4);align-items:start}
+.c3 .c3set .st-nav{position:sticky;top:12px}
+.c3 .c3set .st-nav .list>li{display:block}
+.c3 .c3set .st-nav .nrow{display:grid;width:100%;cursor:pointer;border-radius:8px;padding:var(--sp-2);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--border)}
+.c3 .c3set .st-nav .nrow[aria-current=true]{background:var(--muted)}
+.c3 .c3set .st-nav .nrow .nb{padding-right:0;align-self:center}
+.c3 .c3set .st-nav .nrow[aria-current=true] .tt{color:var(--acc)}
+.c3 .c3set .st-body,.c3 .c3set .st-sec{display:grid;gap:var(--sp-4);min-width:0}
+.c3 .c3set .st-seg{display:none}
+.c3 .c3set .nrow{cursor:default}
+.c3 .c3set .nrow .nb{padding-right:0}
+.c3 .c3set .list>.nrow{grid-template-columns:auto minmax(0,1fr) auto}
+.c3 .c3set .nrow.st-row{grid-template-columns:minmax(0,1fr) auto;padding:var(--sp-3) var(--sp-2)}
+.c3 .c3set .nrow.st-row.has-ki{grid-template-columns:auto minmax(0,1fr) auto}
+.c3 .c3set .acts{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:0}
+.c3 .c3set .st-row.wide{grid-template-columns:minmax(0,1fr)}
+.c3 .c3set .st-row.wide .acts{display:grid;justify-content:stretch}
+.c3 .c3set .st-row.wide textarea{width:100%;min-height:112px;resize:vertical}
+.c3 .c3set .st-row .acts input[type=text]{width:340px;max-width:100%}
+.c3 .c3set .st-help{font-size:var(--fs-2);line-height:1.4;margin-top:4px}
+.c3 .c3set .nb>.fold{margin-top:6px}
+.c3 .c3set .st-count{font-size:var(--fs-1)}
+.c3 .c3set .st-now{font-size:var(--fs-3);padding-top:var(--sp-2)}
+.c3 .c3set .st-pad{padding:var(--sp-2)}
+.c3 .c3set .st-wrap-text{overflow-wrap:anywhere}
+.c3 .c3set .iacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:var(--sp-2)}
+.c3 .c3set .st-flow{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:6px}
+.c3 .c3set .st-stages{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
+.c3 .c3set .st-stages li{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
+.c3 .c3set .st-stages input[type=text]{flex:1 1 160px}
+.c3 .c3set .st-dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}
+.c3 .c3set .st-cat-dot{width:7px;height:7px;border-radius:50%;background:var(--muted-foreground)}
+.c3 .c3set .st-cat-dot[data-cat="Plan"]{background:var(--ring)}
+.c3 .c3set .st-cat-dot[data-cat="Do"]{background:var(--acc)}
+.c3 .c3set .st-cat-dot[data-cat="Learn"]{background:var(--foreground)}
+.c3 .c3set .tag.ok{color:var(--foreground)}
+.c3 .c3set .tag.warn{color:var(--warning)}
+.c3 .c3set .tag.acc{color:var(--acc)}
+.c3 .c3set .sw{position:relative;flex:0 0 auto;width:38px;height:22px;min-height:0;padding:0;border-radius:8px;border:1px solid var(--border);background:var(--muted);transition:background .15s,border-color .15s}
+.c3 .c3set .sw-dot{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted-foreground);transition:transform .15s,background .15s}
+.c3 .c3set .sw[aria-checked=true]{background:var(--acc);border-color:var(--acc)}
+.c3 .c3set .sw[aria-checked=true] .sw-dot{transform:translateX(16px);background:var(--on-accent)}
+.c3 .c3set .sw:disabled,.c3 .c3set .seg button:disabled,.c3 .c3set select:disabled,.c3 .c3set input:disabled{opacity:.5;cursor:not-allowed}
+.c3 .c3set :is(input,select,textarea,button):focus-visible{outline:2px solid var(--ring);outline-offset:1px}
+@media (hover:hover){.c3 .c3set .st-nav .nrow:hover{background:var(--muted)}}
+@media (max-width:860px){
+  .c3 .c3set .st-wrap{grid-template-columns:minmax(0,1fr)}
+  .c3 .c3set .st-nav{display:none}
+  .c3 .c3set .st-seg{display:block;overflow-x:auto;max-width:100%}
+  .c3 .c3set .st-seg .seg{flex-wrap:nowrap}
+  .c3 .c3set .st-seg .seg button{white-space:nowrap}
+  .c3 .c3set .list>.nrow.st-row{grid-template-columns:minmax(0,1fr)}
+  .c3 .c3set .list>.nrow.st-row>.acts{grid-column:auto}
+  .c3 .c3set .list>.nrow.st-row.has-ki{grid-template-columns:auto minmax(0,1fr)}
+  .c3 .c3set .list>.nrow.st-row.has-ki>.acts{grid-column:2}
+  .c3 .c3set .list>.nrow:not(.st-row){grid-template-columns:auto minmax(0,1fr)}
+  .c3 .c3set .list>.nrow:not(.st-row)>.acts{grid-column:2}
+  .c3 .c3set .acts{justify-content:flex-start}
+}
+@media (prefers-reduced-motion:reduce){.c3 .c3set .sw,.c3 .c3set .sw-dot{transition:none}}
+.c3 .c3pg-pane:has(>.c3set){grid-template-columns:minmax(0,1fr)}
+/* The effects of two Day and time settings, on the console root. */
+[data-c3-tint="off"][data-daypart]{background-image:none!important}
+[data-c3-strip="off"] .c3pg-daylight{display:none!important}