tabs.css
ASCII text
1x-notebook > x-tab { 2display: none; 3order: 2; 4width: 100%; 5} 6 7x-notebook > label:has(input[type="radio"]:checked) + x-tab { 8display: block; 9} 10 11x-notebook > label > input[type="radio"] { 12clip-path: inset(50%) !important; 13height: 1px !important; 14overflow: hidden !important; 15position: absolute !important; 16white-space: nowrap !important; 17width: 1px !important; 18opacity: 0 !important; 19} 20 21x-notebook > label { 22display: flex; 23background: var(--color-tab); 24color: var(--color-tab-text); 25height: var(--height-tab); 26min-width: var(--width-tab); 27justify-content: var(--align-tab); 28 29cursor: pointer; 30border: var(--border-tab); 31border-radius: var(--radius-tab); 32} 33 34x-notebook > label:hover { 35background: var(--color-tab-hover); 36color: var(--color-tab-hover-text); 37} 38 39x-notebook > label:has(input[type="radio"]:checked) { 40background: var(--color-tab-selected); 41color: var(--color-tab-selected-text); 42border: var(--border-tab-selected); 43} 44 45x-notebook > label:has(input[type="radio"]:checked):hover { 46background: var(--color-tab-hover-selected); 47color: var(--color-tab-hover-selected-text); 48} 49 50x-notebook { 51display: flex; 52flex-flow: row wrap; 53justify-content: var(--justify-tab-row); 54} 55