openvibers/openvibe.shared ov-parts.css

ov-parts.css

main 9.4 KB · 58 lines · css

Raw HistoryBlame Repository
1/* Generated by scripts/build-styles.js from showcase.js PARTS_CSS. Do not edit. */
2.ov-parts-r,.ov-parts-bar{display:none}
3.ov-parts-bar{gap:4px;margin:18px 0 14px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--text-primary,#e6edf7) 5%,transparent);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}.ov-parts-bar::-webkit-scrollbar{display:none}
4.ov-parts-bar label{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 14px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--text-secondary,#a8b3c4);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s}
5.ov-parts-bar label:active{transform:scale(.97)}
6.pick .ov-part+.ov-part{margin-top:26px}.pick .ov-parts-bar{margin-top:10px}
7.ov-parts-n{min-width:18px;padding:0 6px;border-radius:999px;font-size:11.5px;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--text-primary,#e6edf7) 9%,transparent)}
8@supports selector(:has(*)){@media (max-width:900px){
9.ov-parts:not(.is-stacked):not(.ov-parts--front)>.ov-parts-r{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
10.ov-parts:not(.is-stacked):not(.ov-parts--front)>.ov-parts-bar{display:flex}
11.ov-parts:not(.is-stacked):not(.ov-parts--front)>.ov-part>.sc-sec>h2:first-child,.ov-parts:not(.is-stacked):not(.ov-parts--front)>.ov-part>.sc-sec>.sc-fold>summary>h2{display:none}
12.ov-parts:not(.is-stacked):not(.ov-parts--front)>.ov-part>.sc-sec{margin-top:0;padding-top:0;border-top:0}
13.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(1):checked)>.ov-parts-bar>label:nth-of-type(1){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
14.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(2):checked)>.ov-parts-bar>label:nth-of-type(2){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
15.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(3):checked)>.ov-parts-bar>label:nth-of-type(3){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
16.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(4):checked)>.ov-parts-bar>label:nth-of-type(4){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
17.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(5):checked)>.ov-parts-bar>label:nth-of-type(5){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
18.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(6):checked)>.ov-parts-bar>label:nth-of-type(6){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
19.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(7):checked)>.ov-parts-bar>label:nth-of-type(7){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
20.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(8):checked)>.ov-parts-bar>label:nth-of-type(8){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
21.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(1):checked)>.ov-part:not(:nth-of-type(1)){display:none}
22.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(2):checked)>.ov-part:not(:nth-of-type(2)){display:none}
23.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(3):checked)>.ov-part:not(:nth-of-type(3)){display:none}
24.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(4):checked)>.ov-part:not(:nth-of-type(4)){display:none}
25.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(5):checked)>.ov-part:not(:nth-of-type(5)){display:none}
26.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(6):checked)>.ov-part:not(:nth-of-type(6)){display:none}
27.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(7):checked)>.ov-part:not(:nth-of-type(7)){display:none}
28.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:nth-of-type(8):checked)>.ov-part:not(:nth-of-type(8)){display:none}
29.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-parts-r:focus-visible)>.ov-parts-bar{outline:2px solid var(--accent,#3b82f6);outline-offset:2px}
30.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-part:target,>.ov-part :target)>.ov-part:not(:target):not(:has(:target)){display:none}
31.ov-parts:not(.is-stacked):not(.ov-parts--front):has(>.ov-part:target,>.ov-part :target)>.ov-part:is(:target,:has(:target)){display:block!important}
32}@media (max-width:600px){
33.ov-parts.ov-parts--front>.ov-parts-r{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
34.ov-parts.ov-parts--front>.ov-parts-bar{display:flex}
35.ov-parts.ov-parts--front>.ov-part>.sc-sec>h2:first-child,.ov-parts.ov-parts--front>.ov-part>.sc-sec>.sc-fold>summary>h2{display:none}
36.ov-parts.ov-parts--front>.ov-part>.sc-sec{margin-top:0;padding-top:0;border-top:0}
37.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(1):checked)>.ov-parts-bar>label:nth-of-type(1){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
38.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(2):checked)>.ov-parts-bar>label:nth-of-type(2){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
39.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(3):checked)>.ov-parts-bar>label:nth-of-type(3){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
40.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(4):checked)>.ov-parts-bar>label:nth-of-type(4){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
41.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(5):checked)>.ov-parts-bar>label:nth-of-type(5){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
42.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(6):checked)>.ov-parts-bar>label:nth-of-type(6){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
43.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(7):checked)>.ov-parts-bar>label:nth-of-type(7){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
44.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(8):checked)>.ov-parts-bar>label:nth-of-type(8){background:var(--bg-card,#16213a);color:var(--text-primary,#e6edf7);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
45.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(1):checked)>.ov-part:not(:nth-of-type(1)){display:none}
46.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(2):checked)>.ov-part:not(:nth-of-type(2)){display:none}
47.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(3):checked)>.ov-part:not(:nth-of-type(3)){display:none}
48.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(4):checked)>.ov-part:not(:nth-of-type(4)){display:none}
49.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(5):checked)>.ov-part:not(:nth-of-type(5)){display:none}
50.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(6):checked)>.ov-part:not(:nth-of-type(6)){display:none}
51.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(7):checked)>.ov-part:not(:nth-of-type(7)){display:none}
52.ov-parts.ov-parts--front:has(>.ov-parts-r:nth-of-type(8):checked)>.ov-part:not(:nth-of-type(8)){display:none}
53.ov-parts.ov-parts--front:has(>.ov-parts-r:focus-visible)>.ov-parts-bar{outline:2px solid var(--accent,#3b82f6);outline-offset:2px}
54.ov-parts.ov-parts--front:has(>.ov-part:target,>.ov-part :target)>.ov-part:not(:target):not(:has(:target)){display:none}
55.ov-parts.ov-parts--front:has(>.ov-part:target,>.ov-part :target)>.ov-part:is(:target,:has(:target)){display:block!important}
56}}
57html[data-ov-motion=off] .ov-parts-bar label{transition:none}
58