marble
Version:
WeDeploy's style guide and UI components
2 lines (1 loc) • 4.38 kB
CSS
:root{font-size:14px}:root [class*='icon-12']{font-size:16px}:root [class*='icon-16']{font-size:24px}@media (min-width: 600px) and (max-width: 1800px){:root{font-size:16px}}@media (min-width: 1800px){:root{font-size:18px}}* code{display:inline-block;color:rgba(14,20,26,0.6);background:rgba(14,20,26,0.1);font-size:100%;font-family:"Roboto Mono",sans-serif;padding:0 4px}* .code{margin:0;background:transparent}p code{line-height:22px}h4 code{line-height:24px}h6 code{line-height:26px}p a:not([class]),li a:not([class]){border-bottom:1px dashed rgba(14,20,26,0.4);color:inherit}p a:not([class]):hover,li a:not([class]):hover{border-bottom:1px dashed #00d46a;color:#00d46a}.nav.nav-tabs.nav-code-tabs{border-width:0px;padding:0 24px}.nav.nav-tabs.nav-code-tabs>li>a{background:transparent;border-width:0px;color:rgba(14,20,26,0.8);font-family:"Galano",sans-serif;font-size:13px;font-weight:700;line-height:24px;text-transform:uppercase;padding:0;margin-right:12px}.nav.nav-tabs.nav-code-tabs>li>a:hover,.nav.nav-tabs.nav-code-tabs>li>a:focus{background:transparent;color:rgba(14,20,26,0.6);outline:none}.nav.nav-tabs.nav-code-tabs>li:last-child>a{margin-right:0}.nav.nav-tabs.nav-code-tabs>li.active>a{border-width:0px;color:#00d46a}.nav.nav-tabs.nav-code-tabs ~ .code-container{margin:0 0 calc(1rem * 1.5)}.code-container{position:relative;margin:calc(1rem * 1.5) 0;width:calc(100% + 40px);left:-20px}@media (min-width: 600px){.code-container{width:100%;left:0px}}.code-container .CodeMirror{animation:fadeIn 0.5s cubic-bezier(0.3, 0, 0.3, 1) 0s 1 forwards;border-radius:0px;height:auto;opacity:0;position:absolute;top:0;width:100%;z-index:0}@media (min-width: 600px){.code-container .CodeMirror{border-radius:4px}}.code-container .CodeMirror-sizer{margin-left:60px }.code-container .CodeMirror-gutter-wrapper{left:-60px }.code-container .CodeMirror-gutter.CodeMirror-linenumbers{width:60px }.code-container .CodeMirror-linenumber{color:rgba(255,255,255,0.4);font-size:13px;line-height:24px;left:24px ;padding:0;text-align:left;width:36px }.code-container .CodeMirror-lines{padding:12px 0}.code-container .CodeMirror-gutters{left:0 }.code-container .CodeMirror,.code-container pre{font-family:"Roboto Mono",sans-serif}.code-container pre{border:0;font-size:14px;line-height:24px;margin:0;opacity:0;padding:12px 4px;position:relative}.code-container pre code{white-space:pre}.code-container .CodeMirror pre{font-size:13px;line-height:24px;opacity:1;padding:0;margin:0;z-index:6}.code-container:hover .btn-copy{opacity:1}.code-container .btn-copy{-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background:#0e141a;border-radius:4px;color:#fff;height:36px;line-height:24px;padding:0;opacity:0;position:absolute;right:6px;top:6px;width:36px;z-index:999}.code-container .btn-copy:before{-webkit-transition:background .3s ease-in-out;-o-transition:background .3s ease-in-out;transition:background .3s ease-in-out;content:"";position:absolute;top:0;left:0;width:36px;height:36px;border-radius:4px;background:rgba(255,255,255,0.2);z-index:1}.code-container .btn-copy:hover{background:#0e141a}.code-container .btn-copy:hover:before{background:rgba(255,255,255,0.4)}.code-container .btn-copy>[class*="icon-"]{font-size:12px}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar{width:16px}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar:horizontal{height:16px}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar-thumb{transition:all 0.3s ease-in-out;border-radius:12px}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar-track{background-color:rgba(14,20,26,0.8)}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar-track:vertical{background-color:#282a36;border-width:0px}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar-track:horizontal{background-color:#282a36;border-width:0px}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar{background-color:transparent}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,0.4);border:4px solid #282a36}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,0.6)}.code-container .CodeMirror.cm-s-dracula ::-webkit-scrollbar-corner{background-color:transparent}