1 line
2.9 KiB
Plaintext
1 line
2.9 KiB
Plaintext
{"version":3,"sourceRoot":"","sources":["../../../src/client/styles/collapsed-lines.scss"],"names":[],"mappings":"AAEA,kCACE,eACA,mBACA,iBAGF,gCACE,GACE,WACA,oEAGF,KACE,UACA,oEAMF,2DACE,0CACA,qPACA,kCAEA,kBACA,QACA,SACA,OACA,UAEA,aACA,mBACA,uBAEA,YAEA,2HAOA,eAEA,qDAEA,iEACE,oDAGF,mEACE,WAEA,qBAEA,WACA,YAEA,oCAEA,0CACA,kBACA,eACA,sBACA,oBAEA,2EAKJ,mFACE,iEAGA,qGACE,gEAIJ,oDACE,kBACA,oHAOA,+DACE,+CAGF,2EACE","file":"collapsed-lines.css","sourcesContent":["/* stylelint-disable scss/operator-no-newline-after */\n\n@property --vp-collapsed-lines-bg {\n inherits: false;\n initial-value: #fff;\n syntax: '<color>';\n}\n\n@keyframes code-collapsed-lines {\n 0% {\n opacity: 0.3;\n transform: translateY(-2px) rotate(var(--vp-collapsed-lines-rotate));\n }\n\n 100% {\n opacity: 1;\n transform: translateY(2px) rotate(var(--vp-collapsed-lines-rotate));\n }\n}\n\n// collapsed lines\ndiv[class*='language-'].has-collapsed-lines {\n .collapsed-lines {\n --vp-collapsed-lines-bg: var(--code-c-bg);\n --vp-collapsed-lines-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m18 12l-6 6l-6-6m12-6l-6 6l-6-6'/%3E%3C/svg%3E\");\n --vp-collapsed-lines-rotate: 0deg;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 4;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n height: 28px;\n\n background: linear-gradient(\n to bottom,\n transparent 0%,\n var(--vp-collapsed-lines-bg) 55%,\n var(--vp-collapsed-lines-bg) 100%\n );\n\n cursor: pointer;\n\n transition: --vp-collapsed-lines-bg var(--vp-t-color);\n\n &:hover {\n --vp-collapsed-lines-bg: var(--code-c-highlight-bg);\n }\n\n &::before {\n content: '';\n\n display: inline-block;\n\n width: 24px;\n height: 24px;\n\n background-color: var(--code-c-text);\n\n mask-image: var(--vp-collapsed-lines-icon);\n mask-position: 50%;\n mask-size: 20px;\n mask-repeat: no-repeat;\n pointer-events: none;\n\n animation: code-collapsed-lines 1.2s infinite alternate-reverse\n ease-in-out;\n }\n }\n\n &[data-highlighter='shiki'] .collapsed-lines {\n --vp-collapsed-lines-bg: var(--code-c-bg, var(--shiki-light-bg));\n\n /* stylelint-disable-next-line selector-max-attribute */\n [data-theme='dark'] & {\n --vp-collapsed-lines-bg: var(--code-c-bg, var(--shiki-dark-bg));\n }\n }\n\n &.collapsed {\n overflow-y: hidden;\n height: calc(\n var(--vp-collapsed-lines) * var(--code-line-height) *\n var(--code-font-size) + var(--code-padding-y) + 28px\n );\n }\n\n &:not(.collapsed) {\n code {\n padding-bottom: max(var(--code-padding-y), 28px);\n }\n\n .collapsed-lines {\n --vp-collapsed-lines-rotate: 180deg;\n }\n }\n}\n"]} |