1tabbox { 2 -webkit-box-orient: vertical; 3 display: -webkit-box; 4} 5 6tabs { 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 13tabs > * { 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 28tabs > :not([selected]):hover { 29 background: rgba(200, 200, 200, .3); 30} 31 32tabs > [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 41tabs:focus { 42 outline: none; 43} 44 45html.focus-outline-visible tabs:focus > [selected] { 46 outline: 5px auto -webkit-focus-ring-color; 47 outline-offset: -2px; 48} 49 50tabpanels { 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 60tabpanels > * { 61 -webkit-box-flex: 1; 62 display: none; 63} 64 65tabpanels > [selected] { 66 display: block; 67} 68