(original) (raw)

@charset "UTF-8"; .transformer-tabs ul { list-style: none; padding: 0; margin: 0; border-bottom: 3px solid white; } .transformer-tabs li { display: inline-block; padding: 0; vertical-align: bottom; } .transformer-tabs li:nth-child(1) .active { color: #c6a0d5; border-bottom-color: #9b59b6; } .transformer-tabs li:nth-child(2) .active { color: #8bc4ea; border-bottom-color: #3498db; } .transformer-tabs li:nth-child(3) .active { color: #f0b37e; border-bottom-color: #e67e22; } .transformer-tabs li:nth-child(4) .active { color: #df7c72; border-bottom-color: #c0392b; } .transformer-tabs a { display: inline-block; color: white; text-decoration: none; padding: 0.5rem; } .transformer-tabs a.active { border-bottom: 3px solid transparent; position: relative; bottom: -3px; } @media (max-width: 700px) { .transformer-tabs ul { border-bottom: 0; overflow: hidden; position: relative; background: #666; /* fallback */ background: linear-gradient(#666, #222); } .transformer-tabs ul::after { content: "☰"; position: absolute; top: 8px; right: 15px; z-index: 2; pointer-events: none; } .transformer-tabs ul.open a { position: relative; display: block; } .transformer-tabs li { display: block; } .transformer-tabs a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .transformer-tabs a.active { border: 0; z-index: 1; background: #666; /* fallback */ background: linear-gradient(#666, #222); } } .tabs > div { display: none; padding: 1rem; } .tabs > div:nth-of-type(1) { background: #9b59b6; } .tabs > div:nth-of-type(2) { background: red; } .tabs > div:nth-of-type(3) { background: #e67e22; } .tabs > div:nth-of-type(4) { background: #c0392b; } .tabs > .active { display: block; } body { padding: 1rem; background: #333; color: white; font: 100%/1.4 Sans-Serif; }