1 tabbox { 2 -webkit-box-orient: vertical; 3 display: -webkit-box; 4 } 5 6 tabs { 7 display: -webkit-box; 8 background: -webkit-linear-gradient(white, rgb(243, 243, 243)); 9 border-bottom: 1px solid rgb(160, 160, 160); 10 margin: 0; 11 } 12 13 tabs > * { 14 -webkit-margin-start: 5px; 15 -webkit-transition: border-color .15s, background-color .15s; 16 background: rgba(160, 160, 160, .3); 17 border: 1px solid rgba(160, 160, 160, .3); 18 border-bottom: 0; 19 border-top-left-radius: 3px; 20 border-top-right-radius: 3px; 21 cursor: default; 22 display: block; 23 min-width: 4em; 24 padding: 2px 10px; 25 text-align: center; 26 } 27 28 tabs > :not([selected]):hover { 29 background: rgba(200, 200, 200, .3); 30 } 31 32 tabs > [selected] { 33 -webkit-transition: none; 34 background: white; 35 border-color: rgb(160, 160, 160); 36 margin-bottom: -1px; 37 position: relative; 38 z-index: 0; 39 } 40 41 tabs:focus { 42 outline: none; 43 } 44 45 html.focus-outline-visible tabs:focus > [selected] { 46 outline: 5px auto -webkit-focus-ring-color; 47 outline-offset: -2px; 48 } 49 50 tabpanels { 51 -webkit-box-flex: 1; 52 background: white; 53 box-shadow: 2px 2px 5px rgba(0, 0, 0, .2); 54 border: 1px solid rgb(160, 160, 160); 55 border-top: 0; 56 display: -webkit-box; 57 padding: 5px; 58 } 59 60 tabpanels > * { 61 -webkit-box-flex: 1; 62 display: none; 63 } 64 65 tabpanels > [selected] { 66 display: block; 67 } 68
