@adamsarek/opencanvas
Version:
Reusable performance focused canvas built in TypeScript and on top of the latest web tech.
8 lines (7 loc) • 9.27 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../src/css/icons.css", "../src/css/theme-dark.css", "../src/css/theme-light.css", "../src/opencanvas.css"],
"sourcesContent": ["/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200*/\n\n/* fallback */\n@font-face {\n\tfont-family: 'Material Symbols Rounded';\n\tfont-style: normal;\n\tfont-weight: 100 700;\n\tsrc: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v222/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');\n}\n\n.opencanvas-icon {\n\tfont-family: 'Material Symbols Rounded';\n\tfont-weight: normal;\n\tfont-style: normal;\n\tfont-size: 20px;\n\tline-height: 1;\n\tletter-spacing: normal;\n\ttext-transform: none;\n\tdisplay: inline-block;\n\twhite-space: nowrap;\n\tword-wrap: normal;\n\tdirection: ltr;\n\t-webkit-font-feature-settings: 'liga';\n\t-webkit-font-smoothing: antialiased;\n\tfont-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n\n.opencanvas-icon-fill {\n\tfont-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n", ".opencanvas.opencanvas-theme-dark {\n\t--box-shadow: #000E;\n\t--canvas-background-color: #000;\n\t--overlay-color: #FFF;\n\t--header-background-gradient-top-color: #0008;\n\t--header-background-gradient-bottom-color: #0003;\n\t--header-box-shadow-color: #0005;\n\t--footer-background-gradient-top-color: var(--header-background-gradient-bottom-color);\n\t--footer-background-gradient-bottom-color: var(--header-background-gradient-top-color);\n\t--footer-box-shadow-color: #0005;\n\t--popup-background-color: #111E;\n\t--popup-box-shadow-color: var(--box-shadow);\n\t--popup-button-hover-background-color: #222;\n\t--popup-sub-content-first-button-border-color: #333;\n}\n", ".opencanvas.opencanvas-theme-light {\n\t--box-shadow: #BBBE;\n\t--canvas-background-color: #FFF;\n\t--overlay-color: #000;\n\t--header-background-gradient-top-color: #FFF8;\n\t--header-background-gradient-bottom-color: #FFF3;\n\t--header-box-shadow-color: #FFF5;\n\t--footer-background-gradient-top-color: var(--header-background-gradient-bottom-color);\n\t--footer-background-gradient-bottom-color: var(--header-background-gradient-top-color);\n\t--footer-box-shadow-color: #FFF5;\n\t--popup-background-color: #EEEE;\n\t--popup-box-shadow-color: var(--box-shadow);\n\t--popup-button-hover-background-color: #DDD;\n\t--popup-sub-content-first-button-border-color: #CCC;\n}\n", "/* Imports */\n@import url(css/icons.css);\n@import url(css/theme-dark.css);\n@import url(css/theme-light.css);\n\n/* Main */\n.opencanvas {\n\tfont: 16px monospace;\n}\n\n.opencanvas-fullscreen {\n\tfont-size: 20px;\n}\n\n.opencanvas-fullscreen .opencanvas-button {\n\tfont-size: 16.6667px;\n}\n\n.opencanvas-fullscreen .opencanvas-icon {\n\tfont-size: 25px;\n}\n\n.opencanvas-container {\n\tposition: relative;\n\tdisplay: grid;\n\toverflow: hidden;\n}\n\n.opencanvas-frame {\n\tdisplay: grid;\n}\n\n.opencanvas-canvas {\n\tbackground: var(--canvas-background-color);\n\twidth: 100%;\n\theight: 100%;\n\tvertical-align: middle;\n}\n\n.opencanvas-overlay {\n\tuser-select: none;\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tcolor: var(--overlay-color);\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr auto;\n}\n\n.opencanvas-header,\n.opencanvas-body,\n.opencanvas-footer {\n\tdisplay: grid;\n}\n\n.opencanvas-header,\n.opencanvas-footer {\n\tgrid-template-columns: auto 1fr auto;\n}\n\n.opencanvas-header {\n\tbackground: linear-gradient(0deg, var(--header-background-gradient-bottom-color) 0%, var(--header-background-gradient-top-color) 100%);\n\tbox-shadow: 0 0.0625em 0.125em var(--header-box-shadow-color);\n}\n\n.opencanvas-body {\n\tposition: relative;\n\tdisplay: grid;\n}\n\n.opencanvas-footer {\n\tbackground: linear-gradient(0deg, var(--footer-background-gradient-bottom-color) 0%, var(--footer-background-gradient-top-color) 100%);\n\tbox-shadow: 0 -0.0625em 0.125em var(--footer-box-shadow-color);\n}\n\n.opencanvas-header > *,\n.opencanvas-footer > * {\n\tdisplay: grid;\n\tgrid-auto-flow: column;\n}\n\n.opencanvas-header > * > .opencanvas-button:first-of-type,\n.opencanvas-footer > * > .opencanvas-button:first-of-type {\n\tpadding-left: 0.5em;\n}\n\n.opencanvas-header > * > .opencanvas-button:last-of-type,\n.opencanvas-footer > * > .opencanvas-button:last-of-type {\n\tpadding-right: 0.5em;\n}\n\n.opencanvas-button,\n.opencanvas-label,\n.opencanvas-output {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.opencanvas-button {\n\tcursor: pointer;\n\tcolor: inherit;\n\tbackground: transparent;\n\tborder: 0;\n\tpadding: 0.5em 0.25em;\n\tgrid-gap: 1.5em;\n\topacity: 0.618;\n\ttransition: 0.25s opacity, 0.25s background-color;\n}\n.opencanvas-button:hover,\n.opencanvas-button.active {\n\topacity: 1;\n}\n\n.opencanvas-label {\n\tgrid-gap: 0.75em;\n}\n\n.opencanvas-popup {\n\tpointer-events: none;\n\tposition: absolute;\n\tbackground: var(--popup-background-color);\n\tborder-radius: 0.3125em;\n\tpadding: 0.3125em 0;\n\tbox-shadow: 0 0.0625em 0.125em var(--popup-box-shadow-color);\n\tgrid-auto-flow: row;\n\toverflow: hidden;\n\topacity: 0;\n\ttransition: 0.25s opacity;\n}\n.opencanvas-popup.visible {\n\tpointer-events: initial;\n\topacity: 1;\n}\n\n.opencanvas-popup-content {\n\tposition: relative;\n}\n\n.opencanvas-popup-main-content,\n.opencanvas-popup-sub-content {\n\tjustify-items: stretch;\n\ttransition: 0.25s transform;\n}\n\n.opencanvas-popup-main-content {\n\theight: 0;\n\ttransform: translateX(-100%);\n}\n.opencanvas-popup-main-content.visible {\n\theight: 100%;\n\ttransform: translateX(0);\n}\n\n.opencanvas-popup-sub-content {\n\theight: 0;\n\ttransform: translateX(100%);\n}\n.opencanvas-popup-sub-content.visible {\n\theight: 100%;\n\ttransform: translateX(0);\n}\n\n.opencanvas-popup-sub-content .opencanvas-button:first-of-type {\n\tborder-bottom: 0.075em solid var(--popup-sub-content-first-button-border-color);\n\tpadding-bottom: 0.3em;\n}\n\n.opencanvas-popup .opencanvas-button {\n\tpadding: 0.375em 0.75em;\n\tjustify-content: space-between;\n\topacity: 1;\n}\n.opencanvas-popup .opencanvas-button:hover {\n\tbackground: var(--popup-button-hover-background-color);\n}\n.opencanvas-popup .opencanvas-output-arrow {\n\tmargin-right: -0.3em;\n}\n\n.opencanvas-options-popup {\n\tbottom: 0.3125em;\n\tright: 0.3125em;\n}\n"],
"mappings": "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",
"names": []
}