diff options
author | Indrajith K L | 2022-03-20 00:38:25 +0530 |
---|---|---|
committer | Indrajith K L | 2022-03-20 00:38:25 +0530 |
commit | 941642aee876a97dbb79666d8fabaa2b1feb9ff5 (patch) | |
tree | 6147d3027127466b312eaa0b34c75966743bf547 /themes/terminal/assets/css/code.css | |
parent | 31fc0796a09e1c0b8acbee6ac2fbee17d525b528 (diff) | |
download | experimentsofindrajith-941642aee876a97dbb79666d8fabaa2b1feb9ff5.tar.gz experimentsofindrajith-941642aee876a97dbb79666d8fabaa2b1feb9ff5.tar.bz2 experimentsofindrajith-941642aee876a97dbb79666d8fabaa2b1feb9ff5.zip |
Theme changes
Diffstat (limited to 'themes/terminal/assets/css/code.css')
-rw-r--r-- | themes/terminal/assets/css/code.css | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/themes/terminal/assets/css/code.css b/themes/terminal/assets/css/code.css new file mode 100644 index 0000000..8405fa9 --- /dev/null +++ b/themes/terminal/assets/css/code.css @@ -0,0 +1,84 @@ +.collapsable-code { + --border-color: color-mod(var(--accent) blend(#999 90%)); + + position: relative; + width: 100%; + margin: 40px 0; + + input[type="checkbox"] { + position: absolute; + visibility: hidden; + } + + input[type="checkbox"]:checked { + ~ pre, + ~ .code-toolbar pre { + height: 0; + padding: 0; + border-top: none; + } + + ~ .code-toolbar { + padding: 0; + border-top: none; + + .toolbar { + display: none; + } + } + + ~ label .collapsable-code__toggle:after { + content: attr(data-label-expand); + } + } + + label { + position: relative; + display: flex; + justify-content: space-between; + min-width: 30px; + min-height: 30px; + margin: 0; + border-bottom: 1px solid var(--border-color); + cursor: pointer; + } + + &__title { + flex: 1; + color: var(--accent); + padding: 3px 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &__language { + color: var(--accent); + border: 1px solid var(--border-color); + border-bottom: none; + text-transform: uppercase; + padding: 3px 10px; + } + + &__toggle { + color: var(--accent); + font-size: 16px; + padding: 3px 10px; + + &:after { + content: attr(data-label-collapse); + } + } + + pre { + margin-top: 0; + + &::first-line { + line-height: 0; + } + } + + .code-toolbar { + margin: 0; + } +} |