@jirkasa/code-box/dist/style.min.css

Showcase code samples on the web with a container that lets users select and display different samples.

/*!
 * Code Box
 * https://github.com/Jirkasa/code-box
 * Copyright (c) 2025 Jiří Satora
 * Licensed under the MIT license.
 */.cb-code-view,.cb-project-code-box,.cb-tab-code-box,.cb-virtual-code-box{box-sizing:border-box;margin:0;padding:0}.cb-code-view *,.cb-code-view :after,.cb-code-view :before,.cb-project-code-box *,.cb-project-code-box :after,.cb-project-code-box :before,.cb-tab-code-box *,.cb-tab-code-box :after,.cb-tab-code-box :before,.cb-virtual-code-box *,.cb-virtual-code-box :after,.cb-virtual-code-box :before{box-sizing:inherit;margin:0;padding:0}.cb-code-view{background-color:#bbb;display:flex;font-family:monospace}.cb-code-view__gutter{background-color:#aaa;flex:0 1;font-size:1.6rem;padding:.8rem;text-align:right}.cb-code-view__gutter--hidden{display:none}.cb-code-view__line-number{color:#000}.cb-code-view__line-number--hidden{display:none}.cb-code-view__container{flex:1 1;overflow:hidden;position:relative;width:100%}.cb-code-view__content{height:100%;overflow-x:auto;overflow-y:hidden;padding:.8rem;width:100%}.cb-code-view__content pre{width:100%}.cb-code-view__content code{color:#000;font-size:1.6rem;overflow:visible}.cb-code-view__highlight{background-color:rgba(31,129,153,.15);left:.8rem;position:absolute;top:.8rem;width:calc(100% - 1.6rem)}.cb-project-code-box{background-color:#bbb;display:flex;flex-direction:row-reverse;overflow:hidden;position:relative;width:100%}.cb-project-code-box__panel-container{flex:0 0 3.2rem}.cb-project-code-box__code-view-container{flex:2;overflow:hidden}.cb-project-code-box__code-view-container--hidden{display:none}.cb-project-code-box__code-view-container>div{height:100%}.cb-project-code-box__no-code-view{align-items:center;background-color:#bbb;display:flex;flex:2;justify-content:center}.cb-project-code-box__no-code-view--hidden{display:none}.cb-project-code-box__no-code-view-message{color:#000;font-size:1.6rem}.cb-project-code-box__panel{background-color:#aaa;display:flex;flex-direction:row-reverse;height:100%;max-width:75%;position:absolute;right:100%;top:0;transform:translateX(3.2rem);transition:all .2s;z-index:10}.cb-project-code-box__panel--opened{transform:translateX(100%)}.cb-project-code-box__panel-content{flex:2;overflow:auto;padding:.8rem;white-space:nowrap}.cb-project-code-box__panel-open-button{background-color:#999;border:none;cursor:pointer;flex-shrink:0;position:relative;width:3.2rem}.cb-project-code-box__panel-open-button-icon{height:2.4rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:2.4rem}.cb-project-code-box__panel-open-button-icon svg{height:100%;width:100%;fill:#000}.cb-project-code-box__panel-open-button--opened .cb-project-code-box__panel-open-button-icon{transform:translate(-50%,-50%) scaleX(-1)}.cb-project-code-box__panel-heading{color:#000;font-size:1.6rem;line-height:2rem;margin-bottom:.4rem}.cb-project-code-box__panel-item,.cb-project-code-box__panel-item:link,.cb-project-code-box__panel-item:visited{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;margin-bottom:.4rem;-webkit-text-decoration:none;text-decoration:none;width:-moz-fit-content;width:fit-content}.cb-project-code-box__panel-item--active,.cb-project-code-box__panel-item--active:link,.cb-project-code-box__panel-item--active:visited{-webkit-text-decoration:underline;text-decoration:underline}.cb-project-code-box__panel-item-arrow-icon{height:1rem;transition:transform .2s;width:1rem}.cb-project-code-box__panel-item-arrow-icon svg{height:100%;width:100%;fill:#000}.cb-project-code-box__panel-item--folder-opened .cb-project-code-box__panel-item-arrow-icon{transform:rotate(90deg)}.cb-project-code-box__panel-item-icon{height:2rem;width:2rem}.cb-project-code-box__panel-item-icon svg{height:100%;width:100%;fill:#000}.cb-project-code-box__panel-item-text{color:#000;font-size:1.6rem;line-height:2rem;text-align:left;-webkit-text-decoration:none;text-decoration:none}.cb-project-code-box__panel-item-download-icon{height:1.6rem;width:1.6rem}.cb-project-code-box__panel-item-download-icon svg{height:100%;width:100%;fill:#000}.cb-project-code-box__panel-collapsible{align-items:flex-start;display:flex;flex-direction:column;padding-left:1.9rem}.cb-project-code-box__panel-horizontal-rule{background-color:#000;border:none;height:.1rem;margin:.8rem 0;width:100%}.cb-tab-code-box__tabs{display:flex;overflow-x:auto;overflow-y:hidden}.cb-tab-code-box__tab,.cb-tab-code-box__tab:link,.cb-tab-code-box__tab:visited{align-items:center;background-color:#999;border:none;cursor:pointer;display:flex;font-family:inherit;gap:.4rem;-webkit-text-decoration:none;text-decoration:none;white-space:nowrap}.cb-tab-code-box__tab--active,.cb-tab-code-box__tab--active:link,.cb-tab-code-box__tab--active:visited{border:.1rem solid #000}.cb-tab-code-box__tab-icon{height:1.6rem;width:1.6rem}.cb-tab-code-box__tab-icon svg{height:100%;width:100%;fill:#000}.cb-tab-code-box__tab-text{color:#000;font-size:1.6rem}.cb-tab-code-box__tab-download-icon{height:1.2rem;width:1.2rem}.cb-tab-code-box__tab-download-icon svg{height:100%;width:100%;fill:#000}.cb-tab-code-box__code-view-container{display:flex;flex-direction:column}.cb-tab-code-box__code-view-container--hidden{display:none}.cb-tab-code-box__code-view-container>div{flex-grow:1}.cb-tab-code-box__no-code-view{align-items:center;background-color:#bbb;display:flex;justify-content:center}.cb-tab-code-box__no-code-view--hidden{display:none}.cb-tab-code-box__no-code-view-message{color:#000;font-size:1.6rem}.cb-virtual-code-box__code-view-container{display:flex;flex-direction:column}.cb-virtual-code-box__code-view-container--hidden{display:none}.cb-virtual-code-box__code-view-container>div{flex-grow:1}.cb-virtual-code-box__no-code-view{align-items:center;background-color:#bbb;display:flex;justify-content:center}.cb-virtual-code-box__no-code-view--hidden{display:none}.cb-virtual-code-box__no-code-view-message{color:#000;font-size:1.6rem}