/* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/jquery-ui/core/1.11.4/css/core.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/e7740bfbf4a55032d1845bf51181beb3.min.css */ /* * jQuery UI CSS Framework @VERSION * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/category/theming/ */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; pointer-events: none; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/jquery-ui/core/1.11.4/css/jquery-ui.theme.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/afc209ea5a0eeedf3e1fd2d0b75fdf51.min.css */ /* * jQuery UI CSS Framework 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/category/theming/ * * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.0em&cornerRadius=2px&bgColorHeader=%23f6f6f6&bgTextureHeader=flat&bgImgOpacityHeader=100&borderColorHeader=%23dcdcdc&fcHeader=%23222222&iconColorHeader=%23222222&bgColorContent=%23ffffff&bgTextureContent=flat&bgImgOpacityContent=100&borderColorContent=%23dcdcdc&fcContent=%23222222&iconColorContent=%23222222&bgColorDefault=%23ffffff&bgTextureDefault=flat&bgImgOpacityDefault=100&borderColorDefault=%23dcdcdc&fcDefault=%23222222&iconColorDefault=%23222222&bgColorHover=%23ffffff&bgTextureHover=flat&bgImgOpacityHover=100&borderColorHover=%23e6e6e6&fcHover=%23bebebe&iconColorHover=%23bebebe&bgColorActive=%23ffffff&bgTextureActive=flat&bgImgOpacityActive=100&borderColorActive=%23dcdcdc&fcActive=%23222222&iconColorActive=%23222222&bgColorHighlight=%23fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=%23e9bf49&fcHighlight=%23363636&iconColorHighlight=%23ff6c2e&bgColorError=%23fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=%23cd0a0a&fcError=%23cd0a0a&iconColorError=%23cd0a0a&bgColorOverlay=%23e3e3e3&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=%23aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px */ /* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.0em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #dcdcdc; background: #ffffff url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_flat_100_ffffff_40x100.png") 50% 50% repeat-x; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header { border: 1px solid #dcdcdc; background: #f6f6f6 url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_flat_100_f6f6f6_40x100.png") 50% 50% repeat-x; color: #222222; font-weight: bold; } .ui-widget-header a { color: #222222; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dcdcdc; background: #ffffff url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_flat_100_ffffff_40x100.png") 50% 50% repeat-x; font-weight: normal; color: #222222; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #222222; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #e6e6e6; background: #ffffff url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_flat_100_ffffff_40x100.png") 50% 50% repeat-x; font-weight: normal; color: #bebebe; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #bebebe; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dcdcdc; background: #ffffff url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_flat_100_ffffff_40x100.png") 50% 50% repeat-x; font-weight: normal; color: #222222; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #222222; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #e9bf49; background: #fbf9ee url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x; color: #363636; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #363636; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #cd0a0a; background: #fef1ec url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-icons_222222_256x240.png"); } .ui-widget-header .ui-icon { background-image: url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-icons_222222_256x240.png"); } .ui-state-default .ui-icon { background-image: url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-icons_222222_256x240.png"); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-icons_bebebe_256x240.png"); } .ui-state-active .ui-icon { background-image: url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-icons_222222_256x240.png"); } .ui-state-highlight .ui-icon { background-image: url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-icons_ff6c2e_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-icons_cd0a0a_256x240.png"); } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 2px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 2px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 2px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 2px; } /* Overlays */ .ui-widget-overlay { background: #e3e3e3 url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_flat_0_e3e3e3_40x100.png") 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url("/site/core/packages/jquery-ui/core/1.11.4/css/images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ border-radius: 8px; } /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/jquery-ui/draggable/1.11.4/css/draggable.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/3c28b9f5a617d88e0a71916d70303696.min.css */ /* * jQuery UI Draggable @VERSION * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license */ .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/eco/icons/1.x/css/embedded-woff.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/e799c9fd5100f4e63a4af8cacc089eb0.min.css */ @font-face{font-family:Eco;src:url(data:application/font-woff;charset=utf-8;base64,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) format('woff');font-weight:400;font-style:normal}.eco{display:inline-block;font:normal normal normal 14px/1 Eco;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.eco-search:before{content:'\f000'}.eco-edit:before{content:'\f001'}.eco-trash-can:before{content:'\f002'}.eco-link:before{content:'\f003'}.eco-star:before{content:'\f004'}.eco-star-o:before{content:'\f005'}.eco-share:before{content:'\f006'}.eco-sync:before{content:'\f007'}.eco-checkbox:before{content:'\f008'}.eco-checkbox-checked:before{content:'\f009'}.eco-radio-button:before{content:'\f00a'}.eco-radio-button-checked:before{content:'\f00b'}.eco-paperclip:before{content:'\f00c'}.eco-add:before{content:'\f00d'}.eco-add-o:before{content:'\f00e'}.eco-clear:before{content:'\f00f'}.eco-file-upload:before{content:'\f010'}.eco-file-download:before{content:'\f011'}.eco-save:before{content:'\f012'}.eco-email:before{content:'\f013'}.eco-camera:before{content:'\f014'}.eco-image:before{content:'\f015'}.eco-phone-wired:before{content:'\f016'}.eco-location:before{content:'\f017'}.eco-event:before{content:'\f018'}.eco-account-circle:before{content:'\f019'}.eco-gear:before{content:'\f01a'}.eco-shopping-cart:before{content:'\f01b'}.eco-menu:before{content:'\f01c'}.eco-chevron-up:before{content:'\f01d'}.eco-chevron-down:before{content:'\f01e'}.eco-chevron-left:before{content:'\f01f'}.eco-chevron-right:before{content:'\f020'}.eco-arrow-up:before{content:'\f021'}.eco-arrow-down:before{content:'\f022'}.eco-error-o:before{content:'\f023'}.eco-chat-bubble-o:before{content:'\f025'}.eco-circle:before{content:'\f026'}.eco-laptop:before{content:'\f027'}.eco-tablet-ipad:before{content:'\f028'}.eco-phone-iphone:before{content:'\f029'}.eco-clear-o:before{content:'\f02a'}.eco-more-h:before{content:'\f02b'}.eco-clock:before{content:'\f02c'}.eco-replay:before{content:'\f02d'}.eco-check:before{content:'\f02e'}.eco-history:before{content:'\f02f'}.eco-remove-o:before{content:'\f030'}.eco-check-o:before{content:'\f031'}.eco-copy:before{content:'\f034'}.eco-input:before{content:'\f037'}.eco-print:before{content:'\f039'}.eco-warning:before{content:'\f03a'}.eco-money-usd:before{content:'\f03b'}.eco-bug:before{content:'\f03c'}.eco-help:before{content:'\f03e'}.eco-toggle-on:before{content:'\f03f'}.eco-toggle-off:before{content:'\f040'}.eco-remove:before{content:'\f041'}.eco-more-v:before{content:'\f042'}.eco-error:before{content:'\f033'}.eco-clock-o:before{content:'\f044'}.eco-chat-bubble:before{content:'\f045'}.eco-arrow-right:before{content:'\f046'}.eco-arrow-left:before{content:'\f047'}.eco-eye:before{content:'\f048'}.eco-privacy:before{content:'\f049'}.eco-eyedropper:before{content:'\f04a'}.eco-locked:before{content:'\f04b'}.eco-home:before{content:'\f04c'}.eco-arrow-fancy-left:before{content:'\f04d'}.eco-arrow-fancy-right:before{content:'\f04e'}.eco-key-o:before{content:'\f04f'}.eco-key:before{content:'\f050'}.eco-bookmark:before{content:'\f051'}.eco-icon-placeholder:before{content:'\f052'}.eco-external-link:before{content:'\f053'}.eco-arrow-all:before{content:'\f054'}.eco-chevron-thin-right:before{content:'\f055'}.eco-chevron-thin-left:before{content:'\f056'}.eco-chevron-thin-up:before{content:'\f057'}.eco-chevron-thin-down:before{content:'\f058'}.eco-newspaper-o:before{content:'\f059'}.eco-compass:before{content:'\f05a'}.eco-sign-out:before{content:'\f05b'}.eco-merge:before{content:'\f05c'}.eco-line-graph:before{content:'\f05d'}.eco-component-group:before{content:'\f05e'}.eco-building:before{content:'\f05f'}.eco-location-li:before{content:'\f060'}.eco-clipboard:before{content:'\f061'}.eco-documents:before{content:'\f062'}.eco-images:before{content:'\f063'}.eco-images-fas:before{content:'\f064'}.eco-info:before{content:'\f065'}.eco-info-outline:before{content:'\f066'}.eco-org-chart:before{content:'\f067'}.eco-security:before{content:'\f068'}.eco-ungroup:before{content:'\f069'}.eco-zoom-in:before{content:'\f06a'}.eco-zoom-out:before{content:'\f06b'}.eco-file:before{content:'\f06c'}.eco-file-word:before{content:'\f06d'}.eco-file-video:before{content:'\f06e'}.eco-file-powerpoint:before{content:'\f06f'}.eco-file-alt:before{content:'\f070'}.eco-file-archive:before{content:'\f071'}.eco-file-audio:before{content:'\f072'}.eco-file-code:before{content:'\f073'}.eco-file-excel:before{content:'\f074'}.eco-file-image:before{content:'\f075'}.eco-file-pdf:before{content:'\f076'}.eco-image-far:before{content:'\f077'}.eco-play-circle:before{content:'\f078'}.eco-link-fas:before{content:'\f079'}.eco-checkbox-checked-filled:before{content:'\f07a'}.eco-cart:before{content:'\f07b'}.eco-cart-upload:before{content:'\f07c'}.eco-arrow-up-btb:before{content:'\f07d'}.eco-copy-o:before{content:'\f07e'}.eco-filter:before{content:'\f07f'}.eco-window-restore:before{content:'\f080'}.eco-window-minimize:before{content:'\f081'}.eco-window-maximize:before{content:'\f082'}.eco-decision:before{content:'\f083'}.eco-results:before{content:'\f084'}.eco-container:before{content:'\f085'}.eco-content:before{content:'\f086'}.eco-choice:before{content:'\f087'}.eco-repeat:before{content:'\f088'}.eco-sigma:before{content:'\f089'}.eco-transform:before{content:'\f08a'}.eco-web:before{content:'\f08b'}.eco-flag-o:before{content:'\f08d'}.eco-flag-checkered:before{content:'\f08e'}.eco-flag:before{content:'\f08f'}.eco-flag-banner:before{content:'\f090'}.eco-flask-lab:before{content:'\f091'}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/eco/icons/1.x/css/aliases.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/41c50fe0dea4e0a3291bef32394066b8.min.css */ .eco-error-circle:before{content:'\f033'} .eco-close-circle:before{content:'\f00f'} .eco-remove-outline:before{content:'\f030'} .eco-done:before,.eco-checkbox-checked-outline:before{content:'\f031'} .eco-check-circle:before{content:'\f02e'} .eco-more-horiz:before{content:'\f02b'} .eco-clear-outline:before{content:'\f02a'} .eco-circle-filled:before{content:'\f026'} .eco-chat-bubble-outline:before{content:'\f025'} .eco-local-phone:before{content:'\f016'} .eco-dollar:before{content:'\f03b'} .eco-place:before{content:'\f017'} .eco-add-outline:before{content:'\f00e'} .eco-star-border:before{content:'\f005'} .eco-computer:before{content:'\f027'} .eco-settings:before{content:'\f01a'} .eco-attach-file:before{content:'\f00c'} .eco-delete:before{content:'\f002'} /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/eco/icons/1.x/css/overrides.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/85a913ccaf344f1f5c4225423e037333.min.css */ .eco.eco-icon-placeholder { /* The placeholder icon it just that; an invisible placeholder that should take up space for an icon but not be visible to the user. */ opacity: 0 !important; } /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/monaco/0.50.0/css/editor.main.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/fa29fcaf99b8570c4f13cd042725bada.min.css */ /*!----------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Version: 0.50.0(c321d0fbecb50ab8a5365fa1965476b0ae63fc87) * Released under the MIT license * https://github.com/microsoft/vscode/blob/main/LICENSE.txt *-----------------------------------------------------------*/ /*--------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. *--------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-action-bar { white-space: nowrap; height: 100%; } .monaco-action-bar .actions-container { display: flex; margin: 0 auto; padding: 0; height: 100%; width: 100%; align-items: center; } .monaco-action-bar.vertical .actions-container { display: inline-block; } .monaco-action-bar .action-item { display: block; align-items: center; justify-content: center; cursor: pointer; position: relative; /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */ } .monaco-action-bar .action-item.disabled { cursor: default; } .monaco-action-bar .action-item .icon, .monaco-action-bar .action-item .codicon { display: block; } .monaco-action-bar .action-item .codicon { display: flex; align-items: center; width: 16px; height: 16px; } .monaco-action-bar .action-label { display: flex; font-size: 11px; padding: 3px; border-radius: 5px; } .monaco-action-bar .action-item.disabled .action-label, .monaco-action-bar .action-item.disabled .action-label::before, .monaco-action-bar .action-item.disabled .action-label:hover { color: var(--vscode-disabledForeground); } /* Vertical actions */ .monaco-action-bar.vertical { text-align: left; } .monaco-action-bar.vertical .action-item { display: block; } .monaco-action-bar.vertical .action-label.separator { display: block; border-bottom: 1px solid #bbb; padding-top: 1px; margin-left: .8em; margin-right: .8em; } .monaco-action-bar .action-item .action-label.separator { width: 1px; height: 16px; margin: 5px 4px !important; cursor: default; min-width: 1px; padding: 0; background-color: #bbb; } .secondary-actions .monaco-action-bar .action-label { margin-left: 6px; } /* Action Items */ .monaco-action-bar .action-item.select-container { overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */ flex: 1; max-width: 170px; min-width: 60px; display: flex; align-items: center; justify-content: center; margin-right: 10px; } .monaco-action-bar .action-item.action-dropdown-item { display: flex; } .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator { display: flex; align-items: center; cursor: default; } .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div { width: 1px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-aria-container { position: absolute; /* try to hide from window but not from screen readers */ left:-999em; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-text-button { box-sizing: border-box; display: flex; width: 100%; padding: 4px; border-radius: 2px; text-align: center; cursor: pointer; justify-content: center; align-items: center; border: 1px solid var(--vscode-button-border, transparent); line-height: 18px; } .monaco-text-button:focus { outline-offset: 2px !important; } .monaco-text-button:hover { text-decoration: none !important; } .monaco-button.disabled:focus, .monaco-button.disabled { opacity: 0.4 !important; cursor: default; } .monaco-text-button .codicon { margin: 0 0.2em; color: inherit !important; } .monaco-text-button.monaco-text-button-with-short-label { flex-direction: row; flex-wrap: wrap; padding: 0 4px; overflow: hidden; height: 28px; } .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label { flex-basis: 100%; } .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short { flex-grow: 1; width: 0; overflow: hidden; } .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label, .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short { display: flex; justify-content: center; align-items: center; font-weight: normal; font-style: inherit; padding: 4px 0; } .monaco-button-dropdown { display: flex; cursor: pointer; } .monaco-button-dropdown.disabled { cursor: default; } .monaco-button-dropdown > .monaco-button:focus { outline-offset: -1px !important; } .monaco-button-dropdown.disabled > .monaco-button.disabled, .monaco-button-dropdown.disabled > .monaco-button.disabled:focus, .monaco-button-dropdown.disabled > .monaco-button-dropdown-separator { opacity: 0.4 !important; } .monaco-button-dropdown > .monaco-button.monaco-text-button { border-right-width: 0 !important; } .monaco-button-dropdown .monaco-button-dropdown-separator { padding: 4px 0; cursor: default; } .monaco-button-dropdown .monaco-button-dropdown-separator > div { height: 100%; width: 1px; } .monaco-button-dropdown > .monaco-button.monaco-dropdown-button { border: 1px solid var(--vscode-button-border, transparent); border-left-width: 0 !important; border-radius: 0 2px 2px 0; display: flex; align-items: center; } .monaco-button-dropdown > .monaco-button.monaco-text-button { border-radius: 2px 0 0 2px; } .monaco-description-button { display: flex; flex-direction: column; align-items: center; margin: 4px 5px; /* allows button focus outline to be visible */ } .monaco-description-button .monaco-button-description { font-style: italic; font-size: 11px; padding: 4px 20px; } .monaco-description-button .monaco-button-label, .monaco-description-button .monaco-button-description { display: flex; justify-content: center; align-items: center; } .monaco-description-button .monaco-button-label > .codicon, .monaco-description-button .monaco-button-description > .codicon { margin: 0 0.2em; color: inherit !important; } /* default color styles - based on CSS variables */ .monaco-button.default-colors, .monaco-button-dropdown.default-colors > .monaco-button{ color: var(--vscode-button-foreground); background-color: var(--vscode-button-background); } .monaco-button.default-colors:hover, .monaco-button-dropdown.default-colors > .monaco-button:hover { background-color: var(--vscode-button-hoverBackground); } .monaco-button.default-colors.secondary, .monaco-button-dropdown.default-colors > .monaco-button.secondary { color: var(--vscode-button-secondaryForeground); background-color: var(--vscode-button-secondaryBackground); } .monaco-button.default-colors.secondary:hover, .monaco-button-dropdown.default-colors > .monaco-button.secondary:hover { background-color: var(--vscode-button-secondaryHoverBackground); } .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator { background-color: var(--vscode-button-background); border-top: 1px solid var(--vscode-button-border); border-bottom: 1px solid var(--vscode-button-border); } .monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator { background-color: var(--vscode-button-secondaryBackground); } .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div { background-color: var(--vscode-button-separator); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ @font-face { font-family: "codicon"; font-display: block; src: url(/site/core/packages/monaco/0.50.0/css/../base/browser/ui/codicons/codicon/codicon.ttf) format("truetype"); } .codicon[class*='codicon-'] { font: normal normal normal 16px/1 codicon; display: inline-block; text-decoration: none; text-rendering: auto; text-align: center; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; -webkit-user-select: none; } /* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */ /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .codicon-wrench-subaction { opacity: 0.5; } @keyframes codicon-spin { 100% { transform:rotate(360deg); } } .codicon-sync.codicon-modifier-spin, .codicon-loading.codicon-modifier-spin, .codicon-gear.codicon-modifier-spin, .codicon-notebook-state-executing.codicon-modifier-spin { /* Use steps to throttle FPS to reduce CPU usage */ animation: codicon-spin 1.5s steps(30) infinite; } .codicon-modifier-disabled { opacity: 0.4; } /* custom speed & easing for loading icon */ .codicon-loading, .codicon-tree-item-loading::before { animation-duration: 1s !important; animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .context-view { position: absolute; } .context-view.fixed { all: initial; font-family: inherit; font-size: 13px; position: fixed; color: inherit; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-count-badge { padding: 3px 6px; border-radius: 11px; font-size: 11px; min-width: 18px; min-height: 18px; line-height: 11px; font-weight: normal; text-align: center; display: inline-block; box-sizing: border-box; } .monaco-count-badge.long { padding: 2px 3px; border-radius: 2px; min-height: auto; line-height: normal; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-dropdown { height: 100%; padding: 0; } .monaco-dropdown > .dropdown-label { cursor: pointer; height: 100%; display: flex; align-items: center; justify-content: center; } .monaco-dropdown > .dropdown-label > .action-label.disabled { cursor: default; } .monaco-dropdown-with-primary { display: flex !important; flex-direction: row; border-radius: 5px; } .monaco-dropdown-with-primary > .action-container > .action-label { margin-right: 0; } .monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] { font-size: 12px; padding-left: 0px; padding-right: 0px; line-height: 16px; margin-left: -3px; } .monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label { display: block; background-size: 16px; background-position: center center; background-repeat: no-repeat; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* ---------- Find input ---------- */ .monaco-findInput { position: relative; } .monaco-findInput .monaco-inputbox { font-size: 13px; width: 100%; } .monaco-findInput > .controls { position: absolute; top: 3px; right: 2px; } .vs .monaco-findInput.disabled { background-color: #E1E1E1; } /* Theming */ .vs-dark .monaco-findInput.disabled { background-color: #333; } /* Highlighting */ .monaco-findInput.highlight-0 .controls, .hc-light .monaco-findInput.highlight-0 .controls { animation: monaco-findInput-highlight-0 100ms linear 0s; } .monaco-findInput.highlight-1 .controls, .hc-light .monaco-findInput.highlight-1 .controls { animation: monaco-findInput-highlight-1 100ms linear 0s; } .hc-black .monaco-findInput.highlight-0 .controls, .vs-dark .monaco-findInput.highlight-0 .controls { animation: monaco-findInput-highlight-dark-0 100ms linear 0s; } .hc-black .monaco-findInput.highlight-1 .controls, .vs-dark .monaco-findInput.highlight-1 .controls { animation: monaco-findInput-highlight-dark-1 100ms linear 0s; } @keyframes monaco-findInput-highlight-0 { 0% { background: rgba(253, 255, 0, 0.8); } 100% { background: transparent; } } @keyframes monaco-findInput-highlight-1 { 0% { background: rgba(253, 255, 0, 0.8); } /* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/ 99% { background: transparent; } } @keyframes monaco-findInput-highlight-dark-0 { 0% { background: rgba(255, 255, 255, 0.44); } 100% { background: transparent; } } @keyframes monaco-findInput-highlight-dark-1 { 0% { background: rgba(255, 255, 255, 0.44); } /* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/ 99% { background: transparent; } } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-hover { cursor: default; position: absolute; overflow: hidden; user-select: text; -webkit-user-select: text; box-sizing: border-box; animation: fadein 100ms linear; line-height: 1.5em; white-space: var(--vscode-hover-whiteSpace, normal); } .monaco-hover.hidden { display: none; } .monaco-hover a:hover:not(.disabled) { cursor: pointer; } .monaco-hover .hover-contents:not(.html-hover-contents) { padding: 4px 8px; } .monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) { max-width: var(--vscode-hover-maxWidth, 500px); word-wrap: break-word; } .monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) hr { min-width: 100%; } .monaco-hover p, .monaco-hover .code, .monaco-hover ul, .monaco-hover h1, .monaco-hover h2, .monaco-hover h3, .monaco-hover h4, .monaco-hover h5, .monaco-hover h6 { margin: 8px 0; } .monaco-hover h1, .monaco-hover h2, .monaco-hover h3, .monaco-hover h4, .monaco-hover h5, .monaco-hover h6 { line-height: 1.1; } .monaco-hover code { font-family: var(--monaco-monospace-font); } .monaco-hover hr { box-sizing: border-box; border-left: 0px; border-right: 0px; margin-top: 4px; margin-bottom: -4px; margin-left: -8px; margin-right: -8px; height: 1px; } .monaco-hover p:first-child, .monaco-hover .code:first-child, .monaco-hover ul:first-child { margin-top: 0; } .monaco-hover p:last-child, .monaco-hover .code:last-child, .monaco-hover ul:last-child { margin-bottom: 0; } /* MarkupContent Layout */ .monaco-hover ul { padding-left: 20px; } .monaco-hover ol { padding-left: 20px; } .monaco-hover li > p { margin-bottom: 0; } .monaco-hover li > ul { margin-top: 0; } .monaco-hover code { border-radius: 3px; padding: 0 0.4em; } .monaco-hover .monaco-tokenized-source { white-space: var(--vscode-hover-sourceWhiteSpace, pre-wrap); } .monaco-hover .hover-row.status-bar { font-size: 12px; line-height: 22px; } .monaco-hover .hover-row.status-bar .info { font-style: italic; padding: 0px 8px; } .monaco-hover .hover-row.status-bar .actions { display: flex; padding: 0px 8px; width: 100%; } .monaco-hover .hover-row.status-bar .actions .action-container { margin-right: 16px; cursor: pointer; } .monaco-hover .hover-row.status-bar .actions .action-container .action .icon { padding-right: 4px; } .monaco-hover .markdown-hover .hover-contents .codicon { color: inherit; font-size: inherit; vertical-align: middle; } .monaco-hover .hover-contents a.code-link:hover, .monaco-hover .hover-contents a.code-link { color: inherit; } .monaco-hover .hover-contents a.code-link:before { content: '('; } .monaco-hover .hover-contents a.code-link:after { content: ')'; } .monaco-hover .hover-contents a.code-link > span { text-decoration: underline; /** Hack to force underline to show **/ border-bottom: 1px solid transparent; text-underline-position: under; color: var(--vscode-textLink-foreground); } .monaco-hover .hover-contents a.code-link > span:hover { color: var(--vscode-textLink-activeForeground); } /** Spans in markdown hovers need a margin-bottom to avoid looking cramped: https://github.com/microsoft/vscode/issues/101496 **/ .monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span { margin-bottom: 4px; display: inline-block; } .monaco-hover-content .action-container a { -webkit-user-select: none; user-select: none; } .monaco-hover-content .action-container.disabled { pointer-events: none; opacity: 0.4; cursor: default; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* ---------- Icon label ---------- */ .monaco-icon-label { display: flex; /* required for icons support :before rule */ overflow: hidden; text-overflow: ellipsis; } .monaco-icon-label::before { /* svg icons rendered as background image */ background-size: 16px; background-position: left center; background-repeat: no-repeat; padding-right: 6px; width: 16px; height: 22px; line-height: inherit !important; display: inline-block; /* fonts icons */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: top; flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */ } .monaco-icon-label-iconpath { width: 16px; height: 16px; padding-left: 2px; margin-top: 2px; display: flex; } .monaco-icon-label-container.disabled { color: var(--vscode-disabledForeground); } .monaco-icon-label > .monaco-icon-label-container { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; } .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name { color: inherit; white-space: pre; /* enable to show labels that include multiple whitespaces */ } .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator { margin: 0 2px; opacity: 0.5; } .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix { opacity: .7; white-space: pre; } .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description { opacity: .7; margin-left: 0.5em; font-size: 0.9em; white-space: pre; /* enable to show labels that include multiple whitespaces */ } .monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{ white-space: nowrap } .vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description { opacity: .95; } .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name, .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description { font-style: italic; } .monaco-icon-label.deprecated { text-decoration: line-through; opacity: 0.66; } /* make sure apply italic font style to decorations as well */ .monaco-icon-label.italic::after { font-style: italic; } .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name, .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description { text-decoration: line-through; } .monaco-icon-label::after { opacity: 0.75; font-size: 90%; font-weight: 600; margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */ text-align: center; } /* make sure selection color wins when a label is being selected */ .monaco-list:focus .selected .monaco-icon-label, /* list */ .monaco-list:focus .selected .monaco-icon-label::after { color: inherit !important; } .monaco-list-row.focused.selected .label-description, .monaco-list-row.selected .label-description { opacity: .8; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-inputbox { position: relative; display: block; padding: 0; box-sizing: border-box; border-radius: 2px; /* Customizable */ font-size: inherit; } .monaco-inputbox > .ibwrapper > .input, .monaco-inputbox > .ibwrapper > .mirror { /* Customizable */ padding: 4px 6px; } .monaco-inputbox > .ibwrapper { position: relative; width: 100%; height: 100%; } .monaco-inputbox > .ibwrapper > .input { display: inline-block; box-sizing: border-box; width: 100%; height: 100%; line-height: inherit; border: none; font-family: inherit; font-size: inherit; resize: none; color: inherit; } .monaco-inputbox > .ibwrapper > input { text-overflow: ellipsis; } .monaco-inputbox > .ibwrapper > textarea.input { display: block; scrollbar-width: none; /* Firefox: hide scrollbars */ outline: none; } .monaco-inputbox > .ibwrapper > textarea.input::-webkit-scrollbar { display: none; /* Chrome + Safari: hide scrollbar */ } .monaco-inputbox > .ibwrapper > textarea.input.empty { white-space: nowrap; } .monaco-inputbox > .ibwrapper > .mirror { position: absolute; display: inline-block; width: 100%; top: 0; left: 0; box-sizing: border-box; white-space: pre-wrap; visibility: hidden; word-wrap: break-word; } /* Context view */ .monaco-inputbox-container { text-align: right; } .monaco-inputbox-container .monaco-inputbox-message { display: inline-block; overflow: hidden; text-align: left; width: 100%; box-sizing: border-box; padding: 0.4em; font-size: 12px; line-height: 17px; margin-top: -1px; word-wrap: break-word; } /* Action bar support */ .monaco-inputbox .monaco-action-bar { position: absolute; right: 2px; top: 4px; } .monaco-inputbox .monaco-action-bar .action-item { margin-left: 2px; } .monaco-inputbox .monaco-action-bar .action-item .codicon { background-repeat: no-repeat; width: 16px; height: 16px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-keybinding { display: flex; align-items: center; line-height: 10px; } .monaco-keybinding > .monaco-keybinding-key { display: inline-block; border-style: solid; border-width: 1px; border-radius: 3px; vertical-align: middle; font-size: 11px; padding: 3px 5px; margin: 0 2px; } .monaco-keybinding > .monaco-keybinding-key:first-child { margin-left: 0; } .monaco-keybinding > .monaco-keybinding-key:last-child { margin-right: 0; } .monaco-keybinding > .monaco-keybinding-key-separator { display: inline-block; } .monaco-keybinding > .monaco-keybinding-key-chord-separator { width: 6px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-list { position: relative; height: 100%; width: 100%; white-space: nowrap; } .monaco-list.mouse-support { user-select: none; -webkit-user-select: none; } .monaco-list > .monaco-scrollable-element { height: 100%; } .monaco-list-rows { position: relative; width: 100%; height: 100%; } .monaco-list.horizontal-scrolling .monaco-list-rows { width: auto; min-width: 100%; } .monaco-list-row { position: absolute; box-sizing: border-box; overflow: hidden; width: 100%; } .monaco-list.mouse-support .monaco-list-row { cursor: pointer; touch-action: none; } /* Make sure the scrollbar renders above overlays (sticky scroll) */ .monaco-list .monaco-scrollable-element > .scrollbar.vertical, .monaco-pane-view > .monaco-split-view2.vertical > .monaco-scrollable-element > .scrollbar.vertical { z-index: 14; } /* for OS X ballistic scrolling */ .monaco-list-row.scrolling { display: none !important; } /* Focus */ .monaco-list.element-focused, .monaco-list.selection-single, .monaco-list.selection-multiple { outline: 0 !important; } /* Dnd */ .monaco-drag-image { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; position: absolute; z-index: 1000; } /* Filter */ .monaco-list-type-filter-message { position: absolute; box-sizing: border-box; width: 100%; height: 100%; top: 0; left: 0; padding: 40px 1em 1em 1em; text-align: center; white-space: normal; opacity: 0.7; pointer-events: none; } .monaco-list-type-filter-message:empty { display: none; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-mouse-cursor-text { cursor: text; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-progress-container { width: 100%; height: 2px; overflow: hidden; /* keep progress bit in bounds */ } .monaco-progress-container .progress-bit { width: 2%; height: 2px; position: absolute; left: 0; display: none; } .monaco-progress-container.active .progress-bit { display: inherit; } .monaco-progress-container.discrete .progress-bit { left: 0; transition: width 100ms linear; } .monaco-progress-container.discrete.done .progress-bit { width: 100%; } .monaco-progress-container.infinite .progress-bit { animation-name: progress; animation-duration: 4s; animation-iteration-count: infinite; transform: translate3d(0px, 0px, 0px); animation-timing-function: linear; } .monaco-progress-container.infinite.infinite-long-running .progress-bit { /* The more smooth `linear` timing function can cause higher GPU consumption as indicated in https://github.com/microsoft/vscode/issues/97900 & https://github.com/microsoft/vscode/issues/138396 */ animation-timing-function: steps(100); } /** * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of * that container. Since translateX is relative to the progress bit size, we have to multiple it with * its relative size to the parent container: * parent width: 5000% * bit width: 100% * translateX should be as follow: * 50%: 5000% * 50% - 50% (set to center) = 2450% * 100%: 5000% * 100% - 100% (do not overflow) = 4900% */ @keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ :root { --vscode-sash-size: 4px; --vscode-sash-hover-size: 4px; } .monaco-sash { position: absolute; z-index: 35; touch-action: none; } .monaco-sash.disabled { pointer-events: none; } .monaco-sash.mac.vertical { cursor: col-resize; } .monaco-sash.vertical.minimum { cursor: e-resize; } .monaco-sash.vertical.maximum { cursor: w-resize; } .monaco-sash.mac.horizontal { cursor: row-resize; } .monaco-sash.horizontal.minimum { cursor: s-resize; } .monaco-sash.horizontal.maximum { cursor: n-resize; } .monaco-sash.disabled { cursor: default !important; pointer-events: none !important; } .monaco-sash.vertical { cursor: ew-resize; top: 0; width: var(--vscode-sash-size); height: 100%; } .monaco-sash.horizontal { cursor: ns-resize; left: 0; width: 100%; height: var(--vscode-sash-size); } .monaco-sash:not(.disabled) > .orthogonal-drag-handle { content: " "; height: calc(var(--vscode-sash-size) * 2); width: calc(var(--vscode-sash-size) * 2); z-index: 100; display: block; cursor: all-scroll; position: absolute; } .monaco-sash.horizontal.orthogonal-edge-north:not(.disabled) > .orthogonal-drag-handle.start, .monaco-sash.horizontal.orthogonal-edge-south:not(.disabled) > .orthogonal-drag-handle.end { cursor: nwse-resize; } .monaco-sash.horizontal.orthogonal-edge-north:not(.disabled) > .orthogonal-drag-handle.end, .monaco-sash.horizontal.orthogonal-edge-south:not(.disabled) > .orthogonal-drag-handle.start { cursor: nesw-resize; } .monaco-sash.vertical > .orthogonal-drag-handle.start { left: calc(var(--vscode-sash-size) * -0.5); top: calc(var(--vscode-sash-size) * -1); } .monaco-sash.vertical > .orthogonal-drag-handle.end { left: calc(var(--vscode-sash-size) * -0.5); bottom: calc(var(--vscode-sash-size) * -1); } .monaco-sash.horizontal > .orthogonal-drag-handle.start { top: calc(var(--vscode-sash-size) * -0.5); left: calc(var(--vscode-sash-size) * -1); } .monaco-sash.horizontal > .orthogonal-drag-handle.end { top: calc(var(--vscode-sash-size) * -0.5); right: calc(var(--vscode-sash-size) * -1); } .monaco-sash:before { content: ''; pointer-events: none; position: absolute; width: 100%; height: 100%; background: transparent; } .monaco-workbench:not(.reduce-motion) .monaco-sash:before { transition: background-color 0.1s ease-out; } .monaco-sash.hover:before, .monaco-sash.active:before { background: var(--vscode-sash-hoverBorder); } .monaco-sash.vertical:before { width: var(--vscode-sash-hover-size); left: calc(50% - (var(--vscode-sash-hover-size) / 2)); } .monaco-sash.horizontal:before { height: var(--vscode-sash-hover-size); top: calc(50% - (var(--vscode-sash-hover-size) / 2)); } .pointer-events-disabled { pointer-events: none !important; } /** Debug **/ .monaco-sash.debug { background: cyan; } .monaco-sash.debug.disabled { background: rgba(0, 255, 255, 0.2); } .monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle { background: red; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Arrows */ .monaco-scrollable-element > .scrollbar > .scra { cursor: pointer; font-size: 11px !important; } .monaco-scrollable-element > .visible { opacity: 1; /* Background rule added for IE9 - to allow clicks on dom node */ background:rgba(0,0,0,0); transition: opacity 100ms linear; /* In front of peek view */ z-index: 11; } .monaco-scrollable-element > .invisible { opacity: 0; pointer-events: none; } .monaco-scrollable-element > .invisible.fade { transition: opacity 800ms linear; } /* Scrollable Content Inset Shadow */ .monaco-scrollable-element > .shadow { position: absolute; display: none; } .monaco-scrollable-element > .shadow.top { display: block; top: 0; left: 3px; height: 3px; width: 100%; box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset; } .monaco-scrollable-element > .shadow.left { display: block; top: 3px; left: 0; height: 100%; width: 3px; box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset; } .monaco-scrollable-element > .shadow.top-left-corner { display: block; top: 0; left: 0; height: 3px; width: 3px; } .monaco-scrollable-element > .shadow.top.left { box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset; } .monaco-scrollable-element > .scrollbar > .slider { background: var(--vscode-scrollbarSlider-background); } .monaco-scrollable-element > .scrollbar > .slider:hover { background: var(--vscode-scrollbarSlider-hoverBackground); } .monaco-scrollable-element > .scrollbar > .slider.active { background: var(--vscode-scrollbarSlider-activeBackground); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-select-box { width: 100%; cursor: pointer; border-radius: 2px; } .monaco-select-box-dropdown-container { font-size: 13px; font-weight: normal; text-transform: none; } /** Actions */ .monaco-action-bar .action-item.select-container { cursor: default; } .monaco-action-bar .action-item .monaco-select-box { cursor: pointer; min-width: 100px; min-height: 18px; padding: 2px 23px 2px 8px; } .mac .monaco-action-bar .action-item .monaco-select-box { font-size: 11px; border-radius: 5px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Use custom CSS vars to expose padding into parent select for padding calculation */ .monaco-select-box-dropdown-padding { --dropdown-padding-top: 1px; --dropdown-padding-bottom: 1px; } .hc-black .monaco-select-box-dropdown-padding, .hc-light .monaco-select-box-dropdown-padding { --dropdown-padding-top: 3px; --dropdown-padding-bottom: 4px; } .monaco-select-box-dropdown-container { display: none; box-sizing: border-box; } .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown * { margin: 0; } .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:focus { outline: 1px solid -webkit-focus-ring-color; outline-offset: -1px; } .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code { line-height: 15px; /** For some reason, this is needed, otherwise will take up 20px height */ font-family: var(--monaco-monospace-font); } .monaco-select-box-dropdown-container.visible { display: flex; flex-direction: column; text-align: left; width: 1px; overflow: hidden; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .monaco-select-box-dropdown-container > .select-box-dropdown-list-container { flex: 0 0 auto; align-self: flex-start; padding-top: var(--dropdown-padding-top); padding-bottom: var(--dropdown-padding-bottom); padding-left: 1px; padding-right: 1px; width: 100%; overflow: hidden; box-sizing: border-box; } .monaco-select-box-dropdown-container > .select-box-details-pane { padding: 5px; } .hc-black .monaco-select-box-dropdown-container > .select-box-dropdown-list-container { padding-top: var(--dropdown-padding-top); padding-bottom: var(--dropdown-padding-bottom); } .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row { cursor: pointer; } .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text { text-overflow: ellipsis; overflow: hidden; padding-left: 3.5px; white-space: nowrap; float: left; } .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-detail { text-overflow: ellipsis; overflow: hidden; padding-left: 3.5px; white-space: nowrap; float: left; opacity: 0.7; } .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-decorator-right { text-overflow: ellipsis; overflow: hidden; padding-right: 10px; white-space: nowrap; float: right; } /* Accepted CSS hiding technique for accessibility reader text */ /* https://webaim.org/techniques/css/invisiblecontent/ */ .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .visually-hidden { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control { flex: 1 1 auto; align-self: flex-start; opacity: 0; } .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div { overflow: hidden; max-height: 0px; } .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div > .option-text-width-control { padding-left: 4px; padding-right: 8px; white-space: nowrap; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-split-view2 { position: relative; width: 100%; height: 100%; } .monaco-split-view2 > .sash-container { position: absolute; width: 100%; height: 100%; pointer-events: none; } .monaco-split-view2 > .sash-container > .monaco-sash { pointer-events: initial; } .monaco-split-view2 > .monaco-scrollable-element { width: 100%; height: 100%; } .monaco-split-view2 > .monaco-scrollable-element > .split-view-container { width: 100%; height: 100%; white-space: nowrap; position: relative; } .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view { white-space: initial; position: absolute; } .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view:not(.visible) { display: none; } .monaco-split-view2.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view { width: 100%; } .monaco-split-view2.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view { height: 100%; } .monaco-split-view2.separator-border > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before { content: ' '; position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; background-color: var(--separator-border); } .monaco-split-view2.separator-border.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before { height: 100%; width: 1px; } .monaco-split-view2.separator-border.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before { height: 1px; width: 100%; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-table { display: flex; flex-direction: column; position: relative; height: 100%; width: 100%; white-space: nowrap; overflow: hidden; } .monaco-table > .monaco-split-view2 { border-bottom: 1px solid transparent; } .monaco-table > .monaco-list { flex: 1; } .monaco-table-tr { display: flex; height: 100%; } .monaco-table-th { width: 100%; height: 100%; font-weight: bold; overflow: hidden; text-overflow: ellipsis; } .monaco-table-th, .monaco-table-td { box-sizing: border-box; flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before { content: ""; position: absolute; left: calc(var(--vscode-sash-size) / 2); width: 0; border-left: 1px solid transparent; } .monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2, .monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before { transition: border-color 0.2s ease-out; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-custom-toggle { margin-left: 2px; float: left; cursor: pointer; overflow: hidden; width: 20px; height: 20px; border-radius: 3px; border: 1px solid transparent; padding: 1px; box-sizing: border-box; user-select: none; -webkit-user-select: none; } .monaco-custom-toggle:hover { background-color: var(--vscode-inputOption-hoverBackground); } .hc-black .monaco-custom-toggle:hover, .hc-light .monaco-custom-toggle:hover { border: 1px dashed var(--vscode-focusBorder); } .hc-black .monaco-custom-toggle, .hc-light .monaco-custom-toggle { background: none; } .hc-black .monaco-custom-toggle:hover, .hc-light .monaco-custom-toggle:hover { background: none; } .monaco-custom-toggle.monaco-checkbox { height: 18px; width: 18px; border: 1px solid transparent; border-radius: 3px; margin-right: 9px; margin-left: 0px; padding: 0px; opacity: 1; background-size: 16px !important; } .monaco-action-bar .checkbox-action-item { display: flex; align-items: center; } .monaco-action-bar .checkbox-action-item > .monaco-custom-toggle.monaco-checkbox { margin-right: 4px; } .monaco-action-bar .checkbox-action-item > .checkbox-label { font-size: 12px; } /* hide check when unchecked */ .monaco-custom-toggle.monaco-checkbox:not(.checked)::before { visibility: hidden; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-toolbar { height: 100%; } .monaco-toolbar .toolbar-toggle-more { display: inline-block; padding: 0; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-tl-row { display: flex; height: 100%; align-items: center; position: relative; } .monaco-tl-row.disabled { cursor: default; } .monaco-tl-indent { height: 100%; position: absolute; top: 0; left: 16px; pointer-events: none; } .hide-arrows .monaco-tl-indent { left: 12px; } .monaco-tl-indent > .indent-guide { display: inline-block; box-sizing: border-box; height: 100%; border-left: 1px solid transparent; } .monaco-workbench:not(.reduce-motion) .monaco-tl-indent > .indent-guide { transition: border-color 0.1s linear; } .monaco-tl-twistie, .monaco-tl-contents { height: 100%; } .monaco-tl-twistie { font-size: 10px; text-align: right; padding-right: 6px; flex-shrink: 0; width: 16px; display: flex !important; align-items: center; justify-content: center; transform: translateX(3px); } .monaco-tl-contents { flex: 1; overflow: hidden; } .monaco-tl-twistie::before { border-radius: 20px; } .monaco-tl-twistie.collapsed::before { transform: rotate(-90deg); } .monaco-tl-twistie.codicon-tree-item-loading::before { /* Use steps to throttle FPS to reduce CPU usage */ animation: codicon-spin 1.25s steps(30) infinite; } .monaco-tree-type-filter { position: absolute; top: 0; display: flex; padding: 3px; max-width: 200px; z-index: 100; margin: 0 6px; border: 1px solid var(--vscode-widget-border); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .monaco-workbench:not(.reduce-motion) .monaco-tree-type-filter { transition: top 0.3s; } .monaco-tree-type-filter.disabled { top: -40px !important; } .monaco-tree-type-filter-grab { display: flex !important; align-items: center; justify-content: center; cursor: grab; margin-right: 2px; } .monaco-tree-type-filter-grab.grabbing { cursor: grabbing; } .monaco-tree-type-filter-input { flex: 1; } .monaco-tree-type-filter-input .monaco-inputbox { height: 23px; } .monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .input, .monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .mirror { padding: 2px 4px; } .monaco-tree-type-filter-input .monaco-findInput > .controls { top: 2px; } .monaco-tree-type-filter-actionbar { margin-left: 4px; } .monaco-tree-type-filter-actionbar .monaco-action-bar .action-label { padding: 2px; } .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container{ position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 13; /* Settings editor uses z-index: 12 */ /* Backup color in case the tree does not provide the background color */ background-color: var(--vscode-sideBar-background); } .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row.monaco-list-row{ position: absolute; width: 100%; opacity: 1 !important; /* Settings editor uses opacity < 1 */ overflow: hidden; /* Backup color in case the tree does not provide the background color */ background-color: var(--vscode-sideBar-background); } .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row:hover{ background-color: var(--vscode-list-hoverBackground) !important; cursor: pointer; } .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty, .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty .monaco-tree-sticky-container-shadow { display: none; } .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow { position: absolute; bottom: -3px; left: 0px; height: 0px; /* heigt is 3px and only set when there is a treeStickyScrollShadow color */ width: 100%; } .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container[tabindex="0"]:focus{ outline: none; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .inputarea { min-width: 0; min-height: 0; margin: 0; padding: 0; position: absolute; outline: none !important; resize: none; border: none; overflow: hidden; color: transparent; background-color: transparent; z-index: -10; } /*.monaco-editor .inputarea { position: fixed !important; width: 800px !important; height: 500px !important; top: initial !important; left: initial !important; bottom: 0 !important; right: 0 !important; color: black !important; background: white !important; line-height: 15px !important; font-size: 14px !important; z-index: 10 !important; }*/ .monaco-editor .inputarea.ime-input { z-index: 10; caret-color: var(--vscode-editorCursor-foreground); color: var(--vscode-editor-foreground); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-workbench .workbench-hover { position: relative; font-size: 13px; line-height: 19px; /* Must be higher than sash's z-index and terminal canvases */ z-index: 40; overflow: hidden; max-width: 700px; background: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); border-radius: 3px; color: var(--vscode-editorHoverWidget-foreground); box-shadow: 0 2px 8px var(--vscode-widget-shadow); } .monaco-workbench .workbench-hover hr { border-bottom: none; } .monaco-workbench .workbench-hover:not(.skip-fade-in) { animation: fadein 100ms linear; } .monaco-workbench .workbench-hover.compact { font-size: 12px; } .monaco-workbench .workbench-hover.compact .hover-contents { padding: 2px 8px; } .monaco-workbench .workbench-hover-container.locked .workbench-hover { outline: 1px solid var(--vscode-editorHoverWidget-border); } .monaco-workbench .workbench-hover-container.locked .workbench-hover:focus, .monaco-workbench .workbench-hover-lock:focus { outline: 1px solid var(--vscode-focusBorder); } .monaco-workbench .workbench-hover-container.locked .workbench-hover-lock:hover { background: var(--vscode-toolbar-hoverBackground); } .monaco-workbench .workbench-hover-pointer { position: absolute; /* Must be higher than workbench hover z-index */ z-index: 41; pointer-events: none; } .monaco-workbench .workbench-hover-pointer:after { content: ''; position: absolute; width: 5px; height: 5px; background-color: var(--vscode-editorHoverWidget-background); border-right: 1px solid var(--vscode-editorHoverWidget-border); border-bottom: 1px solid var(--vscode-editorHoverWidget-border); } .monaco-workbench .locked .workbench-hover-pointer:after { width: 4px; height: 4px; border-right-width: 2px; border-bottom-width: 2px; } .monaco-workbench .workbench-hover-pointer.left { left: -3px; } .monaco-workbench .workbench-hover-pointer.right { right: 3px; } .monaco-workbench .workbench-hover-pointer.top { top: -3px; } .monaco-workbench .workbench-hover-pointer.bottom { bottom: 3px; } .monaco-workbench .workbench-hover-pointer.left:after { transform: rotate(135deg); } .monaco-workbench .workbench-hover-pointer.right:after { transform: rotate(315deg); } .monaco-workbench .workbench-hover-pointer.top:after { transform: rotate(225deg); } .monaco-workbench .workbench-hover-pointer.bottom:after { transform: rotate(45deg); } .monaco-workbench .workbench-hover a { color: var(--vscode-textLink-foreground); } .monaco-workbench .workbench-hover a:focus { outline: 1px solid; outline-offset: -1px; text-decoration: underline; outline-color: var(--vscode-focusBorder); } .monaco-workbench .workbench-hover a:hover, .monaco-workbench .workbench-hover a:active { color: var(--vscode-textLink-activeForeground); } .monaco-workbench .workbench-hover code { background: var(--vscode-textCodeBlock-background); } .monaco-workbench .workbench-hover .hover-row .actions { background: var(--vscode-editorHoverWidget-statusBarBackground); } .monaco-workbench .workbench-hover.right-aligned { /* The context view service wraps strangely when it's right up against the edge without this */ left: 1px; } .monaco-workbench .workbench-hover.right-aligned .hover-row.status-bar .actions { flex-direction: row-reverse; } .monaco-workbench .workbench-hover.right-aligned .hover-row.status-bar .actions .action-container { margin-right: 0; margin-left: 16px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .blockDecorations-container { position: absolute; top: 0; pointer-events: none; } .monaco-editor .blockDecorations-block { position: absolute; box-sizing: border-box; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .view-overlays .current-line { display: block; position: absolute; left: 0; top: 0; box-sizing: border-box; height: 100%; } .monaco-editor .margin-view-overlays .current-line { display: block; position: absolute; left: 0; top: 0; box-sizing: border-box; height: 100%; } .monaco-editor .margin-view-overlays .current-line.current-line-margin.current-line-margin-both { border-right: 0; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Keeping name short for faster parsing. cdr = core decorations rendering (div) */ .monaco-editor .lines-content .cdr { position: absolute; height: 100%; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .glyph-margin { position: absolute; top: 0; } /* Keeping name short for faster parsing. cgmr = core glyph margin rendering (div) */ .monaco-editor .glyph-margin-widgets .cgmr { position: absolute; display: flex; align-items: center; justify-content: center; } /* Ensure spinning icons are pixel-perfectly centered and avoid wobble. This is only applied to icons that spin to avoid unnecessary GPU layers and blurry subpixel AA. */ .monaco-editor .glyph-margin-widgets .cgmr.codicon-modifier-spin::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .lines-content .core-guide { position: absolute; box-sizing: border-box; height: 100%; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .margin-view-overlays .line-numbers { bottom: 0; font-variant-numeric: tabular-nums; position: absolute; text-align: right; display: inline-block; vertical-align: middle; box-sizing: border-box; cursor: default; } .monaco-editor .relative-current-line-number { text-align: left; display: inline-block; width: 100%; } .monaco-editor .margin-view-overlays .line-numbers.lh-odd { margin-top: 1px; } .monaco-editor .line-numbers { color: var(--vscode-editorLineNumber-foreground); } .monaco-editor .line-numbers.active-line-number { color: var(--vscode-editorLineNumber-activeForeground); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Uncomment to see lines flashing when they're painted */ /*.monaco-editor .view-lines > .view-line { background-color: none; animation-name: flash-background; animation-duration: 800ms; } @keyframes flash-background { 0% { background-color: lightgreen; } 100% { background-color: none } }*/ .mtkcontrol { color: rgb(255, 255, 255) !important; background: rgb(150, 0, 0) !important; } .mtkoverflow { background-color: var(--vscode-button-background, var(--vscode-editor-background)); color: var(--vscode-button-foreground, var(--vscode-editor-foreground)); border-width: 1px; border-style: solid; border-color: var(--vscode-contrastBorder); border-radius: 2px; padding: 4px; cursor: pointer; } .mtkoverflow:hover { background-color: var(--vscode-button-hoverBackground); } .monaco-editor.no-user-select .lines-content, .monaco-editor.no-user-select .view-line, .monaco-editor.no-user-select .view-lines { user-select: none; -webkit-user-select: none; } /* Use user-select: text for lookup feature on macOS */ /* https://github.com/microsoft/vscode/issues/85632 */ .monaco-editor.mac .lines-content:hover, .monaco-editor.mac .view-line:hover, .monaco-editor.mac .view-lines:hover { user-select: text; -webkit-user-select: text; -ms-user-select: text; } .monaco-editor.enable-user-select { user-select: initial; -webkit-user-select: initial; } .monaco-editor .view-lines { white-space: nowrap; } .monaco-editor .view-line { position: absolute; width: 100%; } /* There are view-lines in view-zones. We have to make sure this rule does not apply to them, as they don't set a line height */ .monaco-editor .lines-content > .view-lines > .view-line > span { top: 0; bottom: 0; position: absolute; } .monaco-editor .mtkw { color: var(--vscode-editorWhitespace-foreground) !important; } .monaco-editor .mtkz { display: inline-block; color: var(--vscode-editorWhitespace-foreground) !important; } /* TODO@tokenization bootstrap fix */ /*.monaco-editor .view-line > span > span { float: none; min-height: inherit; margin-left: inherit; }*/ /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .lines-decorations { position: absolute; top: 0; background: white; } /* Keeping name short for faster parsing. cldr = core lines decorations rendering (div) */ .monaco-editor .margin-view-overlays .cldr { position: absolute; height: 100%; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .margin { background-color: var(--vscode-editorGutter-background); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Keeping name short for faster parsing. cmdr = core margin decorations rendering (div) */ .monaco-editor .margin-view-overlays .cmdr { position: absolute; left: 0; width: 100%; height: 100%; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* START cover the case that slider is visible on mouseover */ .monaco-editor .minimap.slider-mouseover .minimap-slider { opacity: 0; transition: opacity 100ms linear; } .monaco-editor .minimap.slider-mouseover:hover .minimap-slider { opacity: 1; } .monaco-editor .minimap.slider-mouseover .minimap-slider.active { opacity: 1; } /* END cover the case that slider is visible on mouseover */ .monaco-editor .minimap-slider .minimap-slider-horizontal { background: var(--vscode-minimapSlider-background); } .monaco-editor .minimap-slider:hover .minimap-slider-horizontal { background: var(--vscode-minimapSlider-hoverBackground); } .monaco-editor .minimap-slider.active .minimap-slider-horizontal { background: var(--vscode-minimapSlider-activeBackground); } .monaco-editor .minimap-shadow-visible { box-shadow: var(--vscode-scrollbar-shadow) -6px 0 6px -6px inset; } .monaco-editor .minimap-shadow-hidden { position: absolute; width: 0; } .monaco-editor .minimap-shadow-visible { position: absolute; left: -6px; width: 6px; } .monaco-editor.no-minimap-shadow .minimap-shadow-visible { position: absolute; left: -1px; width: 1px; } /* 0.5s fade in/out for the minimap */ .minimap.autohide { opacity: 0; transition: opacity 0.5s; } .minimap.autohide:hover { opacity: 1; } .monaco-editor .minimap { z-index: 5; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .overlayWidgets { position: absolute; top: 0; left:0; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .view-ruler { position: absolute; top: 0; box-shadow: 1px 0 0 0 var(--vscode-editorRuler-foreground) inset; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .scroll-decoration { position: absolute; top: 0; left: 0; height: 6px; box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Keeping name short for faster parsing. cslr = core selections layer rendering (div) */ .monaco-editor .lines-content .cslr { position: absolute; } .monaco-editor .focused .selected-text { background-color: var(--vscode-editor-selectionBackground); } .monaco-editor .selected-text { background-color: var(--vscode-editor-inactiveSelectionBackground); } .monaco-editor .top-left-radius { border-top-left-radius: 3px; } .monaco-editor .bottom-left-radius { border-bottom-left-radius: 3px; } .monaco-editor .top-right-radius { border-top-right-radius: 3px; } .monaco-editor .bottom-right-radius { border-bottom-right-radius: 3px; } .monaco-editor.hc-black .top-left-radius { border-top-left-radius: 0; } .monaco-editor.hc-black .bottom-left-radius { border-bottom-left-radius: 0; } .monaco-editor.hc-black .top-right-radius { border-top-right-radius: 0; } .monaco-editor.hc-black .bottom-right-radius { border-bottom-right-radius: 0; } .monaco-editor.hc-light .top-left-radius { border-top-left-radius: 0; } .monaco-editor.hc-light .bottom-left-radius { border-bottom-left-radius: 0; } .monaco-editor.hc-light .top-right-radius { border-top-right-radius: 0; } .monaco-editor.hc-light .bottom-right-radius { border-bottom-right-radius: 0; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .cursors-layer { position: absolute; top: 0; } .monaco-editor .cursors-layer > .cursor { position: absolute; overflow: hidden; box-sizing: border-box; } /* -- smooth-caret-animation -- */ .monaco-editor .cursors-layer.cursor-smooth-caret-animation > .cursor { transition: all 80ms; } /* -- block-outline-style -- */ .monaco-editor .cursors-layer.cursor-block-outline-style > .cursor { background: transparent !important; border-style: solid; border-width: 1px; } /* -- underline-style -- */ .monaco-editor .cursors-layer.cursor-underline-style > .cursor { border-bottom-width: 2px; border-bottom-style: solid; background: transparent !important; } /* -- underline-thin-style -- */ .monaco-editor .cursors-layer.cursor-underline-thin-style > .cursor { border-bottom-width: 1px; border-bottom-style: solid; background: transparent !important; } @keyframes monaco-cursor-smooth { 0%, 20% { opacity: 1; } 60%, 100% { opacity: 0; } } @keyframes monaco-cursor-phase { 0%, 20% { opacity: 1; } 90%, 100% { opacity: 0; } } @keyframes monaco-cursor-expand { 0%, 20% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0); } } .cursor-smooth { animation: monaco-cursor-smooth 0.5s ease-in-out 0s 20 alternate; } .cursor-phase { animation: monaco-cursor-phase 0.5s ease-in-out 0s 20 alternate; } .cursor-expand > .cursor { animation: monaco-cursor-expand 0.5s ease-in-out 0s 20 alternate; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .mwh { position: absolute; color: var(--vscode-editorWhitespace-foreground) !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* -------------------- IE10 remove auto clear button -------------------- */ ::-ms-clear { display: none; } /* All widgets */ /* I am not a big fan of this rule */ .monaco-editor .editor-widget input { color: inherit; } /* -------------------- Editor -------------------- */ .monaco-editor { position: relative; overflow: visible; -webkit-text-size-adjust: 100%; color: var(--vscode-editor-foreground); background-color: var(--vscode-editor-background); } .monaco-editor-background { background-color: var(--vscode-editor-background); } .monaco-editor .rangeHighlight { background-color: var(--vscode-editor-rangeHighlightBackground); box-sizing: border-box; border: 1px solid var(--vscode-editor-rangeHighlightBorder); } .monaco-editor.hc-black .rangeHighlight, .monaco-editor.hc-light .rangeHighlight { border-style: dotted; } .monaco-editor .symbolHighlight { background-color: var(--vscode-editor-symbolHighlightBackground); box-sizing: border-box; border: 1px solid var(--vscode-editor-symbolHighlightBorder); } .monaco-editor.hc-black .symbolHighlight, .monaco-editor.hc-light .symbolHighlight { border-style: dotted; } /* -------------------- Misc -------------------- */ .monaco-editor .overflow-guard { position: relative; overflow: hidden; } .monaco-editor .view-overlays { position: absolute; top: 0; } .monaco-editor .view-overlays > div, .monaco-editor .margin-view-overlays > div { position: absolute; width: 100%; } /* .monaco-editor .auto-closed-character { opacity: 0.3; } */ .monaco-editor .squiggly-error { border-bottom: 4px double var(--vscode-editorError-border); } .monaco-editor .squiggly-error::before { display: block; content: ''; width: 100%; height: 100%; background: var(--vscode-editorError-background); } .monaco-editor .squiggly-warning { border-bottom: 4px double var(--vscode-editorWarning-border); } .monaco-editor .squiggly-warning::before { display: block; content: ''; width: 100%; height: 100%; background: var(--vscode-editorWarning-background); } .monaco-editor .squiggly-info { border-bottom: 4px double var(--vscode-editorInfo-border); } .monaco-editor .squiggly-info::before { display: block; content: ''; width: 100%; height: 100%; background: var(--vscode-editorInfo-background); } .monaco-editor .squiggly-hint { border-bottom: 2px dotted var(--vscode-editorHint-border); } .monaco-editor.showUnused .squiggly-unnecessary { border-bottom: 2px dashed var(--vscode-editorUnnecessaryCode-border); } .monaco-editor.showDeprecated .squiggly-inline-deprecated { text-decoration: line-through; text-decoration-color: var(--vscode-editor-foreground, inherit); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-component.diff-review { user-select: none; -webkit-user-select: none; z-index: 99; } .monaco-diff-editor .diff-review { position: absolute; } .monaco-component.diff-review .diff-review-line-number { text-align: right; display: inline-block; color: var(--vscode-editorLineNumber-foreground); } .monaco-component.diff-review .diff-review-summary { padding-left: 10px; } .monaco-component.diff-review .diff-review-shadow { position: absolute; box-shadow: var(--vscode-scrollbar-shadow) 0 -6px 6px -6px inset; } .monaco-component.diff-review .diff-review-row { white-space: pre; } .monaco-component.diff-review .diff-review-table { display: table; min-width: 100%; } .monaco-component.diff-review .diff-review-row { display: table-row; width: 100%; } .monaco-component.diff-review .diff-review-spacer { display: inline-block; width: 10px; vertical-align: middle; } .monaco-component.diff-review .diff-review-spacer > .codicon { font-size: 9px !important; } .monaco-component.diff-review .diff-review-actions { display: inline-block; position: absolute; right: 10px; top: 2px; z-index: 100; } .monaco-component.diff-review .diff-review-actions .action-label { width: 16px; height: 16px; margin: 2px 0; } .monaco-component.diff-review .revertButton { cursor: pointer; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .diff-hidden-lines-widget { width: 100%; } .monaco-editor .diff-hidden-lines { height: 0px; /* The children each have a fixed height, the transform confuses the browser */ transform: translate(0px, -10px); font-size: 13px; line-height: 14px; } .monaco-editor .diff-hidden-lines:not(.dragging) .top:hover, .monaco-editor .diff-hidden-lines:not(.dragging) .bottom:hover, .monaco-editor .diff-hidden-lines .top.dragging, .monaco-editor .diff-hidden-lines .bottom.dragging { background-color: var(--vscode-focusBorder); } .monaco-editor .diff-hidden-lines .top, .monaco-editor .diff-hidden-lines .bottom { transition: background-color 0.1s ease-out; height: 4px; background-color: transparent; background-clip: padding-box; border-bottom: 2px solid transparent; border-top: 4px solid transparent; /*cursor: n-resize;*/ } .monaco-editor.draggingUnchangedRegion.canMoveTop:not(.canMoveBottom) *, .monaco-editor .diff-hidden-lines .top.canMoveTop:not(.canMoveBottom), .monaco-editor .diff-hidden-lines .bottom.canMoveTop:not(.canMoveBottom) { cursor: n-resize !important; } .monaco-editor.draggingUnchangedRegion:not(.canMoveTop).canMoveBottom *, .monaco-editor .diff-hidden-lines .top:not(.canMoveTop).canMoveBottom, .monaco-editor .diff-hidden-lines .bottom:not(.canMoveTop).canMoveBottom { cursor: s-resize !important; } .monaco-editor.draggingUnchangedRegion.canMoveTop.canMoveBottom *, .monaco-editor .diff-hidden-lines .top.canMoveTop.canMoveBottom, .monaco-editor .diff-hidden-lines .bottom.canMoveTop.canMoveBottom { cursor: ns-resize !important; } .monaco-editor .diff-hidden-lines .top { transform: translate(0px, 4px); } .monaco-editor .diff-hidden-lines .bottom { transform: translate(0px, -6px); } .monaco-editor .diff-unchanged-lines { background: var(--vscode-diffEditor-unchangedCodeBackground); } .monaco-editor .noModificationsOverlay { z-index: 1; background: var(--vscode-editor-background); display: flex; justify-content: center; align-items: center; } .monaco-editor .diff-hidden-lines .center { background: var(--vscode-diffEditor-unchangedRegionBackground); color: var(--vscode-diffEditor-unchangedRegionForeground); overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; height: 24px; box-shadow: inset 0 -5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow), inset 0 5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow); } .monaco-editor .diff-hidden-lines .center span.codicon { vertical-align: middle; } .monaco-editor .diff-hidden-lines .center a:hover .codicon { cursor: pointer; color: var(--vscode-editorLink-activeForeground) !important; } .monaco-editor .diff-hidden-lines div.breadcrumb-item { cursor: pointer; } .monaco-editor .diff-hidden-lines div.breadcrumb-item:hover { color: var(--vscode-editorLink-activeForeground); } .monaco-editor .movedOriginal { border: 2px solid var(--vscode-diffEditor-move-border); } .monaco-editor .movedModified { border: 2px solid var(--vscode-diffEditor-move-border); } .monaco-editor .movedOriginal.currentMove, .monaco-editor .movedModified.currentMove { border: 2px solid var(--vscode-diffEditor-moveActive-border); } .monaco-diff-editor .moved-blocks-lines path.currentMove { stroke: var(--vscode-diffEditor-moveActive-border); } .monaco-diff-editor .moved-blocks-lines path { pointer-events: visiblestroke; } .monaco-diff-editor .moved-blocks-lines .arrow { fill: var(--vscode-diffEditor-move-border); } .monaco-diff-editor .moved-blocks-lines .arrow.currentMove { fill: var(--vscode-diffEditor-moveActive-border); } .monaco-diff-editor .moved-blocks-lines .arrow-rectangle { fill: var(--vscode-editor-background); } .monaco-diff-editor .moved-blocks-lines { position: absolute; pointer-events: none; } .monaco-diff-editor .moved-blocks-lines path { fill: none; stroke: var(--vscode-diffEditor-move-border); stroke-width: 2; } .monaco-editor .char-delete.diff-range-empty { margin-left: -1px; border-left: solid var(--vscode-diffEditor-removedTextBackground) 3px; } .monaco-editor .char-insert.diff-range-empty { border-left: solid var(--vscode-diffEditor-insertedTextBackground) 3px; } .monaco-editor .fold-unchanged { cursor: pointer; } .monaco-diff-editor .diff-moved-code-block { display: flex; justify-content: flex-end; margin-top: -4px; } .monaco-diff-editor .diff-moved-code-block .action-bar .action-label.codicon { width: 12px; height: 12px; font-size: 12px; } /* ---------- DiffEditor ---------- */ .monaco-diff-editor .diffOverview { z-index: 9; } .monaco-diff-editor .diffOverview .diffViewport { z-index: 10; } /* colors not externalized: using transparancy on background */ .monaco-diff-editor.vs .diffOverview { background: rgba(0, 0, 0, 0.03); } .monaco-diff-editor.vs-dark .diffOverview { background: rgba(255, 255, 255, 0.01); } .monaco-scrollable-element.modified-in-monaco-diff-editor.vs .scrollbar { background: rgba(0,0,0,0); } .monaco-scrollable-element.modified-in-monaco-diff-editor.vs-dark .scrollbar { background: rgba(0,0,0,0); } .monaco-scrollable-element.modified-in-monaco-diff-editor.hc-black .scrollbar { background: none; } .monaco-scrollable-element.modified-in-monaco-diff-editor.hc-light .scrollbar { background: none; } .monaco-scrollable-element.modified-in-monaco-diff-editor .slider { z-index: 10; } .modified-in-monaco-diff-editor .slider.active { background: rgba(171, 171, 171, .4); } .modified-in-monaco-diff-editor.hc-black .slider.active { background: none; } .modified-in-monaco-diff-editor.hc-light .slider.active { background: none; } /* ---------- Diff ---------- */ .monaco-editor .insert-sign, .monaco-diff-editor .insert-sign, .monaco-editor .delete-sign, .monaco-diff-editor .delete-sign { font-size: 11px !important; opacity: 0.7 !important; display: flex !important; align-items: center; } .monaco-editor.hc-black .insert-sign, .monaco-diff-editor.hc-black .insert-sign, .monaco-editor.hc-black .delete-sign, .monaco-diff-editor.hc-black .delete-sign, .monaco-editor.hc-light .insert-sign, .monaco-diff-editor.hc-light .insert-sign, .monaco-editor.hc-light .delete-sign, .monaco-diff-editor.hc-light .delete-sign { opacity: 1; } .monaco-editor .inline-deleted-margin-view-zone { text-align: right; } .monaco-editor .inline-added-margin-view-zone { text-align: right; } .monaco-editor .arrow-revert-change { z-index: 10; position: absolute; } .monaco-editor .arrow-revert-change:hover { cursor: pointer; } /* ---------- Inline Diff ---------- */ .monaco-editor .view-zones .view-lines .view-line span { display: inline-block; } .monaco-editor .margin-view-zones .lightbulb-glyph:hover { cursor: pointer; } .monaco-editor .char-insert, .monaco-diff-editor .char-insert { background-color: var(--vscode-diffEditor-insertedTextBackground); } .monaco-editor .line-insert, .monaco-diff-editor .line-insert { background-color: var(--vscode-diffEditor-insertedLineBackground, var(--vscode-diffEditor-insertedTextBackground)); } .monaco-editor .line-insert, .monaco-editor .char-insert { box-sizing: border-box; border: 1px solid var(--vscode-diffEditor-insertedTextBorder); } .monaco-editor.hc-black .line-insert, .monaco-editor.hc-light .line-insert, .monaco-editor.hc-black .char-insert, .monaco-editor.hc-light .char-insert { border-style: dashed; } .monaco-editor .line-delete, .monaco-editor .char-delete { box-sizing: border-box; border: 1px solid var(--vscode-diffEditor-removedTextBorder); } .monaco-editor.hc-black .line-delete, .monaco-editor.hc-light .line-delete, .monaco-editor.hc-black .char-delete, .monaco-editor.hc-light .char-delete { border-style: dashed; } .monaco-editor .inline-added-margin-view-zone, .monaco-editor .gutter-insert, .monaco-diff-editor .gutter-insert { background-color: var(--vscode-diffEditorGutter-insertedLineBackground, var(--vscode-diffEditor-insertedLineBackground), var(--vscode-diffEditor-insertedTextBackground)); } .monaco-editor .char-delete, .monaco-diff-editor .char-delete { background-color: var(--vscode-diffEditor-removedTextBackground); } .monaco-editor .line-delete, .monaco-diff-editor .line-delete { background-color: var(--vscode-diffEditor-removedLineBackground, var(--vscode-diffEditor-removedTextBackground)); } .monaco-editor .inline-deleted-margin-view-zone, .monaco-editor .gutter-delete, .monaco-diff-editor .gutter-delete { background-color: var(--vscode-diffEditorGutter-removedLineBackground, var(--vscode-diffEditor-removedLineBackground), var(--vscode-diffEditor-removedTextBackground)); } .monaco-diff-editor.side-by-side .editor.modified { box-shadow: -6px 0 5px -5px var(--vscode-scrollbar-shadow); border-left: 1px solid var(--vscode-diffEditor-border); } .monaco-diff-editor.side-by-side .editor.original { box-shadow: 6px 0 5px -5px var(--vscode-scrollbar-shadow); border-right: 1px solid var(--vscode-diffEditor-border); } .monaco-diff-editor .diffViewport { background: var(--vscode-scrollbarSlider-background); } .monaco-diff-editor .diffViewport:hover { background: var(--vscode-scrollbarSlider-hoverBackground); } .monaco-diff-editor .diffViewport:active { background: var(--vscode-scrollbarSlider-activeBackground); } .monaco-editor .diagonal-fill { background-image: linear-gradient( -45deg, var(--vscode-diffEditor-diagonalFill) 12.5%, #0000 12.5%, #0000 50%, var(--vscode-diffEditor-diagonalFill) 50%, var(--vscode-diffEditor-diagonalFill) 62.5%, #0000 62.5%, #0000 100% ); background-size: 8px 8px; } .monaco-diff-editor .gutter { position: relative; overflow: hidden; flex-shrink: 0; flex-grow: 0; } .monaco-diff-editor .gutter > div { position: absolute; } .monaco-diff-editor .gutter .gutterItem { opacity: 0; transition: opacity 0.7s; } .monaco-diff-editor .gutter .gutterItem.showAlways { opacity: 1; transition: none; } .monaco-diff-editor .gutter .gutterItem.noTransition { transition: none; } .monaco-diff-editor .gutter:hover .gutterItem { opacity: 1; transition: opacity 0.1s ease-in-out; } .monaco-diff-editor .gutter .gutterItem .background { position: absolute; height: 100%; left: 50%; width: 1px; border-left: 2px var(--vscode-menu-border) solid; } .monaco-diff-editor .gutter .gutterItem .buttons { position: absolute; /*height: 100%;*/ width: 100%; display: flex; justify-content: center; align-items: center; } .monaco-diff-editor .gutter .gutterItem .buttons .monaco-toolbar { height: fit-content; } .monaco-diff-editor .gutter .gutterItem .buttons .monaco-toolbar .monaco-action-bar { line-height: 1; } .monaco-diff-editor .gutter .gutterItem .buttons .monaco-toolbar .monaco-action-bar .actions-container { width: fit-content; border-radius: 4px; background: var(--vscode-editorGutter-commentRangeForeground); } .monaco-diff-editor .gutter .gutterItem .buttons .monaco-toolbar .monaco-action-bar .actions-container .action-item:hover { background: var(--vscode-toolbar-hoverBackground); } .monaco-diff-editor .gutter .gutterItem .buttons .monaco-toolbar .monaco-action-bar .actions-container .action-item .action-label { padding: 1px 2px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .rendered-markdown kbd { background-color: var(--vscode-keybindingLabel-background); color: var(--vscode-keybindingLabel-foreground); border-style: solid; border-width: 1px; border-radius: 3px; border-color: var(--vscode-keybindingLabel-border); border-bottom-color: var(--vscode-keybindingLabel-bottomBorder); box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow); vertical-align: middle; padding: 1px 3px; } .rendered-markdown li:has(input[type=checkbox]) { list-style-type: none; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-component.multiDiffEditor { background: var(--vscode-multiDiffEditor-background); position: relative; height: 100%; width: 100%; overflow-y: hidden; } .monaco-component.multiDiffEditor > div { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .monaco-component.multiDiffEditor > div.placeholder { visibility: hidden; display: grid; place-items: center; place-content: center; } .monaco-component.multiDiffEditor > div.placeholder.visible { visibility: visible; } .monaco-component.multiDiffEditor .active { --vscode-multiDiffEditor-border: var(--vscode-focusBorder); } .monaco-component.multiDiffEditor .multiDiffEntry { display: flex; flex-direction: column; flex: 1; overflow: hidden; } .monaco-component.multiDiffEditor .multiDiffEntry .collapse-button { margin: 0 5px; cursor: pointer; } .monaco-component.multiDiffEditor .multiDiffEntry .collapse-button a { display: block; } .monaco-component.multiDiffEditor .multiDiffEntry .header { z-index: 1000; background: var(--vscode-editor-background); } .monaco-component.multiDiffEditor .multiDiffEntry .header:not(.collapsed) .header-content { border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border); } .monaco-component.multiDiffEditor .multiDiffEntry .header .header-content { margin: 8px 0px 0px 0px; padding: 4px 5px; border-top: 1px solid var(--vscode-multiDiffEditor-border); display: flex; align-items: center; color: var(--vscode-foreground); background: var(--vscode-multiDiffEditor-headerBackground); } .monaco-component.multiDiffEditor .multiDiffEntry .header .header-content.shadow { box-shadow: var(--vscode-scrollbar-shadow) 0px 6px 6px -6px; } .monaco-component.multiDiffEditor .multiDiffEntry .header .header-content .file-path { display: flex; flex: 1; min-width: 0; } .monaco-component.multiDiffEditor .multiDiffEntry .header .header-content .file-path .title { font-size: 14px; line-height: 22px; } .monaco-component.multiDiffEditor .multiDiffEntry .header .header-content .file-path .title.original { flex: 1; min-width: 0; text-overflow: ellipsis; } .monaco-component.multiDiffEditor .multiDiffEntry .header .header-content .file-path .status { font-weight: 600; opacity: 0.75; margin: 0px 10px; line-height: 22px; /* TODO@hediet: move colors from git extension to core! &.renamed { color: v ar(--vscode-gitDecoration-renamedResourceForeground); } &.deleted { color: v ar(--vscode-gitDecoration-deletedResourceForeground); } &.added { color: v ar(--vscode-gitDecoration-addedResourceForeground); } */ } .monaco-component.multiDiffEditor .multiDiffEntry .header .header-content .actions { padding: 0 8px; } .monaco-component.multiDiffEditor .multiDiffEntry .editorParent { flex: 1; display: flex; flex-direction: column; border-bottom: 1px solid var(--vscode-multiDiffEditor-border); overflow: hidden; } .monaco-component.multiDiffEditor .multiDiffEntry .editorContainer { flex: 1; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .selection-anchor { background-color: #007ACC; width: 2px !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .bracket-match { box-sizing: border-box; background-color: var(--vscode-editorBracketMatch-background); border: 1px solid var(--vscode-editorBracketMatch-border); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .lightBulbWidget { display: flex; align-items: center; justify-content: center; } .monaco-editor .lightBulbWidget:hover{ cursor: pointer; } .monaco-editor .lightBulbWidget.codicon-light-bulb, .monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle { color: var(--vscode-editorLightBulb-foreground); } .monaco-editor .lightBulbWidget.codicon-lightbulb-autofix, .monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle-autofix { color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground)); } .monaco-editor .lightBulbWidget.codicon-sparkle-filled { color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground)); } .monaco-editor .lightBulbWidget:before { position: relative; z-index: 2; } .monaco-editor .lightBulbWidget:after { position: absolute; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100%; opacity: 0.3; background-color: var(--vscode-editor-background); z-index: 1; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .codelens-decoration { overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; color: var(--vscode-editorCodeLens-foreground); line-height: var(--vscode-editorCodeLens-lineHeight); font-size: var(--vscode-editorCodeLens-fontSize); padding-right: calc(var(--vscode-editorCodeLens-fontSize)*0.5); font-feature-settings: var(--vscode-editorCodeLens-fontFeatureSettings); font-family: var(--vscode-editorCodeLens-fontFamily), var(--vscode-editorCodeLens-fontFamilyDefault); } .monaco-editor .codelens-decoration > span, .monaco-editor .codelens-decoration > a { user-select: none; -webkit-user-select: none; white-space: nowrap; vertical-align: sub; } .monaco-editor .codelens-decoration > a { text-decoration: none; } .monaco-editor .codelens-decoration > a:hover { cursor: pointer; color: var(--vscode-editorLink-activeForeground) !important; } .monaco-editor .codelens-decoration > a:hover .codicon { color: var(--vscode-editorLink-activeForeground) !important; } .monaco-editor .codelens-decoration .codicon { vertical-align: middle; color: currentColor !important; color: var(--vscode-editorCodeLens-foreground); line-height: var(--vscode-editorCodeLens-lineHeight); font-size: var(--vscode-editorCodeLens-fontSize); } .monaco-editor .codelens-decoration > a:hover .codicon::before { cursor: pointer; } @keyframes fadein { 0% { opacity: 0; visibility: visible; } 100% { opacity: 1; } } .monaco-editor .codelens-decoration.fadein { animation: fadein 0.1s linear; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .colorpicker-widget { height: 190px; user-select: none; -webkit-user-select: none; } /* Decoration */ .colorpicker-color-decoration, .hc-light .colorpicker-color-decoration { border: solid 0.1em #000; box-sizing: border-box; margin: 0.1em 0.2em 0 0.2em; width: 0.8em; height: 0.8em; line-height: 0.8em; display: inline-block; cursor: pointer; } .hc-black .colorpicker-color-decoration, .vs-dark .colorpicker-color-decoration { border: solid 0.1em #eee; } /* Header */ .colorpicker-header { display: flex; height: 24px; position: relative; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=); background-size: 9px 9px; image-rendering: pixelated; } .colorpicker-header .picked-color { width: 240px; display: flex; align-items: center; justify-content: center; line-height: 24px; cursor: pointer; color: white; flex: 1; white-space: nowrap; overflow: hidden; } .colorpicker-header .picked-color .picked-color-presentation { white-space: nowrap; margin-left: 5px; margin-right: 5px; } .colorpicker-header .picked-color .codicon { color: inherit; font-size: 14px; } .colorpicker-header .picked-color.light { color: black; } .colorpicker-header .original-color { width: 74px; z-index: inherit; cursor: pointer; } .standalone-colorpicker { color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); } .colorpicker-header.standalone-colorpicker { border-bottom: none; } .colorpicker-header .close-button { cursor: pointer; background-color: var(--vscode-editorHoverWidget-background); border-left: 1px solid var(--vscode-editorHoverWidget-border); } .colorpicker-header .close-button-inner-div { width: 100%; height: 100%; text-align: center; } .colorpicker-header .close-button-inner-div:hover { background-color: var(--vscode-toolbar-hoverBackground); } .colorpicker-header .close-icon { padding: 3px; } /* Body */ .colorpicker-body { display: flex; padding: 8px; position: relative; } .colorpicker-body .saturation-wrap { overflow: hidden; height: 150px; position: relative; min-width: 220px; flex: 1; } .colorpicker-body .saturation-box { height: 150px; position: absolute; } .colorpicker-body .saturation-selection { width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1px solid rgb(255, 255, 255); border-radius: 100%; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8); position: absolute; } .colorpicker-body .strip { width: 25px; height: 150px; } .colorpicker-body .standalone-strip { width: 25px; height: 122px; } .colorpicker-body .hue-strip { position: relative; margin-left: 8px; cursor: grab; background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } .colorpicker-body .opacity-strip { position: relative; margin-left: 8px; cursor: grab; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=); background-size: 9px 9px; image-rendering: pixelated; } .colorpicker-body .strip.grabbing { cursor: grabbing; } .colorpicker-body .slider { position: absolute; top: 0; left: -2px; width: calc(100% + 4px); height: 4px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.71); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85); } .colorpicker-body .strip .overlay { height: 150px; pointer-events: none; } .colorpicker-body .standalone-strip .standalone-overlay { height: 122px; pointer-events: none; } .standalone-colorpicker-body { display: block; border: 1px solid transparent; border-bottom: 1px solid var(--vscode-editorHoverWidget-border); overflow: hidden; } .colorpicker-body .insert-button { position: absolute; height: 20px; width: 58px; padding: 0px; right: 8px; bottom: 8px; background: var(--vscode-button-background); color: var(--vscode-button-foreground); border-radius: 2px; border: none; cursor: pointer; } .colorpicker-body .insert-button:hover{ background: var(--vscode-button-hoverBackground); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor.vs .dnd-target, .monaco-editor.hc-light .dnd-target { border-right: 2px dotted black; color: white; /* opposite of black */ } .monaco-editor.vs-dark .dnd-target { border-right: 2px dotted #AEAFAD; color: #51504f; /* opposite of #AEAFAD */ } .monaco-editor.hc-black .dnd-target { border-right: 2px dotted #fff; color: #000; /* opposite of #fff */ } .monaco-editor.mouse-default .view-lines, .monaco-editor.vs-dark.mac.mouse-default .view-lines, .monaco-editor.hc-black.mac.mouse-default .view-lines, .monaco-editor.hc-light.mac.mouse-default .view-lines { cursor: default; } .monaco-editor.mouse-copy .view-lines, .monaco-editor.vs-dark.mac.mouse-copy .view-lines, .monaco-editor.hc-black.mac.mouse-copy .view-lines, .monaco-editor.hc-light.mac.mouse-copy .view-lines { cursor: copy; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .post-edit-widget { box-shadow: 0 0 8px 2px var(--vscode-widget-shadow); border: 1px solid var(--vscode-widget-border, transparent); border-radius: 4px; background-color: var(--vscode-editorWidget-background); overflow: hidden; } .post-edit-widget .monaco-button { padding: 2px; border: none; border-radius: 0; } .post-edit-widget .monaco-button:hover { background-color: var(--vscode-button-secondaryHoverBackground) !important; } .post-edit-widget .monaco-button .codicon { margin: 0; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .findOptionsWidget { background-color: var(--vscode-editorWidget-background); color: var(--vscode-editorWidget-foreground); box-shadow: 0 0 8px 2px var(--vscode-widget-shadow); border: 2px solid var(--vscode-contrastBorder); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Find widget */ .monaco-editor .find-widget { position: absolute; z-index: 35; height: 33px; overflow: hidden; line-height: 19px; transition: transform 200ms linear; padding: 0 4px; box-sizing: border-box; transform: translateY(calc(-100% - 10px)); /* shadow (10px) */ box-shadow: 0 0 8px 2px var(--vscode-widget-shadow); color: var(--vscode-editorWidget-foreground); border-left: 1px solid var(--vscode-widget-border); border-right: 1px solid var(--vscode-widget-border); border-bottom: 1px solid var(--vscode-widget-border); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: var(--vscode-editorWidget-background); } .monaco-workbench.reduce-motion .monaco-editor .find-widget { transition: transform 0ms linear; } .monaco-editor .find-widget textarea { margin: 0px; } .monaco-editor .find-widget.hiddenEditor { display: none; } /* Find widget when replace is toggled on */ .monaco-editor .find-widget.replaceToggled > .replace-part { display: flex; } .monaco-editor .find-widget.visible { transform: translateY(0); } /* This outline-color rule is used to override the outline color for synthetic-focus find input. */ .monaco-editor .find-widget .monaco-inputbox.synthetic-focus { outline: 1px solid -webkit-focus-ring-color; outline-offset: -1px; outline-color: var(--vscode-focusBorder); } .monaco-editor .find-widget .monaco-inputbox .input { background-color: transparent; min-height: 0; } .monaco-editor .find-widget .monaco-findInput .input { font-size: 13px; } .monaco-editor .find-widget > .find-part, .monaco-editor .find-widget > .replace-part { margin: 3px 25px 0 17px; font-size: 12px; display: flex; } .monaco-editor .find-widget > .find-part .monaco-inputbox, .monaco-editor .find-widget > .replace-part .monaco-inputbox { min-height: 25px; } .monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror { padding-right: 22px; } .monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .input, .monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .mirror, .monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .input, .monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror { padding-top: 2px; padding-bottom: 2px; } .monaco-editor .find-widget > .find-part .find-actions { height: 25px; display: flex; align-items: center; } .monaco-editor .find-widget > .replace-part .replace-actions { height: 25px; display: flex; align-items: center; } .monaco-editor .find-widget .monaco-findInput { vertical-align: middle; display: flex; flex:1; } .monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element { /* Make sure textarea inherits the width correctly */ width: 100%; } .monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical { /* Hide vertical scrollbar */ opacity: 0; } .monaco-editor .find-widget .matchesCount { display: flex; flex: initial; margin: 0 0 0 3px; padding: 2px 0 0 2px; height: 25px; vertical-align: middle; box-sizing: border-box; text-align: center; line-height: 23px; } .monaco-editor .find-widget .button { width: 16px; height: 16px; padding: 3px; border-radius: 5px; display: flex; flex: initial; margin-left: 3px; background-position: center center; background-repeat: no-repeat; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* find in selection button */ .monaco-editor .find-widget .codicon-find-selection { width: 22px; height: 22px; padding: 3px; border-radius: 5px; } .monaco-editor .find-widget .button.left { margin-left: 0; margin-right: 3px; } .monaco-editor .find-widget .button.wide { width: auto; padding: 1px 6px; top: -1px; } .monaco-editor .find-widget .button.toggle { position: absolute; top: 0; left: 3px; width: 18px; height: 100%; border-radius: 0; box-sizing: border-box; } .monaco-editor .find-widget .button.toggle.disabled { display: none; } .monaco-editor .find-widget .disabled { color: var(--vscode-disabledForeground); cursor: default; } .monaco-editor .find-widget > .replace-part { display: none; } .monaco-editor .find-widget > .replace-part > .monaco-findInput { position: relative; display: flex; vertical-align: middle; flex: auto; flex-grow: 0; flex-shrink: 0; } .monaco-editor .find-widget > .replace-part > .monaco-findInput > .controls { position: absolute; top: 3px; right: 2px; } /* REDUCED */ .monaco-editor .find-widget.reduced-find-widget .matchesCount { display:none; } /* NARROW (SMALLER THAN REDUCED) */ .monaco-editor .find-widget.narrow-find-widget { max-width: 257px !important; } /* COLLAPSED (SMALLER THAN NARROW) */ .monaco-editor .find-widget.collapsed-find-widget { max-width: 170px !important; } .monaco-editor .find-widget.collapsed-find-widget .button.previous, .monaco-editor .find-widget.collapsed-find-widget .button.next, .monaco-editor .find-widget.collapsed-find-widget .button.replace, .monaco-editor .find-widget.collapsed-find-widget .button.replace-all, .monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls { display:none; } .monaco-editor .find-widget.no-results .matchesCount { color: var(--vscode-errorForeground); } .monaco-editor .findMatch { animation-duration: 0; animation-name: inherit !important; background-color: var(--vscode-editor-findMatchHighlightBackground); } .monaco-editor .currentFindMatch { background-color: var(--vscode-editor-findMatchBackground); border: 2px solid var(--vscode-editor-findMatchBorder); padding: 1px; box-sizing: border-box; } .monaco-editor .findScope { background-color: var(--vscode-editor-findRangeHighlightBackground); } .monaco-editor .find-widget .monaco-sash { left: 0 !important; background-color: var(--vscode-editorWidget-resizeBorder, var(--vscode-editorWidget-border)); } .monaco-editor.hc-black .find-widget .button:before { position: relative; top: 1px; left: 2px; } /* Action bars */ .monaco-editor .find-widget .button:not(.disabled):hover, .monaco-editor .find-widget .codicon-find-selection:hover { background-color: var(--vscode-toolbar-hoverBackground) !important; } .monaco-editor.findMatch { background-color: var(--vscode-editor-findMatchHighlightBackground); } .monaco-editor.currentFindMatch { background-color: var(--vscode-editor-findMatchBackground); } .monaco-editor.findScope { background-color: var(--vscode-editor-findRangeHighlightBackground); } .monaco-editor.findMatch { background-color: var(--vscode-editorWidget-background); } /* Close button position. */ .monaco-editor .find-widget > .button.codicon-widget-close { position: absolute; top: 5px; right: 4px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed, .monaco-editor .margin-view-overlays .codicon-folding-manual-expanded, .monaco-editor .margin-view-overlays .codicon-folding-expanded, .monaco-editor .margin-view-overlays .codicon-folding-collapsed { cursor: pointer; opacity: 0; transition: opacity 0.5s; display: flex; align-items: center; justify-content: center; font-size: 140%; margin-left: 2px; } .monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed, .monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-expanded, .monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-expanded, .monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-collapsed { transition: initial; } .monaco-editor .margin-view-overlays:hover .codicon, .monaco-editor .margin-view-overlays .codicon.codicon-folding-collapsed, .monaco-editor .margin-view-overlays .codicon.codicon-folding-manual-collapsed, .monaco-editor .margin-view-overlays .codicon.alwaysShowFoldIcons { opacity: 1; } .monaco-editor .inline-folded:after { color: grey; margin: 0.1em 0.2em 0 0.2em; content: "\22EF"; /* ellipses unicode character */ display: inline; line-height: 1em; cursor: pointer; } .monaco-editor .folded-background { background-color: var(--vscode-editor-foldBackground); } .monaco-editor .cldr.codicon.codicon-folding-expanded, .monaco-editor .cldr.codicon.codicon-folding-collapsed, .monaco-editor .cldr.codicon.codicon-folding-manual-expanded, .monaco-editor .cldr.codicon.codicon-folding-manual-collapsed { color: var(--vscode-editorGutter-foldingControlForeground) !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* marker zone */ .monaco-editor .peekview-widget .head .peekview-title .severity-icon { display: inline-block; vertical-align: text-top; margin-right: 4px; } .monaco-editor .marker-widget { text-overflow: ellipsis; white-space: nowrap; } .monaco-editor .marker-widget > .stale { opacity: 0.6; font-style: italic; } .monaco-editor .marker-widget .title { display: inline-block; padding-right: 5px; } .monaco-editor .marker-widget .descriptioncontainer { position: absolute; white-space: pre; user-select: text; -webkit-user-select: text; padding: 8px 12px 0 20px; } .monaco-editor .marker-widget .descriptioncontainer .message { display: flex; flex-direction: column; } .monaco-editor .marker-widget .descriptioncontainer .message .details { padding-left: 6px; } .monaco-editor .marker-widget .descriptioncontainer .message .source, .monaco-editor .marker-widget .descriptioncontainer .message span.code { opacity: 0.6; } .monaco-editor .marker-widget .descriptioncontainer .message a.code-link { opacity: 0.6; color: inherit; } .monaco-editor .marker-widget .descriptioncontainer .message a.code-link:before { content: '('; } .monaco-editor .marker-widget .descriptioncontainer .message a.code-link:after { content: ')'; } .monaco-editor .marker-widget .descriptioncontainer .message a.code-link > span { text-decoration: underline; /** Hack to force underline to show **/ border-bottom: 1px solid transparent; text-underline-position: under; color: var(--vscode-textLink-activeForeground); } .monaco-editor .marker-widget .descriptioncontainer .filename { cursor: pointer; color: var(--vscode-textLink-activeForeground); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .goto-definition-link { text-decoration: underline; cursor: pointer; color: var(--vscode-editorLink-activeForeground) !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* -- zone widget */ .monaco-editor .zone-widget .zone-widget-container.reference-zone-widget { border-top-width: 1px; border-bottom-width: 1px; } .monaco-editor .reference-zone-widget .inline { display: inline-block; vertical-align: top; } .monaco-editor .reference-zone-widget .messages { height: 100%; width: 100%; text-align: center; padding: 3em 0; } .monaco-editor .reference-zone-widget .ref-tree { line-height: 23px; background-color: var(--vscode-peekViewResult-background); color: var(--vscode-peekViewResult-lineForeground); } .monaco-editor .reference-zone-widget .ref-tree .reference { text-overflow: ellipsis; overflow: hidden; } .monaco-editor .reference-zone-widget .ref-tree .reference-file { display: inline-flex; width: 100%; height: 100%; color: var(--vscode-peekViewResult-fileForeground); } .monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .selected .reference-file { color: inherit !important; } .monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) { background-color: var(--vscode-peekViewResult-selectionBackground); color: var(--vscode-peekViewResult-selectionForeground) !important; } .monaco-editor .reference-zone-widget .ref-tree .reference-file .count { margin-right: 12px; margin-left: auto; } .monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight { background-color: var(--vscode-peekViewResult-matchHighlightBackground); } .monaco-editor .reference-zone-widget .preview .reference-decoration { background-color: var(--vscode-peekViewEditor-matchHighlightBackground); border: 2px solid var(--vscode-peekViewEditor-matchHighlightBorder); box-sizing: border-box; } .monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background, .monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input { background-color: var(--vscode-peekViewEditor-background); } .monaco-editor .reference-zone-widget .preview .monaco-editor .margin { background-color: var(--vscode-peekViewEditorGutter-background); } /* High Contrast Theming */ .monaco-editor.hc-black .reference-zone-widget .ref-tree .reference-file, .monaco-editor.hc-light .reference-zone-widget .ref-tree .reference-file { font-weight: bold; } .monaco-editor.hc-black .reference-zone-widget .ref-tree .referenceMatch .highlight, .monaco-editor.hc-light .reference-zone-widget .ref-tree .referenceMatch .highlight { border: 1px dotted var(--vscode-contrastActiveBorder, transparent); box-sizing: border-box; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .hoverHighlight { background-color: var(--vscode-editor-hoverHighlightBackground); } .monaco-editor .monaco-hover-content { padding-right: 2px; padding-bottom: 2px; box-sizing: border-box; } .monaco-editor .monaco-hover { color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); border-radius: 3px; } .monaco-editor .monaco-hover a { color: var(--vscode-textLink-foreground); } .monaco-editor .monaco-hover a:hover { color: var(--vscode-textLink-activeForeground); } .monaco-editor .monaco-hover .hover-row { display: flex; } .monaco-editor .monaco-hover .hover-row .hover-row-contents { min-width:0; display: flex; flex-direction: column; } .monaco-editor .monaco-hover .hover-row .verbosity-actions { display: flex; flex-direction: column; padding-left: 5px; padding-right: 5px; justify-content: end; border-right: 1px solid var(--vscode-editorHoverWidget-border); } .monaco-editor .monaco-hover .hover-row .verbosity-actions .codicon { cursor: pointer; font-size: 11px; } .monaco-editor .monaco-hover .hover-row .verbosity-actions .codicon.enabled { color: var(--vscode-textLink-foreground); } .monaco-editor .monaco-hover .hover-row .verbosity-actions .codicon.disabled { opacity: 0.6; } .monaco-editor .monaco-hover .hover-row .actions { background-color: var(--vscode-editorHoverWidget-statusBarBackground); } .monaco-editor .monaco-hover code { background-color: var(--vscode-textCodeBlock-background); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor.vs .valueSetReplacement { outline: solid 2px var(--vscode-editorBracketMatch-border); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .suggest-preview-additional-widget { white-space: nowrap; } .monaco-editor .suggest-preview-additional-widget .content-spacer { color: transparent; white-space: pre; } .monaco-editor .suggest-preview-additional-widget .button { display: inline-block; cursor: pointer; text-decoration: underline; text-underline-position: under; } .monaco-editor .ghost-text-hidden { opacity: 0; font-size: 0; } .monaco-editor .ghost-text-decoration, .monaco-editor .suggest-preview-text .ghost-text { font-style: italic; } .monaco-editor .inline-completion-text-to-replace { text-decoration: underline; text-underline-position: under; } .monaco-editor .ghost-text-decoration, .monaco-editor .ghost-text-decoration-preview, .monaco-editor .suggest-preview-text .ghost-text { color: var(--vscode-editorGhostText-foreground) !important; background-color: var(--vscode-editorGhostText-background); border: 1px solid var(--vscode-editorGhostText-border); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .inlineSuggestionsHints.withBorder { z-index: 39; color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); } .monaco-editor .inlineSuggestionsHints a { color: var(--vscode-foreground); } .monaco-editor .inlineSuggestionsHints a:hover { color: var(--vscode-foreground); } .monaco-editor .inlineSuggestionsHints .keybinding { display: flex; margin-left: 4px; opacity: 0.6; } .monaco-editor .inlineSuggestionsHints .keybinding .monaco-keybinding-key { font-size: 8px; padding: 2px 3px; } .monaco-editor .inlineSuggestionsHints .availableSuggestionCount a { display: flex; min-width: 19px; justify-content: center; } .monaco-editor .inlineSuggestionStatusBarItemLabel { margin-right: 2px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .inline-edit-remove { background-color: var(--vscode-editorGhostText-background); font-style: italic; text-decoration: line-through; } .monaco-editor .inline-edit-remove.backgroundColoring { background-color: var(--vscode-diffEditor-removedLineBackground); } .monaco-editor .inline-edit-hidden { opacity: 0; font-size: 0; } .monaco-editor .inline-edit-decoration, .monaco-editor .suggest-preview-text .inline-edit { font-style: italic; } .monaco-editor .inline-completion-text-to-replace { text-decoration: underline; text-underline-position: under; } .monaco-editor .inline-edit-decoration, .monaco-editor .inline-edit-decoration-preview, .monaco-editor .suggest-preview-text .inline-edit { color: var(--vscode-editorGhostText-foreground) !important; background-color: var(--vscode-editorGhostText-background); border: 1px solid var(--vscode-editorGhostText-border); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .inlineEditHints.withBorder { z-index: 39; color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); } .monaco-editor .inlineEditHints a { color: var(--vscode-foreground); } .monaco-editor .inlineEditHints a:hover { color: var(--vscode-foreground); } .monaco-editor .inlineEditHints .keybinding { display: flex; margin-left: 4px; opacity: 0.6; } .monaco-editor .inlineEditHints .keybinding .monaco-keybinding-key { font-size: 8px; padding: 2px 3px; } .monaco-editor .inlineEditStatusBarItemLabel { margin-right: 2px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .inline-editor-progress-decoration { display: inline-block; width: 1em; height: 1em; } .inline-progress-widget { display: flex !important; justify-content: center; align-items: center; } .inline-progress-widget .icon { font-size: 80% !important; } .inline-progress-widget:hover .icon { font-size: 90% !important; animation: none; } .inline-progress-widget:hover .icon::before { content: var(--vscode-icon-x-content); font-family: var(--vscode-icon-x-font-family); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .linked-editing-decoration { background-color: var(--vscode-editor-linkedEditingBackground); /* Ensure decoration is visible even if range is empty */ min-width: 1px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .detected-link, .monaco-editor .detected-link-active { text-decoration: underline; text-underline-position: under; } .monaco-editor .detected-link-active { cursor: pointer; color: var(--vscode-editorLink-activeForeground) !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .monaco-editor-overlaymessage { padding-bottom: 8px; z-index: 10000; } .monaco-editor .monaco-editor-overlaymessage.below { padding-bottom: 0; padding-top: 8px; z-index: 10000; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .monaco-editor .monaco-editor-overlaymessage.fadeIn { animation: fadeIn 150ms ease-out; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .monaco-editor .monaco-editor-overlaymessage.fadeOut { animation: fadeOut 100ms ease-out; } .monaco-editor .monaco-editor-overlaymessage .message { padding: 2px 4px; color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-inputValidation-infoBorder); border-radius: 3px; } .monaco-editor .monaco-editor-overlaymessage .message p { margin-block: 0px; } .monaco-editor .monaco-editor-overlaymessage .message a { color: var(--vscode-textLink-foreground); } .monaco-editor .monaco-editor-overlaymessage .message a:hover { color: var(--vscode-textLink-activeForeground); } .monaco-editor.hc-black .monaco-editor-overlaymessage .message, .monaco-editor.hc-light .monaco-editor-overlaymessage .message { border-width: 2px; } .monaco-editor .monaco-editor-overlaymessage .anchor { width: 0 !important; height: 0 !important; border-color: transparent; border-style: solid; z-index: 1000; border-width: 8px; position: absolute; left: 2px; } .monaco-editor .monaco-editor-overlaymessage .anchor.top { border-bottom-color: var(--vscode-inputValidation-infoBorder); } .monaco-editor .monaco-editor-overlaymessage .anchor.below { border-top-color: var(--vscode-inputValidation-infoBorder); } .monaco-editor .monaco-editor-overlaymessage:not(.below) .anchor.top, .monaco-editor .monaco-editor-overlaymessage.below .anchor.below { display: none; } .monaco-editor .monaco-editor-overlaymessage.below .anchor.top { display: inherit; top: -8px; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .parameter-hints-widget { /* Must be higher than the sash's z-index and terminal canvases but lower than the suggest widget */ z-index: 39; display: flex; flex-direction: column; line-height: 1.5em; cursor: default; color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); } .hc-black .monaco-editor .parameter-hints-widget, .hc-light .monaco-editor .parameter-hints-widget { border-width: 2px; } .monaco-editor .parameter-hints-widget > .phwrapper { max-width: 440px; display: flex; flex-direction: row; } .monaco-editor .parameter-hints-widget.multiple { min-height: 3.3em; padding: 0; } .monaco-editor .parameter-hints-widget.multiple .body::before { content: ""; display: block; height: 100%; position: absolute; opacity: 0.5; border-left: 1px solid var(--vscode-editorHoverWidget-border); } .monaco-editor .parameter-hints-widget p, .monaco-editor .parameter-hints-widget ul { margin: 8px 0; } .monaco-editor .parameter-hints-widget .monaco-scrollable-element, .monaco-editor .parameter-hints-widget .body { display: flex; flex: 1; flex-direction: column; min-height: 100%; } .monaco-editor .parameter-hints-widget .signature { padding: 4px 5px; position: relative; } .monaco-editor .parameter-hints-widget .signature.has-docs::after { content: ""; display: block; position: absolute; left: 0; width: 100%; padding-top: 4px; opacity: 0.5; border-bottom: 1px solid var(--vscode-editorHoverWidget-border); } .monaco-editor .parameter-hints-widget .docs { padding: 0 10px 0 5px; white-space: pre-wrap; } .monaco-editor .parameter-hints-widget .docs.empty { display: none; } .monaco-editor .parameter-hints-widget .docs a { color: var(--vscode-textLink-foreground); } .monaco-editor .parameter-hints-widget .docs a:hover { color: var(--vscode-textLink-activeForeground); cursor: pointer; } .monaco-editor .parameter-hints-widget .docs .markdown-docs { white-space: initial; } .monaco-editor .parameter-hints-widget .docs code { font-family: var(--monaco-monospace-font); border-radius: 3px; padding: 0 0.4em; background-color: var(--vscode-textCodeBlock-background); } .monaco-editor .parameter-hints-widget .docs .monaco-tokenized-source, .monaco-editor .parameter-hints-widget .docs .code { white-space: pre-wrap; } .monaco-editor .parameter-hints-widget .controls { display: none; flex-direction: column; align-items: center; min-width: 22px; justify-content: flex-end; } .monaco-editor .parameter-hints-widget.multiple .controls { display: flex; padding: 0 2px; } .monaco-editor .parameter-hints-widget.multiple .button { width: 16px; height: 16px; background-repeat: no-repeat; cursor: pointer; } .monaco-editor .parameter-hints-widget .button.previous { bottom: 24px; } .monaco-editor .parameter-hints-widget .overloads { text-align: center; height: 12px; line-height: 12px; font-family: var(--monaco-monospace-font); } .monaco-editor .parameter-hints-widget .signature .parameter.active { color: var(--vscode-editorHoverWidget-highlightForeground); font-weight: bold; } .monaco-editor .parameter-hints-widget .documentation-parameter > .parameter { font-weight: bold; margin-right: 0.5em; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .peekview-widget .head { box-sizing: border-box; display: flex; justify-content: space-between; flex-wrap: nowrap; } .monaco-editor .peekview-widget .head .peekview-title { display: flex; align-items: baseline; font-size: 13px; margin-left: 20px; min-width: 0; text-overflow: ellipsis; overflow: hidden; } .monaco-editor .peekview-widget .head .peekview-title.clickable { cursor: pointer; } .monaco-editor .peekview-widget .head .peekview-title .dirname:not(:empty) { font-size: 0.9em; margin-left: 0.5em; } .monaco-editor .peekview-widget .head .peekview-title .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .monaco-editor .peekview-widget .head .peekview-title .dirname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monaco-editor .peekview-widget .head .peekview-title .filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monaco-editor .peekview-widget .head .peekview-title .meta:not(:empty)::before { content: '-'; padding: 0 0.3em; } .monaco-editor .peekview-widget .head .peekview-actions { flex: 1; text-align: right; padding-right: 2px; } .monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar { display: inline-block; } .monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar, .monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar > .actions-container { height: 100%; } .monaco-editor .peekview-widget > .body { border-top: 1px solid; position: relative; } .monaco-editor .peekview-widget .head .peekview-title .codicon { margin-right: 4px; align-self: center; } .monaco-editor .peekview-widget .monaco-list .monaco-list-row.focused .codicon { color: inherit !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .rename-box { z-index: 100; color: inherit; border-radius: 4px; } .monaco-editor .rename-box.preview { padding: 4px 4px 0 4px; } .monaco-editor .rename-box .rename-input-with-button { padding: 3px; border-radius: 2px; width: calc(100% - 8px); /* 4px padding on each side */ } .monaco-editor .rename-box .rename-input { width: calc(100% - 8px); /* 4px padding on each side */ padding: 0; } .monaco-editor .rename-box .rename-input:focus { outline: none; } .monaco-editor .rename-box .rename-suggestions-button { display: flex; align-items: center; padding: 3px; background-color: transparent; border: none; border-radius: 5px; cursor: pointer; } .monaco-editor .rename-box .rename-suggestions-button:hover { background-color: var(--vscode-toolbar-hoverBackground) } .monaco-editor .rename-box .rename-candidate-list-container .monaco-list-row { border-radius: 2px; } .monaco-editor .rename-box .rename-label { display: none; opacity: .8; } .monaco-editor .rename-box.preview .rename-label { display: inherit; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .snippet-placeholder { min-width: 2px; outline-style: solid; outline-width: 1px; background-color: var(--vscode-editor-snippetTabstopHighlightBackground, transparent); outline-color: var(--vscode-editor-snippetTabstopHighlightBorder, transparent); } .monaco-editor .finish-snippet-placeholder { outline-style: solid; outline-width: 1px; background-color: var(--vscode-editor-snippetFinalTabstopHighlightBackground, transparent); outline-color: var(--vscode-editor-snippetFinalTabstopHighlightBorder, transparent); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .sticky-widget { overflow: hidden; } .monaco-editor .sticky-widget-line-numbers { float: left; background-color: inherit; } .monaco-editor .sticky-widget-lines-scrollable { display: inline-block; position: absolute; overflow: hidden; width: var(--vscode-editorStickyScroll-scrollableWidth); background-color: inherit; } .monaco-editor .sticky-widget-lines { position: absolute; background-color: inherit; } .monaco-editor .sticky-line-number, .monaco-editor .sticky-line-content { color: var(--vscode-editorLineNumber-foreground); white-space: nowrap; display: inline-block; position: absolute; background-color: inherit; } .monaco-editor .sticky-line-number .codicon-folding-expanded, .monaco-editor .sticky-line-number .codicon-folding-collapsed { float: right; transition: var(--vscode-editorStickyScroll-foldingOpacityTransition); } .monaco-editor .sticky-line-content { width: var(--vscode-editorStickyScroll-scrollableWidth); background-color: inherit; white-space: nowrap; } .monaco-editor .sticky-line-number-inner { display: inline-block; text-align: right; } .monaco-editor .sticky-widget { border-bottom: 1px solid var(--vscode-editorStickyScroll-border); } .monaco-editor .sticky-line-content:hover { background-color: var(--vscode-editorStickyScrollHover-background); cursor: pointer; } .monaco-editor .sticky-widget { width: 100%; box-shadow: var(--vscode-editorStickyScroll-shadow) 0 3px 2px -2px; z-index: 4; background-color: var(--vscode-editorStickyScroll-background); right: initial !important; } .monaco-editor .sticky-widget.peek { background-color: var(--vscode-peekViewEditorStickyScroll-background); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Suggest widget*/ .monaco-editor .suggest-widget { width: 430px; z-index: 40; display: flex; flex-direction: column; border-radius: 3px; } .monaco-editor .suggest-widget.message { flex-direction: row; align-items: center; } .monaco-editor .suggest-widget, .monaco-editor .suggest-details { flex: 0 1 auto; width: 100%; border-style: solid; border-width: 1px; border-color: var(--vscode-editorSuggestWidget-border); background-color: var(--vscode-editorSuggestWidget-background); } .monaco-editor.hc-black .suggest-widget, .monaco-editor.hc-black .suggest-details, .monaco-editor.hc-light .suggest-widget, .monaco-editor.hc-light .suggest-details { border-width: 2px; } /* Styles for status bar part */ .monaco-editor .suggest-widget .suggest-status-bar { box-sizing: border-box; display: none; flex-flow: row nowrap; justify-content: space-between; width: 100%; font-size: 80%; padding: 0 4px 0 4px; border-top: 1px solid var(--vscode-editorSuggestWidget-border); overflow: hidden; } .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar { display: flex; } .monaco-editor .suggest-widget .suggest-status-bar .left { padding-right: 8px; } .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-label { color: var(--vscode-editorSuggestWidgetStatus-foreground); } .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label { margin-right: 0; } .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label::after { content: ', '; margin-right: 0.3em; } .monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row > .contents > .main > .right > .readMore, .monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore { display: none; } .monaco-editor .suggest-widget.with-status-bar:not(.docs-side) .monaco-list .monaco-list-row:hover > .contents > .main > .right.can-expand-details > .details-label { width: 100%; } /* Styles for Message element for when widget is loading or is empty */ .monaco-editor .suggest-widget > .message { padding-left: 22px; } /** Styles for the list element **/ .monaco-editor .suggest-widget > .tree { height: 100%; width: 100%; } .monaco-editor .suggest-widget .monaco-list { user-select: none; -webkit-user-select: none; } /** Styles for each row in the list element **/ .monaco-editor .suggest-widget .monaco-list .monaco-list-row { display: flex; -mox-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; background-repeat: no-repeat; background-position: 2px 2px; white-space: nowrap; cursor: pointer; touch-action: none; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused { color: var(--vscode-editorSuggestWidget-selectedForeground); } .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused .codicon { color: var(--vscode-editorSuggestWidget-selectedIconForeground); } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents { flex: 1; height: 100%; overflow: hidden; padding-left: 2px; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main { display: flex; overflow: hidden; text-overflow: ellipsis; white-space: pre; justify-content: space-between; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left, .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right { display: flex; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.focused) > .contents > .main .monaco-icon-label { color: var(--vscode-editorSuggestWidget-foreground); } .monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight { font-weight: bold; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main .monaco-highlighted-label .highlight { color: var(--vscode-editorSuggestWidget-highlightForeground); } .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main .monaco-highlighted-label .highlight { color: var(--vscode-editorSuggestWidget-focusHighlightForeground); } /** ReadMore Icon styles **/ .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close, .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore::before { color: inherit; opacity: 1; font-size: 14px; cursor: pointer; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close { position: absolute; top: 6px; right: 2px; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close:hover, .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore:hover { opacity: 1; } /** signature, qualifier, type/details opacity **/ .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label { opacity: 0.7; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .signature-label { overflow: hidden; text-overflow: ellipsis; opacity: 0.6; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .qualifier-label { margin-left: 12px; opacity: 0.4; font-size: 85%; line-height: initial; text-overflow: ellipsis; overflow: hidden; align-self: center; } /** Type Info and icon next to the label in the focused completion item **/ .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label { font-size: 85%; margin-left: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label > .monaco-tokenized-source { display: inline; } /** Details: if using CompletionItem#details, show on focus **/ .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label { display: none; } .monaco-editor .suggest-widget:not(.shows-details) .monaco-list .monaco-list-row.focused > .contents > .main > .right > .details-label { display: inline; } /** Details: if using CompletionItemLabel#details, always show **/ .monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .right > .details-label, .monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused:not(.string-label) > .contents > .main > .right > .details-label { display: inline; } /** Ellipsis on hover **/ .monaco-editor .suggest-widget:not(.docs-side) .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right.can-expand-details > .details-label { width: calc(100% - 26px); } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left { flex-shrink: 1; flex-grow: 1; overflow: hidden; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .monaco-icon-label { flex-shrink: 0; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .left > .monaco-icon-label { max-width: 100%; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .left > .monaco-icon-label { flex-shrink: 1; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right { overflow: hidden; flex-shrink: 4; max-width: 70%; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore { display: inline-block; position: absolute; right: 10px; width: 18px; height: 18px; visibility: hidden; } /** Do NOT display ReadMore when docs is side/below **/ .monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row > .contents > .main > .right > .readMore { display: none !important; } /** Do NOT display ReadMore when using plain CompletionItemLabel (details/documentation might not be resolved) **/ .monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .right > .readMore { display: none; } /** Focused item can show ReadMore, but can't when docs is side/below **/ .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore { display: inline-block; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right > .readMore { visibility: visible; } /** Styles for each row in the list **/ .monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated { opacity: 0.66; text-decoration: unset; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated > .monaco-icon-label-container > .monaco-icon-name-container { text-decoration: line-through; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label::before { height: 100%; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon { display: block; height: 16px; width: 16px; margin-left: 2px; background-repeat: no-repeat; background-size: 80%; background-position: center; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.hide { display: none; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon { display: flex; align-items: center; margin-right: 4px; } .monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .icon, .monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .suggest-icon::before { display: none; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.customcolor .colorspan { margin: 0 0 0 0.3em; border: 0.1em solid #000; width: 0.7em; height: 0.7em; display: inline-block; } /** Styles for the docs of the completion item in focus **/ .monaco-editor .suggest-details-container { z-index: 41; } .monaco-editor .suggest-details { display: flex; flex-direction: column; cursor: default; color: var(--vscode-editorSuggestWidget-foreground); } .monaco-editor .suggest-details.focused { border-color: var(--vscode-focusBorder); } .monaco-editor .suggest-details a { color: var(--vscode-textLink-foreground); } .monaco-editor .suggest-details a:hover { color: var(--vscode-textLink-activeForeground); } .monaco-editor .suggest-details code { background-color: var(--vscode-textCodeBlock-background); } .monaco-editor .suggest-details.no-docs { display: none; } .monaco-editor .suggest-details > .monaco-scrollable-element { flex: 1; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body { box-sizing: border-box; height: 100%; width: 100%; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type { flex: 2; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; white-space: pre; margin: 0 24px 0 0; padding: 4px 0 12px 5px; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type.auto-wrap { white-space: normal; word-break: break-all; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs { margin: 0; padding: 4px 5px; white-space: pre-wrap; } .monaco-editor .suggest-details.no-type > .monaco-scrollable-element > .body > .docs { margin-right: 24px; overflow: hidden; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs { padding: 0; white-space: initial; min-height: calc(1rem + 8px); } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div, .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > span:not(:empty) { padding: 4px 5px; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:first-child { margin-top: 0; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:last-child { margin-bottom: 0; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .monaco-tokenized-source { white-space: pre; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs .code { white-space: pre-wrap; word-wrap: break-word; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .codicon { vertical-align: sub; } .monaco-editor .suggest-details > .monaco-scrollable-element > .body > p:empty { display: none; } .monaco-editor .suggest-details code { border-radius: 3px; padding: 0 0.4em; } .monaco-editor .suggest-details ul { padding-left: 20px; } .monaco-editor .suggest-details ol { padding-left: 20px; } .monaco-editor .suggest-details p code { font-family: var(--monaco-monospace-font); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .codicon.codicon-symbol-array, .monaco-workbench .codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); } .monaco-editor .codicon.codicon-symbol-boolean, .monaco-workbench .codicon.codicon-symbol-boolean { color: var(--vscode-symbolIcon-booleanForeground); } .monaco-editor .codicon.codicon-symbol-class, .monaco-workbench .codicon.codicon-symbol-class { color: var(--vscode-symbolIcon-classForeground); } .monaco-editor .codicon.codicon-symbol-method, .monaco-workbench .codicon.codicon-symbol-method { color: var(--vscode-symbolIcon-methodForeground); } .monaco-editor .codicon.codicon-symbol-color, .monaco-workbench .codicon.codicon-symbol-color { color: var(--vscode-symbolIcon-colorForeground); } .monaco-editor .codicon.codicon-symbol-constant, .monaco-workbench .codicon.codicon-symbol-constant { color: var(--vscode-symbolIcon-constantForeground); } .monaco-editor .codicon.codicon-symbol-constructor, .monaco-workbench .codicon.codicon-symbol-constructor { color: var(--vscode-symbolIcon-constructorForeground); } .monaco-editor .codicon.codicon-symbol-value, .monaco-workbench .codicon.codicon-symbol-value, .monaco-editor .codicon.codicon-symbol-enum, .monaco-workbench .codicon.codicon-symbol-enum { color: var(--vscode-symbolIcon-enumeratorForeground); } .monaco-editor .codicon.codicon-symbol-enum-member, .monaco-workbench .codicon.codicon-symbol-enum-member { color: var(--vscode-symbolIcon-enumeratorMemberForeground); } .monaco-editor .codicon.codicon-symbol-event, .monaco-workbench .codicon.codicon-symbol-event { color: var(--vscode-symbolIcon-eventForeground); } .monaco-editor .codicon.codicon-symbol-field, .monaco-workbench .codicon.codicon-symbol-field { color: var(--vscode-symbolIcon-fieldForeground); } .monaco-editor .codicon.codicon-symbol-file, .monaco-workbench .codicon.codicon-symbol-file { color: var(--vscode-symbolIcon-fileForeground); } .monaco-editor .codicon.codicon-symbol-folder, .monaco-workbench .codicon.codicon-symbol-folder { color: var(--vscode-symbolIcon-folderForeground); } .monaco-editor .codicon.codicon-symbol-function, .monaco-workbench .codicon.codicon-symbol-function { color: var(--vscode-symbolIcon-functionForeground); } .monaco-editor .codicon.codicon-symbol-interface, .monaco-workbench .codicon.codicon-symbol-interface { color: var(--vscode-symbolIcon-interfaceForeground); } .monaco-editor .codicon.codicon-symbol-key, .monaco-workbench .codicon.codicon-symbol-key { color: var(--vscode-symbolIcon-keyForeground); } .monaco-editor .codicon.codicon-symbol-keyword, .monaco-workbench .codicon.codicon-symbol-keyword { color: var(--vscode-symbolIcon-keywordForeground); } .monaco-editor .codicon.codicon-symbol-module, .monaco-workbench .codicon.codicon-symbol-module { color: var(--vscode-symbolIcon-moduleForeground); } .monaco-editor .codicon.codicon-symbol-namespace, .monaco-workbench .codicon.codicon-symbol-namespace { color: var(--vscode-symbolIcon-namespaceForeground); } .monaco-editor .codicon.codicon-symbol-null, .monaco-workbench .codicon.codicon-symbol-null { color: var(--vscode-symbolIcon-nullForeground); } .monaco-editor .codicon.codicon-symbol-number, .monaco-workbench .codicon.codicon-symbol-number { color: var(--vscode-symbolIcon-numberForeground); } .monaco-editor .codicon.codicon-symbol-object, .monaco-workbench .codicon.codicon-symbol-object { color: var(--vscode-symbolIcon-objectForeground); } .monaco-editor .codicon.codicon-symbol-operator, .monaco-workbench .codicon.codicon-symbol-operator { color: var(--vscode-symbolIcon-operatorForeground); } .monaco-editor .codicon.codicon-symbol-package, .monaco-workbench .codicon.codicon-symbol-package { color: var(--vscode-symbolIcon-packageForeground); } .monaco-editor .codicon.codicon-symbol-property, .monaco-workbench .codicon.codicon-symbol-property { color: var(--vscode-symbolIcon-propertyForeground); } .monaco-editor .codicon.codicon-symbol-reference, .monaco-workbench .codicon.codicon-symbol-reference { color: var(--vscode-symbolIcon-referenceForeground); } .monaco-editor .codicon.codicon-symbol-snippet, .monaco-workbench .codicon.codicon-symbol-snippet { color: var(--vscode-symbolIcon-snippetForeground); } .monaco-editor .codicon.codicon-symbol-string, .monaco-workbench .codicon.codicon-symbol-string { color: var(--vscode-symbolIcon-stringForeground); } .monaco-editor .codicon.codicon-symbol-struct, .monaco-workbench .codicon.codicon-symbol-struct { color: var(--vscode-symbolIcon-structForeground); } .monaco-editor .codicon.codicon-symbol-text, .monaco-workbench .codicon.codicon-symbol-text { color: var(--vscode-symbolIcon-textForeground); } .monaco-editor .codicon.codicon-symbol-type-parameter, .monaco-workbench .codicon.codicon-symbol-type-parameter { color: var(--vscode-symbolIcon-typeParameterForeground); } .monaco-editor .codicon.codicon-symbol-unit, .monaco-workbench .codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); } .monaco-editor .codicon.codicon-symbol-variable, .monaco-workbench .codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .editor-banner { box-sizing: border-box; cursor: default; width: 100%; font-size: 12px; display: flex; overflow: visible; height: 26px; background: var(--vscode-banner-background); } .editor-banner .icon-container { display: flex; flex-shrink: 0; align-items: center; padding: 0 6px 0 10px; } .editor-banner .icon-container.custom-icon { background-repeat: no-repeat; background-position: center center; background-size: 16px; width: 16px; padding: 0; margin: 0 6px 0 10px; } .editor-banner .message-container { display: flex; align-items: center; line-height: 26px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .editor-banner .message-container p { margin-block-start: 0; margin-block-end: 0; } .editor-banner .message-actions-container { flex-grow: 1; flex-shrink: 0; line-height: 26px; margin: 0 4px; } .editor-banner .message-actions-container a.monaco-button { width: inherit; margin: 2px 8px; padding: 0px 12px; } .editor-banner .message-actions-container a { padding: 3px; margin-left: 12px; text-decoration: underline; } .editor-banner .action-container { padding: 0 10px 0 6px; } .editor-banner { background-color: var(--vscode-banner-background); } .editor-banner, .editor-banner .action-container .codicon, .editor-banner .message-actions-container .monaco-link { color: var(--vscode-banner-foreground); } .editor-banner .icon-container .codicon { color: var(--vscode-banner-iconForeground); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .unicode-highlight { border: 1px solid var(--vscode-editorUnicodeHighlight-border); background-color: var(--vscode-editorUnicodeHighlight-background); box-sizing: border-box; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .focused .selectionHighlight { background-color: var(--vscode-editor-selectionHighlightBackground); box-sizing: border-box; border: 1px solid var(--vscode-editor-selectionHighlightBorder); } .monaco-editor.hc-black .focused .selectionHighlight, .monaco-editor.hc-light .focused .selectionHighlight { border-style: dotted; } .monaco-editor .wordHighlight { background-color: var(--vscode-editor-wordHighlightBackground); box-sizing: border-box; border: 1px solid var(--vscode-editor-wordHighlightBorder); } .monaco-editor.hc-black .wordHighlight, .monaco-editor.hc-light .wordHighlight { border-style: dotted; } .monaco-editor .wordHighlightStrong { background-color: var(--vscode-editor-wordHighlightStrongBackground); box-sizing: border-box; border: 1px solid var(--vscode-editor-wordHighlightStrongBorder); } .monaco-editor.hc-black .wordHighlightStrong, .monaco-editor.hc-light .wordHighlightStrong { border-style: dotted; } .monaco-editor .wordHighlightText { background-color: var(--vscode-editor-wordHighlightTextBackground); box-sizing: border-box; border: 1px solid var(--vscode-editor-wordHighlightTextBorder); } .monaco-editor.hc-black .wordHighlightText, .monaco-editor.hc-light .wordHighlightText { border-style: dotted; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .zone-widget { position: absolute; z-index: 10; } .monaco-editor .zone-widget .zone-widget-container { border-top-style: solid; border-bottom-style: solid; border-top-width: 0; border-bottom-width: 0; position: relative; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .iPadShowKeyboard { width: 58px; min-width: 0; height: 36px; min-height: 0; margin: 0; padding: 0; position: absolute; resize: none; overflow: hidden; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjNDI0MjQyIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==) center center no-repeat; border: 4px solid #F6F6F6; border-radius: 4px; } .monaco-editor.vs-dark .iPadShowKeyboard { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjQzVDNUM1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==) center center no-repeat; border: 4px solid #252526; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .tokens-inspect-widget { z-index: 50; user-select: text; -webkit-user-select: text; padding: 10px; color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); } .monaco-editor.hc-black .tokens-inspect-widget, .monaco-editor.hc-light .tokens-inspect-widget { border-width: 2px; } .monaco-editor .tokens-inspect-widget .tokens-inspect-separator { height: 1px; border: 0; background-color: var(--vscode-editorHoverWidget-border); } .monaco-editor .tokens-inspect-widget .tm-token { font-family: var(--monaco-monospace-font); } .monaco-editor .tokens-inspect-widget .tm-token-length { font-weight: normal; font-size: 60%; float: right; } .monaco-editor .tokens-inspect-widget .tm-metadata-table { width: 100%; } .monaco-editor .tokens-inspect-widget .tm-metadata-value { font-family: var(--monaco-monospace-font); text-align: right; } .monaco-editor .tokens-inspect-widget .tm-token-type { font-family: var(--monaco-monospace-font); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .quick-input-widget { font-size: 13px; } .quick-input-widget .monaco-highlighted-label .highlight, .quick-input-widget .monaco-highlighted-label .highlight { color: #0066BF; } .vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight, .vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight { color: #9DDDFF; } .vs-dark .quick-input-widget .monaco-highlighted-label .highlight, .vs-dark .quick-input-widget .monaco-highlighted-label .highlight { color: #0097fb; } .hc-black .quick-input-widget .monaco-highlighted-label .highlight, .hc-black .quick-input-widget .monaco-highlighted-label .highlight { color: #F38518; } .hc-light .quick-input-widget .monaco-highlighted-label .highlight, .hc-light .quick-input-widget .monaco-highlighted-label .highlight { color: #0F4A85; } .monaco-keybinding > .monaco-keybinding-key { background-color: rgba(221, 221, 221, 0.4); border: solid 1px rgba(204, 204, 204, 0.4); border-bottom-color: rgba(187, 187, 187, 0.4); box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4); color: #555; } .hc-black .monaco-keybinding > .monaco-keybinding-key { background-color: transparent; border: solid 1px rgb(111, 195, 223); box-shadow: none; color: #fff; } .hc-light .monaco-keybinding > .monaco-keybinding-key { background-color: transparent; border: solid 1px #0F4A85; box-shadow: none; color: #292929; } .vs-dark .monaco-keybinding > .monaco-keybinding-key { background-color: rgba(128, 128, 128, 0.17); border: solid 1px rgba(51, 51, 51, 0.6); border-bottom-color: rgba(68, 68, 68, 0.6); box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6); color: #ccc; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ /* Default standalone editor fonts */ .monaco-editor { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif; --monaco-monospace-font: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; } .monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item:focus .action-label { stroke-width: 1.2px; } .monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label, .monaco-editor.hc-black .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label, .monaco-editor.hc-light .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label { stroke-width: 1.2px; } .monaco-hover p { margin: 0; } /* See https://github.com/microsoft/monaco-editor/issues/2168#issuecomment-780078600 */ .monaco-aria-container { position: absolute !important; top: 0; /* avoid being placed underneath a sibling element */ height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); } .monaco-editor, .monaco-diff-editor .synthetic-focus, .monaco-editor, .monaco-diff-editor [tabindex="0"]:focus, .monaco-editor, .monaco-diff-editor [tabindex="-1"]:focus, .monaco-editor, .monaco-diff-editor button:focus, .monaco-editor, .monaco-diff-editor input[type=button]:focus, .monaco-editor, .monaco-diff-editor input[type=checkbox]:focus, .monaco-editor, .monaco-diff-editor input[type=search]:focus, .monaco-editor, .monaco-diff-editor input[type=text]:focus, .monaco-editor, .monaco-diff-editor select:focus, .monaco-editor, .monaco-diff-editor textarea:focus { outline-width: 1px; outline-style: solid; outline-offset: -1px; outline-color: var(--vscode-focusBorder); opacity: 1 } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .action-widget { font-size: 13px; border-radius: 0; min-width: 160px; max-width: 80vw; z-index: 40; display: block; width: 100%; border: 1px solid var(--vscode-editorWidget-border) !important; border-radius: 2px; background-color: var(--vscode-editorWidget-background); color: var(--vscode-editorWidget-foreground); } .context-view-block { position: fixed; cursor: initial; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .context-view-pointerBlock { position: fixed; cursor: initial; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .action-widget .monaco-list { user-select: none; -webkit-user-select: none; border: none !important; border-width: 0 !important; } .action-widget .monaco-list:focus:before { outline: 0 !important; } .action-widget .monaco-list .monaco-scrollable-element { overflow: visible; } /** Styles for each row in the list element **/ .action-widget .monaco-list .monaco-list-row { padding: 0 10px; white-space: nowrap; cursor: pointer; touch-action: none; width: 100%; } .action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled) { background-color: var(--vscode-quickInputList-focusBackground) !important; color: var(--vscode-quickInputList-focusForeground); outline: 1px solid var(--vscode-menu-selectionBorder, transparent); outline-offset: -1px; } .action-widget .monaco-list-row.group-header { color: var(--vscode-descriptionForeground) !important; font-weight: 600; } .action-widget .monaco-list .group-header, .action-widget .monaco-list .option-disabled, .action-widget .monaco-list .option-disabled:before, .action-widget .monaco-list .option-disabled .focused, .action-widget .monaco-list .option-disabled .focused:before { cursor: default !important; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; background-color: transparent !important; outline: 0 solid !important; } .action-widget .monaco-list-row.action { display: flex; gap: 6px; align-items: center; } .action-widget .monaco-list-row.action.option-disabled, .action-widget .monaco-list:focus .monaco-list-row.focused.action.option-disabled, .action-widget .monaco-list-row.action.option-disabled .codicon, .action-widget .monaco-list:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused).option-disabled { color: var(--vscode-disabledForeground); } .action-widget .monaco-list-row.action:not(.option-disabled) .codicon { color: inherit; } .action-widget .monaco-list-row.action .title { flex: 1; overflow: hidden; text-overflow: ellipsis; } .action-widget .monaco-list-row.action .monaco-keybinding > .monaco-keybinding-key { background-color: var(--vscode-keybindingLabel-background); color: var(--vscode-keybindingLabel-foreground); border-style: solid; border-width: 1px; border-radius: 3px; border-color: var(--vscode-keybindingLabel-border); border-bottom-color: var(--vscode-keybindingLabel-bottomBorder); box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow); } /* Action bar */ .action-widget .action-widget-action-bar { background-color: var(--vscode-editorHoverWidget-statusBarBackground); border-top: 1px solid var(--vscode-editorHoverWidget-border); } .action-widget .action-widget-action-bar::before { display: block; content: ""; width: 100%; } .action-widget .action-widget-action-bar .actions-container { padding: 0 8px; } .action-widget-action-bar .action-label { color: var(--vscode-textLink-activeForeground); font-size: 12px; line-height: 22px; padding: 0; pointer-events: all; } .action-widget-action-bar .action-item { margin-right: 16px; pointer-events: none; } .action-widget-action-bar .action-label:hover { background-color: transparent !important; } .monaco-action-bar .actions-container.highlight-toggled .action-label.checked { /* The important gives this rule precedence over the hover rule. */ background: var(--vscode-actionBar-toggledBackground) !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-action-bar .action-item.menu-entry .action-label.icon { width: 16px; height: 16px; background-repeat: no-repeat; background-position: 50%; background-size: 16px; } .monaco-dropdown-with-default { display: flex !important; flex-direction: row; border-radius: 5px; } .monaco-dropdown-with-default > .action-container > .action-label { margin-right: 0; } .monaco-dropdown-with-default > .action-container.menu-entry > .action-label.icon { width: 16px; height: 16px; background-repeat: no-repeat; background-position: 50%; background-size: 16px; } .monaco-dropdown-with-default:hover { background-color: var(--vscode-toolbar-hoverBackground); } .monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] { font-size: 12px; padding-left: 0px; padding-right: 0px; line-height: 16px; margin-left: -3px; } .monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label { display: block; background-size: 16px; background-position: center center; background-repeat: no-repeat; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-link { color: var(--vscode-textLink-foreground); } .monaco-link:hover { color: var(--vscode-textLink-activeForeground); } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .quick-input-widget { position: absolute; width: 600px; z-index: 2550; left: 50%; margin-left: -300px; -webkit-app-region: no-drag; border-radius: 6px; } .quick-input-titlebar { display: flex; align-items: center; border-radius: inherit; } .quick-input-left-action-bar { display: flex; margin-left: 4px; flex: 1; } .quick-input-title { padding: 3px 0px; text-align: center; text-overflow: ellipsis; overflow: hidden; } .quick-input-right-action-bar { display: flex; margin-right: 4px; flex: 1; } .quick-input-right-action-bar > .actions-container { justify-content: flex-end; } .quick-input-titlebar .monaco-action-bar .action-label.codicon { background-position: center; background-repeat: no-repeat; padding: 2px; } .quick-input-description { margin: 6px 6px 6px 11px; } .quick-input-header .quick-input-description { margin: 4px 2px; flex: 1; } .quick-input-header { display: flex; padding: 8px 6px 2px 6px; } .quick-input-widget.hidden-input .quick-input-header { /* reduce margins and paddings when input box hidden */ padding: 0; margin-bottom: 0; } .quick-input-and-message { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; position: relative; } .quick-input-check-all { align-self: center; margin: 0; } .quick-input-filter { flex-grow: 1; display: flex; position: relative; } .quick-input-box { flex-grow: 1; } .quick-input-widget.show-checkboxes .quick-input-box, .quick-input-widget.show-checkboxes .quick-input-message { margin-left: 5px; } .quick-input-visible-count { position: absolute; left: -10000px; } .quick-input-count { align-self: center; position: absolute; right: 4px; display: flex; align-items: center; } .quick-input-count .monaco-count-badge { vertical-align: middle; padding: 2px 4px; border-radius: 2px; min-height: auto; line-height: normal; } .quick-input-action { margin-left: 6px; } .quick-input-action .monaco-text-button { font-size: 11px; padding: 0 6px; display: flex; height: 25px; align-items: center; } .quick-input-message { margin-top: -1px; padding: 5px; overflow-wrap: break-word; } .quick-input-message > .codicon { margin: 0 0.2em; vertical-align: text-bottom; } /* Links in descriptions & validations */ .quick-input-message a { color: inherit; } .quick-input-progress.monaco-progress-container { position: relative; } .quick-input-list { line-height: 22px; } .quick-input-widget.hidden-input .quick-input-list { margin-top: 4px; /* reduce margins when input box hidden */ padding-bottom: 4px; } .quick-input-list .monaco-list { overflow: hidden; max-height: calc(20 * 22px); padding-bottom: 5px; } .quick-input-list .monaco-scrollable-element { padding: 0px 5px; } .quick-input-list .quick-input-list-entry { box-sizing: border-box; overflow: hidden; display: flex; height: 100%; padding: 0 6px; } .quick-input-list .quick-input-list-entry.quick-input-list-separator-border { border-top-width: 1px; border-top-style: solid; } .quick-input-list .monaco-list-row { border-radius: 3px; } .quick-input-list .monaco-list-row[data-index="0"] .quick-input-list-entry.quick-input-list-separator-border { border-top-style: none; } .quick-input-list .quick-input-list-label { overflow: hidden; display: flex; height: 100%; flex: 1; } .quick-input-list .quick-input-list-checkbox { align-self: center; margin: 0; } .quick-input-list .quick-input-list-icon { background-size: 16px; background-position: left center; background-repeat: no-repeat; padding-right: 6px; width: 16px; height: 22px; display: flex; align-items: center; justify-content: center; } .quick-input-list .quick-input-list-rows { overflow: hidden; text-overflow: ellipsis; display: flex; flex-direction: column; height: 100%; flex: 1; margin-left: 5px; } .quick-input-widget.show-checkboxes .quick-input-list .quick-input-list-rows { margin-left: 10px; } .quick-input-widget .quick-input-list .quick-input-list-checkbox { display: none; } .quick-input-widget.show-checkboxes .quick-input-list .quick-input-list-checkbox { display: inline; } .quick-input-list .quick-input-list-rows > .quick-input-list-row { display: flex; align-items: center; } .quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label, .quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container { flex: 1; /* make sure the icon label grows within the row */ } .quick-input-list .quick-input-list-rows > .quick-input-list-row .codicon[class*='codicon-'] { vertical-align: text-bottom; } .quick-input-list .quick-input-list-rows .monaco-highlighted-label > span { opacity: 1; } .quick-input-list .quick-input-list-entry .quick-input-list-entry-keybinding { margin-right: 8px; /* separate from the separator label or scrollbar if any */ } .quick-input-list .quick-input-list-label-meta { opacity: 0.7; line-height: normal; text-overflow: ellipsis; overflow: hidden; } /* preserve list-like styling instead of tree-like styling */ .quick-input-list .monaco-list .monaco-list-row .monaco-highlighted-label .highlight { font-weight: bold; background-color: unset; color: var(--vscode-list-highlightForeground) !important; } /* preserve list-like styling instead of tree-like styling */ .quick-input-list .monaco-list .monaco-list-row.focused .monaco-highlighted-label .highlight { color: var(--vscode-list-focusHighlightForeground) !important; } .quick-input-list .quick-input-list-entry .quick-input-list-separator { margin-right: 4px; /* separate from keybindings or actions */ } .quick-input-list .quick-input-list-entry-action-bar { display: flex; flex: 0; overflow: visible; } .quick-input-list .quick-input-list-entry-action-bar .action-label { /* * By default, actions in the quick input action bar are hidden * until hovered over them or selected. */ display: none; } .quick-input-list .quick-input-list-entry-action-bar .action-label.codicon { margin-right: 4px; padding: 0px 2px 2px 2px; } .quick-input-list .quick-input-list-entry-action-bar { margin-top: 1px; } .quick-input-list .quick-input-list-entry-action-bar { margin-right: 4px; /* separate from scrollbar */ } .quick-input-list .quick-input-list-entry .quick-input-list-entry-action-bar .action-label.always-visible, .quick-input-list .quick-input-list-entry:hover .quick-input-list-entry-action-bar .action-label, .quick-input-list .quick-input-list-entry.focus-inside .quick-input-list-entry-action-bar .action-label, .quick-input-list .monaco-list-row.focused .quick-input-list-entry-action-bar .action-label, .quick-input-list .monaco-list-row.passive-focused .quick-input-list-entry-action-bar .action-label { display: flex; } /* focused items in quick pick */ .quick-input-list .monaco-list-row.focused .monaco-keybinding-key, .quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator { color: inherit } .quick-input-list .monaco-list-row.focused .monaco-keybinding-key { background: none; } .quick-input-list .quick-input-list-separator-as-item { padding: 4px 6px; font-size: 12px; } /* Quick input separators as full-row item */ .quick-input-list .quick-input-list-separator-as-item .label-name { font-weight: 600; } .quick-input-list .quick-input-list-separator-as-item .label-description { /* Override default description opacity so we don't have a contrast ratio issue. */ opacity: 1 !important; } /* Hide border when the item becomes the sticky one */ .quick-input-list .monaco-tree-sticky-row .quick-input-list-entry.quick-input-list-separator-as-item.quick-input-list-separator-border { border-top-style: none; } /* Give sticky row the same padding as the scrollable list */ .quick-input-list .monaco-tree-sticky-row { padding: 0 5px; } /* Hide the twistie containers so that there isn't blank indent */ .quick-input-list .monaco-tl-twistie { display: none !important; } /*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-editor .zone-widget .codicon.codicon-error, .markers-panel .marker-icon.error, .markers-panel .marker-icon .codicon.codicon-error, .text-search-provider-messages .providerMessage .codicon.codicon-error, .extensions-viewlet > .extensions .codicon.codicon-error, .extension-editor .codicon.codicon-error, .preferences-editor .codicon.codicon-error { color: var(--vscode-problemsErrorIcon-foreground); } .monaco-editor .zone-widget .codicon.codicon-warning, .markers-panel .marker-icon.warning, .markers-panel .marker-icon .codicon.codicon-warning, .text-search-provider-messages .providerMessage .codicon.codicon-warning, .extensions-viewlet > .extensions .codicon.codicon-warning, .extension-editor .codicon.codicon-warning, .preferences-editor .codicon.codicon-warning { color: var(--vscode-problemsWarningIcon-foreground); } .monaco-editor .zone-widget .codicon.codicon-info, .markers-panel .marker-icon.info, .markers-panel .marker-icon .codicon.codicon-info, .text-search-provider-messages .providerMessage .codicon.codicon-info, .extensions-viewlet > .extensions .codicon.codicon-info, .extension-editor .codicon.codicon-info, .preferences-editor .codicon.codicon-info { color: var(--vscode-problemsInfoIcon-foreground); } /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/synapse/1.x/css/synapse.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/cb6c6faba2b780fef641c98b25066e90.min.css */ @charset "UTF-8"; /* Base Raw Colors These define the colors based on branding, etc. These are the named colors abstract from the usage. IE purple, red, etc --color-red --color-roku-purple */ :root { /* Baseline UI color - Blue 8 */ --color-blue: #007DBA; /* Baseline Red - Errors and such */ --color-red: #d52123; /* Baseline Green - Success */ --color-green: #00ab49; /* Baseline Amber/Yellow - Warning */ --color-amber: #ffc107; /* Baseline Grey - neutral */ --color-grey: #8A8A8A; /* Baseline black and white (perfect middle gray */ --color-black: #000000; --color-white: #ffffff; --color-middle-grey: #808080; --color-transparent: rgba(255, 255, 255, 0); } /* Usage of colors. Typically you just define overrides at the top section This defines the range used for the base usage Typically, use colors from _colors_primitive.scss * foundation - Black and White range (Usually --color-middle-gray) * primary - Base or brand colors used for the overall coloring of elements (usually --color-blue) * neutral - Neutral colors used for backgrounds, etc. (usually --color-gray) * error - Error colors (usually --color-red) * creative - Creative colors (usually --color-green) This has to be at the * level as compiling higher will mean we can not override. */ * { --color-alias-foundation: var(--color-middle-grey); --color-alias-foundation-transparent: var(--color-transparent); --color-alias-foundation-white: var(--color-white); --color-alias-foundation-black: var(--color-black); --color-alias-primary: var(--color-blue); --color-alias-neutral: var(--color-grey); --color-alias-error: var(--color-red); --color-alias-creative: var(--color-green); --color-alias-warning: var(--color-amber); --color-alias-information: var(--color-blue); /* This section creates our gradient ranges - DO NOT MODIFY If you do need to override a specific value it can be done in a custom theme */ --color-alias-foundation-0: color-mix(in srgb, var(--color-alias-foundation) 0%, var(--color-white)); --color-alias-foundation-25: color-mix(in srgb, var(--color-alias-foundation) 5%, var(--color-white)); --color-alias-foundation-50: color-mix(in srgb, var(--color-alias-foundation) 10%, var(--color-white)); --color-alias-foundation-100: color-mix(in srgb, var(--color-alias-foundation) 20%, var(--color-white)); --color-alias-foundation-200: color-mix(in srgb, var(--color-alias-foundation) 40%, var(--color-white)); --color-alias-foundation-300: color-mix(in srgb, var(--color-alias-foundation) 60%, var(--color-white)); --color-alias-foundation-400: color-mix(in srgb, var(--color-alias-foundation) 80%, var(--color-white)); --color-alias-foundation-500: var(--color-alias-foundation); --color-alias-foundation-600: color-mix(in srgb, var(--color-alias-foundation) 80%, var(--color-black)); --color-alias-foundation-700: color-mix(in srgb, var(--color-alias-foundation) 60%, var(--color-black)); --color-alias-foundation-800: color-mix(in srgb, var(--color-alias-foundation) 40%, var(--color-black)); --color-alias-foundation-900: color-mix(in srgb, var(--color-alias-foundation) 20%, var(--color-black)); --color-alias-foundation-1000: color-mix(in srgb, var(--color-alias-foundation) 0%, var(--color-black)); --color-alias-primary-0: color-mix(in srgb, var(--color-alias-primary) 0%, var(--color-white)); --color-alias-primary-25: color-mix(in srgb, var(--color-alias-primary) 5%, var(--color-white)); --color-alias-primary-50: color-mix(in srgb, var(--color-alias-primary) 10%, var(--color-white)); --color-alias-primary-100: color-mix(in srgb, var(--color-alias-primary) 20%, var(--color-white)); --color-alias-primary-200: color-mix(in srgb, var(--color-alias-primary) 40%, var(--color-white)); --color-alias-primary-300: color-mix(in srgb, var(--color-alias-primary) 60%, var(--color-white)); --color-alias-primary-400: color-mix(in srgb, var(--color-alias-primary) 80%, var(--color-white)); --color-alias-primary-500: var(--color-alias-primary); --color-alias-primary-600: color-mix(in srgb, var(--color-alias-primary) 80%, var(--color-black)); --color-alias-primary-700: color-mix(in srgb, var(--color-alias-primary) 60%, var(--color-black)); --color-alias-primary-800: color-mix(in srgb, var(--color-alias-primary) 40%, var(--color-black)); --color-alias-primary-900: color-mix(in srgb, var(--color-alias-primary) 20%, var(--color-black)); --color-alias-primary-1000: color-mix(in srgb, var(--color-alias-primary) 0%, var(--color-black)); --color-alias-neutral-0: color-mix(in srgb, var(--color-alias-neutral) 0%, var(--color-white)); --color-alias-neutral-25: color-mix(in srgb, var(--color-alias-neutral) 5%, var(--color-white)); --color-alias-neutral-50: color-mix(in srgb, var(--color-alias-neutral) 10%, var(--color-white)); --color-alias-neutral-100: color-mix(in srgb, var(--color-alias-neutral) 20%, var(--color-white)); --color-alias-neutral-200: color-mix(in srgb, var(--color-alias-neutral) 40%, var(--color-white)); --color-alias-neutral-300: color-mix(in srgb, var(--color-alias-neutral) 60%, var(--color-white)); --color-alias-neutral-400: color-mix(in srgb, var(--color-alias-neutral) 80%, var(--color-white)); --color-alias-neutral-500: var(--color-alias-neutral); --color-alias-neutral-600: color-mix(in srgb, var(--color-alias-neutral) 80%, var(--color-black)); --color-alias-neutral-700: color-mix(in srgb, var(--color-alias-neutral) 60%, var(--color-black)); --color-alias-neutral-800: color-mix(in srgb, var(--color-alias-neutral) 40%, var(--color-black)); --color-alias-neutral-900: color-mix(in srgb, var(--color-alias-neutral) 20%, var(--color-black)); --color-alias-neutral-1000: color-mix(in srgb, var(--color-alias-neutral) 0%, var(--color-black)); --color-alias-error-0: color-mix(in srgb, var(--color-alias-error) 0%, var(--color-white)); --color-alias-error-25: color-mix(in srgb, var(--color-alias-error) 5%, var(--color-white)); --color-alias-error-50: color-mix(in srgb, var(--color-alias-error) 10%, var(--color-white)); --color-alias-error-100: color-mix(in srgb, var(--color-alias-error) 20%, var(--color-white)); --color-alias-error-200: color-mix(in srgb, var(--color-alias-error) 40%, var(--color-white)); --color-alias-error-300: color-mix(in srgb, var(--color-alias-error) 60%, var(--color-white)); --color-alias-error-400: color-mix(in srgb, var(--color-alias-error) 80%, var(--color-white)); --color-alias-error-500: var(--color-alias-error); --color-alias-error-600: color-mix(in srgb, var(--color-alias-error) 80%, var(--color-black)); --color-alias-error-700: color-mix(in srgb, var(--color-alias-error) 60%, var(--color-black)); --color-alias-error-800: color-mix(in srgb, var(--color-alias-error) 40%, var(--color-black)); --color-alias-error-900: color-mix(in srgb, var(--color-alias-error) 20%, var(--color-black)); --color-alias-error-1000: color-mix(in srgb, var(--color-alias-error) 0%, var(--color-black)); --color-alias-creative-0: color-mix(in srgb, var(--color-alias-creative) 0%, var(--color-white)); --color-alias-creative-25: color-mix(in srgb, var(--color-alias-creative) 5%, var(--color-white)); --color-alias-creative-50: color-mix(in srgb, var(--color-alias-creative) 10%, var(--color-white)); --color-alias-creative-100: color-mix(in srgb, var(--color-alias-creative) 20%, var(--color-white)); --color-alias-creative-200: color-mix(in srgb, var(--color-alias-creative) 40%, var(--color-white)); --color-alias-creative-300: color-mix(in srgb, var(--color-alias-creative) 60%, var(--color-white)); --color-alias-creative-400: color-mix(in srgb, var(--color-alias-creative) 80%, var(--color-white)); --color-alias-creative-500: var(--color-alias-creative); --color-alias-creative-600: color-mix(in srgb, var(--color-alias-creative) 80%, var(--color-black)); --color-alias-creative-700: color-mix(in srgb, var(--color-alias-creative) 60%, var(--color-black)); --color-alias-creative-800: color-mix(in srgb, var(--color-alias-creative) 40%, var(--color-black)); --color-alias-creative-900: color-mix(in srgb, var(--color-alias-creative) 20%, var(--color-black)); --color-alias-creative-1000: color-mix(in srgb, var(--color-alias-creative) 0%, var(--color-black)); --color-alias-warning-0: color-mix(in srgb, var(--color-alias-warning) 0%, var(--color-white)); --color-alias-warning-25: color-mix(in srgb, var(--color-alias-warning) 5%, var(--color-white)); --color-alias-warning-50: color-mix(in srgb, var(--color-alias-warning) 10%, var(--color-white)); --color-alias-warning-100: color-mix(in srgb, var(--color-alias-warning) 20%, var(--color-white)); --color-alias-warning-200: color-mix(in srgb, var(--color-alias-warning) 40%, var(--color-white)); --color-alias-warning-300: color-mix(in srgb, var(--color-alias-warning) 60%, var(--color-white)); --color-alias-warning-400: color-mix(in srgb, var(--color-alias-warning) 80%, var(--color-white)); --color-alias-warning-500: var(--color-alias-warning); --color-alias-warning-600: color-mix(in srgb, var(--color-alias-warning) 80%, var(--color-black)); --color-alias-warning-700: color-mix(in srgb, var(--color-alias-warning) 60%, var(--color-black)); --color-alias-warning-800: color-mix(in srgb, var(--color-alias-warning) 40%, var(--color-black)); --color-alias-warning-900: color-mix(in srgb, var(--color-alias-warning) 20%, var(--color-black)); --color-alias-warning-1000: color-mix(in srgb, var(--color-alias-warning) 0%, var(--color-black)); --color-alias-information-0: color-mix(in srgb, var(--color-alias-information) 0%, var(--color-white)); --color-alias-information-25: color-mix(in srgb, var(--color-alias-information) 5%, var(--color-white)); --color-alias-information-50: color-mix(in srgb, var(--color-alias-information) 10%, var(--color-white)); --color-alias-information-100: color-mix(in srgb, var(--color-alias-information) 20%, var(--color-white)); --color-alias-information-200: color-mix(in srgb, var(--color-alias-information) 40%, var(--color-white)); --color-alias-information-300: color-mix(in srgb, var(--color-alias-information) 60%, var(--color-white)); --color-alias-information-400: color-mix(in srgb, var(--color-alias-information) 80%, var(--color-white)); --color-alias-information-500: var(--color-alias-information); --color-alias-information-600: color-mix(in srgb, var(--color-alias-information) 80%, var(--color-black)); --color-alias-information-700: color-mix(in srgb, var(--color-alias-information) 60%, var(--color-black)); --color-alias-information-800: color-mix(in srgb, var(--color-alias-information) 40%, var(--color-black)); --color-alias-information-900: color-mix(in srgb, var(--color-alias-information) 20%, var(--color-black)); --color-alias-information-1000: color-mix(in srgb, var(--color-alias-information) 0%, var(--color-black)); } /* Theme Layer Define theme-specific overrides here. Themes should use the .theme-name * selector pattern to enable proper cascade. Based on Figma ECO DSM Variables - eco dark mode */ .theme-dark * { --color-forms-text-label: var(--color-alias-neutral-50); --color-forms-text-section: var(--color-alias-information-300); --color-forms-text-default: var(--color-alias-neutral-100); --color-forms-text-supporting: var(--color-alias-foundation-white); --color-forms-text-error: var(--color-alias-error-400); --color-forms-text-selected: var(--color-alias-information-300); --color-forms-text-disabled: var(--color-alias-neutral-100); --color-forms-text-focused: var(--color-alias-neutral-50); --color-forms-text-input: var(--color-alias-neutral-50); --color-forms-icons-high-emphasis: var(--color-alias-neutral-50); --color-forms-icons-medium-emphasis: var(--color-alias-neutral-100); --color-forms-icons-help: var(--color-alias-information-400); --color-forms-icons-selected: var(--color-alias-information-300); --color-forms-icons-error: var(--color-alias-error-400); --color-forms-icons-disabled: var(--color-alias-neutral-100); --color-forms-surface-default: var(--color-alias-neutral-700); --color-forms-surface-disabled: var(--color-alias-neutral-700); --color-forms-surface-hover: var(--color-alias-information-900); --color-forms-surface-error-hover: var(--color-alias-error-900); --color-forms-surface-focus: var(--color-alias-information-900); --color-forms-surface-read-only: var(--color-alias-foundation-black); --color-forms-surface-input: var(--color-alias-neutral-700); --color-forms-surface-error: var(--color-alias-error-800); --color-forms-border-default: var(--color-alias-neutral-700); --color-forms-border-hover: var(--color-alias-information-300); --color-forms-border-focused: var(--color-alias-information-300); --color-forms-border-error: var(--color-alias-error-400); --color-forms-border-input: var(--color-alias-neutral-700); --color-forms-border-disabled: var(--color-alias-neutral-500); --color-forms-border-read-only: var(--color-alias-foundation-transparent); --color-forms-button-primary-bg: var(--color-alias-information-600); --color-forms-button-primary-bg-hover: var(--color-alias-information-500); --color-forms-button-primary-bg-active: var(--color-alias-information-400); --color-forms-button-secondary-bg: var(--color-alias-neutral-600); --color-forms-button-secondary-bg-hover: var(--color-alias-neutral-500); --color-forms-button-secondary-bg-active: var(--color-alias-neutral-400); --color-forms-button-success-bg: var(--color-alias-creative-600); --color-forms-button-success-bg-hover: var(--color-alias-creative-500); --color-forms-button-success-bg-active: var(--color-alias-creative-400); --color-forms-button-danger-bg: var(--color-alias-error-600); --color-forms-button-danger-bg-hover: var(--color-alias-error-500); --color-forms-button-danger-bg-active: var(--color-alias-error-400); --color-forms-button-warning-bg: var(--color-alias-warning-600); --color-forms-button-warning-bg-hover: var(--color-alias-warning-500); --color-forms-button-warning-bg-active: var(--color-alias-warning-400); --color-forms-button-disabled-bg: var(--color-alias-neutral-700); --color-forms-button-disabled-text: var(--color-alias-neutral-400); --color-forms-container-bg: var(--color-alias-neutral-800); --color-forms-container-border: var(--color-alias-neutral-600); --color-forms-container-header-bg: var(--color-alias-neutral-700); --color-forms-container-header-text: var(--color-alias-neutral-100); --color-forms-container-header-icon: var(--color-alias-neutral-400); --color-forms-container-header-hover-bg: var(--color-alias-neutral-600); --color-forms-table-bg: var(--color-alias-neutral-800); --color-forms-table-border: var(--color-alias-neutral-600); --color-forms-table-header-bg: var(--color-alias-neutral-700); --color-forms-table-header-text: var(--color-alias-information-300); --color-forms-table-header-border: var(--color-alias-information-600); --color-forms-table-header-cell-border: var(--color-alias-neutral-600); --color-forms-table-row-even-bg: var(--color-alias-neutral-800); --color-forms-table-row-odd-bg: var(--color-alias-neutral-750); --color-forms-table-row-hover-bg: var(--color-alias-neutral-700); --color-forms-table-cell-text: var(--color-alias-neutral-100); --color-forms-table-cell-border: var(--color-alias-neutral-700); --color-forms-table-empty-text: var(--color-alias-neutral-400); --color-forms-table-empty-bg: var(--color-alias-neutral-750); --color-forms-table-scrollbar-track: var(--color-alias-neutral-700); --color-forms-table-scrollbar-thumb: var(--color-alias-neutral-500); --color-forms-table-scrollbar-thumb-hover: var(--color-alias-neutral-400); --color-forms-code-bg: var(--color-alias-neutral-800); --color-forms-code-border: var(--color-alias-neutral-600); --color-forms-code-text: var(--color-alias-neutral-100); --color-forms-code-result-success-bg: var(--color-alias-creative-900); --color-forms-code-result-success-border: var(--color-alias-creative-700); --color-forms-code-result-success-text: var(--color-alias-creative-200); --color-forms-code-result-error-bg: var(--color-alias-error-900); --color-forms-code-result-error-border: var(--color-alias-error-700); --color-forms-code-result-error-text: var(--color-alias-error-200); --color-forms-checkbox-unchecked: var(--color-alias-neutral-400); --color-forms-checkbox-checked: var(--color-alias-information-400); --color-forms-checkbox-hover: var(--color-alias-information-300); --color-forms-checkbox-disabled: var(--color-alias-neutral-600); --color-forms-checkbox-focus-outline: var(--color-alias-information-400); --color-forms-checkbox-option-hover-bg: var(--color-alias-neutral-700); --color-forms-checkbox-option-selected-bg: var(--color-alias-information-900); --color-forms-checkbox-option-selected-text: var(--color-alias-information-300); --color-forms-checkbox-option-selected-hover-bg: var(--color-alias-information-800); --color-forms-select-option-selected-bg: var(--color-alias-information-700); --color-forms-select-option-selected-text: var(--color-alias-foundation-white); --color-forms-select-option-selected-hover-bg: var(--color-alias-information-600); --color-forms-chip-bg: var(--color-alias-neutral-700); --color-forms-chip-border: var(--color-alias-neutral-600); --color-forms-chip-text: var(--color-alias-neutral-100); --color-forms-chip-bg-hover: var(--color-alias-neutral-600); --color-forms-chip-border-hover: var(--color-alias-neutral-500); --color-forms-chip-bg-disabled: var(--color-alias-neutral-800); --color-forms-link: var(--color-alias-information-300); --color-forms-link-hover: var(--color-alias-information-200); --color-forms-link-focus-outline: var(--color-alias-information-400); --color-forms-embedded-border: var(--color-alias-neutral-600); --color-forms-embedded-border-hover: var(--color-alias-neutral-500); --color-forms-embedded-border-focus: var(--color-alias-information-400); --color-forms-embedded-loading-text: var(--color-alias-neutral-400); --color-forms-embedded-error-bg: var(--color-alias-error-900); --color-forms-embedded-error-border: var(--color-alias-error-700); --color-forms-embedded-error-text: var(--color-alias-error-300); --color-forms-embedded-error-icon: var(--color-alias-error-200); --color-forms-placeholder-bg: var(--color-alias-neutral-700); --color-forms-loading-spinner-border: var(--color-alias-neutral-700); --color-forms-loading-spinner-active: var(--color-alias-information-400); --color-forms-save-success-bg: var(--color-alias-creative-600); --color-forms-dialog-content-bg: var(--color-alias-neutral-800); --color-forms-dialog-footer-bg: var(--color-alias-neutral-900); --color-forms-dialog-footer-border: var(--color-alias-neutral-700); } /* Forms Color Mapping - Based on Figma ECO DSM Variables (Eco Light Mode) This file maps form-specific colors to the alias layer. These variables follow the Figma naming convention for consistency. Naming Pattern: --color-forms-{element}-{state} - element: text, icons, surface, border - state: label, section, default, supporting, error, selected, disabled, focused, input, hover, etc. Must compile at the * level so each element can recalculate correctly. */ * { --color-forms-text-label: var(--color-alias-neutral-900); --color-forms-text-section: var(--color-alias-information-500); --color-forms-text-default: var(--color-alias-neutral-600); --color-forms-text-supporting: var(--color-alias-neutral-900); --color-forms-text-error: var(--color-alias-error-500); --color-forms-text-selected: var(--color-alias-information-700); --color-forms-text-disabled: var(--color-alias-neutral-600); --color-forms-text-focused: var(--color-alias-neutral-900); --color-forms-text-input: var(--color-alias-neutral-900); --color-forms-icons-high-emphasis: var(--color-alias-neutral-900); --color-forms-icons-medium-emphasis: var(--color-alias-neutral-600); --color-forms-icons-help: var(--color-alias-information-500); --color-forms-icons-selected: var(--color-alias-information-700); --color-forms-icons-error: var(--color-alias-error-500); --color-forms-icons-disabled: var(--color-alias-neutral-600); --color-forms-icons-hidden: var(--color-alias-foundation-transparent); --color-forms-surface-default: var(--color-alias-foundation-white); --color-forms-surface-disabled: var(--color-alias-foundation-white); --color-forms-surface-hover: var(--color-alias-information-50); --color-forms-surface-error-hover: var(--color-alias-error-25); --color-forms-surface-focus: var(--color-alias-information-50); --color-forms-surface-read-only: var(--color-alias-neutral-50); --color-forms-surface-input: var(--color-alias-foundation-white); --color-forms-surface-error: var(--color-alias-foundation-white); --color-forms-border-default: var(--color-alias-foundation-black); --color-forms-border-hover: var(--color-alias-information-500); --color-forms-border-focused: var(--color-alias-information-500); --color-forms-border-error: var(--color-alias-error-500); --color-forms-border-input: var(--color-alias-foundation-black); --color-forms-border-disabled: var(--color-alias-neutral-400); --color-forms-border-read-only: var(--color-alias-foundation-transparent); --color-forms-button-primary-bg: var(--color-alias-information-500); --color-forms-button-primary-bg-hover: var(--color-alias-information-600); --color-forms-button-primary-bg-active: var(--color-alias-information-700); --color-forms-button-primary-text: var(--color-alias-foundation-white); --color-forms-button-secondary-bg: var(--color-alias-neutral-600); --color-forms-button-secondary-bg-hover: var(--color-alias-neutral-700); --color-forms-button-secondary-bg-active: var(--color-alias-neutral-800); --color-forms-button-secondary-text: var(--color-alias-foundation-white); --color-forms-button-success-bg: var(--color-alias-creative-500); --color-forms-button-success-bg-hover: var(--color-alias-creative-600); --color-forms-button-success-bg-active: var(--color-alias-creative-700); --color-forms-button-success-text: var(--color-alias-foundation-white); --color-forms-button-danger-bg: var(--color-alias-error-500); --color-forms-button-danger-bg-hover: var(--color-alias-error-600); --color-forms-button-danger-bg-active: var(--color-alias-error-700); --color-forms-button-danger-text: var(--color-alias-foundation-white); --color-forms-button-warning-bg: var(--color-alias-warning-500); --color-forms-button-warning-bg-hover: var(--color-alias-warning-600); --color-forms-button-warning-bg-active: var(--color-alias-warning-700); --color-forms-button-warning-text: var(--color-alias-foundation-black); --color-forms-button-disabled-bg: var(--color-alias-neutral-200); --color-forms-button-disabled-text: var(--color-alias-neutral-600); --color-forms-container-bg: var(--color-alias-neutral-50); --color-forms-container-border: var(--color-alias-neutral-300); --color-forms-container-header-bg: var(--color-alias-neutral-100); --color-forms-container-header-text: var(--color-alias-neutral-800); --color-forms-container-header-icon: var(--color-alias-neutral-600); --color-forms-container-header-hover-bg: var(--color-alias-neutral-200); --color-forms-table-bg: var(--color-alias-foundation-white); --color-forms-table-border: var(--color-alias-information-100); --color-forms-table-header-bg: var(--color-alias-information-50); --color-forms-table-header-text: var(--color-alias-information-700); --color-forms-table-header-border: var(--color-alias-information-500); --color-forms-table-header-cell-border: var(--color-alias-information-200); --color-forms-table-row-even-bg: var(--color-alias-foundation-white); --color-forms-table-row-odd-bg: var(--color-alias-information-25); --color-forms-table-row-hover-bg: var(--color-alias-information-50); --color-forms-table-cell-text: var(--color-alias-neutral-800); --color-forms-table-cell-border: var(--color-alias-information-50); --color-forms-table-empty-text: var(--color-alias-neutral-600); --color-forms-table-empty-bg: var(--color-alias-information-25); --color-forms-table-scrollbar-track: var(--color-alias-neutral-100); --color-forms-table-scrollbar-thumb: var(--color-alias-neutral-400); --color-forms-table-scrollbar-thumb-hover: var(--color-alias-neutral-500); --color-forms-code-bg: var(--color-alias-neutral-50); --color-forms-code-border: var(--color-alias-neutral-300); --color-forms-code-text: var(--color-alias-neutral-900); --color-forms-code-result-success-bg: var(--color-alias-creative-50); --color-forms-code-result-success-border: var(--color-alias-creative-200); --color-forms-code-result-success-text: var(--color-alias-creative-800); --color-forms-code-result-error-bg: var(--color-alias-error-50); --color-forms-code-result-error-border: var(--color-alias-error-200); --color-forms-code-result-error-text: var(--color-alias-error-800); --color-forms-checkbox-unchecked: var(--color-alias-neutral-600); --color-forms-checkbox-checked: var(--color-alias-information-500); --color-forms-checkbox-hover: var(--color-alias-information-500); --color-forms-checkbox-disabled: var(--color-alias-neutral-400); --color-forms-checkbox-focus-outline: var(--color-alias-information-500); --color-forms-checkbox-option-hover-bg: var(--color-alias-neutral-50); --color-forms-checkbox-option-selected-bg: var(--color-alias-information-50); --color-forms-checkbox-option-selected-text: var(--color-alias-information-700); --color-forms-checkbox-option-selected-hover-bg: var(--color-alias-information-100); --color-forms-select-option-selected-bg: var(--color-alias-information-600); --color-forms-select-option-selected-text: var(--color-alias-foundation-white); --color-forms-select-option-selected-hover-bg: var(--color-alias-information-700); --color-forms-chip-bg: var(--color-alias-neutral-200); --color-forms-chip-border: var(--color-alias-neutral-300); --color-forms-chip-text: var(--color-alias-neutral-900); --color-forms-chip-bg-hover: var(--color-alias-neutral-300); --color-forms-chip-border-hover: var(--color-alias-neutral-400); --color-forms-chip-bg-disabled: var(--color-alias-neutral-100); --color-forms-link: var(--color-alias-information-700); --color-forms-link-hover: var(--color-alias-information-800); --color-forms-link-focus-outline: var(--color-alias-information-500); --color-forms-embedded-border: var(--color-alias-neutral-200); --color-forms-embedded-border-hover: var(--color-alias-neutral-300); --color-forms-embedded-border-focus: var(--color-alias-information-500); --color-forms-embedded-loading-text: var(--color-alias-neutral-600); --color-forms-embedded-error-bg: var(--color-alias-error-50); --color-forms-embedded-error-border: var(--color-alias-error-200); --color-forms-embedded-error-text: var(--color-alias-error-700); --color-forms-embedded-error-icon: var(--color-alias-error-800); --color-forms-placeholder-bg: var(--color-alias-neutral-200); --color-forms-loading-spinner-border: var(--color-alias-neutral-200); --color-forms-loading-spinner-active: var(--color-alias-information-500); --color-forms-save-success-bg: var(--color-alias-creative-500); --color-forms-save-success-text: var(--color-alias-foundation-white); --color-forms-dialog-content-bg: var(--color-alias-neutral-50); --color-forms-dialog-footer-bg: var(--color-alias-foundation-white); --color-forms-dialog-footer-border: var(--color-alias-neutral-300); } /* Sizing Primitive Layer Base scale values using REM units for accessibility. These define the raw sizing scale based on a 4px (0.25rem) increment system. Base: 16px = 1rem (browser default) All values use calc() with --scale-base multiplier for global scaling. Usage: Do not use these directly. Use alias or mapping variables instead. */ :root { /* Global Scale Multiplier Change this single value to scale the entire site proportionally. Default: 1 (100%) Examples: - 1.2 = 120% (everything 20% larger) - 0.8 = 80% (everything 20% smaller) NOTE: This is set at :root but the scale values are calculated at * level so they recalculate when --scale-base is overridden in themes. */ --scale-base: 1; } * { /* Base Scale Values (in REM) These are calculated at the * level so they recalculate when --scale-base changes. This allows themes to override --scale-base and have all sizing update automatically. */ --scale-0: 0; --scale-25: calc(0.0625rem * var(--scale-base)); --scale-50: calc(0.125rem * var(--scale-base)); --scale-100: calc(0.25rem * var(--scale-base)); --scale-200: calc(0.5rem * var(--scale-base)); --scale-300: calc(0.75rem * var(--scale-base)); --scale-400: calc(1rem * var(--scale-base)); --scale-500: calc(1.25rem * var(--scale-base)); --scale-600: calc(1.5rem * var(--scale-base)); --scale-700: calc(1.75rem * var(--scale-base)); --scale-800: calc(2rem * var(--scale-base)); --scale-900: calc(2.25rem * var(--scale-base)); --scale-1000: calc(2.5rem * var(--scale-base)); --scale-1100: calc(2.75rem * var(--scale-base)); --scale-1200: calc(3rem * var(--scale-base)); --scale-1300: calc(3.75rem * var(--scale-base)); } /* Responsive Breakpoints Adjust --scale-base at different screen sizes for optimal sizing. Mobile: Slightly larger for touch targets Tablet: Default sizing Desktop: Default sizing Large Desktop: Slightly smaller for more content density */ @media (max-width: 767px) { :root { --scale-base: 1.1; } } @media (min-width: 768px) and (max-width: 1023px) { :root { --scale-base: 1; } } @media (min-width: 1024px) and (max-width: 1439px) { :root { --scale-base: 1; } } @media (min-width: 1440px) { :root { --scale-base: 0.95; } } /* Notes: 1. All values use REM units for accessibility (respects user browser font size) 2. The --scale-base multiplier is set at :root but scale values are calculated at * 3. This allows scale values to recalculate when --scale-base is overridden in themes 4. Breakpoints adjust --scale-base for optimal sizing at different screen sizes 5. The 4px (0.25rem) base increment maintains consistent visual rhythm 6. Do not use these primitive values directly - use alias or mapping variables CRITICAL: Scale values MUST be at * level, not :root, so they recalculate when --scale-base changes. If they were at :root, the calc() would evaluate once and themes couldn't override the sizing. */ /* Sizing Alias Layer Semantic groupings of sizing values with category-specific multipliers. This layer allows scaling by category (spacing, typography, borders, icons, grid). Categories: - Spacing: Margins, padding, gaps - Typography: Font sizes - Border: Border widths and radii - Icon: Icon sizes - Grid: Layout grid and container sizes Each category has its own multiplier for independent scaling. */ * { /* Category-specific multipliers allow scaling just one category. Override these to scale only spacing, typography, borders, icons, or grid. Default: 1 (100%) Examples: --spacing-multiplier: 1.2; // 20% more spacing --typography-multiplier: 1.5; // 50% larger text --border-multiplier: 0.8; // 20% thinner borders --icon-multiplier: 1.3; // 30% larger icons --grid-multiplier: 1.1; // 10% larger grid */ --spacing-multiplier: 1; --typography-multiplier: 1; --border-multiplier: 1; --icon-multiplier: 1; --grid-multiplier: 1; /* General spacing scale for margins, padding, gaps. Based on Figma ECO DSM scale values. */ --spacing-0: calc(var(--scale-0) * var(--spacing-multiplier)); --spacing-25: calc(var(--scale-25) * var(--spacing-multiplier)); --spacing-50: calc(var(--scale-50) * var(--spacing-multiplier)); --spacing-100: calc(var(--scale-100) * var(--spacing-multiplier)); --spacing-200: calc(var(--scale-200) * var(--spacing-multiplier)); --spacing-300: calc(var(--scale-300) * var(--spacing-multiplier)); --spacing-400: calc(var(--scale-400) * var(--spacing-multiplier)); --spacing-500: calc(var(--scale-500) * var(--spacing-multiplier)); --spacing-600: calc(var(--scale-600) * var(--spacing-multiplier)); --spacing-700: calc(var(--scale-700) * var(--spacing-multiplier)); --spacing-800: calc(var(--scale-800) * var(--spacing-multiplier)); --spacing-900: calc(var(--scale-900) * var(--spacing-multiplier)); --spacing-1000: calc(var(--scale-1000) * var(--spacing-multiplier)); --spacing-1100: calc(var(--scale-1100) * var(--spacing-multiplier)); --spacing-1200: calc(var(--scale-1200) * var(--spacing-multiplier)); --spacing-1300: calc(var(--scale-1300) * var(--spacing-multiplier)); /* Font size scale for text elements. Note: Line-height and letter-spacing will be added in typography system. */ --font-size-100: calc(var(--scale-100) * var(--typography-multiplier)); --font-size-200: calc(var(--scale-200) * var(--typography-multiplier)); --font-size-300: calc(var(--scale-300) * var(--typography-multiplier)); --font-size-400: calc(var(--scale-400) * var(--typography-multiplier)); --font-size-500: calc(var(--scale-500) * var(--typography-multiplier)); --font-size-600: calc(var(--scale-600) * var(--typography-multiplier)); --font-size-700: calc(var(--scale-700) * var(--typography-multiplier)); --font-size-800: calc(var(--scale-800) * var(--typography-multiplier)); --font-size-900: calc(var(--scale-900) * var(--typography-multiplier)); --font-size-1000: calc(var(--scale-1000) * var(--typography-multiplier)); --font-size-1100: calc(var(--scale-1100) * var(--typography-multiplier)); --font-size-1200: calc(var(--scale-1200) * var(--typography-multiplier)); /* Border widths and radii. Based on Figma ECO DSM border values. */ --border-width-0: calc(var(--scale-0) * var(--border-multiplier)); --border-width-25: calc(var(--scale-25) * var(--border-multiplier)); --border-width-50: calc(var(--scale-50) * var(--border-multiplier)); --border-width-100: calc(var(--scale-100) * var(--border-multiplier)); --border-radius-0: calc(var(--scale-0) * var(--border-multiplier)); --border-radius-100: calc(var(--scale-100) * var(--border-multiplier)); --border-radius-200: calc(var(--scale-200) * var(--border-multiplier)); --border-radius-300: calc(var(--scale-300) * var(--border-multiplier)); --border-radius-400: calc(var(--scale-400) * var(--border-multiplier)); --border-radius-600: calc(var(--scale-600) * var(--border-multiplier)); --border-radius-full: 9999px; /* Icon sizes for UI icons. Based on Figma ECO DSM icon size values. */ --icon-size-200: calc(var(--scale-200) * var(--icon-multiplier)); --icon-size-300: calc(var(--scale-300) * var(--icon-multiplier)); --icon-size-400: calc(var(--scale-400) * var(--icon-multiplier)); --icon-size-500: calc(var(--scale-500) * var(--icon-multiplier)); --icon-size-600: calc(var(--scale-600) * var(--icon-multiplier)); --icon-size-800: calc(var(--scale-800) * var(--icon-multiplier)); --icon-size-1000: calc(var(--scale-1000) * var(--icon-multiplier)); --icon-size-1200: calc(var(--scale-1200) * var(--icon-multiplier)); /* Grid and layout sizing for containers, columns, gutters. Useful for consistent layout spacing and responsive grids. */ --container-sm: calc(40rem * var(--grid-multiplier)); --container-md: calc(48rem * var(--grid-multiplier)); --container-lg: calc(64rem * var(--grid-multiplier)); --container-xl: calc(80rem * var(--grid-multiplier)); --container-2xl: calc(96rem * var(--grid-multiplier)); --grid-gutter-sm: calc(var(--scale-200) * var(--grid-multiplier)); --grid-gutter-md: calc(var(--scale-400) * var(--grid-multiplier)); --grid-gutter-lg: calc(var(--scale-600) * var(--grid-multiplier)); --grid-gutter-xl: calc(var(--scale-800) * var(--grid-multiplier)); --col-1: 8.333333%; --col-2: 16.666667%; --col-3: 25%; --col-4: 33.333333%; --col-5: 41.666667%; --col-6: 50%; --col-7: 58.333333%; --col-8: 66.666667%; --col-9: 75%; --col-10: 83.333333%; --col-11: 91.666667%; --col-12: 100%; } /* Notes: 1. All values use calc() with category multipliers for independent scaling 2. Category multipliers allow scaling just one aspect (e.g., only typography) 3. Spacing values are used for margins, padding, gaps 4. Typography values are font sizes (line-height/letter-spacing in future typography system) 5. Border values include widths and radii 6. Icon values are for UI icon sizing 7. Grid values are for layout containers and column systems 8. Use these alias values in mapping layer for specific components */ /* Sizing Theme Layer All themes have been moved to: site/core/packages/synapse/1.x/css/themes/ To use themes, import the themes index in your main stylesheet: Available themes: - theme-dense: Reduced spacing, normal text (max density) - theme-compact: 75% scale (compact) - theme-comfortable: 87.5% scale (slightly smaller) - theme-large: 125% scale (larger) - theme-accessibility: 150% text, 120% spacing (readability) - theme-touch: 120% scale + larger touch targets (mobile/tablet) - print: Auto-applied when printing Custom Theme Examples: // Client-specific branding with larger forms .theme-client-acme * { --forms-padding-large: var(--spacing-400); --forms-font-size-input: var(--font-size-500); } // Dashboard with compact forms .theme-dashboard * { --scale-base: 0.9; --forms-spacing-form-groups: var(--spacing-300); } // High contrast accessibility .theme-high-contrast * { --typography-multiplier: 1.6; --spacing-multiplier: 1.3; --border-multiplier: 1.5; } */ /* Forms Sizing Mapping - Based on Figma ECO DSM Variables This file maps form-specific sizing to the alias layer. These variables follow the Figma naming convention for consistency. Naming Pattern: --forms-{property}-{size/variant} - property: padding, spacing, border, icon, font, etc. - size/variant: small, medium, large, or specific use case Based on Figma ECO DSM: - forms.padding: 50 (2px), 100 (4px), 300 (12px) - forms.spacing: 100 (4px), 200 (8px), 1200 (48px) - border.border width: 25 (1px), 50 (2px) - border.border radius: 100 (4px) - icon size: 300 (12px), 600 (24px) Must compile at the * level so each element can recalculate correctly. */ * { /* Padding inside form elements (inputs, buttons, etc.) From Figma: forms.padding */ --forms-padding-small: var(--spacing-50); --forms-padding-medium: var(--spacing-100); --forms-padding-large: var(--spacing-300); --forms-padding-input-vertical: var(--spacing-200); --forms-padding-input-horizontal: var(--spacing-300); --forms-padding-button-vertical: var(--spacing-200); --forms-padding-button-horizontal: var(--spacing-400); /* Spacing between form elements (gaps, margins) From Figma: forms.spacing */ --forms-spacing-tight: var(--spacing-100); --forms-spacing-normal: var(--spacing-200); --forms-spacing-loose: var(--spacing-1200); --forms-spacing-label-input: var(--spacing-100); --forms-spacing-input-help: var(--spacing-100); --forms-spacing-form-groups: var(--spacing-600); --forms-spacing-form-sections: var(--spacing-1200); /* Border widths and radii for form elements From Figma: border.border width, border.border radius */ --forms-border-width-thin: var(--border-width-25); --forms-border-width-thick: var(--border-width-50); --forms-border-width-default: var(--border-width-25); --forms-border-radius-small: var(--border-radius-100); --forms-border-radius-medium: var(--border-radius-200); --forms-border-radius-large: var(--border-radius-300); --forms-border-radius-default: var(--border-radius-100); /* Icon sizes for form elements (help icons, prefix/suffix icons) From Figma: icon size */ --forms-icon-size-small: var(--icon-size-300); --forms-icon-size-medium: var(--icon-size-400); --forms-icon-size-large: var(--icon-size-600); --forms-icon-size-default: var(--icon-size-400); /* Font sizes for form text elements Note: Line-height and letter-spacing will be added in typography system */ --forms-font-size-label: var(--font-size-300); --forms-font-size-input: var(--font-size-400); --forms-font-size-help: var(--font-size-300); --forms-font-size-error: var(--font-size-300); --forms-font-size-section: var(--font-size-500); --forms-font-size-button: var(--font-size-400); /* Complete input element sizing Combines padding, border, font size for consistent input heights */ --forms-input-height-small: calc(var(--forms-font-size-input) + (var(--forms-padding-input-vertical) * 2) + (var(--forms-border-width-default) * 2)); --forms-input-height-medium: calc(var(--forms-font-size-input) + (var(--spacing-300) * 2) + (var(--forms-border-width-default) * 2)); --forms-input-height-large: calc(var(--forms-font-size-input) + (var(--spacing-400) * 2) + (var(--forms-border-width-default) * 2)); --forms-input-width-xs: calc(var(--scale-1000) * 4); --forms-input-width-sm: calc(var(--scale-1000) * 6); --forms-input-width-md: calc(var(--scale-1000) * 10); --forms-input-width-lg: calc(var(--scale-1000) * 15); --forms-input-width-full: 100%; /* Button sizing for form actions */ --forms-button-height-small: calc(var(--forms-font-size-button) + (var(--spacing-200) * 2) + (var(--forms-border-width-default) * 2)); --forms-button-height-medium: calc(var(--forms-font-size-button) + (var(--spacing-300) * 2) + (var(--forms-border-width-default) * 2)); --forms-button-height-large: calc(var(--forms-font-size-button) + (var(--spacing-400) * 2) + (var(--forms-border-width-default) * 2)); --forms-button-min-width-small: var(--scale-1000); --forms-button-min-width-medium: var(--scale-1200); --forms-button-min-width-large: var(--scale-1300); /* Sizing for checkboxes and radio buttons */ --forms-checkbox-size-small: var(--scale-400); --forms-checkbox-size-medium: var(--scale-500); --forms-checkbox-size-large: var(--scale-600); --forms-checkbox-size-default: var(--scale-500); --forms-radio-size-small: var(--scale-400); --forms-radio-size-medium: var(--scale-500); --forms-radio-size-large: var(--scale-600); --forms-radio-size-default: var(--scale-500); /* Sizing for select dropdowns */ --forms-select-arrow-size: var(--icon-size-300); --forms-select-padding-right: calc(var(--forms-padding-input-horizontal) + var(--forms-select-arrow-size) + var(--spacing-200)); /* Sizing for textarea elements */ --forms-textarea-min-height: calc(var(--scale-1000) * 3); --forms-textarea-max-height: calc(var(--scale-1000) * 10); } /* Notes: 1. All values map to alias layer (spacing, typography, border, icon) 2. Follows Figma ECO DSM naming and values 3. Includes calculated values for input/button heights 4. Provides size variants (small, medium, large) for flexibility 5. Uses REM units via alias layer for accessibility 6. Can be overridden in theme layer for custom sizing 7. Combines multiple properties for complete component sizing */ /* Typography Primitive Layer Base font family and weight definitions. These define the raw typography values based on design system. From Figma ECO DSM: - Font Family: Open Sans - Font Weights: Light, Regular, Semi Bold, Bold Usage: Do not use these directly. Use alias or mapping variables instead. */ :root { /* Primary font family for the application. Based on Figma: Primitive.Eco.fonts.open sans */ --font-family-primary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* Monospace font family for code and technical content. */ --font-family-mono: "Courier New", Courier, monospace; /* Font weight values. Based on Figma: Primitive.Eco.fonts.open sans.fonts weight Note: These are numeric values that work with variable fonts. Open Sans supports: 300, 400, 600, 700 */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* Font style values for italic/oblique text. */ --font-style-normal: normal; --font-style-italic: italic; } /* Notes: 1. Font families include fallback stacks for better compatibility 2. Font weights use numeric values (300, 400, 600, 700) for flexibility 3. These are raw values set at :root (no calculations needed) 4. Font sizes are in the sizing system (--font-size-*) 5. Line height and letter spacing will be added in typography alias layer */ /* Typography Alias Layer Semantic typography groupings for common text styles. This layer provides reusable text style combinations. Categories: - Text styles: body, heading, label, caption, code - Font combinations: family + weight + style These can be expanded later with line-height, letter-spacing, text-transform, etc. */ * { /* Standard body text styles for paragraphs and general content. */ --text-body-font-family: var(--font-family-primary); --text-body-font-weight: var(--font-weight-regular); --text-body-font-style: var(--font-style-normal); --text-body-bold-font-family: var(--font-family-primary); --text-body-bold-font-weight: var(--font-weight-bold); --text-body-bold-font-style: var(--font-style-normal); --text-body-italic-font-family: var(--font-family-primary); --text-body-italic-font-weight: var(--font-weight-regular); --text-body-italic-font-style: var(--font-style-italic); --text-body-light-font-family: var(--font-family-primary); --text-body-light-font-weight: var(--font-weight-light); --text-body-light-font-style: var(--font-style-normal); /* Heading text styles for titles and section headers. */ --text-heading-font-family: var(--font-family-primary); --text-heading-font-weight: var(--font-weight-bold); --text-heading-font-style: var(--font-style-normal); --text-heading-semibold-font-family: var(--font-family-primary); --text-heading-semibold-font-weight: var(--font-weight-semibold); --text-heading-semibold-font-style: var(--font-style-normal); /* Label text styles for form labels, buttons, and UI elements. */ --text-label-font-family: var(--font-family-primary); --text-label-font-weight: var(--font-weight-semibold); --text-label-font-style: var(--font-style-normal); --text-label-regular-font-family: var(--font-family-primary); --text-label-regular-font-weight: var(--font-weight-regular); --text-label-regular-font-style: var(--font-style-normal); /* Caption text styles for small supporting text, help text, etc. */ --text-caption-font-family: var(--font-family-primary); --text-caption-font-weight: var(--font-weight-regular); --text-caption-font-style: var(--font-style-normal); --text-caption-italic-font-family: var(--font-family-primary); --text-caption-italic-font-weight: var(--font-weight-regular); --text-caption-italic-font-style: var(--font-style-italic); /* Code text styles for inline code and code blocks. */ --text-code-font-family: var(--font-family-mono); --text-code-font-weight: var(--font-weight-regular); --text-code-font-style: var(--font-style-normal); } /* Notes: 1. All text styles are at * level for proper cascade 2. Each style defines family, weight, and style separately for flexibility 3. Font sizes come from sizing system (--font-size-*) 4. These can be combined in mapping layer for specific components 5. Future expansion: line-height, letter-spacing, text-transform, text-decoration Usage Example: .my-heading { font-family: var(--text-heading-font-family); font-weight: var(--text-heading-font-weight); font-style: var(--text-heading-font-style); font-size: var(--font-size-800); } */ /* Forms Typography Mapping Typography variables specific to form elements. Maps text styles to form components. Based on Figma ECO DSM forms typography. Font sizes are already defined in _sizing_forms.scss This file adds font family, weight, and style. */ * { /* Typography for form field labels. Uses semibold weight for emphasis. */ --forms-label-font-family: var(--text-label-font-family); --forms-label-font-weight: var(--text-label-font-weight); --forms-label-font-style: var(--text-label-font-style); /* Typography for input field text. Uses regular weight for readability. */ --forms-input-font-family: var(--text-body-font-family); --forms-input-font-weight: var(--text-body-font-weight); --forms-input-font-style: var(--text-body-font-style); /* Typography for help text and supporting text. Uses regular weight, smaller size. */ --forms-help-font-family: var(--text-caption-font-family); --forms-help-font-weight: var(--text-caption-font-weight); --forms-help-font-style: var(--text-caption-font-style); /* Typography for error messages. Uses regular weight, same size as help text. */ --forms-error-font-family: var(--text-caption-font-family); --forms-error-font-weight: var(--text-caption-font-weight); --forms-error-font-style: var(--text-caption-font-style); /* Typography for form section headings. Uses semibold weight for hierarchy. */ --forms-section-font-family: var(--text-heading-semibold-font-family); --forms-section-font-weight: var(--text-heading-semibold-font-weight); --forms-section-font-style: var(--text-heading-semibold-font-style); /* Typography for button text. Uses semibold weight for emphasis. */ --forms-button-font-family: var(--text-label-font-family); --forms-button-font-weight: var(--text-label-font-weight); --forms-button-font-style: var(--text-label-font-style); /* Typography for input placeholder text. Uses light weight for subtle appearance. */ --forms-placeholder-font-family: var(--text-body-light-font-family); --forms-placeholder-font-weight: var(--text-body-light-font-weight); --forms-placeholder-font-style: var(--text-body-light-font-style); } /* Notes: 1. Font sizes are defined in _sizing_forms.scss (part of sizing system) 2. This file only defines font-family, font-weight, and font-style 3. All values are at * level for proper cascade 4. Maps to text style aliases for consistency 5. Can be overridden in theme layer for custom typography Usage Example: .form-label { font-family: var(--forms-label-font-family); font-weight: var(--forms-label-font-weight); font-style: var(--forms-label-font-style); font-size: var(--forms-font-size-label); } */ /* Forward all the variable files in order */ /** * Field Neuron Styles * * Styles for field neuron components and their sub-elements. * Based on the field structure with label, input, and support text sections. * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout), .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout) { display: block; margin-bottom: var(--forms-spacing-form-groups); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout) .neuron_labelRow, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout) .neuron_labelRow { display: flex; align-items: center; margin-bottom: var(--forms-spacing-label-input); gap: var(--spacing-200); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout) .neuron_labelRow .neuron_label, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout) .neuron_labelRow .neuron_label { font-family: var(--forms-label-font-family); font-weight: var(--forms-label-font-weight); font-style: var(--forms-label-font-style); font-size: var(--forms-font-size-label); color: var(--color-forms-text-label); line-height: 1.5; } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout) .neuron_labelRow .helpIcon, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout) .neuron_labelRow .helpIcon { color: var(--color-forms-icons-help); cursor: help; font-size: var(--forms-icon-size-small); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout) .neuron_labelRow .helpIcon:hover, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout) .neuron_labelRow .helpIcon:hover { color: var(--color-forms-icons-selected); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select):not(.is-disabled):not(.is-readonly) .neuron_inputRow, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select):not(.is-disabled):not(.is-readonly) .neuron_inputRow { display: flex; align-items: center; border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); background-color: var(--color-forms-surface-default); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select):not(.is-disabled):not(.is-readonly) .neuron_inputRow:hover, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select):not(.is-disabled):not(.is-readonly) .neuron_inputRow:hover { border-color: var(--color-forms-border-hover); background-color: var(--color-forms-surface-hover); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select):not(.is-disabled):not(.is-readonly) .neuron_inputRow:focus-within, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select):not(.is-disabled):not(.is-readonly) .neuron_inputRow:focus-within { border-color: var(--color-forms-border-focused); background-color: var(--color-forms-surface-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow { display: flex; align-items: center; } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow textarea, .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow input, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow textarea, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow input { border-radius: var(--forms-border-radius-default); background-color: transparent; border: none; } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .prefixIcon, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .prefixIcon { padding: var(--forms-padding-input-vertical) 0 var(--forms-padding-input-vertical) var(--forms-padding-input-vertical); color: var(--color-forms-icons-medium-emphasis); font-size: var(--forms-icon-size-default); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .prefixText, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .prefixText { padding: var(--forms-padding-input-vertical) var(--spacing-200); color: var(--color-forms-text-default); font-size: var(--forms-font-size-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); border-right: var(--forms-border-width-default) solid var(--color-forms-border-default); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .neuron_input, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .neuron_input { flex: 1; border: none; outline: none; padding: var(--forms-padding-input-vertical) var(--forms-padding-input-horizontal); font-size: var(--forms-font-size-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); background: transparent; color: var(--color-forms-text-input); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .neuron_input::placeholder, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .neuron_input::placeholder { color: var(--color-forms-text-placeholder); font-family: var(--forms-placeholder-font-family); font-weight: var(--forms-placeholder-font-weight); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .suffixDivider, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .suffixDivider { width: var(--forms-border-width-default); height: var(--spacing-600); background-color: var(--color-forms-border-default); margin: 0 var(--spacing-200); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .suffixIcon, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .suffixIcon { padding: var(--forms-padding-input-vertical) var(--forms-padding-input-vertical) var(--forms-padding-input-vertical) 0; color: var(--color-forms-icons-medium-emphasis); font-size: var(--forms-icon-size-default); cursor: pointer; } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .suffixIcon:hover, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .suffixIcon:hover { color: var(--color-forms-icons-high-emphasis); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .suffixText, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout):not(.has-toggle-switch):not(.has-toggleswitch):not(.has-checkbox):not(.has-checkboxlist):not(.has-select) .neuron_inputRow .suffixText { padding: var(--forms-padding-input-vertical) var(--forms-padding-input-vertical) var(--forms-padding-input-vertical) 0; color: var(--color-forms-text-default); font-size: var(--forms-font-size-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout) .supportTextRow, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout) .supportTextRow { display: flex; align-items: flex-start; margin-top: var(--forms-spacing-input-help); gap: var(--spacing-100); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout) .supportTextRow .support_text_icon, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout) .supportTextRow .support_text_icon { color: var(--color-forms-icons-help); font-size: var(--forms-icon-size-small); margin-top: var(--spacing-50); } .hasField:not(.hasField .hasField):not(.has-embeddedlayout):not(.has-embeddedLayout) .supportTextRow .support_text, .has-field:not(.has-field .has-field):not(.has-embeddedlayout):not(.has-embeddedLayout) .supportTextRow .support_text { color: var(--color-forms-text-supporting); font-size: var(--forms-font-size-help); font-family: var(--forms-help-font-family); font-weight: var(--forms-help-font-weight); line-height: 1.5; } .hasField.has-errors .neuron_inputRow, .has-field.has-errors .neuron_inputRow { border-color: var(--color-forms-border-error); background-color: var(--color-forms-surface-error); } .hasField.has-errors .neuron_inputRow:hover, .has-field.has-errors .neuron_inputRow:hover { background-color: var(--color-forms-surface-error-hover); } .hasField.has-errors .neuron_inputRow:focus-within, .has-field.has-errors .neuron_inputRow:focus-within { border-color: var(--color-forms-border-error); background-color: var(--color-forms-surface-focus); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .hasField.has-errors .support_text, .has-field.has-errors .support_text { color: var(--color-forms-text-error); } .hasField.has-errors .support_text_icon, .has-field.has-errors .support_text_icon { color: var(--color-forms-icons-error); } .hasField.has-errors .prefixIcon, .hasField.has-errors .suffixIcon, .has-field.has-errors .prefixIcon, .has-field.has-errors .suffixIcon { color: var(--color-forms-icons-error); } .hasField.has-success .neuron_inputRow, .has-field.has-success .neuron_inputRow { border-color: #10B981; } .hasField.has-success .neuron_inputRow:focus-within, .has-field.has-success .neuron_inputRow:focus-within { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); } .hasField.has-success .support_text, .has-field.has-success .support_text { color: #10B981; } .hasField.has-success .support_text_icon, .has-field.has-success .support_text_icon { color: #10B981; } .hasField.has-warning .neuron_inputRow, .has-field.has-warning .neuron_inputRow { border-color: #F59E0B; } .hasField.has-warning .neuron_inputRow:focus-within, .has-field.has-warning .neuron_inputRow:focus-within { border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } .hasField.has-warning .support_text, .has-field.has-warning .support_text { color: #F59E0B; } .hasField.is-disabled .neuron_inputRow, .has-field.is-disabled .neuron_inputRow { background-color: var(--color-forms-surface-disabled); border-color: var(--color-forms-border-disabled); border-style: dashed; cursor: not-allowed; } .hasField.is-disabled .neuron_inputRow:hover, .has-field.is-disabled .neuron_inputRow:hover { background-color: var(--color-forms-surface-disabled); border-color: var(--color-forms-border-disabled); border-style: dashed; } .hasField.is-disabled .neuron_input, .has-field.is-disabled .neuron_input { background-color: transparent; color: var(--color-forms-text-disabled); cursor: not-allowed; } .hasField.is-disabled .neuron_label, .has-field.is-disabled .neuron_label { color: var(--color-forms-text-disabled); } .hasField.is-disabled .prefixIcon, .hasField.is-disabled .suffixIcon, .has-field.is-disabled .prefixIcon, .has-field.is-disabled .suffixIcon { color: var(--color-forms-icons-disabled); } .hasField.is-readonly .neuron_inputRow, .has-field.is-readonly .neuron_inputRow { background-color: var(--color-forms-surface-read-only); border-color: var(--color-forms-border-read-only); cursor: default; } .hasField.is-readonly .neuron_inputRow:hover, .has-field.is-readonly .neuron_inputRow:hover { background-color: var(--color-forms-surface-read-only); border-color: var(--color-forms-border-read-only); } .hasField.is-readonly .neuron_input, .has-field.is-readonly .neuron_input { cursor: default; } .hasField.is-required .neuron_label::after, .has-field.is-required .neuron_label::after { content: " *"; color: var(--color-forms-text-error); } .hasField.isMaskedInput .neuron_input, .has-field.isMaskedInput .neuron_input { -webkit-text-security: disc; } .hasField.isMaskedInput .neuron_input:focus, .has-field.isMaskedInput .neuron_input:focus { -webkit-text-security: none; } .hasField.size-sm .neuron_inputRow .neuron_input, .has-field.size-sm .neuron_inputRow .neuron_input { padding: var(--spacing-200); font-size: var(--font-size-300); } .hasField.size-sm .neuron_inputRow .prefixIcon, .hasField.size-sm .neuron_inputRow .suffixIcon, .has-field.size-sm .neuron_inputRow .prefixIcon, .has-field.size-sm .neuron_inputRow .suffixIcon { padding: var(--spacing-200); font-size: var(--icon-size-300); } .hasField.size-sm .neuron_inputRow .prefixText, .hasField.size-sm .neuron_inputRow .suffixText, .has-field.size-sm .neuron_inputRow .prefixText, .has-field.size-sm .neuron_inputRow .suffixText { padding: var(--spacing-200); font-size: var(--font-size-300); } .hasField.size-lg .neuron_inputRow .neuron_input, .has-field.size-lg .neuron_inputRow .neuron_input { padding: var(--spacing-400); font-size: var(--font-size-400); } .hasField.size-lg .neuron_inputRow .prefixIcon, .hasField.size-lg .neuron_inputRow .suffixIcon, .has-field.size-lg .neuron_inputRow .prefixIcon, .has-field.size-lg .neuron_inputRow .suffixIcon { padding: var(--spacing-400); font-size: var(--icon-size-500); } .hasField.size-lg .neuron_inputRow .prefixText, .hasField.size-lg .neuron_inputRow .suffixText, .has-field.size-lg .neuron_inputRow .prefixText, .has-field.size-lg .neuron_inputRow .suffixText { padding: var(--spacing-400); font-size: var(--font-size-400); } @media (max-width: 640px) { .hasField .neuron_labelRow, .has-field .neuron_labelRow { flex-direction: column; align-items: flex-start; gap: var(--spacing-100); } .hasField .neuron_inputRow .prefixText, .hasField .neuron_inputRow .suffixText, .has-field .neuron_inputRow .prefixText, .has-field .neuron_inputRow .suffixText { display: none; } } /** * Field.Data Neuron Styles * * Styles for data storage field neurons. * These neurons display their values as read-only text. * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ .has-data { display: block; margin-bottom: var(--forms-spacing-form-groups); } .has-data .neuron_inputRow .neuron_dataDisplay { background-color: var(--color-forms-surface-read-only); color: var(--color-forms-text-input); padding: var(--forms-spacing-input-padding-vertical) var(--forms-spacing-input-padding-horizontal); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--border-radius-100); font-family: var(--forms-font-family-monospace, "Courier New", monospace); font-size: var(--forms-font-size-input); min-height: var(--forms-input-height); display: flex; align-items: center; white-space: pre-wrap; word-break: break-word; cursor: default; } /** * Checkbox Field Styles * * Custom checkbox styling using icons instead of default browser checkbox. * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ /** * Custom checkbox styling * Uses custom div with icon elements for full control */ .neuron.has-checkbox .neuron_inputRow { display: flex; align-items: center; } .neuron.has-checkbox .neuron_inputRow .custom-checkbox { position: relative; width: var(--forms-checkbox-size-default); height: var(--forms-checkbox-size-default); margin-right: var(--spacing-200); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .neuron.has-checkbox .neuron_inputRow .custom-checkbox .unchecked-icon { display: block; color: var(--color-forms-checkbox-unchecked); font-size: var(--forms-icon-size-large); transition: color 0.2s ease; } .neuron.has-checkbox .neuron_inputRow .custom-checkbox .checked-icon { display: none; color: var(--color-forms-checkbox-checked); font-size: var(--forms-icon-size-large); transition: color 0.2s ease; } .neuron.has-checkbox .neuron_inputRow .custom-checkbox.checked .unchecked-icon { display: none; } .neuron.has-checkbox .neuron_inputRow .custom-checkbox.checked .checked-icon { display: block; } .neuron.has-checkbox .neuron_inputRow .custom-checkbox:hover .unchecked-icon, .neuron.has-checkbox .neuron_inputRow .custom-checkbox:hover .checked-icon { color: var(--color-forms-checkbox-hover); } .neuron.has-checkbox .neuron_inputRow .custom-checkbox:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-checkbox-focus-outline); outline-offset: var(--spacing-50); border-radius: var(--border-radius-100); } .neuron.has-checkbox .neuron_inputRow .custom-checkbox[aria-disabled=true] { cursor: not-allowed; } .neuron.has-checkbox .neuron_inputRow .custom-checkbox[aria-disabled=true] .unchecked-icon, .neuron.has-checkbox .neuron_inputRow .custom-checkbox[aria-disabled=true] .checked-icon { color: var(--color-forms-checkbox-disabled); } .neuron.has-checkbox.isChecked .neuron_inputRow input[type=checkbox] + label::before { content: "\f14a"; color: var(--color-forms-checkbox-checked); } /** * Color Field Styles * * Ensures color input has proper height and visibility for clicking. * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ /** * Color input styling * Ensures the color picker is properly sized and visible */ .neuron.has-color .neuron_inputRow input[type=color] { height: var(--scale-1000); min-width: calc(var(--scale-1000) * 1.5); max-width: calc(var(--scale-1000) * 3); border: var(--forms-border-width-thick) solid var(--color-forms-border-default); border-radius: var(--border-radius-200); cursor: pointer; padding: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .neuron.has-color .neuron_inputRow input[type=color]::-webkit-color-swatch-wrapper { padding: 0; border: none; border-radius: var(--spacing-50); } .neuron.has-color .neuron_inputRow input[type=color]::-webkit-color-swatch { border: none; border-radius: var(--spacing-50); } .neuron.has-color .neuron_inputRow input[type=color]::-moz-color-swatch { border: none; border-radius: var(--spacing-50); } .neuron.has-color .neuron_inputRow input[type=color]:hover { border-color: var(--color-forms-border-hover); box-shadow: 0 0 0 var(--spacing-50) rgba(52, 152, 219, 0.2); } .neuron.has-color .neuron_inputRow input[type=color]:focus { outline: none; border-color: var(--color-forms-border-focused); box-shadow: 0 0 0 var(--spacing-100) rgba(52, 152, 219, 0.3); } .neuron.has-color .neuron_inputRow input[type=color]:disabled { opacity: 0.6; cursor: not-allowed; } /** * Hidden Field Styles * * Styles for Field.Hidden neurons that are typically not visible * except when admin override is active. * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ /** * Base hidden field styling * Hidden fields are typically not visible to users */ .neuron.has-hidden { display: none; } .neuron.has-hidden.showForAdminOverride { display: block; opacity: 0.7; border: var(--forms-border-width-thick) dashed var(--color-forms-border-focused); background-color: var(--color-forms-surface-focus); } .neuron.has-hidden.showForAdminOverride::before { content: "HIDDEN FIELD: "; font-size: var(--forms-font-size-label); font-family: var(--forms-label-font-family); font-weight: var(--forms-label-font-weight); color: var(--color-forms-border-focused); } /** * HTML Field Styles * * Styles for HTML field neurons with Froala editor integration * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ .has-html .fr-view { max-height: 300px; } /** * Toggle Switch Field Styles * * Custom toggle switch styling using icons for on/off states. * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ /** * Custom toggle switch styling * Uses custom div with icon elements for full control */ .neuron.has-toggle-switch .neuron_inputRow, .neuron.has-toggleswitch .neuron_inputRow { display: flex; align-items: center; border: none; background-color: transparent; } .neuron.has-toggle-switch .neuron_inputRow:hover, .neuron.has-toggleswitch .neuron_inputRow:hover { border: none; background-color: transparent; } .neuron.has-toggle-switch .neuron_inputRow:focus-within, .neuron.has-toggleswitch .neuron_inputRow:focus-within { border: none; background-color: transparent; box-shadow: none; } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox { position: relative; width: calc(var(--scale-1000) * 1.25); height: calc(var(--scale-600)); margin-right: var(--spacing-300); cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox .toggle-track, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox .toggle-track { position: absolute; width: 100%; height: 100%; background-color: var(--color-forms-surface-read-only); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: calc(var(--scale-600) / 2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox .toggle-slider, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox .toggle-slider { position: absolute; left: var(--spacing-50); width: calc(var(--scale-600) - var(--spacing-100)); height: calc(var(--scale-600) - var(--spacing-100)); background-color: var(--color-forms-surface-default); border-radius: 50%; box-shadow: 0 var(--spacing-50) var(--spacing-100) rgba(0, 0, 0, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox.checked .toggle-track, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox.checked .toggle-track { background-color: var(--color-forms-button-primary-bg); border-color: var(--color-forms-button-primary-bg); } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox.checked .toggle-slider, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox.checked .toggle-slider { left: calc(100% - var(--scale-600) + var(--spacing-50)); } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox:hover:not([aria-disabled=true]) .toggle-track, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox:hover:not([aria-disabled=true]) .toggle-track { border-color: var(--color-forms-border-hover); } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox:hover:not([aria-disabled=true]) .toggle-slider, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox:hover:not([aria-disabled=true]) .toggle-slider { box-shadow: 0 var(--spacing-100) var(--spacing-100) rgba(0, 0, 0, 0.25); } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox:focus, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-border-focused); outline-offset: var(--spacing-50); border-radius: calc(var(--scale-600) / 2); } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox[aria-disabled=true], .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox[aria-disabled=true] { cursor: not-allowed; opacity: 0.5; } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox[aria-disabled=true] .toggle-track, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox[aria-disabled=true] .toggle-track { background-color: var(--color-forms-surface-disabled); border-color: var(--color-forms-border-default); } .neuron.has-toggle-switch .neuron_inputRow .custom-checkbox[aria-disabled=true] .toggle-slider, .neuron.has-toggleswitch .neuron_inputRow .custom-checkbox[aria-disabled=true] .toggle-slider { box-shadow: none; } .neuron.has-toggle-switch .neuron_inputRow .toggleStateLabel, .neuron.has-toggleswitch .neuron_inputRow .toggleStateLabel { margin-left: 0; font-size: var(--forms-font-size-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-label-font-weight); color: var(--color-forms-text-input); transition: color 0.3s ease; user-select: none; cursor: pointer; } .neuron.has-toggle-switch.isChecked .neuron_inputRow .toggleStateLabel, .neuron.has-toggleswitch.isChecked .neuron_inputRow .toggleStateLabel { color: var(--color-forms-button-primary-bg); } .neuron.has-toggle-switch.isChecked .neuron_inputRow input[type=checkbox] + label::before { content: "\f205"; color: var(--color-forms-button-primary-bg); } .neuron.has-toggle-switch .neuron_inputRow input[type=checkbox] + label::before { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /** * Container neuron styling * Provides grid layout and header functionality for container neurons */ :root { --minimum-neuron-width: 200px; } .neuron.has-container { container-type: inline-size; container-name: neuron-container; display: grid; gap: var(--spacing-400); min-height: auto; margin-bottom: var(--forms-spacing-form-groups); } .neuron.has-container .neuron_container-labelRow { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-200) var(--spacing-100) var(--spacing-200) var(--spacing-100); background-color: transparent; border: none; border-bottom: var(--forms-border-width-default) solid var(--color-forms-container-border); margin: 0 calc(var(--spacing-100) * -1) var(--spacing-300) calc(var(--spacing-100) * -1); } .neuron.has-container .neuron_container-labelRow .neuron_container-label { font-family: var(--font-family-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-500); color: var(--color-forms-container-header-text); } .neuron.has-container .neuron_container-labelRow .neuron_container-openCloseToggle { cursor: pointer; padding: var(--spacing-100); border-radius: var(--border-radius-100); transition: background-color 0.2s ease; } .neuron.has-container .neuron_container-labelRow .neuron_container-openCloseToggle:hover { background-color: var(--color-forms-container-header-hover-bg); } .neuron.has-container .neuron_container-labelRow .neuron_container-openCloseToggle .close-icon { display: block; color: var(--color-forms-container-header-icon); font-size: var(--icon-size-600); } .neuron.has-container .neuron_container-labelRow .neuron_container-openCloseToggle .open-icon { display: none; color: var(--color-forms-container-header-icon); font-size: var(--icon-size-600); } .has-container.has-containerOpenClose { padding: var(--spacing-200); border: var(--forms-border-width-default) solid var(--color-forms-container-border); border-radius: var(--forms-border-radius-default); background-color: var(--color-forms-container-bg); margin-bottom: var(--forms-spacing-form-groups); overflow: hidden; transition: all 0.2s ease-in-out; } .has-container.has-containerOpenClose .neuron_container-labelRow { margin-left: calc(var(--spacing-200) * -1); margin-right: calc(var(--spacing-200) * -1); } .has-container.has-containerOpenClose .container-content { transition: opacity 0.15s ease-in-out, transform 0.2s ease-in-out; transform-origin: top; } .has-container.has-containerOpenClose.containerOpen .neuron_container-openCloseToggle .close-icon { display: none; } .has-container.has-containerOpenClose.containerOpen .neuron_container-openCloseToggle .open-icon { display: block; } .has-container.has-containerOpenClose.containerOpen .container-content { opacity: 1; transform: scaleY(1); } .has-container.has-containerOpenClose:not(.containerOpen) .neuron:not(.neuron_container-labelRow) { display: none; } .has-container.has-containerOpenClose:not(.containerOpen) .container-content { opacity: 0; transform: scaleY(0); } .neuron.has-container.container-gridSingle { grid-template-columns: 1fr; } .neuron.has-container.container-gridSingle > .neuron { grid-column: 1; } .neuron.has-container.container-gridMultiple { grid-template-columns: repeat(auto-fit, minmax(var(--minimum-neuron-width), 1fr)); } .neuron.has-container.container-gridMultiple > .neuron { grid-column: span 1; } .neuron.has-container.container-gridMultiple > .neuron.full-width { grid-column: 1/-1; } .neuron.has-container.container-grid-2 { grid-template-columns: repeat(2, 1fr); } @container neuron-container (max-width: 450px) { .neuron.has-container.container-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 450px) { .neuron.has-container.container-grid-2 { grid-template-columns: 1fr; } } .neuron.has-container.container-grid-2 > .neuron { grid-column: span 1; } .neuron.has-container.container-grid-2 > .neuron.full-width { grid-column: 1/-1; } .neuron.has-container.container-grid-3 { grid-template-columns: repeat(3, 1fr); } @container neuron-container (max-width: 650px) { .neuron.has-container.container-grid-3 { grid-template-columns: repeat(2, 1fr); } } @container neuron-container (max-width: 450px) { .neuron.has-container.container-grid-3 { grid-template-columns: 1fr; } } @media (max-width: 650px) { .neuron.has-container.container-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 450px) { .neuron.has-container.container-grid-3 { grid-template-columns: 1fr; } } .neuron.has-container.container-grid-3 > .neuron { grid-column: span 1; } .neuron.has-container.container-grid-3 > .neuron.full-width { grid-column: 1/-1; } .neuron.has-container.container-grid-4 { grid-template-columns: repeat(4, 1fr); } @container neuron-container (max-width: 850px) { .neuron.has-container.container-grid-4 { grid-template-columns: repeat(3, 1fr); } } @container neuron-container (max-width: 650px) { .neuron.has-container.container-grid-4 { grid-template-columns: repeat(2, 1fr); } } @container neuron-container (max-width: 450px) { .neuron.has-container.container-grid-4 { grid-template-columns: 1fr; } } @media (max-width: 850px) { .neuron.has-container.container-grid-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 650px) { .neuron.has-container.container-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 450px) { .neuron.has-container.container-grid-4 { grid-template-columns: 1fr; } } .neuron.has-container.container-grid-4 > .neuron { grid-column: span 1; } .neuron.has-container.container-grid-4 > .neuron.full-width { grid-column: 1/-1; } .neuron.has-container.container-grid-5 { grid-template-columns: repeat(5, 1fr); } @container neuron-container (max-width: 1050px) { .neuron.has-container.container-grid-5 { grid-template-columns: repeat(4, 1fr); } } @container neuron-container (max-width: 850px) { .neuron.has-container.container-grid-5 { grid-template-columns: repeat(3, 1fr); } } @container neuron-container (max-width: 650px) { .neuron.has-container.container-grid-5 { grid-template-columns: repeat(2, 1fr); } } @container neuron-container (max-width: 450px) { .neuron.has-container.container-grid-5 { grid-template-columns: 1fr; } } @media (max-width: 1050px) { .neuron.has-container.container-grid-5 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 850px) { .neuron.has-container.container-grid-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 650px) { .neuron.has-container.container-grid-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 450px) { .neuron.has-container.container-grid-5 { grid-template-columns: 1fr; } } .neuron.has-container.container-grid-5 > .neuron { grid-column: span 1; } .neuron.has-container.container-grid-5 > .neuron.full-width { grid-column: 1/-1; } .neuron.has-container.container-grid-6 { grid-template-columns: repeat(6, 1fr); } @container neuron-container (max-width: 1250px) { .neuron.has-container.container-grid-6 { grid-template-columns: repeat(5, 1fr); } } @container neuron-container (max-width: 1050px) { .neuron.has-container.container-grid-6 { grid-template-columns: repeat(4, 1fr); } } @container neuron-container (max-width: 850px) { .neuron.has-container.container-grid-6 { grid-template-columns: repeat(3, 1fr); } } @container neuron-container (max-width: 650px) { .neuron.has-container.container-grid-6 { grid-template-columns: repeat(2, 1fr); } } @container neuron-container (max-width: 450px) { .neuron.has-container.container-grid-6 { grid-template-columns: 1fr; } } @media (max-width: 1250px) { .neuron.has-container.container-grid-6 { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1050px) { .neuron.has-container.container-grid-6 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 850px) { .neuron.has-container.container-grid-6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 650px) { .neuron.has-container.container-grid-6 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 450px) { .neuron.has-container.container-grid-6 { grid-template-columns: 1fr; } } .neuron.has-container.container-grid-6 > .neuron { grid-column: span 1; } .neuron.has-container.container-grid-6 > .neuron.full-width { grid-column: 1/-1; } .neuron.has-containerOpenClose .neuron:not(.neuron_container-labelRow) { transition: opacity 0.3s ease, transform 0.3s ease; } .neuron.has-containerOpenClose:not(.containerOpen) .neuron:not(.neuron_container-labelRow) { opacity: 0; transform: translateY(-10px); } .neuron.has-containerOpenClose.containerOpen .neuron:not(.neuron_container-labelRow) { opacity: 1; transform: translateY(0); } .neuron.has-container .neuron_container-openCloseToggle:focus { outline: 2px solid var(--color-forms-border-focused); outline-offset: 2px; } .neuron.has-container .neuron_container-openCloseToggle:focus-visible { outline: 2px solid var(--color-forms-border-focused); outline-offset: 2px; } .neuron.has-container.container-decision { position: relative; } .decision-placeholder { text-align: center; margin-top: 20px; } .decision-placeholder .decision-placeholder-line { height: 16px; background-color: var(--color-forms-placeholder-bg); border-radius: 8px; margin-bottom: 8px; animation: pulse 1.5s ease-in-out infinite; } .decision-placeholder .decision-placeholder-line:last-child { margin-bottom: 0; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .decision-flag { position: absolute; top: 0px; right: -10px; z-index: 10; cursor: pointer; width: 34px; height: 20px; /* .neuron.has-container.container-decision:hover & { .decision-flag-content { background: linear-gradient(90deg, #ffed4e 0%, #ffc947 100%); // Slightly brighter on hover box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15); } } */ } .decision-flag .decision-flag-content { position: absolute; right: 0; top: 0; background: linear-gradient(90deg, #ffd700 0%, #ffb347 100%); width: 26px; height: 20px; border-radius: 2px 2px 2px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); } .decision-flag .decision-flag-content::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #ffd700; filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.1)); } .decision-flag .decision-flag-content::after { content: ""; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; background: linear-gradient(90deg, #ffd700 0%, transparent 50%); border-radius: 1px 1px 1px 0; pointer-events: none; } @media (max-width: 768px) { .decision-flag { right: -12px; } .decision-flag .decision-flag-content { width: 14px; height: 18px; } .decision-flag .decision-flag-content::before { border-top-width: 7px; border-bottom-width: 7px; border-right-width: 6px; left: -6px; } } .helix-wrapped-dialog.dynamic-content-editor .sb-window { width: 700px !important; min-width: 700px !important; max-width: 700px !important; min-height: 400px; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: var(--color-forms-button-primary-text); padding: 16px 20px; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-header .sb-window-title { font-size: 16px; font-weight: 600; color: var(--color-forms-button-primary-text); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-header .sb-button.close { color: var(--color-forms-button-primary-text); opacity: 0.8; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-header .sb-button.close:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content { padding: 24px; background: var(--color-forms-dialog-content-bg); min-height: 300px; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container { background: var(--color-forms-surface-default); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron { margin-bottom: 20px; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron:last-child { margin-bottom: 0; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron .field-label { font-weight: 600; color: var(--color-forms-text-label); margin-bottom: 8px; display: block; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron .field-input { width: 100%; padding: 10px 12px; border: 2px solid var(--color-forms-border-default); border-radius: 6px; font-size: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron .field-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron .field-input[type=number] { text-align: right; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron .field-select { width: 100%; padding: 10px 12px; border: 2px solid var(--color-forms-border-default); border-radius: 6px; font-size: 14px; background: var(--color-forms-surface-default); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron .field-select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .synaptic-network-container .neuron .field-checkbox { margin-right: 8px; transform: scale(1.2); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .patterns-container { background: var(--color-forms-surface-default); border-radius: 8px; padding: 20px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .patterns-container .patterns-list { display: flex; flex-direction: column; gap: 8px; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .patterns-container .pattern-item { padding: 0; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .patterns-container .pattern-link { display: block; padding: 12px 16px; background: var(--color-forms-surface-hover); border: 2px solid var(--color-forms-border-default); border-radius: 6px; color: #667eea; text-decoration: none; font-weight: 500; transition: all 0.2s ease; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-content .patterns-container .pattern-link:hover { background: #667eea; border-color: #667eea; color: var(--color-forms-button-primary-text); transform: translateX(4px); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-footer { background: var(--color-forms-dialog-footer-bg); border-top: 1px solid var(--color-forms-dialog-footer-border); padding: 16px 24px; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-footer .atom_button { margin-left: 12px; padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 6px; transition: all 0.2s ease; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-footer .atom_button:first-child { margin-left: 0; } .helix-wrapped-dialog.dynamic-content-editor .sb-window-footer .atom_button:not(.mod_creative) { background: var(--color-forms-button-secondary-bg); border-color: var(--color-forms-button-secondary-bg); color: var(--color-forms-button-secondary-text); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-footer .atom_button:not(.mod_creative):hover { background: var(--color-forms-button-secondary-bg-hover); border-color: var(--color-forms-button-secondary-bg-hover); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-footer .atom_button.mod_creative { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-color: #667eea; color: var(--color-forms-button-primary-text); } .helix-wrapped-dialog.dynamic-content-editor .sb-window-footer .atom_button.mod_creative:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .save-success-message { position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: var(--color-forms-save-success-text); padding: 12px 20px; border-radius: 6px; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); z-index: 10001; font-size: 14px; font-weight: 500; animation: slideInRight 0.3s ease-out; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .neuron.has-container[class*=olNumbering_] { list-style: none; padding-left: 0; counter-reset: item; } .neuron.has-container[class*=olNumbering_] > .neuron { list-style: none; margin-left: 0; padding-left: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; } .neuron.has-container[class*=olNumbering_] > .neuron::before { font-weight: bold; text-align: right; min-width: 2em; } .neuron.has-container[class*=olNumbering_] > .neuron > * { grid-column: 2; } .neuron.has-container.olNumbering_decimal > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_decimal > .neuron::before { content: counter(item, decimal) "."; } .neuron.has-container.olNumbering_decimal-leading-zero > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_decimal-leading-zero > .neuron::before { content: counter(item, decimal-leading-zero) "."; } .neuron.has-container.olNumbering_lower-alpha > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_lower-alpha > .neuron::before { content: counter(item, lower-alpha) "."; } .neuron.has-container.olNumbering_upper-alpha > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_upper-alpha > .neuron::before { content: counter(item, upper-alpha) "."; } .neuron.has-container.olNumbering_lower-roman > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_lower-roman > .neuron::before { content: counter(item, lower-roman) "."; } .neuron.has-container.olNumbering_upper-roman > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_upper-roman > .neuron::before { content: counter(item, upper-roman) "."; } .neuron.has-container.olNumbering_lower-greek > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_lower-greek > .neuron::before { content: counter(item, lower-greek) "."; } .neuron.has-container.olNumbering_armenian > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_armenian > .neuron::before { content: counter(item, armenian) "."; } .neuron.has-container.olNumbering_georgian > .neuron { counter-increment: item; } .neuron.has-container.olNumbering_georgian > .neuron::before { content: counter(item, georgian) "."; } .neuron.has-container.olNumbering_hideIfSingle > .neuron:only-of-type { grid-template-columns: 1fr; } .neuron.has-container.olNumbering_hideIfSingle > .neuron:only-of-type::before { display: none; } /** * Tabs container styling * Provides tab navigation functionality for container neurons */ .neuron.has-tabs { display: flex; flex-direction: column; } .neuron.has-tabs .tabs_tabBar { display: flex; width: 100%; border-bottom: var(--forms-border-width-thick) solid var(--color-forms-border-default); background-color: var(--color-forms-container-header-bg); margin-bottom: 0; border-radius: var(--border-radius-100) var(--border-radius-100) 0 0; overflow-x: auto; } .neuron.has-tabs .tabs_tabBar .tabs_tab { padding: var(--spacing-200) var(--spacing-200); cursor: pointer; border: none; background-color: transparent; color: var(--color-forms-text-supporting); font-weight: var(--forms-label-font-weight); font-size: var(--forms-font-size-label); font-family: var(--forms-label-font-family); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: all 0.2s ease; border-bottom: var(--border-width-75) solid transparent; position: relative; flex-grow: 1; } .neuron.has-tabs .tabs_tabBar .tabs_tab:hover { background-color: var(--color-forms-surface-hover); color: var(--color-forms-text-input); } .neuron.has-tabs .tabs_tabBar .tabs_tab.tab_active { background-color: var(--color-forms-surface-default); color: var(--color-forms-button-primary-bg); border-bottom-color: var(--color-forms-button-primary-bg); font-weight: var(--font-weight-semibold); } .neuron.has-tabs .tabs_tabBar .tabs_tab.tab_active:hover { background-color: var(--color-forms-surface-default); color: var(--color-forms-button-primary-bg); } .neuron.has-tabs .tabs_tabBar .tabs_tab.tab_hidden { opacity: 0.5; pointer-events: none; color: var(--color-forms-text-disabled); } .neuron.has-tabs .tabs_tabBar .tabs_tab.tab_hidden:hover { background-color: transparent; color: var(--color-forms-text-disabled); } .neuron.has-tabs .tabs_tabBar .tabs_tab:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-border-focused); outline-offset: calc(var(--spacing-50) * -1); z-index: 1; } .neuron.has-tabs .tabs_tabBar .tabs_tab:focus-visible { outline: var(--forms-border-width-thick) solid var(--color-forms-border-focused); outline-offset: -2px; z-index: 1; } .neuron.has-tabs > .neuron.has-container { flex: 1; } .neuron.has-tabs > .neuron.has-container.hideForPage { display: none; } .neuron.has-tabs > .neuron.has-container:not(.hideForPage) { display: block; } .neuron.has-tabs.tabs-minimal .tabs_tabBar { background-color: transparent; border-bottom: var(--forms-border-width-default) solid var(--color-forms-border-default); } .neuron.has-tabs.tabs-minimal .tabs_tabBar .tabs_tab { border-radius: 0; } .neuron.has-tabs.tabs-minimal .tabs_tabBar .tabs_tab.tab_active { background-color: transparent; border-bottom-width: var(--forms-border-width-thick); } .neuron.has-tabs.tabs-pills .tabs_tabBar { background-color: transparent; border-bottom: none; gap: var(--spacing-100); padding: var(--spacing-100); } .neuron.has-tabs.tabs-pills .tabs_tabBar .tabs_tab { border-radius: var(--border-radius-full); border-bottom: none; } .neuron.has-tabs.tabs-pills .tabs_tabBar .tabs_tab.tab_active { background-color: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); border-bottom: none; } .neuron.has-tabs.tabs-pills .tabs_tabBar .tabs_tab.tab_active:hover { background-color: var(--color-forms-button-primary-bg-hover); color: var(--color-forms-button-primary-text); } .neuron.has-tabs.tabs-vertical { flex-direction: row; } .neuron.has-tabs.tabs-vertical .tabs_tabBar { flex-direction: column; width: 200px; min-width: 200px; border-bottom: none; border-right: 2px solid var(--color-forms-border-default); margin-bottom: 0; margin-right: 1rem; border-radius: 0.375rem 0 0 0.375rem; } .neuron.has-tabs.tabs-vertical .tabs_tabBar .tabs_tab { text-align: left; border-bottom: none; border-right: 3px solid transparent; } .neuron.has-tabs.tabs-vertical .tabs_tabBar .tabs_tab.tab_active { border-right-color: var(--color-forms-button-primary-bg); border-bottom: none; } .neuron.has-tabs.tabs-vertical > .neuron.has-container { flex: 1; } @media (max-width: 768px) { .neuron.has-tabs.tabs-vertical { flex-direction: column; } .neuron.has-tabs.tabs-vertical .tabs_tabBar { flex-direction: row; width: 100%; border-right: none; border-bottom: 2px solid var(--color-forms-border-default); margin-right: 0; margin-bottom: 1rem; } .neuron.has-tabs.tabs-vertical .tabs_tabBar .tabs_tab { border-right: none; border-bottom: 3px solid transparent; } .neuron.has-tabs.tabs-vertical .tabs_tabBar .tabs_tab.tab_active { border-right: none; border-bottom-color: var(--color-forms-button-primary-bg); } } .neuron.has-tabs > .neuron.has-container { transition: opacity 0.2s ease; } .neuron.has-tabs > .neuron.has-container.hideForPage { opacity: 0; } .neuron.has-tabs > .neuron.has-container:not(.hideForPage) { opacity: 1; } .neuron.has-tabs .tabs_tabBar .tabs_tab.tab_active::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--color-forms-button-primary-bg); border-radius: 1px; } .neuron.has-tabs.tabs-pills .tabs_tabBar .tabs_tab.tab_active::after { display: none; } .neuron.has-tabs.tabs-vertical .tabs_tabBar .tabs_tab.tab_active::after { bottom: auto; top: 0; right: -2px; left: auto; width: 2px; height: 100%; } /** * Progress Tabs styling * Extends standard tabs with navigation buttons, error badges, and timeline styling */ .neuron.has-progress-tabs { display: flex; flex-direction: column; } .neuron.has-progress-tabs .tabs_tabBar { order: 1; flex-shrink: 0; } .neuron.has-progress-tabs .tabs_errorNotice { order: 2; flex-shrink: 0; } .neuron.has-progress-tabs > .neuron.has-container { order: 3; flex: 1; overflow-y: auto; overflow-x: hidden; } .neuron.has-progress-tabs .tabs_buttonArea { order: 4; display: flex; justify-content: space-between; gap: var(--spacing-200); padding: var(--spacing-200); border-top: var(--forms-border-width-default) solid var(--color-forms-border-default); background-color: var(--color-forms-container-header-bg); flex-shrink: 0; } .neuron.has-progress-tabs .tabs_buttonArea .tabs_navButton { padding: var(--spacing-150) var(--spacing-300); border: var(--forms-border-width-default) solid var(--color-forms-button-primary-bg); border-radius: var(--border-radius-100); background-color: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); font-size: var(--forms-font-size-input); font-weight: var(--font-weight-medium); cursor: pointer; transition: all 0.2s ease; min-width: 100px; } .neuron.has-progress-tabs .tabs_buttonArea .tabs_navButton:hover:not(:disabled) { background-color: var(--color-forms-button-primary-bg-hover); border-color: var(--color-forms-button-primary-bg-hover); } .neuron.has-progress-tabs .tabs_buttonArea .tabs_navButton:active:not(:disabled) { background-color: var(--color-forms-button-primary-bg-active); } .neuron.has-progress-tabs .tabs_buttonArea .tabs_navButton:disabled, .neuron.has-progress-tabs .tabs_buttonArea .tabs_navButton.disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--color-forms-surface-disabled); color: var(--color-forms-text-disabled); } .neuron.has-progress-tabs .tabs_errorNotice { display: none; align-items: center; gap: var(--spacing-200); padding: var(--spacing-200) var(--spacing-300); background-color: var(--color-alias-error-50) !important; border: var(--forms-border-width-default) solid var(--color-alias-error-500) !important; border-left-width: var(--border-width-300) !important; border-left-color: var(--color-alias-error-600) !important; color: var(--color-alias-error-800) !important; margin: 0; } .neuron.has-progress-tabs .tabs_errorNotice.show { display: flex; } .neuron.has-progress-tabs .tabs_errorNotice .errorNotice_icon { font-size: var(--font-size-500) !important; color: var(--color-alias-error-600) !important; flex-shrink: 0; } .neuron.has-progress-tabs .tabs_errorNotice .errorNotice_message { flex: 1; font-size: var(--forms-font-size-input) !important; font-weight: var(--font-weight-semibold) !important; color: var(--color-alias-error-800) !important; } .neuron.has-progress-tabs .tabs_errorNotice .errorNotice_nextButton { padding: var(--spacing-100) var(--spacing-200); border: var(--forms-border-width-default) solid var(--color-alias-error-600) !important; border-radius: var(--border-radius-100); background-color: var(--color-alias-error-500) !important; color: var(--color-alias-foundation-white) !important; font-size: var(--forms-font-size-supporting) !important; font-weight: var(--font-weight-medium) !important; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .neuron.has-progress-tabs .tabs_errorNotice .errorNotice_nextButton:hover { background-color: var(--color-alias-error-600) !important; border-color: var(--color-alias-error-700) !important; } .neuron.has-progress-tabs .tabs_errorNotice .errorNotice_closeButton { padding: var(--spacing-50) var(--spacing-150); border: none; background: transparent !important; color: var(--color-alias-error-600) !important; font-size: var(--font-size-600) !important; font-weight: var(--font-weight-bold) !important; cursor: pointer; line-height: 1; transition: all 0.2s ease; } .neuron.has-progress-tabs .tabs_errorNotice .errorNotice_closeButton:hover { color: var(--color-alias-error-800) !important; background-color: var(--color-alias-error-100) !important; border-radius: var(--border-radius-50); } .neuron.has-progress-tabs .tabs_tabBar .tabs_tab { position: relative; } .neuron.has-progress-tabs .tabs_tabBar .tabs_tab .tab_errorBadge { position: absolute; top: var(--spacing-50); right: var(--spacing-50); min-width: 20px; height: 20px; padding: 0 var(--spacing-75); border-radius: var(--border-radius-full); background-color: var(--color-alias-error-500); color: var(--color-alias-foundation-white); font-size: var(--font-size-75); font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; line-height: 1; } .neuron.has-progress-tabs .neuron.error-highlighted { animation: errorPulse 0.5s ease-in-out 2; } @keyframes errorPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--color-alias-error-500); } 50% { box-shadow: 0 0 0 4px var(--color-alias-error-200); } } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar { background-color: transparent; border-bottom: none; padding: var(--spacing-300) var(--spacing-400); position: relative; min-height: 60px; } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar::before { content: ""; position: absolute; top: calc(var(--spacing-300) + 6px); left: var(--spacing-400); right: var(--spacing-400); height: 2px; background-color: var(--color-alias-neutral-300); z-index: 0; } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--spacing-150); padding: 0 var(--spacing-100); background: transparent; border: none; flex: 1; min-height: 50px; color: var(--color-forms-text-supporting); font-size: var(--forms-font-size-supporting); font-weight: var(--font-weight-normal); text-align: center; line-height: 1.3; word-wrap: break-word; max-width: 100%; } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab::before { content: ""; width: 12px; height: 12px; border-radius: var(--border-radius-full); background-color: var(--color-alias-neutral-300); border: none; transition: all 0.2s ease; flex-shrink: 0; } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab::after { display: none; } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab:hover::before { transform: scale(1.2); } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab.tab_active { color: var(--color-forms-button-primary-bg); font-weight: var(--font-weight-bold); } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab.tab_active::before { background-color: var(--color-forms-button-primary-bg); transform: scale(1.3); } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab.tab_completed { color: var(--color-alias-neutral-900); } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab.tab_completed::before { background-color: var(--color-alias-neutral-900); } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab.tab_hasErrors .tab_errorBadge { top: -8px; right: auto; left: 50%; transform: translateX(-50%); } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab.tab_hasErrors::before { background-color: var(--color-alias-error-500); } @media (max-width: 768px) { .neuron.has-progress-tabs .tabs_buttonArea { padding: var(--spacing-150); } .neuron.has-progress-tabs .tabs_buttonArea .tabs_navButton { min-width: 80px; padding: var(--spacing-100) var(--spacing-200); font-size: var(--forms-font-size-supporting); } .neuron.has-progress-tabs .tabs_errorNotice { flex-wrap: wrap; } .neuron.has-progress-tabs .tabs_errorNotice .errorNotice_message { flex-basis: 100%; } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab { font-size: var(--font-size-75); } .neuron.has-progress-tabs.tabs-timeline .tabs_tabBar .tabs_tab::before { width: 24px; height: 24px; } } /** * Select field styling * Custom select implementation with flyout and filtering */ .neuron.has-select { position: relative; } .neuron.has-select .neuron_inputRow { position: relative; display: flex; align-items: center; border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); background-color: var(--color-forms-surface-default); transition: all 0.2s ease; } .neuron.has-select .neuron_inputRow:hover { border-color: var(--color-forms-border-hover); background-color: var(--color-forms-surface-hover); } .neuron.has-select .neuron_inputRow .neuron_input.select-display { flex: 1; padding: var(--forms-padding-input-vertical) var(--forms-padding-input-horizontal); border: none; border-radius: 0; background-color: transparent; color: var(--color-forms-text-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); font-size: var(--forms-font-size-input); transition: all 0.2s ease; min-height: var(--forms-input-height-small); display: flex; align-items: center; position: relative; box-sizing: border-box; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .neuron.has-select .neuron_inputRow .neuron_input.select-display.placeholder { color: var(--color-forms-text-placeholder); font-family: var(--forms-placeholder-font-family); font-weight: var(--forms-placeholder-font-weight); font-style: italic; } .neuron.has-select .neuron_inputRow .neuron_input.select-display:focus { outline: none; } .neuron.has-select .neuron_inputRow .suffixIcon { background-color: transparent; border: none; border-radius: 0; padding: var(--forms-padding-input-vertical) var(--forms-padding-input-vertical) var(--forms-padding-input-vertical) 0; cursor: pointer; transition: all 0.2s ease; color: var(--color-forms-text-input); display: flex; align-items: center; } .neuron.has-select .neuron_inputRow .select-flyout { position: fixed; z-index: 10000; background-color: var(--color-forms-surface-default); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); box-shadow: 0 var(--spacing-200) var(--spacing-400) rgba(0, 0, 0, 0.15); max-height: calc(var(--forms-input-height-small) * 6); overflow: visible; display: none; flex-direction: column; } .neuron.has-select .neuron_inputRow .select-flyout .select-filter { width: 100%; padding: var(--forms-padding-input-vertical) var(--forms-padding-input-horizontal); border: none; border-bottom: var(--forms-border-width-default) solid var(--color-forms-border-default); background-color: var(--color-forms-surface-read-only); color: var(--color-forms-text-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); font-size: var(--forms-font-size-input); box-sizing: border-box; flex-shrink: 0; } .neuron.has-select .neuron_inputRow .select-flyout .select-filter:focus { outline: none; background-color: var(--color-forms-surface-focus); border-bottom-color: var(--color-forms-border-focused); } .neuron.has-select .neuron_inputRow .select-flyout .select-filter::placeholder { color: var(--color-forms-text-placeholder); font-family: var(--forms-placeholder-font-family); font-weight: var(--forms-placeholder-font-weight); font-style: italic; } .neuron.has-select .neuron_inputRow .select-flyout .select-options { max-height: calc(var(--forms-input-height-small) * 5); overflow-y: auto; background-color: var(--color-forms-surface-default); flex-shrink: 1; min-height: 0; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option { padding: var(--forms-padding-input-vertical) var(--forms-padding-input-horizontal) var(--forms-padding-input-vertical) calc(var(--forms-padding-input-horizontal) * 2.5); cursor: pointer; transition: all 0.2s ease; background-color: var(--color-forms-surface-default); color: var(--color-forms-text-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); font-size: var(--forms-font-size-input); border: none; position: relative; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option:last-child { border-bottom: none; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option::before { content: "\f00c"; font-family: "FontAwesome"; position: absolute; left: var(--forms-padding-input-horizontal); top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.2s ease; color: var(--color-forms-select-option-selected-text); font-size: var(--forms-icon-size-small); } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option:hover { background-color: var(--color-forms-surface-hover); } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option:focus { outline: none; background-color: var(--color-forms-surface-focus); } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option.selected { background-color: var(--color-forms-select-option-selected-bg); color: var(--color-forms-select-option-selected-text); } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option.selected::before { opacity: 1; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option.selected:hover { background-color: var(--color-forms-select-option-selected-hover-bg); } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option.disabled_option { opacity: 0.4; color: var(--color-forms-text-disabled); cursor: not-allowed; pointer-events: none; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option.disabled_option:hover { background-color: transparent; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option.disabled_option:focus { background-color: transparent; color: var(--color-forms-text-disabled); } .neuron.has-select.flyoutOpen { z-index: 10000; } .neuron.has-select.flyoutOpen .neuron_inputRow { border-color: var(--color-forms-border-focused); background-color: var(--color-forms-surface-focus); } .neuron.has-select.flyoutOpen .neuron_inputRow .select-flyout { display: flex; } .neuron.has-select.flyoutOpen .neuron_inputRow .suffixIcon i { transform: rotate(180deg); } @media print { .neuron.has-select .neuron_inputRow .neuron_input.select-display { background-color: #fff !important; color: #000 !important; } .neuron.has-select .neuron_inputRow .select-flyout { display: none !important; } } @media (prefers-contrast: high) { .neuron.has-select .neuron_inputRow .neuron_input.select-display { border-width: var(--forms-border-width-thick); } .neuron.has-select .neuron_inputRow .neuron_input.select-display:focus { border-color: #000; box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5); } .neuron.has-select .neuron_inputRow .select-flyout { border-width: 2px; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option.selected { background-color: #000; color: #fff; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option:focus { background-color: #000; color: #fff; } } @media (prefers-reduced-motion: reduce) { .neuron.has-select .neuron_inputRow .neuron_input.select-display { transition: none; } .neuron.has-select .neuron_inputRow .select-flyout .select-options .select-option { transition: none; } .neuron.has-select.flyoutOpen .suffixIcon i { transition: none; } .neuron.has-select.flyoutOpen .select-flyout { display: flex; } } .synapse-select-flyout { position: fixed; z-index: 10000; background-color: var(--color-forms-surface-default); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); box-shadow: 0 var(--spacing-200) var(--spacing-400) rgba(0, 0, 0, 0.15); max-height: calc(var(--forms-input-height-small) * 6); overflow: visible; display: none; font-family: var(--forms-input-font-family); font-size: var(--forms-font-size-input); display: flex; flex-direction: column; } .synapse-select-flyout .select-filter { width: 100%; padding: var(--forms-padding-input-vertical) var(--forms-padding-input-horizontal); border: none; border-bottom: var(--forms-border-width-default) solid var(--color-forms-border-default); background-color: var(--color-forms-surface-read-only); color: var(--color-forms-text-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); font-size: var(--forms-font-size-input); box-sizing: border-box; flex-shrink: 0; } .synapse-select-flyout .select-filter:focus { outline: none; background-color: var(--color-forms-surface-focus); border-bottom-color: var(--color-forms-border-focused); } .synapse-select-flyout .select-filter::placeholder { color: var(--color-forms-text-placeholder); font-family: var(--forms-placeholder-font-family); font-weight: var(--forms-placeholder-font-weight); font-style: italic; } .synapse-select-flyout .select-options { max-height: calc(var(--forms-input-height-small) * 5); overflow-y: auto; background-color: var(--color-forms-surface-default); flex-shrink: 1; min-height: 0; } .synapse-select-flyout .select-options .select-option { padding: var(--forms-padding-input-vertical) var(--forms-padding-input-horizontal) var(--forms-padding-input-vertical) calc(var(--forms-padding-input-horizontal) * 2.5); cursor: pointer; transition: all 0.2s ease; background-color: var(--color-forms-surface-default); color: var(--color-forms-text-input); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); font-size: var(--forms-font-size-input); border: none; position: relative; } .synapse-select-flyout .select-options .select-option:last-child { border-bottom: none; } .synapse-select-flyout .select-options .select-option::before { content: "\f00c"; font-family: "FontAwesome"; position: absolute; left: var(--forms-padding-input-horizontal); top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.2s ease; color: var(--color-forms-select-option-selected-text); font-size: var(--forms-icon-size-small); } .synapse-select-flyout .select-options .select-option:hover { background-color: var(--color-forms-surface-hover); } .synapse-select-flyout .select-options .select-option:focus { outline: none; background-color: var(--color-forms-surface-focus); } .synapse-select-flyout .select-options .select-option.selected { background-color: var(--color-forms-select-option-selected-bg); color: var(--color-forms-select-option-selected-text); } .synapse-select-flyout .select-options .select-option.selected::before { opacity: 1; } .synapse-select-flyout .select-options .select-option.selected:hover { background-color: var(--color-forms-select-option-selected-hover-bg); } .synapse-select-flyout .select-options .select-option.disabled_option { opacity: 0.4; color: var(--color-forms-text-disabled); cursor: not-allowed; pointer-events: none; } .synapse-select-flyout .select-options .select-option.disabled_option:hover { background-color: transparent; } .synapse-select-flyout .select-options .select-option.disabled_option:focus { background-color: transparent; color: var(--color-forms-text-disabled); } .synapse-select-flyout .checkbox-action-links { padding: var(--spacing-200) var(--forms-padding-input-horizontal); border-bottom: var(--forms-border-width-default) solid var(--color-forms-border-default); background-color: var(--color-forms-surface-read-only); display: flex; gap: var(--spacing-400); justify-content: flex-start; } .synapse-select-flyout .checkbox-action-links a { color: var(--color-forms-border-focused); text-decoration: none; font-size: var(--forms-font-size-label); font-family: var(--forms-label-font-family); font-weight: var(--forms-label-font-weight); cursor: pointer; transition: color 0.2s ease; } .synapse-select-flyout .checkbox-action-links a:hover { color: var(--color-forms-border-hover); text-decoration: underline; } .synapse-select-flyout .checkbox-action-links a:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-border-focused); outline-offset: var(--spacing-50); border-radius: var(--border-radius-100); } .hide-disabled-options .select-option.disabled-by-dependency, .hide-disabled-options .checkbox-option.disabled-by-dependency { display: none !important; } /** * Checkbox List field styling * Provides checkbox-style selection for multiple options */ .neuron.has-checkboxlist .neuron_inputRow .neuron_input.select-display { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .neuron.has-checkboxlist .neuron_inputRow .neuron_input.select-display:not(.placeholder) { color: var(--color-forms-text-input); } .neuron.has-checkboxlist .select-flyout .select-options .checkbox-option::before { content: "\e9c7"; font-family: "synapse-icons"; opacity: 1; color: var(--color-forms-text-input); } .neuron.has-checkboxlist .select-flyout .select-options .checkbox-option.selected { background-color: var(--color-forms-checkbox-option-selected-bg); color: var(--color-forms-checkbox-option-selected-text); } .neuron.has-checkboxlist .select-flyout .select-options .checkbox-option.selected::before { content: "\e9c8"; color: var(--color-forms-checkbox-option-selected-text); } .neuron.has-checkboxlist .select-flyout .select-options .checkbox-option.selected:hover { background-color: var(--color-forms-checkbox-option-selected-hover-bg); } .neuron.has-checkboxlist .select-flyout .select-options .checkbox-option:hover { background-color: var(--color-forms-checkbox-option-hover-bg); } .neuron.has-checkboxlist .select-flyout .select-options .checkbox-option:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-checkbox-focus-outline); outline-offset: calc(var(--forms-border-width-thick) * -1); } .neuron.has-checkboxlist .checkbox-action-links { padding: var(--spacing-200) var(--forms-padding-input-horizontal); border-bottom: var(--forms-border-width-default) solid var(--color-forms-border-default); background-color: var(--color-forms-surface-read-only); display: flex; gap: var(--spacing-400); justify-content: flex-start; } .neuron.has-checkboxlist .checkbox-action-links a { color: var(--color-forms-link); text-decoration: none; font-size: var(--forms-font-size-label); font-family: var(--forms-label-font-family); font-weight: var(--forms-label-font-weight); cursor: pointer; transition: color 0.2s ease; } .neuron.has-checkboxlist .checkbox-action-links a:hover { color: var(--color-forms-link-hover); text-decoration: underline; } .neuron.has-checkboxlist .checkbox-action-links a:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-link-focus-outline); outline-offset: var(--spacing-50); border-radius: var(--spacing-50); } /** * Pattern Reference field styling * Provides styling for pattern reference picker fields */ .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input { padding: 0.75rem 2.5rem 0.75rem 1rem; border: 1px solid var(--color-forms-border-default); border-radius: 0.375rem; background-color: var(--color-forms-surface-default); color: var(--color-forms-text-input); cursor: pointer; transition: all 0.2s ease; min-height: 2.5rem; display: flex; align-items: center; position: relative; } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input::after { content: ""; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; background-image: url('/site/core/packages/synapse/1.x/css/data:image/svg+xml;charset=utf-8,'); background-size: contain; background-repeat: no-repeat; background-position: center; } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input:hover { border-color: var(--color-forms-border-hover); background-color: var(--color-forms-surface-hover); } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input:hover::after { background-image: url('/site/core/packages/synapse/1.x/css/data:image/svg+xml;charset=utf-8,'); } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input:focus { outline: none; border-color: var(--color-forms-border-focused); background-color: var(--color-forms-surface-focus); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input:focus::after { background-image: url('/site/core/packages/synapse/1.x/css/data:image/svg+xml;charset=utf-8,'); } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input:empty::before, .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input.placeholder { color: var(--color-forms-text-default); font-style: italic; } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input.loading { color: var(--color-forms-text-default); } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input.loading::before { content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; border: 2px solid var(--color-forms-surface-disabled); border-top: 2px solid var(--color-forms-border-focused); border-radius: 50%; animation: pattern-reference-spin 1s linear infinite; } .reference-picker-container { display: flex; flex-direction: column; height: 100%; gap: 1rem; } .reference-picker-container .search-container .search-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-forms-border-default); border-radius: 0.375rem; font-size: 1rem; background-color: var(--color-forms-surface-default); color: var(--color-forms-text-input); } .reference-picker-container .search-container .search-input:hover { border-color: var(--color-forms-border-hover); background-color: var(--color-forms-surface-hover); } .reference-picker-container .search-container .search-input:focus { outline: none; border-color: var(--color-forms-border-focused); background-color: var(--color-forms-surface-focus); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } .reference-picker-container .search-container .search-input::placeholder { color: var(--color-forms-text-default); } .reference-picker-container .available-container { flex: 1; display: flex; flex-direction: column; min-height: 0; } .reference-picker-container .available-container h4 { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; color: var(--color-forms-text-section); } .reference-picker-container .available-container .available-list { flex: 1; overflow-y: auto; border: 1px solid var(--color-forms-border-default); border-radius: 0.375rem; max-height: 200px; background-color: var(--color-forms-surface-default); } .reference-picker-container .available-container .available-list .reference-item { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-forms-border-default); cursor: pointer; transition: all 0.2s ease; color: var(--color-forms-text-input); } .reference-picker-container .available-container .available-list .reference-item:last-child { border-bottom: none; } .reference-picker-container .available-container .available-list .reference-item:hover { background-color: var(--color-forms-surface-hover); } .reference-picker-container .available-container .available-list .reference-item.selected { background-color: var(--color-forms-border-focused); color: var(--color-forms-surface-default); } .reference-picker-container .available-container .available-list .reference-item.selected:hover { background-color: var(--color-forms-border-hover); } .reference-picker-container .available-container .available-list .reference-item .item-name { font-weight: 500; } .reference-picker-container .selected-container h4 { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; color: var(--color-forms-text-section); } .reference-picker-container .selected-container .selected-display { min-height: 3rem; padding: 0.75rem 1rem; border: 1px solid var(--color-forms-border-default); border-radius: 0.375rem; background-color: var(--color-forms-surface-read-only); } .reference-picker-container .selected-container .selected-display .selected-item { padding: 0.25rem 0.5rem; margin: 0.25rem 0; background-color: var(--color-forms-border-focused); color: var(--color-forms-surface-default); border-radius: 0.25rem; font-size: 0.875rem; display: inline-block; margin-right: 0.5rem; } .reference-picker-container .selected-container .selected-display:empty::after { content: "No items selected"; color: var(--color-forms-text-default); font-style: italic; } @keyframes pattern-reference-spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } @media (max-width: 768px) { .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input { padding: 0.625rem 2.25rem 0.625rem 0.875rem; min-height: 2.25rem; } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input::after { right: 0.875rem; width: 0.875rem; height: 0.875rem; } .reference-picker-container .available-container .available-list { max-height: 150px; } } @media print { .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input { border: 1px solid #000; background-color: #fff !important; color: #000 !important; } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input::after { display: none; } } @media (prefers-contrast: high) { .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input { border-width: 2px; } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input:focus { border-color: #000; box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5); } .reference-picker-container .available-container .available-list .reference-item.selected { background-color: #000; color: #fff; } } @media (prefers-reduced-motion: reduce) { .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input { transition: none; } .neuron.has-field.has-patternreference .neuron_field-inputRow .neuron_field-input .pattern-reference-input.loading::before { animation: none; } .reference-picker-container .available-container .available-list .reference-item { transition: none; } } .sb-theme-pattern-edit .sb-window-content { padding: 0; display: flex; flex-direction: column; } .sb-theme-pattern-edit .pattern-edit-dialog-content { height: 100%; display: flex; flex-direction: column; flex-grow: 1; } .sb-theme-pattern-edit .pattern-edit-dialog-content .has-layout { height: 100px; display: flex; flex-direction: column; flex-grow: 1; } .sb-theme-pattern-edit .pattern-edit-dialog-content .has-layout:not(:has(.neuron-Container-Tabs)) { padding-left: 20px; padding-right: 20px; overflow: auto; } .sb-theme-pattern-edit .pattern-edit-dialog-content .has-layout .neuron-Container-Tabs { display: flex; flex-direction: column; flex-grow: 1; } .sb-theme-pattern-edit .pattern-edit-dialog-content .has-layout .neuron-Container-Tabs .tabs_tabBar { height: 40px; flex-shrink: 0; flex-grow: 0; } .sb-theme-pattern-edit .pattern-edit-dialog-content .has-layout .neuron-Container-Tabs > .neuron-Container { height: 100px; flex-grow: 1; flex-shrink: 1; overflow: auto; padding-left: 10px; padding-right: 10px; } /** * Item Reference field styling * Provides styling for item reference picker fields and lists */ .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input { padding: 0.75rem 2.5rem 0.75rem 1rem; border: 1px solid var(--color-forms-border-default); border-radius: 0.375rem; background-color: var(--color-forms-surface-default); color: var(--color-forms-text-input); cursor: pointer; transition: all 0.2s ease; min-height: 2.5rem; display: flex; align-items: center; position: relative; } .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input:hover { border-color: var(--color-forms-border-hover); background-color: var(--color-forms-surface-hover); } .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input:focus { outline: none; border-color: var(--color-forms-border-focused); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input.loading { color: var(--color-forms-text-supporting); font-style: italic; } .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input.placeholder { color: var(--color-forms-text-placeholder); } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select { padding: 0.5rem; min-height: 3rem; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-height: 1.5rem; display: flex; flex-direction: row; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item inline-item, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item inline-item, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item inline-item, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item inline-item, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item inline-item, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item inline-item { display: flex; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .placeholder-text, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .placeholder-text, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .placeholder-text, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .placeholder-text, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .placeholder-text, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .placeholder-text { color: var(--color-forms-text-placeholder); font-style: italic; padding: 0.25rem 0; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item { display: inline-flex; align-items: center; background-color: var(--color-forms-chip-bg); border: 1px solid var(--color-forms-chip-border); border-radius: 1rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.25; color: var(--color-forms-chip-text); gap: 0.375rem; transition: all 0.2s ease; flex-shrink: 0; max-width: 100%; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item.inline-item, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item.inline-item, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item.inline-item, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item.inline-item, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item.inline-item, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item.inline-item { margin: 0; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item:hover, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item:hover, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item:hover, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item:hover, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item:hover, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item:hover { background-color: var(--color-forms-chip-bg-hover); border-color: var(--color-forms-chip-border-hover); } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .item-label, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .item-label, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .item-label, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .item-label, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .item-label, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .item-label { font-weight: 500; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon { cursor: pointer; color: var(--color-forms-text-supporting); font-size: 0.75rem; transition: color 0.2s ease; flex-shrink: 0; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon:hover, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon:hover, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon:hover, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon:hover, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon:hover, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon:hover { color: var(--color-forms-button-danger-bg); } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon:active, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon:active, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon:active, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon:active, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon:active, .neuron-Field-PatternReference-List .neuron_inputRow .neuron_input.pattern-reference-list-input.multi-select .selected-items-container .selected-item .remove-item-icon:active { color: var(--color-forms-button-danger-bg-hover); } .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input:focus-within, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input:focus-within, .neuron.has-itemreferencelist .neuron_inputRow .neuron_input.item-reference-input:focus-within { border-color: var(--color-forms-border-focused); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .neuron.has-itemreference.has-errors .neuron_inputRow .neuron_input.item-reference-input, .neuron.has-itemreference-list.has-errors .neuron_inputRow .neuron_input.item-reference-input, .neuron.has-itemreferencelist.has-errors .neuron_inputRow .neuron_input.item-reference-input { border-color: var(--color-forms-border-error); } .neuron.has-itemreference.has-errors .neuron_inputRow .neuron_input.item-reference-input:focus, .neuron.has-itemreference-list.has-errors .neuron_inputRow .neuron_input.item-reference-input:focus, .neuron.has-itemreferencelist.has-errors .neuron_inputRow .neuron_input.item-reference-input:focus { border-color: var(--color-forms-border-error); box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .neuron.has-itemreference.disabled .neuron_inputRow .neuron_input.item-reference-input, .neuron.has-itemreference-list.disabled .neuron_inputRow .neuron_input.item-reference-input, .neuron.has-itemreferencelist.disabled .neuron_inputRow .neuron_input.item-reference-input { background-color: var(--color-forms-surface-disabled); color: var(--color-forms-text-disabled); cursor: not-allowed; opacity: 0.65; } .neuron.has-itemreference.disabled .neuron_inputRow .neuron_input.item-reference-input:hover, .neuron.has-itemreference-list.disabled .neuron_inputRow .neuron_input.item-reference-input:hover, .neuron.has-itemreferencelist.disabled .neuron_inputRow .neuron_input.item-reference-input:hover { border-color: var(--color-forms-border-default); background-color: var(--color-forms-surface-disabled); } .neuron.has-itemreference.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item, .neuron.has-itemreference-list.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item, .neuron.has-itemreferencelist.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item { background-color: var(--color-forms-chip-bg-disabled); color: var(--color-forms-text-disabled); } .neuron.has-itemreference.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item .remove-item-icon, .neuron.has-itemreference-list.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item .remove-item-icon, .neuron.has-itemreferencelist.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item .remove-item-icon { cursor: not-allowed; color: var(--color-forms-text-disabled); } .neuron.has-itemreference.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item .remove-item-icon:hover, .neuron.has-itemreference-list.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item .remove-item-icon:hover, .neuron.has-itemreferencelist.disabled .neuron_inputRow .neuron_input.item-reference-input .selected-item .remove-item-icon:hover { color: var(--color-forms-text-disabled); } @media (max-width: 768px) { .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container.horizontal-layout { gap: 0.375rem; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item { font-size: 0.8125rem; padding: 0.1875rem 0.375rem; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .item-label { max-width: 150px; } .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input.multi-select .selected-items-container .selected-item .remove-item-icon { font-size: 0.6875rem; } } @media (prefers-contrast: high) { .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input { border-width: 2px; } .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input:focus, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input:focus { border-color: var(--color-forms-border-focused); box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5); } .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input .selected-item, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input .selected-item { border-width: 2px; } .neuron.has-itemreference .neuron_inputRow .neuron_input.item-reference-input .selected-item .remove-item-icon:hover, .neuron.has-itemreference-list .neuron_inputRow .neuron_input.item-reference-input .selected-item .remove-item-icon:hover { color: var(--color-forms-button-danger-bg); } } /** * Embedded Layout field styling * Provides styling for embedded layout fields that load other layouts on demand */ .neuron.has-embeddedlayout .neuron_inputRow { border: none; border-radius: 0; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input { padding: 0; font-size: 1rem; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container { border: 1px solid var(--color-forms-embedded-border); border-radius: 0.375rem; background-color: inherit; min-height: 3rem; padding: 1rem; position: relative; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-loading { display: flex; align-items: center; justify-content: center; padding: 2rem; color: var(--color-forms-embedded-loading-text); font-style: italic; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-loading i { margin-right: 0.5rem; font-size: 1.1rem; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-loading.error { color: var(--color-forms-embedded-error-text); background-color: var(--color-forms-embedded-error-bg); border: 1px solid var(--color-forms-embedded-error-border); border-radius: 0.25rem; padding: 0.75rem 1rem; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-loading.error i { color: var(--color-forms-embedded-error-icon); } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-content { width: 100%; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-content .synapse { border: none; padding: 0; margin: 0; background: transparent; color: inherit; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-content .synapse.neuron { min-height: auto; background: inherit; color: inherit; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-content .neuron:last-child { margin-bottom: 0; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-content .has-container:hover { background-color: transparent; border-color: var(--color-forms-container-border); } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container:hover { border-color: var(--color-forms-embedded-border-hover); } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container:focus-within { border-color: var(--color-forms-embedded-border-focus); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .neuron.has-embeddedlayout.has-errors .neuron_inputRow .neuron_input.embedded-layout-container { border-color: var(--color-forms-border-error); } .neuron.has-embeddedlayout.has-errors .neuron_inputRow .neuron_input.embedded-layout-container:focus-within { border-color: var(--color-forms-border-error); box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .neuron.has-embeddedlayout.disabled .neuron_inputRow .neuron_input.embedded-layout-container { opacity: 0.6; cursor: not-allowed; } .neuron.has-embeddedlayout.disabled .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-content { pointer-events: none; } @media (max-width: 768px) { .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container { padding: 0.75rem; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-loading { padding: 1.5rem; font-size: 0.9rem; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-content .neuron { margin-bottom: 0.75rem; } } @media (prefers-contrast: high) { .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container { border-width: 2px; } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container:focus-within { border-color: var(--color-forms-border-default); box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5); } .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container .embedded-layout-loading.error { border-width: 2px; } } @keyframes embedded-layout-pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .embedded-layout-loading { animation: embedded-layout-pulse 2s ease-in-out infinite; } .embedded-layout-loading.error { animation: none; } .neuron.has-embeddedlayout .embedded-layout-content .neuron.has-field { margin-bottom: 1rem; } .neuron.has-embeddedlayout .embedded-layout-content .neuron.has-field:last-child { margin-bottom: 0; } .neuron.has-embeddedlayout .embedded-layout-content .neuron.has-container { margin-bottom: 1.5rem; } .neuron.has-embeddedlayout .embedded-layout-content .neuron.has-container:last-child { margin-bottom: 0; } .neuron.has-embeddedlayout .embedded-layout-content .neuron.has-tabs { margin-bottom: 1rem; } .neuron.has-embeddedlayout .embedded-layout-content .neuron.has-tabs .tab-content { padding-top: 1rem; } .neuron.has-embeddedlayout .embedded-layout-content .neuron.has-repeat .repeat-instance { margin-bottom: 1rem; padding: 0.75rem; border: 1px solid currentColor; border-opacity: 0.2; border-radius: 0.25rem; background-color: transparent; } /** * Rating Field Styles * * Styles for the Field.Rating neuron component * * @author Chuck Neal * @copyright 2025 Binary Evolution */ .has-rating .rating-input { display: flex; align-items: center; gap: var(--spacing-100); } .has-rating .rating-input .rating-star { position: relative; cursor: pointer; font-size: var(--icon-size-500); line-height: 1; transition: transform 0.2s ease; } .has-rating .rating-input .rating-star .rating-star-off { display: block; color: var(--color-forms-text-disabled); transition: color 0.2s ease; } .has-rating .rating-input .rating-star .rating-star-on { display: none; color: var(--color-forms-button-warning-bg); transition: color 0.2s ease; } .has-rating .rating-input .rating-star.active .rating-star-off { display: none; } .has-rating .rating-input .rating-star.active .rating-star-on { display: block; } .has-rating .rating-input .rating-star.inactive .rating-star-off { display: block; } .has-rating .rating-input .rating-star.inactive .rating-star-on { display: none; } .has-rating .rating-input .rating-star:hover { transform: scale(1.1); } .has-rating .rating-input .rating-star:hover .rating-star-off { color: var(--color-forms-text-supporting); } .has-rating .rating-input .rating-star:hover .rating-star-on { color: var(--color-forms-button-warning-bg-hover); } .has-rating .rating-input .rating-star.hover .rating-star-off { color: var(--color-forms-text-supporting); } .has-rating .rating-input .rating-star.hover .rating-star-on { color: var(--color-forms-button-warning-bg-hover); } .has-rating .rating-input:disabled, .has-rating .rating-input.disabled { pointer-events: none; opacity: 0.6; } .has-rating .rating-input:disabled .rating-star, .has-rating .rating-input.disabled .rating-star { cursor: default; } .has-rating .rating-input:disabled .rating-star:hover, .has-rating .rating-input.disabled .rating-star:hover { transform: none; } .has-rating.rating-small .rating-input .rating-star { font-size: 16px; gap: 2px; } .has-rating.rating-large .rating-input .rating-star { font-size: 24px; gap: 6px; } .has-rating.rating-red .rating-input .rating-star .rating-star-on { color: var(--color-forms-button-danger-bg); } .has-rating.rating-red .rating-input .rating-star:hover .rating-star-on, .has-rating.rating-red .rating-input .rating-star.hover .rating-star-on { color: var(--color-forms-button-danger-bg-hover); } .has-rating.rating-green .rating-input .rating-star .rating-star-on { color: var(--color-forms-button-success-bg); } .has-rating.rating-green .rating-input .rating-star:hover .rating-star-on, .has-rating.rating-green .rating-input .rating-star.hover .rating-star-on { color: var(--color-forms-button-success-bg-hover); } .has-rating.rating-blue .rating-input .rating-star .rating-star-on { color: var(--color-forms-button-primary-bg); } .has-rating.rating-blue .rating-input .rating-star:hover .rating-star-on, .has-rating.rating-blue .rating-input .rating-star.hover .rating-star-on { color: var(--color-forms-button-primary-bg-hover); } .has-rating.rating-readonly .rating-input { pointer-events: none; } .has-rating.rating-readonly .rating-input .rating-star { cursor: default; } .has-rating.rating-readonly .rating-input .rating-star:hover { transform: none; } .has-rating .rating-input:focus-within { outline: 2px solid var(--color-forms-border-focused); outline-offset: 2px; border-radius: 4px; } @media (prefers-contrast: high) { .has-rating .rating-input .rating-star .rating-star-off { color: var(--color-forms-text-input); } .has-rating .rating-input .rating-star .rating-star-on { color: var(--color-forms-text-input); background-color: var(--color-forms-surface-default); border: 1px solid var(--color-forms-border-default); border-radius: 2px; } } @media (prefers-reduced-motion: reduce) { .has-rating .rating-input .rating-star { transition: none; } .has-rating .rating-input .rating-star:hover { transform: none; } } /** * Container.Masked.Repeat Styles * * Styles for the Container.Masked.Repeat neuron component * * @author Chuck Neal * @copyright 2025 Binary Evolution */ .has-repeat { border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); padding: var(--spacing-200); background-color: var(--color-forms-container-bg); } .has-repeat .repeat-add-button { display: inline-block; padding: var(--forms-padding-button-vertical) var(--forms-padding-button-horizontal); margin: var(--spacing-200) 0; background-color: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); border: none; border-radius: var(--forms-border-radius-default); cursor: pointer; font-size: var(--forms-font-size-button); font-family: var(--forms-button-font-family); font-weight: var(--forms-button-font-weight); transition: background-color 0.2s ease; } .has-repeat .repeat-add-button:hover { background-color: var(--color-forms-button-primary-bg-hover); } .has-repeat .repeat-add-button:active { background-color: var(--color-forms-button-primary-bg-active); } .has-repeat .repeat-add-button:focus { outline: 2px solid var(--color-forms-border-focused); outline-offset: 2px; } .has-repeat .repeat-add-button:disabled { background-color: var(--color-forms-button-disabled-bg); cursor: not-allowed; opacity: 0.6; } .has-repeat .repeat-instance { position: relative; margin-bottom: var(--spacing-300); padding: var(--spacing-300); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); background-color: var(--color-forms-container-bg); box-shadow: 0 var(--spacing-25) var(--spacing-100) rgba(0, 0, 0, 0.1); } .has-repeat .repeat-instance:hover > .repeat-action-icons-container { opacity: 1; } .has-repeat .repeat-action-icons-container { position: absolute; top: var(--spacing-200); right: var(--spacing-200); display: flex; gap: var(--spacing-100); z-index: 20; opacity: 0; transition: opacity 0.2s ease; } .has-repeat .repeat-action-icons-container:hover { opacity: 1; } .has-repeat .repeat-action-icon { width: var(--icon-size-500); height: var(--icon-size-500); padding: var(--spacing-100); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--forms-icon-size-small); line-height: 1; transition: all 0.2s ease; color: white; box-shadow: 0 var(--spacing-25) var(--spacing-100) rgba(0, 0, 0, 0.2); } .has-repeat .repeat-action-icon:hover { transform: scale(1.1); box-shadow: 0 var(--spacing-50) var(--spacing-100) rgba(0, 0, 0, 0.3); } .has-repeat .repeat-action-icon:active { transform: scale(0.95); } .has-repeat .repeat-delete-icon { background-color: var(--color-forms-button-danger-bg); } .has-repeat .repeat-delete-icon:hover { background-color: var(--color-forms-button-danger-bg-hover); } .has-repeat .repeat-delete-icon:active { background-color: var(--color-forms-button-danger-bg-active); } .has-repeat .repeat-delete-icon:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-button-danger-bg); outline-offset: var(--spacing-50); } .has-repeat .repeat-clone-icon { background-color: var(--color-forms-button-success-bg); } .has-repeat .repeat-clone-icon:hover { background-color: var(--color-forms-button-success-bg-hover); } .has-repeat .repeat-clone-icon:active { background-color: var(--color-forms-button-success-bg-active); } .has-repeat .repeat-clone-icon:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-button-success-bg); outline-offset: var(--spacing-50); } .has-repeat .repeat-sort-handle { position: absolute; top: var(--spacing-200); left: var(--spacing-100); width: var(--icon-size-600); height: var(--scale-1000); background-color: var(--color-forms-button-secondary-bg); color: var(--color-forms-button-secondary-text); border-radius: 4px; cursor: grab; display: flex; align-items: center; justify-content: center; opacity: 0.8; z-index: 15; user-select: none; } .has-repeat .repeat-sort-handle:not(.dragging) { transition: all 0.2s ease; } .has-repeat .repeat-sort-handle:hover:not(.dragging) { background-color: var(--color-forms-button-secondary-bg-hover); opacity: 1; transform: scale(1.05); } .has-repeat .repeat-sort-handle:active { cursor: grabbing; background-color: var(--color-forms-button-secondary-bg-active); } .has-repeat .repeat-sort-handle[draggable=true] { -webkit-user-drag: element; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .has-repeat .repeat-sort-handle .repeat-sort-icon { font-size: 14px; line-height: 1; pointer-events: none; } .has-repeat .repeat-instance { position: relative; margin-bottom: var(--spacing-300); padding: var(--spacing-300); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); background-color: var(--color-forms-container-bg); transition: all 0.2s ease; } .has-repeat .repeat-instance:last-child { margin-bottom: 0; } .has-repeat .repeat-instance { position: relative; } .has-repeat .repeat-item { margin-bottom: var(--spacing-300); padding: var(--spacing-200); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); background-color: var(--color-forms-container-bg); position: relative; } .has-repeat .repeat-item:last-of-type { margin-bottom: var(--spacing-200); } .has-repeat.empty .repeat-add-button { margin-top: var(--spacing-500); } .neuron-editor-overlay .neuron-editor-content .neuron.has-container > .repeat-action-icons-container { width: auto !important; } /** * Layout neuron styling * Updated to match EmbeddedLayout look and feel with proper Synapse icons */ .neuron.has-layout { position: relative; min-height: var(--scale-500); padding: var(--spacing-100); } .neuron.has-layout .layout-loading-indicator { display: flex; align-items: center; justify-content: center; padding: var(--spacing-500); color: var(--color-forms-embedded-loading-text); font-style: italic; background-color: inherit; border-radius: var(--border-radius-100); } .neuron.has-layout .layout-loading-indicator i { margin-right: var(--spacing-200); font-size: var(--font-size-550); } .neuron.has-layout .layout-error-indicator { display: flex; align-items: center; justify-content: center; padding: var(--spacing-400); color: var(--color-forms-embedded-error-text); background-color: var(--color-forms-embedded-error-bg); border: var(--forms-border-width-default) solid var(--color-forms-embedded-error-border); border-radius: var(--border-radius-100); margin: var(--spacing-400) 0; } .neuron.has-layout .layout-error-indicator i { margin-right: var(--spacing-200); font-size: var(--font-size-550); } .neuron.has-layout.layout-loading { opacity: 0.8; } .neuron.has-layout.layout-loading > *:not(.layout-loading-indicator) { opacity: 0.3; pointer-events: none; } .neuron.has-layout:not(.layout-loading) > * { opacity: 1; pointer-events: auto; transition: opacity 0.3s ease; } .neuron.has-layout .layout-container { display: block; width: 100%; } .neuron.has-layout .neuron.has-layout { margin: var(--spacing-400) 0; } .neuron.has-layout .neuron.has-layout:first-child { margin-top: 0; } .neuron.has-layout .neuron.has-layout:last-child { margin-bottom: 0; } @keyframes snps-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .snps-spin { animation: snps-spin 2s infinite linear; } @keyframes layout-loading-pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .layout-loading-indicator { animation: layout-loading-pulse 2s ease-in-out infinite; } @media print { .neuron.has-layout .layout-loading-indicator, .neuron.has-layout .layout-error-indicator { display: none !important; } .neuron.has-layout.layout-loading { opacity: 1 !important; } .neuron.has-layout.layout-loading > * { opacity: 1 !important; pointer-events: auto !important; } } @media (prefers-contrast: high) { .neuron.has-layout .layout-loading-indicator { border: 2px solid var(--color-forms-border-default); background-color: var(--color-forms-surface-default); color: var(--color-forms-text-input); font-weight: bold; } .neuron.has-layout .layout-error-indicator { background-color: var(--color-forms-surface-default); border: 2px solid var(--color-forms-border-default); color: var(--color-forms-text-input); font-weight: bold; } } @media (prefers-reduced-motion: reduce) { .neuron.has-layout .layout-loading-indicator { animation: none; } .neuron.has-layout .snps-spin { animation: none; } .neuron.has-layout:not(.layout-loading) > * { transition: none; } } .has-codesnippet .neuron_codeinput { min-height: var(--scale-1250); max-width: 100%; height: 100%; padding: 0 !important; } .has-codesnippet > .neuron_inputRow { height: calc(100% - (var(--scale-1300) + var(--spacing-300))); } .sb-window .has-tab .has-codesnippet .neuron_codeinput { height: calc(100% - var(--scale-1250)); min-height: auto; padding: 0 !important; } .has-codesnippet .neuron_field-editorsContainer { display: flex; width: 100%; height: 100%; } .has-codesnippet .neuron_field-editorsContainer:not(.narrow-layout) .neuron_field-equationContainer, .has-codesnippet .neuron_field-editorsContainer:not(.narrow-layout) .neuron_field-variablesContainer { flex: 1; } .has-codesnippet .neuron_field-editorsContainer.sb-window-layout .neuron_field-equationContainer, .has-codesnippet .neuron_field-editorsContainer.sb-window-layout .neuron_field-variablesContainer { flex: 1; display: block !important; } .has-codesnippet .neuron_field-editorsContainer.narrow-layout { flex-direction: column; gap: 0; } .has-codesnippet .neuron_field-editorsContainer.narrow-layout .neuron_field-equationContainer, .has-codesnippet .neuron_field-editorsContainer.narrow-layout .neuron_field-variablesContainer { width: 100%; display: none; } .has-codesnippet .neuron_field-editorsContainer.narrow-layout.show-equation .neuron_field-equationContainer { display: block; } .has-codesnippet .neuron_field-editorsContainer.narrow-layout.show-variables .neuron_field-variablesContainer { display: block; } .has-codesnippet .neuron_field-equationContainer, .has-codesnippet .neuron_field-variablesContainer { display: flex; flex-direction: column; } .has-codesnippet .neuron_variables-editor { background-color: var(--color-forms-code-bg); border: var(--forms-border-width-thick) solid var(--color-forms-code-border); border-radius: var(--forms-border-radius-default); } .has-codesnippet .neuron_field-toggleButton { background-color: var(--color-forms-button-secondary-bg); color: var(--color-forms-button-secondary-text); border: none; border-radius: var(--forms-border-radius-default); padding: var(--spacing-100) var(--spacing-300); font-size: var(--forms-font-size-help); font-family: var(--forms-button-font-family); font-weight: var(--forms-button-font-weight); cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; white-space: nowrap; } .has-codesnippet .neuron_field-toggleButton:hover { background-color: var(--color-forms-button-secondary-bg-hover); } .has-codesnippet .neuron_field-toggleButton:active { background-color: var(--color-forms-button-secondary-bg-active); } .has-codesnippet .neuron_field-toggleButton:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-checkbox-focus-outline); outline-offset: var(--spacing-50); } .has-codesnippet .neuron_field-toggleButton.hidden { display: none; } .has-codesnippet .neuron_field-controlsRow { display: flex; align-items: start; flex-direction: row; gap: var(--spacing-400); margin-top: var(--spacing-200); padding: var(--spacing-200) 0; border-top: var(--forms-border-width-default) solid var(--color-forms-code-border); flex-wrap: nowrap; } .has-codesnippet .neuron_field-beautifyButton { background-color: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); border: none; border-radius: var(--forms-border-radius-default); padding: var(--forms-padding-button-vertical) var(--forms-padding-button-horizontal); font-size: var(--forms-font-size-button); font-family: var(--forms-button-font-family); font-weight: var(--forms-button-font-weight); cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; white-space: nowrap; } .has-codesnippet .neuron_field-beautifyButton:hover { background-color: var(--color-forms-button-primary-bg-hover); } .has-codesnippet .neuron_field-beautifyButton:active { background-color: var(--color-forms-button-primary-bg-active); } .has-codesnippet .neuron_field-beautifyButton:focus { outline: var(--forms-border-width-thick) solid var(--color-forms-checkbox-focus-outline); outline-offset: var(--spacing-50); } .has-codesnippet .neuron_field-resultDisplay { display: flex; align-items: start; gap: var(--spacing-200); flex: 1; } .has-codesnippet .neuron_field-resultLabel { font-weight: var(--forms-label-font-weight); color: var(--color-forms-code-text); margin: 0; font-size: var(--forms-font-size-label); font-family: var(--forms-label-font-family); flex-shrink: 0; min-width: auto; } .has-codesnippet .neuron_field-resultValue { background-color: var(--color-forms-code-bg); border: var(--forms-border-width-default) solid var(--color-forms-code-border); border-radius: var(--forms-border-radius-default); padding: var(--spacing-100) var(--spacing-300); font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; font-size: var(--forms-font-size-help); flex: 1; min-height: 20px; word-break: break-all; overflow-wrap: break-word; heught: 40px; } .has-codesnippet .neuron_field-resultValue.success { background-color: var(--color-forms-code-result-success-bg); border-color: var(--color-forms-code-result-success-border); color: var(--color-forms-code-result-success-text); } .has-codesnippet .neuron_field-resultValue.error { background-color: var(--color-forms-code-result-error-bg); border-color: var(--color-forms-code-result-error-border); color: var(--color-forms-code-result-error-text); } .has-codesnippet .neuron_field-errorButton { background-color: var(--color-forms-button-secondary-bg); color: var(--color-forms-button-secondary-text); border: none; border-radius: 4px; padding: 4px 8px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .has-codesnippet .neuron_field-errorButton:hover:not(:disabled) { background-color: var(--color-forms-button-secondary-bg-hover); transform: translateY(-1px); } .has-codesnippet .neuron_field-errorButton:active:not(:disabled) { background-color: var(--color-forms-button-secondary-bg-active); transform: translateY(0); } .has-codesnippet .neuron_field-errorButton:focus { outline: 2px solid var(--color-forms-checkbox-focus-outline); outline-offset: 2px; } .has-codesnippet .neuron_field-errorButton:disabled { background-color: var(--color-forms-button-disabled-bg); color: var(--color-forms-button-disabled-text); cursor: not-allowed; opacity: 0.6; } .has-codesnippet .neuron_field-errorButton.has-issues { background-color: var(--color-forms-button-danger-bg); animation: pulse-red 2s infinite; } .has-codesnippet .neuron_field-errorButton.has-issues:hover { background-color: var(--color-forms-button-danger-bg-hover); } .has-codesnippet .neuron_field-errorButton.has-issues:active { background-color: var(--color-forms-button-danger-bg-active); } @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } } .sb-window .has-tab .neuron_codeinput { height: 100%; min-height: auto; padding: 0 !important; } .sb-window-box .neuron-editor-tab-content .neuron-Field-CodeSnippet { height: 100% !important; } .sb-window-content .neuron.has-tabs > .neuron.has-container > .neuron-Field-CodeSnippet { height: 100% !important; margin: 0 !important; } /** * KeyValue Neuron Styles * * Styles for the KeyValue neuron that creates key-value pairs * with auto-population functionality. */ .neuron.has-keyvalue { position: relative; } .neuron.has-keyvalue .neuron { min-height: auto; } .neuron.has-keyvalue > .neuron { position: relative; display: flex; flex-direction: row; gap: var(--spacing-300); align-items: flex-start; padding: var(--spacing-300); padding-right: var(--scale-1000); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); margin-bottom: var(--spacing-200); background: var(--color-forms-container-bg); } .neuron.has-keyvalue > .neuron > .neuron { flex: 1; margin: 0; min-width: 0; } .neuron.has-keyvalue > .neuron:hover { background: var(--color-forms-surface-hover); border-color: var(--color-forms-border-hover); } .neuron.has-keyvalue > .neuron:hover .keyvalue-delete-icon { opacity: 1; } .neuron.has-keyvalue .neuron .field-row { margin-bottom: 0; } .neuron.has-keyvalue .neuron input { width: 100%; padding: var(--forms-padding-input-vertical) var(--forms-padding-input-horizontal); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); font-size: var(--forms-font-size-label); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); } .neuron.has-keyvalue .neuron input:focus { outline: none; border-color: var(--color-forms-border-focused); box-shadow: 0 0 0 var(--spacing-50) rgba(0, 123, 255, 0.25); } .neuron.has-keyvalue .neuron .field-label { font-size: var(--forms-font-size-help); font-family: var(--forms-label-font-family); font-weight: var(--forms-label-font-weight); color: var(--color-forms-text-label); margin-bottom: var(--spacing-50); } .neuron.has-keyvalue > .neuron:not(:first-child) .field-label, .neuron.has-keyvalue > .neuron:not(:first-child) .labelRow, .neuron.has-keyvalue > .neuron:not(:first-child) .label-row, .neuron.has-keyvalue > .neuron:not(:first-child) .neuron_labelRow { display: none !important; } .neuron.has-keyvalue > .neuron:not(:first-child) .neuron .field-label, .neuron.has-keyvalue > .neuron:not(:first-child) .neuron .labelRow, .neuron.has-keyvalue > .neuron:not(:first-child) .neuron .label-row, .neuron.has-keyvalue > .neuron:not(:first-child) .neuron .neuron_labelRow { display: none !important; } .neuron.has-keyvalue.show-all-labels > .neuron .field-label, .neuron.has-keyvalue.show-all-labels > .neuron .labelRow, .neuron.has-keyvalue.show-all-labels > .neuron .label-row, .neuron.has-keyvalue.show-all-labels > .neuron .field-label-row { display: block !important; } .neuron.has-keyvalue.show-all-labels > .neuron .neuron .field-label, .neuron.has-keyvalue.show-all-labels > .neuron .neuron .labelRow, .neuron.has-keyvalue.show-all-labels > .neuron .neuron .label-row, .neuron.has-keyvalue.show-all-labels > .neuron .neuron .field-label-row { display: block !important; } .neuron.has-keyvalue .keyvalue-pair { display: flex; gap: var(--spacing-300); align-items: flex-start; margin-bottom: var(--spacing-200); } .neuron.has-keyvalue .keyvalue-key-field { flex: 1; min-width: 0; } .neuron.has-keyvalue .keyvalue-key-field .field-label { font-weight: var(--font-weight-semibold); color: var(--color-forms-button-primary-bg); } .neuron.has-keyvalue .keyvalue-key-field .field-input { border: var(--forms-border-width-thick) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); padding: var(--spacing-200) var(--spacing-300); font-size: var(--forms-font-size-label); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); transition: border-color 0.2s ease; } .neuron.has-keyvalue .keyvalue-key-field .field-input:focus { border-color: var(--color-forms-border-focused); outline: none; box-shadow: 0 0 0 var(--spacing-50) rgba(0, 123, 255, 0.25); } .neuron.has-keyvalue .keyvalue-key-field .field-input:invalid { border-color: var(--color-forms-border-error); } .neuron.has-keyvalue .keyvalue-value-field { flex: 1; min-width: 0; } .neuron.has-keyvalue .keyvalue-value-field .field-label { font-weight: 500; color: var(--color-forms-text-supporting); } .neuron.has-keyvalue .keyvalue-value-field .field-input { border: 2px solid var(--color-forms-border-default); border-radius: 4px; padding: 8px 12px; font-size: 14px; transition: border-color 0.2s ease; } .neuron.has-keyvalue .keyvalue-value-field .field-input:focus { border-color: var(--color-forms-border-focused); outline: none; box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25); } .neuron.has-keyvalue .keyvalue-value-field .field-input.auto-filled { background-color: var(--color-forms-surface-hover); font-style: italic; color: var(--color-forms-text-supporting); } .neuron.has-keyvalue .repeat-controls { display: flex; gap: 8px; margin-top: 12px; } .neuron.has-keyvalue .repeat-controls .repeat-add-button, .neuron.has-keyvalue .repeat-controls .repeat-remove-button { padding: 6px 12px; border: 1px solid var(--color-forms-border-default); border-radius: 4px; background: var(--color-forms-surface-hover); color: var(--color-forms-text-input); cursor: pointer; font-size: 12px; transition: all 0.2s ease; } .neuron.has-keyvalue .repeat-controls .repeat-add-button:hover, .neuron.has-keyvalue .repeat-controls .repeat-remove-button:hover { background: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); border-color: var(--color-forms-button-primary-bg); } .neuron.has-keyvalue .repeat-controls .repeat-add-button:disabled, .neuron.has-keyvalue .repeat-controls .repeat-remove-button:disabled { opacity: 0.5; cursor: not-allowed; } .neuron.has-keyvalue .repeat-controls .repeat-add-button:disabled:hover, .neuron.has-keyvalue .repeat-controls .repeat-remove-button:disabled:hover { background: var(--color-forms-surface-hover); color: var(--color-forms-text-input); border-color: var(--color-forms-border-default); } .neuron.has-keyvalue .repeat-controls .repeat-remove-button { background: var(--color-forms-button-danger-bg); color: var(--color-forms-button-danger-text); border-color: var(--color-forms-button-danger-bg); } .neuron.has-keyvalue .repeat-controls .repeat-remove-button:hover { background: var(--color-forms-button-danger-bg-hover); border-color: var(--color-forms-button-danger-bg-hover); } .neuron.has-keyvalue .keyvalue-empty-state { text-align: center; padding: 24px; color: var(--color-forms-text-supporting); font-style: italic; border: 2px dashed var(--color-forms-border-default); border-radius: 4px; background: var(--color-forms-surface-hover); } .neuron.has-keyvalue .keyvalue-empty-state .empty-icon { font-size: 24px; margin-bottom: 8px; opacity: 0.5; } .neuron.has-keyvalue .keyvalue-empty-state .empty-text { font-size: 14px; } .neuron.has-keyvalue.sortable .keyvalue-pair { cursor: move; position: relative; } .neuron.has-keyvalue.sortable .keyvalue-pair::before { content: "⋮⋮"; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); color: var(--color-forms-text-supporting); font-size: 12px; line-height: 1; opacity: 0.5; } .neuron.has-keyvalue.sortable .keyvalue-pair:hover::before { opacity: 1; } .neuron.has-keyvalue.has-validation-errors .keyvalue-key-field .field-input, .neuron.has-keyvalue.has-validation-errors .keyvalue-value-field .field-input { border-color: var(--color-forms-border-error); } .neuron.has-keyvalue.has-validation-errors .keyvalue-key-field .field-input:focus, .neuron.has-keyvalue.has-validation-errors .keyvalue-value-field .field-input:focus { box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); } /** * Save Indicator Component * * Visual indicator that appears in the corner of the page to show save operations * Supports multiple concurrent save operations and error states */ .synapse-save-indicator { position: fixed; top: var(--spacing-500); right: var(--spacing-500); z-index: 10000; opacity: 0; transform: translateX(100%); transition: all 0.3s ease-in-out; } .synapse-save-indicator.synapse-save-indicator-visible { opacity: 1; transform: translateX(0); } .synapse-save-indicator .synapse-save-indicator-content { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); border-radius: var(--forms-border-radius-medium); box-shadow: 0 var(--spacing-100) var(--spacing-300) rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); min-width: calc(var(--scale-1000) * 5); max-width: calc(var(--scale-1000) * 8.75); } .synapse-save-indicator .synapse-save-indicator-icon { flex-shrink: 0; width: var(--icon-size-500); height: var(--icon-size-500); display: flex; align-items: center; justify-content: center; } .synapse-save-indicator .synapse-save-indicator-icon i { font-size: var(--forms-icon-size-default); } .synapse-save-indicator .synapse-save-indicator-text { flex: 1; min-width: 0; } .synapse-save-indicator .synapse-save-indicator-title { font-family: var(--forms-label-font-family); font-weight: var(--forms-label-font-weight); font-size: var(--forms-font-size-input); line-height: 1.2; margin-bottom: var(--spacing-50); } .synapse-save-indicator .synapse-save-indicator-message { font-family: var(--forms-help-font-family); font-weight: var(--forms-help-font-weight); font-size: var(--forms-font-size-help); line-height: 1.3; opacity: 0.8; word-wrap: break-word; } .synapse-save-indicator.synapse-save-indicator-saving .synapse-save-indicator-content { background: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); border: var(--forms-border-width-default) solid var(--color-forms-button-primary-bg); opacity: 0.95; } .synapse-save-indicator.synapse-save-indicator-saving .synapse-save-indicator-icon { color: var(--color-forms-button-primary-text); } .synapse-save-indicator.synapse-save-indicator-error .synapse-save-indicator-content { background: var(--color-forms-button-danger-bg); color: var(--color-forms-button-danger-text); border: 1px solid var(--color-forms-button-danger-bg); opacity: 0.95; } .synapse-save-indicator.synapse-save-indicator-error .synapse-save-indicator-icon { color: var(--color-forms-button-danger-text); } @media (max-width: 768px) { .synapse-save-indicator { top: 10px; right: 10px; left: 10px; } .synapse-save-indicator .synapse-save-indicator-content { padding: 10px 12px; min-width: auto; max-width: none; } .synapse-save-indicator .synapse-save-indicator-title { font-size: 13px; } .synapse-save-indicator .synapse-save-indicator-message { font-size: 11px; } } .synapse-save-indicator .fa-spinner { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-contrast: high) { .synapse-save-indicator.synapse-save-indicator-saving .synapse-save-indicator-content { background: var(--color-forms-button-primary-bg); border: 2px solid var(--color-forms-button-primary-bg-active); } .synapse-save-indicator.synapse-save-indicator-error .synapse-save-indicator-content { background: var(--color-forms-button-danger-bg); border: 2px solid var(--color-forms-button-danger-bg-hover); } } @media (prefers-reduced-motion: reduce) { .synapse-save-indicator { transition: opacity 0.2s ease; } .synapse-save-indicator.synapse-save-indicator-visible { transform: none; } .synapse-save-indicator .fa-spinner { animation: none; } } /** * Content Neuron Styles * * Styles for content neurons including text alignment modifiers * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ /** * Text alignment modifier classes for content neurons * These classes are applied based on the text_align option */ .mod_left { text-align: left; } .mod_center { text-align: center; } .mod_right { text-align: right; } .mod_justified { text-align: justify; } .neuron-content-area > p { margin-top: 0px; margin-bottom: 2px; } /** * Content Table Neuron Styling * Professional table styling for dynamic data tables */ .has-content-table .neuron-table-styled, .has-contenttable .neuron-table-styled { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--forms-input-font-family); font-size: var(--forms-font-size-label); font-weight: var(--forms-input-font-weight); line-height: 1.5; color: var(--color-forms-text-input); background-color: var(--color-forms-table-bg); border: var(--forms-border-width-default) solid var(--color-forms-table-border); border-radius: var(--border-radius-150); overflow: hidden; box-shadow: 0 var(--spacing-50) var(--spacing-200) rgba(33, 150, 243, 0.1); display: block; max-height: var(--scale-10000); } .has-content-table .neuron-table-styled thead, .has-contenttable .neuron-table-styled thead { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border-bottom: var(--forms-border-width-thick) solid var(--color-forms-table-header-border); display: table; width: 100%; table-layout: fixed; } .has-content-table .neuron-table-styled thead tr, .has-contenttable .neuron-table-styled thead tr { border: none; display: table-row; } .has-content-table .neuron-table-styled .neuron-table-header, .has-contenttable .neuron-table-styled .neuron-table-header { padding: var(--spacing-300) var(--spacing-400); text-align: left; font-weight: var(--font-weight-semibold); font-size: var(--forms-font-size-help); font-family: var(--forms-label-font-family); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-forms-table-header-text); border-right: var(--forms-border-width-default) solid var(--color-forms-table-header-cell-border); background: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .has-content-table .neuron-table-styled .neuron-table-header:last-child, .has-contenttable .neuron-table-styled .neuron-table-header:last-child { border-right: none; } .has-content-table .neuron-table-styled tbody, .has-contenttable .neuron-table-styled tbody { background-color: var(--color-forms-table-bg); display: block; overflow-y: auto; max-height: var(--scale-8000); width: 100%; } .has-content-table .neuron-table-styled tbody tr, .has-contenttable .neuron-table-styled tbody tr { border-bottom: var(--forms-border-width-default) solid var(--color-forms-table-cell-border); transition: background-color 0.15s ease; display: table; width: 100%; table-layout: fixed; } .has-content-table .neuron-table-styled tbody tr:hover, .has-contenttable .neuron-table-styled tbody tr:hover { background-color: var(--color-forms-table-row-hover-bg); } .has-content-table .neuron-table-styled tbody tr:last-child, .has-contenttable .neuron-table-styled tbody tr:last-child { border-bottom: none; } .has-content-table .neuron-table-styled tbody::-webkit-scrollbar, .has-contenttable .neuron-table-styled tbody::-webkit-scrollbar { width: var(--spacing-200); } .has-content-table .neuron-table-styled tbody::-webkit-scrollbar-track, .has-contenttable .neuron-table-styled tbody::-webkit-scrollbar-track { background: var(--color-forms-table-scrollbar-track); border-radius: var(--border-radius-100); } .has-content-table .neuron-table-styled tbody::-webkit-scrollbar-thumb, .has-contenttable .neuron-table-styled tbody::-webkit-scrollbar-thumb { background: var(--color-forms-table-scrollbar-thumb); border-radius: var(--border-radius-100); } .has-content-table .neuron-table-styled tbody::-webkit-scrollbar-thumb:hover, .has-contenttable .neuron-table-styled tbody::-webkit-scrollbar-thumb:hover { background: var(--color-forms-table-scrollbar-thumb-hover); } .has-content-table .neuron-table-styled .neuron-table-row-even, .has-contenttable .neuron-table-styled .neuron-table-row-even { background-color: var(--color-forms-table-row-even-bg); } .has-content-table .neuron-table-styled .neuron-table-row-odd, .has-contenttable .neuron-table-styled .neuron-table-row-odd { background-color: var(--color-forms-table-row-odd-bg); } .has-content-table .neuron-table-styled .neuron-table-cell, .has-contenttable .neuron-table-styled .neuron-table-cell { padding: var(--spacing-200) var(--spacing-300); border-right: var(--forms-border-width-default) solid var(--color-forms-table-cell-border); vertical-align: top; color: var(--color-forms-text-input); font-size: var(--forms-font-size-label); font-family: var(--forms-input-font-family); font-weight: var(--forms-input-font-weight); line-height: 1.4; } .has-content-table .neuron-table-styled .neuron-table-cell:last-child, .has-contenttable .neuron-table-styled .neuron-table-cell:last-child { border-right: none; } .has-content-table .neuron-table-styled .neuron-table-cell:empty::before, .has-contenttable .neuron-table-styled .neuron-table-cell:empty::before { content: "—"; color: var(--color-forms-text-disabled); font-style: italic; } .has-content-table .neuron-table-styled:focus-within, .has-contenttable .neuron-table-styled:focus-within { outline: var(--forms-border-width-thick) solid var(--color-forms-border-focused); outline-offset: var(--spacing-50); } .has-content-table .content-table-empty, .has-contenttable .content-table-empty { padding: 40px 20px; text-align: center; color: var(--color-forms-text-supporting); font-style: italic; background-color: var(--color-forms-table-empty-bg); border: 1px solid var(--color-forms-table-border); border-radius: 6px; } .has-content-table .content-table-empty::before, .has-contenttable .content-table-empty::before { content: "📊"; display: block; font-size: 32px; margin-bottom: 12px; opacity: 0.5; } .has-content-table .content-table-loading, .has-contenttable .content-table-loading { padding: 20px; text-align: center; color: var(--color-forms-text-supporting); } .has-content-table .content-table-loading::before, .has-contenttable .content-table-loading::before { content: ""; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--color-forms-table-border); border-top: 2px solid var(--color-forms-table-header-border); border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px; vertical-align: middle; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .has-content-table .content-table-error, .has-contenttable .content-table-error { padding: 20px; text-align: center; color: var(--color-forms-text-error); background-color: var(--color-forms-surface-error); border: 1px solid var(--color-forms-border-error); border-radius: 6px; } .has-content-table .content-table-error::before, .has-contenttable .content-table-error::before { content: "⚠️"; display: block; font-size: 24px; margin-bottom: 8px; } .has-content-table-pattern-reference .neuron-table-pattern-reference .neuron-table-action-header, .has-contenttablepatternreference .neuron-table-pattern-reference .neuron-table-action-header { width: 80px; text-align: center; } .has-content-table-pattern-reference .neuron-table-pattern-reference .neuron-table-action-cell, .has-contenttablepatternreference .neuron-table-pattern-reference .neuron-table-action-cell { text-align: center; width: 80px; } .has-content-table-pattern-reference .neuron-table-pattern-reference .neuron-table-action-cell .neuron-table-edit-btn, .has-contenttablepatternreference .neuron-table-pattern-reference .neuron-table-action-cell .neuron-table-edit-btn { background: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); border: none; border-radius: var(--forms-border-radius-default); padding: var(--forms-padding-button-vertical) var(--forms-padding-button-horizontal); cursor: pointer; font-size: var(--forms-font-size-button); font-family: var(--forms-button-font-family); font-weight: var(--forms-button-font-weight); transition: background-color 0.2s ease; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--spacing-200); } .has-content-table-pattern-reference .neuron-table-pattern-reference .neuron-table-action-cell .neuron-table-edit-btn:hover, .has-contenttablepatternreference .neuron-table-pattern-reference .neuron-table-action-cell .neuron-table-edit-btn:hover { background: var(--color-forms-button-primary-bg-hover); } .has-content-table-pattern-reference .neuron-table-pattern-reference .neuron-table-action-cell .neuron-table-edit-btn:active, .has-contenttablepatternreference .neuron-table-pattern-reference .neuron-table-action-cell .neuron-table-edit-btn:active { background: var(--color-forms-button-primary-bg-active); } .has-content-table-pattern-reference .neuron-table-pattern-reference .neuron-table-action-cell .neuron-table-edit-btn i, .has-contenttablepatternreference .neuron-table-pattern-reference .neuron-table-action-cell .neuron-table-edit-btn i { font-size: var(--forms-icon-size-small); } .has-content-table-pattern-reference .neuron-table-pattern-reference .neuron-table-cell-clickable, .has-contenttablepatternreference .neuron-table-pattern-reference .neuron-table-cell-clickable { cursor: pointer; transition: all 0.15s ease; } .has-content-table-pattern-reference .neuron-table-pattern-reference .neuron-table-cell-clickable:hover, .has-contenttablepatternreference .neuron-table-pattern-reference .neuron-table-cell-clickable:hover { background-color: var(--color-forms-table-row-hover-bg); color: var(--color-forms-table-header-text); } .has-content-table-pattern-reference .neuron-table-new-buttons, .has-contenttablepatternreference .neuron-table-new-buttons { margin: 12px 0; display: flex; gap: 10px; flex-wrap: wrap; } .has-content-table-pattern-reference .neuron-table-new-btn, .has-contenttablepatternreference .neuron-table-new-btn { background: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); border: none; border-radius: var(--forms-border-radius-default); padding: var(--forms-padding-button-vertical) var(--forms-padding-button-horizontal); cursor: pointer; font-size: var(--forms-font-size-button); font-family: var(--forms-button-font-family); font-weight: var(--forms-button-font-weight); transition: all 0.15s ease; display: inline-flex; align-items: center; gap: var(--spacing-200); white-space: nowrap; } .has-content-table-pattern-reference .neuron-table-new-btn:hover, .has-contenttablepatternreference .neuron-table-new-btn:hover { background: var(--color-forms-button-primary-bg-hover); transform: translateY(-1px); } .has-content-table-pattern-reference .neuron-table-new-btn:active, .has-contenttablepatternreference .neuron-table-new-btn:active { background: var(--color-forms-button-primary-bg-active); transform: translateY(0); } .has-content-table-pattern-reference .neuron-table-new-btn i, .has-contenttablepatternreference .neuron-table-new-btn i { font-size: var(--forms-icon-size-small); } .has-content-table-pattern-reference .neuron-table-new-btn i:last-child, .has-contenttablepatternreference .neuron-table-new-btn i:last-child { margin-left: var(--spacing-50); } .has-content-table-pattern-reference .neuron-table-new-btn .snps:first-child, .has-contenttablepatternreference .neuron-table-new-btn .snps:first-child { margin-right: var(--spacing-100); font-size: var(--forms-font-size-label); } .has-content-table-pattern-reference .neuron-table-new-btn:disabled, .has-content-table-pattern-reference .neuron-table-new-btn.disabled, .has-contenttablepatternreference .neuron-table-new-btn:disabled, .has-contenttablepatternreference .neuron-table-new-btn.disabled { background: var(--color-forms-button-disabled-bg); color: var(--color-forms-button-disabled-text); cursor: not-allowed; transform: none; } .has-content-table-pattern-reference .neuron-table-new-btn:disabled:hover, .has-content-table-pattern-reference .neuron-table-new-btn.disabled:hover, .has-contenttablepatternreference .neuron-table-new-btn:disabled:hover, .has-contenttablepatternreference .neuron-table-new-btn.disabled:hover { background: var(--color-forms-button-disabled-bg); transform: none; } .has-content-table-pattern-reference .neuron-table-new-btn:disabled:active, .has-content-table-pattern-reference .neuron-table-new-btn.disabled:active, .has-contenttablepatternreference .neuron-table-new-btn:disabled:active, .has-contenttablepatternreference .neuron-table-new-btn.disabled:active { background: var(--color-forms-button-disabled-bg); transform: none; } .has-content-table-pattern-reference .neuron-table-new-btn:disabled i, .has-content-table-pattern-reference .neuron-table-new-btn.disabled i, .has-contenttablepatternreference .neuron-table-new-btn:disabled i, .has-contenttablepatternreference .neuron-table-new-btn.disabled i { opacity: 0.6; } .has-content-table-pattern-reference .content-table-empty, .has-contenttablepatternreference .content-table-empty { text-align: center; color: #90a4ae; font-style: italic; padding: 20px 16px !important; background-color: #fafcff; } /* Add 'has' class files here as forwards */ /** * Dynamic Content Styling * Styles for dynamic content elements in neurons */ .hide-inlineChoice { display: none !important; } genome-expression { display: inline; } genome-expression.loading { opacity: 0.6; } genome-expression.loading::after { content: "..."; animation: loading-dots 1.5s infinite; } genome-expression.error { color: #dc3545; font-style: italic; } genome-expression.error::before { content: "[Error: "; } genome-expression.error::after { content: "]"; } genome-choice { display: inline; } genome-choice.hide-inlineChoice { display: none !important; } genome-choice.conditional { border-left: 3px solid #17a2b8; padding-left: 0.5rem; margin-left: 0.25rem; } genome-repeat { display: inline; } genome-repeat .repeat-container { display: inline; } genome-repeat .repeat-item { display: inline; margin-bottom: 0.5rem; } genome-repeat .repeat-item:last-child { margin-bottom: 0; } genome-repeat .repeat-delimiter { display: inline; color: #6c757d; margin: 0 0.25rem; } genome-repeat .repeat-last-delimiter { display: inline; color: #6c757d; margin: 0 0.25rem; } @keyframes loading-dots { 0%, 20% { opacity: 0; } 50% { opacity: 1; } 80%, 100% { opacity: 0; } } .neuron .neuron_field-label genome-expression { font-weight: inherit; color: inherit; } .neuron .neuron_field-label genome-choice { font-weight: inherit; color: inherit; } .neuron .neuron_field-supportText genome-expression { font-size: inherit; color: inherit; } .neuron .neuron_field-supportText genome-choice { font-size: inherit; color: inherit; } .neuron.has-content genome-expression { display: inline; } .neuron.has-content genome-choice { display: inline; } .neuron.has-content genome-choice.hide-inlineChoice { display: none !important; } .neuron.has-content genome-repeat { display: inline; } .neuron.has-interactive_content genome-expression { cursor: pointer; color: #007bff; } .neuron.has-interactive_content genome-expression.isDefaultValue { color: #dc3545; } .neuron.has-interactive_content genome-expression:hover { text-decoration: underline; } .neuron.has-interactive_content genome-choice { cursor: pointer; background-color: #fff3cd; padding: 1px 3px; border-radius: 2px; } .neuron.has-interactive_content genome-choice:empty::before { content: ""; display: inline; width: 4px; height: 3px; background-color: #fff3cd; } .neuron.has-interactive_content genome-choice:hover { background-color: #ffeaa7; } .neuron.has-interactive_content genome-repeat { cursor: pointer; background-color: #cce5ff; padding: 2px 4px; border-radius: 3px; display: inline; } .neuron.has-interactive_content genome-repeat:hover { background-color: #99d6ff; } @media (max-width: 768px) { genome-choice.conditional { border-left-width: 2px; padding-left: 0.375rem; margin-left: 0.125rem; } } @media print { .hide-inlineChoice { display: none !important; } genome-expression.loading::after { content: ""; } genome-expression.error { color: #000 !important; } genome-expression.error::before, genome-expression.error::after { content: ""; } } .neuron.has-interactive_content genome-choice.hide-inlineChoice, .neuron.has-interactive_content genome-expression:empty, .neuron.has-interactive_content genome-repeat:empty { height: 16px; min-width: 8px; border-radius: 2px; cursor: pointer; opacity: 0.5; position: relative; padding: 0; font-size: 0; color: transparent; } .neuron.has-interactive_content genome-choice.hide-inlineChoice:hover, .neuron.has-interactive_content genome-expression:empty:hover, .neuron.has-interactive_content genome-repeat:empty:hover { opacity: 0.9; } .neuron.has-interactive_content genome-choice.hide-inlineChoice, .neuron.has-interactive_content genome-expression:empty, .neuron.has-interactive_content genome-repeat:empty { display: inline-block !important; } .neuron.has-interactive_content genome-choice.hide-inlineChoice genome-choice.hide-inlineChoice, .neuron.has-interactive_content genome-choice.hide-inlineChoice genome-expression:empty, .neuron.has-interactive_content genome-choice.hide-inlineChoice genome-repeat:empty { display: none !important; font-size: 0; color: transparent; } .neuron.has-interactive_content genome-choice.hide-inlineChoice { background: linear-gradient(45deg, #ffc107 25%, transparent 25%, transparent 75%, #ffc107 75%), linear-gradient(45deg, #ffc107 25%, transparent 25%, transparent 75%, #ffc107 75%); border: 1px dashed #ffc107; background-size: 3px 3px; background-position: 0 0, 1.5px 1.5px; } .neuron.has-interactive_content genome-expression:empty { background: linear-gradient(45deg, #007bff 25%, transparent 25%, transparent 75%, #007bff 75%), linear-gradient(45deg, #007bff 25%, transparent 25%, transparent 75%, #007bff 75%); border: 1px dashed #007bff; background-size: 3px 3px; background-position: 0 0, 1.5px 1.5px; } .neuron.has-interactive_content genome-repeat:empty { background: linear-gradient(45deg, #17a2b8 25%, transparent 25%, transparent 75%, #17a2b8 75%), linear-gradient(45deg, #17a2b8 25%, transparent 25%, transparent 75%, #17a2b8 75%); border: 1px dashed #17a2b8; background-size: 3px 3px; background-position: 0 0, 1.5px 1.5px; } .neuron.has-interactive_content .decision-flag, .neuron.has-interactive_content [class*=decision-flag] { cursor: pointer; } .neuron.has-interactive_content .decision-flag:hover, .neuron.has-interactive_content [class*=decision-flag]:hover { opacity: 0.9; } .neuron.has-button input[type=button], .neuron.has-button input[type=submit], .neuron.has-button input[type=reset] { padding: 8px 16px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #333; cursor: pointer; font-size: 14px; font-family: inherit; transition: all 0.2s ease; } .neuron.has-button input[type=button]:hover, .neuron.has-button input[type=submit]:hover, .neuron.has-button input[type=reset]:hover { background: #f5f5f5; border-color: #999; } .neuron.has-button input[type=button]:active, .neuron.has-button input[type=submit]:active, .neuron.has-button input[type=reset]:active { background: #e5e5e5; transform: translateY(1px); } .neuron.has-button input[type=button]:disabled, .neuron.has-button input[type=submit]:disabled, .neuron.has-button input[type=reset]:disabled { opacity: 0.6; cursor: not-allowed; } .neuron.has-button input[type=button]:disabled:hover, .neuron.has-button input[type=submit]:disabled:hover, .neuron.has-button input[type=reset]:disabled:hover { background: #fff; border-color: #ccc; transform: none; } .neuron.has-button a { display: inline-block; padding: 8px 16px; color: #007bff; text-decoration: none; border-radius: 4px; transition: all 0.2s ease; } .neuron.has-button a:hover { color: #0056b3; background: rgba(0, 123, 255, 0.1); text-decoration: underline; } .neuron.has-button a:active { transform: translateY(1px); } .neuron.has-button .btn-containedHighEmphasis { background: #007bff; color: white; border-color: #007bff; font-weight: 500; } .neuron.has-button .btn-containedHighEmphasis:hover { background: #0056b3; border-color: #0056b3; } .neuron.has-button .btn-containedHighEmphasis:active { background: #004085; border-color: #004085; } .neuron.has-button .btn-outlinedMediumEmphasis { background: transparent; color: #007bff; border-color: #007bff; border-width: 2px; } .neuron.has-button .btn-outlinedMediumEmphasis:hover { background: #007bff; color: white; } .neuron.has-button .btn-outlinedMediumEmphasis:active { background: #0056b3; border-color: #0056b3; } .neuron.has-button .btn-textButtonLowEmphasis { background: transparent; color: #007bff; border: none; padding: 8px 12px; } .neuron.has-button .btn-textButtonLowEmphasis:hover { background: rgba(0, 123, 255, 0.1); color: #0056b3; } .neuron.has-button .btn-textButtonLowEmphasis:active { background: rgba(0, 123, 255, 0.2); } .neuron.has-button input[type=submit] { background: #28a745; color: white; border-color: #28a745; font-weight: 500; } .neuron.has-button input[type=submit]:hover { background: #218838; border-color: #218838; } .neuron.has-button input[type=submit]:active { background: #1e7e34; border-color: #1e7e34; } .neuron.has-button input[type=reset] { background: #6c757d; color: white; border-color: #6c757d; } .neuron.has-button input[type=reset]:hover { background: #5a6268; border-color: #5a6268; } .neuron.has-button input[type=reset]:active { background: #495057; border-color: #495057; } @media (max-width: 768px) { .neuron.has-button input[type=button], .neuron.has-button input[type=submit], .neuron.has-button input[type=reset], .neuron.has-button a { padding: 10px 16px; font-size: 16px; min-height: 44px; display: block; width: 100%; text-align: center; margin-bottom: 8px; } } .neuron.has-button.smart-button.disabled-due-to-errors input[type=button], .neuron.has-button.smart-button.disabled-due-to-errors input[type=submit], .neuron.has-button.smart-button.disabled-due-to-errors input[type=reset] { background: #6c757d !important; color: #fff !important; border-color: #6c757d !important; cursor: not-allowed !important; opacity: 0.7; } .neuron.has-button.smart-button.disabled-due-to-errors input[type=button]:hover, .neuron.has-button.smart-button.disabled-due-to-errors input[type=submit]:hover, .neuron.has-button.smart-button.disabled-due-to-errors input[type=reset]:hover { background: #6c757d !important; border-color: #6c757d !important; transform: none !important; box-shadow: none !important; } .neuron.has-button.smart-button.disabled-due-to-errors input[type=button]:active, .neuron.has-button.smart-button.disabled-due-to-errors input[type=submit]:active, .neuron.has-button.smart-button.disabled-due-to-errors input[type=reset]:active { background: #6c757d !important; border-color: #6c757d !important; transform: none !important; } .neuron.has-button.smart-button.disabled-due-to-errors .btn-containedHighEmphasis, .neuron.has-button.smart-button.disabled-due-to-errors .btn-outlinedMediumEmphasis, .neuron.has-button.smart-button.disabled-due-to-errors .btn-textButtonLowEmphasis { background: #6c757d !important; color: #fff !important; border-color: #6c757d !important; } .neuron.has-button.smart-button.disabled-due-to-errors .btn-containedHighEmphasis:hover, .neuron.has-button.smart-button.disabled-due-to-errors .btn-containedHighEmphasis:active, .neuron.has-button.smart-button.disabled-due-to-errors .btn-outlinedMediumEmphasis:hover, .neuron.has-button.smart-button.disabled-due-to-errors .btn-outlinedMediumEmphasis:active, .neuron.has-button.smart-button.disabled-due-to-errors .btn-textButtonLowEmphasis:hover, .neuron.has-button.smart-button.disabled-due-to-errors .btn-textButtonLowEmphasis:active { background: #6c757d !important; color: #fff !important; border-color: #6c757d !important; transform: none !important; box-shadow: none !important; } .neuron.has-button.smart-button:not(.disabled-due-to-errors) input[type=button], .neuron.has-button.smart-button:not(.disabled-due-to-errors) input[type=submit], .neuron.has-button.smart-button:not(.disabled-due-to-errors) input[type=reset] { position: relative; } .neuron.has-button.smart-button:not(.disabled-due-to-errors) input[type=button]::after, .neuron.has-button.smart-button:not(.disabled-due-to-errors) input[type=submit]::after, .neuron.has-button.smart-button:not(.disabled-due-to-errors) input[type=reset]::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; background: #28a745; border-radius: 50%; opacity: 0.8; } .neuron.has-button.smart-button input[type=button], .neuron.has-button.smart-button input[type=submit], .neuron.has-button.smart-button input[type=reset] { transition: all 0.3s ease; } /** * Clean Options and Missing Comma Popup Styles for CodeSnippet Neuron */ .neuron_field-cleanOptionsPopup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: var(--popup-z-index, 10000); animation: fadeIn 0.2s ease-out; } .neuron_field-cleanOptionsContent { background: white; border-radius: 8px; padding: 20px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); animation: slideIn 0.3s ease-out; } .neuron_field-cleanOptionsTitle { margin: 0 0 20px 0; font-size: 18px; font-weight: 600; color: #333; text-align: center; } .neuron_field-cleanOptionsContainer { margin-bottom: 20px; } .neuron_field-cleanOption { border: 1px solid #ddd; border-radius: 6px; padding: 15px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; background: #f9f9f9; } .neuron_field-cleanOption:hover { border-color: #007cba; background: #f0f8ff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 124, 186, 0.1); } .neuron_field-cleanOption:last-child { margin-bottom: 0; } .neuron_field-cleanOptionTitle { font-weight: 600; color: #333; margin-bottom: 8px; font-size: 14px; } .neuron_field-cleanOptionTooltip { color: #666; font-size: 12px; line-height: 1.4; } .neuron_field-cleanOptionsClose { background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; display: block; margin: 0 auto; transition: background-color 0.2s ease; } .neuron_field-cleanOptionsClose:hover { background: #5a6268; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Dark theme support */ @media (prefers-color-scheme: dark) { .neuron_field-cleanOptionsContent { background: #2d3748; color: #e2e8f0; } .neuron_field-cleanOptionsTitle { color: #e2e8f0; } .neuron_field-cleanOption { background: #4a5568; border-color: #718096; color: #e2e8f0; } .neuron_field-cleanOption:hover { background: #2b6cb0; border-color: #3182ce; } .neuron_field-cleanOptionTitle { color: #e2e8f0; } .neuron_field-cleanOptionTooltip { color: #cbd5e0; } } /** * Error Report Popup Styles */ .neuron_field-errorReportPopup { position: fixed; background: white; border: 1px solid #ccc; border-radius: 8px; padding: 15px; max-width: 500px; max-height: 400px; overflow-y: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.4; animation: slideInFromRight 0.2s ease-out; } .neuron_field-errorReportIssues { margin-bottom: 10px; } .neuron_field-errorReportIssue { margin-bottom: 15px; padding: 12px; background: #f5f5f5; border-radius: 6px; border-left: 4px solid #d32f2f; } .neuron_field-errorReportIssue:last-child { margin-bottom: 0; } /* Animation for popup sliding in from right */ @keyframes slideInFromRight { from { opacity: 0; transform: translateX(20px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } /* Dark theme support for error report popup */ @media (prefers-color-scheme: dark) { .neuron_field-errorReportPopup { background: #2d3748; color: #e2e8f0; border-color: #4a5568; } .neuron_field-errorReportIssue { background: #4a5568; color: #e2e8f0; border-left-color: #f56565; } } /* Include any files needed here as @forward declarations */ /** * Visibility Classes * * CSS classes for managing neuron visibility based on dependencies, * admin overrides, page state, and viewport visibility. * * Priority order (highest to lowest): * 1. Admin Override * 2. Explicit * 3. Dependencies * 4. Page * 5. Viewport * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ /** * Hidden state classes * These classes hide elements based on different visibility conditions */ .hideForExplicit { display: none !important; } .hideForDependencies { display: none !important; } .hideForPage { display: none !important; } .hideForViewport { display: none !important; } /** * Admin override classes * These classes show elements when admin override is active */ .showForAdminOverride { display: block !important; } .showForAdminOverride.hideForExplicit, .showForAdminOverride.hideForDependencies, .showForAdminOverride.hideForViewport { display: block !important; } .showForAdminOverride::before { content: ""; color: #ff6b6b; font-size: 0.8em; margin-right: 4px; } /** * Smooth transitions for visibility changes * Provides better user experience when elements show/hide */ .neuron { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .neuron:not(.hideForExplicit):not(.hideForDependencies):not(.hideForPage):not(.hideForViewport) { opacity: 1; transform: translateY(0); } .neuron.hiding { opacity: 0; transform: translateY(-10px); } /** * Debug classes for development * These classes help developers understand visibility states */ .synapse-debug-visibility .hideForExplicit { display: block !important; border: 2px dashed #e74c3c; position: relative; } .synapse-debug-visibility .hideForExplicit:not(.showForAdminOverride) { opacity: 0.3; } .synapse-debug-visibility .hideForExplicit::after { content: "HIDDEN: Explicit"; position: absolute; top: -20px; left: 0; background: #e74c3c; color: white; padding: 2px 6px; font-size: 10px; border-radius: 3px; z-index: 1000; } .synapse-debug-visibility .hideForDependencies { display: block !important; border: 2px dashed #f39c12; position: relative; } .synapse-debug-visibility .hideForDependencies::after { content: "HIDDEN: Dependencies"; position: absolute; top: -20px; left: 0; background: #f39c12; color: white; padding: 2px 6px; font-size: 10px; border-radius: 3px; z-index: 1000; } .synapse-debug-visibility .hideForViewport { display: block !important; opacity: 0.3; border: 2px dashed #3498db; position: relative; } .synapse-debug-visibility .hideForViewport::after { content: "HIDDEN: Viewport"; position: absolute; top: -20px; left: 0; background: #3498db; color: white; padding: 2px 6px; font-size: 10px; border-radius: 3px; z-index: 1000; } .synapse-debug-visibility .showForAdminOverride { border: 2px dotted #27ae60; position: relative; } .synapse-debug-visibility .showForAdminOverride::after { content: "VISIBLE: Admin Override"; position: absolute; top: -20px; right: 0; background: #27ae60; color: white; padding: 2px 6px; font-size: 10px; border-radius: 3px; z-index: 1000; } /** * Responsive visibility helpers * Additional classes for responsive behavior */ @media (max-width: 768px) { .hideOnMobile { display: none !important; } } @media (min-width: 769px) and (max-width: 1024px) { .hideOnTablet { display: none !important; } } @media (min-width: 1025px) { .hideOnDesktop { display: none !important; } } @media (min-width: 769px) { .showOnlyMobile { display: none !important; } } @media (max-width: 1024px) { .showOnlyDesktop { display: none !important; } } /** * Accessibility considerations for visibility * Ensures screen readers handle visibility correctly */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hideForDependencies, .hideForExplicit, .hideForViewport { visibility: hidden; } .hideForDependencies.showForAdminOverride, .hideForExplicit.showForAdminOverride, .hideForViewport.showForAdminOverride { visibility: visible; } .hideForPage { visibility: hidden; } /** * Visibility Module Index * * This module handles all visibility-related styles for the Synapse framework. * Includes dependency-based visibility, admin overrides, and viewport management. * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ /** * Synapse Tree Editor Styles * * Styles for the neuron tree editor interface including positioning, * tree structure, search functionality, and responsive behavior. */ :root { --synapse-tree-width: 450px; --synapse-tree-background: #ffffff; --synapse-tree-border: #e1e5e9; --synapse-tree-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --synapse-tree-node-hover: #f8f9fa; --synapse-tree-node-selected: #e3f2fd; --synapse-tree-indent-line: #dee2e6; --synapse-tree-text-primary: #212529; --synapse-tree-text-secondary: #6c757d; --synapse-tree-icon-color: #495057; } .synapse-editTree { position: fixed; top: 0; width: var(--synapse-tree-width); height: 100vh; background: var(--synapse-tree-background); box-shadow: var(--synapse-tree-shadow); z-index: 1000; display: flex; flex-direction: column; transition: left 0.3s ease-in-out, right 0.3s ease-in-out; z-index: 10000; } body.synapseTreeOpen .pageContainer { transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out; } body.synapse-tree-position-right .synapse-editTree { right: calc(-1 * var(--synapse-tree-width)); left: auto; border-left: 1px solid var(--synapse-tree-border); border-right: none; } body.synapse-tree-position-right.synapseTreeOpen .synapse-editTree { right: 0; } body.synapse-tree-position-right.synapseTreeOpen .pageContainer { margin-right: var(--synapse-tree-width); margin-left: 0; } body.synapse-tree-position-right.synapseTreeOpen.hasSiteTools .pageContainer { margin-left: 64px; } body.synapse-tree-position-left .synapse-editTree { left: calc(-1 * var(--synapse-tree-width)); right: auto; border-right: 1px solid var(--synapse-tree-border); border-left: none; } body.synapse-tree-position-left.synapseTreeOpen .synapse-editTree { left: 0; } body.synapse-tree-position-left.synapseTreeOpen .pageContainer { margin-left: var(--synapse-tree-width); margin-right: 0; } .synapse-tree-search-container { display: flex; align-items: center; padding: 8px 12px; gap: 8px; border-bottom: 1px solid var(--synapse-tree-border); } .synapse-tree-search { flex: 1; padding: 8px 12px; border: 1px solid var(--synapse-tree-border); border-radius: 4px 0 0 4px; background: var(--synapse-tree-background); font-size: 14px; color: var(--synapse-tree-text-primary); outline: none; } .synapse-tree-search::placeholder { color: var(--synapse-tree-text-secondary); } .synapse-tree-search:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } .synapse-tree-search-clear { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--synapse-tree-border); border-left: none; border-right: none; background: var(--synapse-tree-background); color: var(--synapse-tree-text-secondary); cursor: pointer; flex-shrink: 0; transition: all 0.2s ease; } .synapse-tree-search-clear:hover { background: #dc3545; color: white; border-color: #dc3545; } .synapse-tree-search-clear i { font-size: 12px; } .synapse-tree-search-toggle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--synapse-tree-border); border-radius: 0 4px 4px 0; border-left: none; background: var(--synapse-tree-background); color: var(--synapse-tree-text-primary); cursor: pointer; flex-shrink: 0; } .synapse-tree-search-toggle:hover { background: var(--synapse-tree-node-hover); } .synapse-tree-search-toggle.active { background: var(--synapse-tree-node-selected); border-color: var(--synapse-tree-node-selected); } .synapse-tree-search-toggle i { font-size: 16px; } .synapse-tree-area { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; padding-bottom: 60px; } .synapse-tree-node { position: relative; } .synapse-tree-node.expanded > .synapse-tree-node-content .synapse-tree-expand { transform: rotate(90deg); } .synapse-tree-node.is-masked > .synapse-tree-node-content { background-color: rgba(255, 193, 7, 0.1); border-left: 3px solid #ffc107; } .synapse-tree-node.has-dependencies > .synapse-tree-node-content::after { content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #17a2b8; border-radius: 50%; } .synapse-tree-node-content { display: flex; align-items: center; padding: 4px 8px; cursor: pointer; position: relative; } .synapse-tree-node-content:hover { background-color: var(--synapse-tree-node-hover); } .synapse-tree-node-content:hover::before, .synapse-tree-node-content:hover::after { background: var(--synapse-tree-indent-line) !important; } .synapse-tree-node-content:active { background-color: var(--synapse-tree-node-selected); } .synapse-tree-indent { display: inline-block; height: 1px; flex-shrink: 0; } .synapse-tree-expand { width: 16px; height: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; color: var(--synapse-tree-icon-color); transition: transform 0.2s ease; font-size: 12px; flex-shrink: 0; } .synapse-tree-expand:hover { background-color: rgba(0, 0, 0, 0.1); border-radius: 2px; } .synapse-tree-expand:before { transition: transform 0.2s ease; } .synapse-tree-spacer { width: 20px; height: 16px; flex-shrink: 0; } .synapse-tree-node-content i { margin-right: 6px; color: var(--synapse-tree-icon-color); font-size: 14px; width: 14px; text-align: center; flex-shrink: 0; } .synapse-tree-label { flex: 1; font-size: inherit; color: var(--synapse-tree-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .synapse-tree-children { position: relative; } .synapse-tree-children::before { content: ""; position: absolute; left: var(--tree-line-left, 20px); top: 0; bottom: 0; width: 1px; background: var(--synapse-tree-indent-line); } .synapse-tree-children .synapse-tree-node { position: relative; } .synapse-tree-children .synapse-tree-node::before { content: ""; position: absolute; left: var(--tree-line-left, 20px); top: 12px; width: 12px; height: 1px; background: var(--synapse-tree-indent-line); } .synapse-tree-children .synapse-tree-node:last-child::after { content: ""; position: absolute; left: var(--tree-line-left, 20px); top: 12px; bottom: 0; width: 1px; background: var(--synapse-tree-background); } .synapse-tree-options { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; border-top: 1px solid var(--synapse-tree-border); background: var(--synapse-tree-background); display: flex; gap: 8px; } .synapse-tree-bottom-button { width: 36px; height: 36px; padding: 8px; border: 1px solid var(--synapse-tree-border); background: var(--synapse-tree-background); color: var(--synapse-tree-text-primary); cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .synapse-tree-bottom-button:hover { background: var(--synapse-tree-node-hover); } .synapse-tree-bottom-button.active { background: var(--synapse-tree-node-selected); border-color: var(--synapse-tree-node-selected); } .synapse-tree-bottom-button i { font-size: 16px; } .synapse-tree-options-popup { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--synapse-tree-background); border: 2px solid var(--synapse-tree-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-bottom: 8px; max-height: 300px; overflow-y: auto; z-index: 1000; color: var(--synapse-tree-text-primary); } body.synapse-tree-theme-light .synapse-tree-options-popup { border-color: #d1d5db; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } body.synapse-tree-theme-dark .synapse-tree-options-popup { border-color: #6b7280; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .synapse-tree-options-section { border-bottom: 1px solid var(--synapse-tree-border); } .synapse-tree-options-section:last-child { border-bottom: none; } .synapse-tree-options-header { padding: 8px 12px; font-weight: bold; font-size: 11px; text-transform: uppercase; color: var(--synapse-tree-text-secondary); background: var(--synapse-tree-node-hover); display: flex; align-items: center; gap: 6px; } .synapse-tree-options-header i { font-size: 12px; } .synapse-tree-options-items { padding: 4px; } .synapse-tree-options-items button { display: block; width: 100%; padding: 6px 12px; border: none; background: transparent; color: var(--synapse-tree-text-primary); cursor: pointer; text-align: left; font-size: 12px; border-radius: 2px; transition: background-color 0.15s ease, color 0.15s ease; } .synapse-tree-options-items button:hover { background: var(--synapse-tree-node-hover); color: var(--synapse-tree-text-primary); } .synapse-tree-options-items button.active { background: var(--synapse-tree-node-selected); font-weight: bold; } body.synapse-tree-theme-light .synapse-tree-options-popup .synapse-tree-options-items button:hover { color: #2d3748 !important; } body.synapse-tree-theme-light .synapse-tree-options-popup .synapse-tree-options-items button.active { color: #2d3748 !important; } body.synapse-tree-theme-light .synapse-editTree .synapse-tree-options-popup .synapse-tree-options-items button:hover { color: var(--synapse-tree-node-hover) !important; --synapse-tree-text-primary: var(--synapse-tree-node-hover) !important; } body.synapse-tree-theme-light .synapse-editTree .synapse-tree-options-popup .synapse-tree-options-items button.active { color: #2d3748; --synapse-tree-text-primary: #2d3748; } body.synapse-tree-theme-light .synapse-tree-options-popup button:hover * { color: inherit !important; } body.synapse-tree-width-narrow { --synapse-tree-width: 300px; } body.synapse-tree-width-medium { --synapse-tree-width: 450px; } body.synapse-tree-width-wide { --synapse-tree-width: 600px; } body.synapse-tree-text-small .synapse-editTree { font-size: 11px; } body.synapse-tree-text-small .synapse-editTree .synapse-tree-node-content { font-size: 11px; } body.synapse-tree-text-small .synapse-editTree .synapse-tree-search { font-size: 11px; } body.synapse-tree-text-small .synapse-editTree .synapse-tree-bottom-button { font-size: 10px; } body.synapse-tree-text-small .synapse-editTree .synapse-tree-bottom-button i { font-size: 14px; } body.synapse-tree-text-small .synapse-editTree .synapse-tree-options-popup { font-size: 10px; } body.synapse-tree-text-medium .synapse-editTree { font-size: 15px; } body.synapse-tree-text-medium .synapse-editTree .synapse-tree-node-content { font-size: 15px; } body.synapse-tree-text-medium .synapse-editTree .synapse-tree-search { font-size: 15px; } body.synapse-tree-text-medium .synapse-editTree .synapse-tree-bottom-button { font-size: 14px; } body.synapse-tree-text-medium .synapse-editTree .synapse-tree-bottom-button i { font-size: 18px; } body.synapse-tree-text-medium .synapse-editTree .synapse-tree-options-popup { font-size: 14px; } body.synapse-tree-text-large .synapse-editTree { font-size: 18px; } body.synapse-tree-text-large .synapse-editTree .synapse-tree-node-content { font-size: 18px; } body.synapse-tree-text-large .synapse-editTree .synapse-tree-search { font-size: 18px; } body.synapse-tree-text-large .synapse-editTree .synapse-tree-bottom-button { font-size: 16px; } body.synapse-tree-text-large .synapse-editTree .synapse-tree-bottom-button i { font-size: 20px; } body.synapse-tree-text-large .synapse-editTree .synapse-tree-options-popup { font-size: 16px; } body.synapse-tree-theme-light .synapse-editTree { --synapse-tree-background: #ffffff; --synapse-tree-border: #e1e5e9; --synapse-tree-text-primary: #2d3748; --synapse-tree-text-secondary: #6c757d; --synapse-tree-icon-color: #4a5568; --synapse-tree-node-hover: #f8f9fa; --synapse-tree-node-selected: #e3f2fd; --synapse-tree-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --synapse-tree-indent-line: #dee2e6; } body.synapse-tree-theme-dark .synapse-editTree { --synapse-tree-background: #2d3748; --synapse-tree-border: #4a5568; --synapse-tree-text-primary: #f7fafc; --synapse-tree-text-secondary: #a0aec0; --synapse-tree-icon-color: #cbd5e0; --synapse-tree-node-hover: #4a5568; --synapse-tree-node-selected: #2b6cb0; --synapse-tree-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --synapse-tree-indent-line: #4a5568; } body.synapse-debug-visibility .synapse-tree-node.hideForDependencies { display: block !important; opacity: 0.6; } body.synapse-debug-visibility .synapse-tree-node.hideForDependencies .synapse-tree-node-content { font-style: italic; } body.synapse-debug-visibility .synapse-tree-node.hideForDependencies .synapse-tree-node-content::after { content: " (hidden)"; color: var(--synapse-tree-icon-color); font-size: 10px; } @media (max-width: 768px) { :root { --synapse-tree-width: 320px; } .synapse-tree-search { padding: 10px 12px; font-size: 16px; } .synapse-tree-label { font-size: 12px; } } @media (prefers-color-scheme: dark) { :root { --synapse-tree-background: #2d3748; --synapse-tree-border: #4a5568; --synapse-tree-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --synapse-tree-node-hover: #4a5568; --synapse-tree-node-selected: #2b6cb0; --synapse-tree-indent-line: #4a5568; --synapse-tree-text-primary: #f7fafc; --synapse-tree-text-secondary: #a0aec0; --synapse-tree-icon-color: #cbd5e0; } } @media (prefers-contrast: high) { :root { --synapse-tree-border: #000000; --synapse-tree-indent-line: #000000; --synapse-tree-text-primary: #000000; --synapse-tree-text-secondary: #666666; } } @media print { .synapse-editTree { display: none !important; } body.synapseTreeOpen .pageContainer { margin-right: 0 !important; margin-left: 0 !important; } } .synapse-tree-hover-highlight { border: 2px solid #007bff !important; border-radius: 4px !important; box-shadow: 0 0 8px rgba(0, 123, 255, 0.3) !important; transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important; position: relative !important; z-index: 10 !important; } body.synapse-tree-theme-dark .synapse-tree-hover-highlight { border-color: #4dabf7 !important; box-shadow: 0 0 8px rgba(77, 171, 247, 0.4) !important; } .synapse-tree-hover-highlight.neuron { outline: none !important; } .synapse-tree-hover-highlight.showForAdminOverride { border: 2px solid #007bff !important; border-radius: 4px !important; box-shadow: 0 0 8px rgba(0, 123, 255, 0.3) !important; outline: 2px dotted #27ae60 !important; outline-offset: 4px !important; } body.synapse-tree-theme-dark .synapse-tree-hover-highlight.showForAdminOverride { border-color: #4dabf7 !important; box-shadow: 0 0 8px rgba(77, 171, 247, 0.4) !important; } body.synapse-debug-visibility .synapse-tree-hover-highlight.showForAdminOverride { border: 2px solid #007bff !important; border-radius: 4px !important; box-shadow: 0 0 8px rgba(0, 123, 255, 0.3) !important; outline: 2px dotted #27ae60 !important; outline-offset: 4px !important; } body.synapse-tree-theme-dark body.synapse-debug-visibility .synapse-tree-hover-highlight.showForAdminOverride { border-color: #4dabf7 !important; box-shadow: 0 0 8px rgba(77, 171, 247, 0.4) !important; } body.synapse-tree-wider-spacing .synapse-tree-node { margin-bottom: 8px; } body.synapse-tree-wider-spacing .synapse-tree-node .synapse-tree-node-content { padding: 8px 12px; line-height: 1.6; } body.synapse-tree-wider-spacing .synapse-tree-node .synapse-tree-children { margin-top: 6px; padding-top: 4px; } body.synapse-tree-wider-spacing .synapse-tree-node .synapse-tree-indent { width: 20px; } .neuron-editor-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--synapse-tree-background); border: 1px solid var(--synapse-tree-border); border-radius: 4px; z-index: 100; display: flex; flex-direction: column; overflow: hidden; } .neuron-editor-header { padding: 12px 16px; border-bottom: 1px solid var(--synapse-tree-border); background: var(--synapse-tree-node-hover); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .neuron-editor-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--synapse-tree-text-primary); } .neuron-editor-header .neuron-editor-close { background: none; border: none; font-size: 24px; color: var(--synapse-tree-text-secondary); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .neuron-editor-header .neuron-editor-close:hover { background: var(--synapse-tree-node-selected); color: var(--synapse-tree-text-primary); } .neuron-editor-content { flex: 1; overflow-y: auto; padding: 16px; } .neuron-editor-dialog-content { min-height: 400px; height: 600px; padding: 0; display: flex; flex-direction: column; } .neuron-editor-dialog-main { height: 100%; display: flex !important; flex-direction: column !important; } .neuron-editor-dialog-main .neuron-editor-tabs-container { flex: 1; display: flex !important; flex-direction: column !important; overflow: hidden; } .neuron-editor-dialog-main .neuron-editor-tabs-container .tabs_tabBar { flex-shrink: 0; } .neuron-editor-dialog-main .neuron-editor-tabs-container .tabs_content { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .neuron-editor-dialog-main .neuron-editor-actions { flex-shrink: 0; padding: 16px; border-top: 1px solid var(--synapse-tree-border); background: var(--synapse-tree-node-hover); justify-content: flex-end; gap: 12px; } .neuron-editor-tab-content { height: 100%; overflow-y: auto !important; padding: 16px; } .synapse-tree-context-menu { position: fixed; background: var(--synapse-tree-background); border: 1px solid var(--synapse-tree-border); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; min-width: 180px; padding: 4px 0; font-size: 14px; } .synapse-tree-context-menu-item { display: flex; align-items: center; padding: 8px 12px; cursor: pointer; color: var(--synapse-tree-text-primary); transition: background-color 0.2s ease; } .synapse-tree-context-menu-item:hover { background: var(--synapse-tree-node-hover); } .synapse-tree-context-menu-item.disabled { color: var(--synapse-tree-text-secondary); cursor: not-allowed; opacity: 0.5; } .synapse-tree-context-menu-item.disabled:hover { background: transparent; } .synapse-tree-context-menu-icon { width: 16px; height: 16px; margin-right: 8px; flex-shrink: 0; color: var(--synapse-tree-icon-color); } .synapse-tree-context-menu-separator { height: 1px; background: var(--synapse-tree-border); margin: 4px 0; } .synapse-tree-node-disabled { opacity: 0.4; pointer-events: none; } .synapse-tree-node-disabled .synapse-tree-node-content { color: var(--synapse-tree-text-secondary); } .synapse-tree-highlight-target { animation: synapseTreeHighlight 2s ease-out; position: relative; z-index: 10; } @keyframes synapseTreeHighlight { 0% { background-color: #007bff; box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.3); transform: scale(1.02); } 25% { background-color: #007bff; box-shadow: 0 0 0 8px rgba(0, 123, 255, 0.2); transform: scale(1.02); } 50% { background-color: rgba(0, 123, 255, 0.1); box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1); transform: scale(1.01); } 100% { background-color: transparent; box-shadow: none; transform: scale(1); } } .synapse-add-content-dialog { padding: 24px; min-height: 300px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .synapse-add-content-dialog .synapse-dialog-tabs { display: flex; border-bottom: 2px solid #e9ecef; margin-bottom: 24px; background: #f8f9fa; border-radius: 8px 8px 0 0; overflow: hidden; } .synapse-add-content-dialog .synapse-dialog-tabs .synapse-tab { padding: 12px 24px; cursor: pointer; border-bottom: 3px solid transparent; color: #6c757d; transition: all 0.3s ease; font-weight: 500; background: transparent; } .synapse-add-content-dialog .synapse-dialog-tabs .synapse-tab:hover { color: #495057; background: #e9ecef; } .synapse-add-content-dialog .synapse-dialog-tabs .synapse-tab.active { color: #007bff; border-bottom-color: #007bff; background: #fff; font-weight: 600; } .synapse-add-content-dialog .synapse-tab-contents .synapse-tab-content { display: none; animation: fadeIn 0.3s ease-in-out; } .synapse-add-content-dialog .synapse-tab-contents .synapse-tab-content.active { display: block; } .synapse-add-content-dialog .synapse { padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #e9ecef; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .synapse-add-content-dialog .synapse .neuron { margin-bottom: 20px; } .synapse-add-content-dialog .synapse .neuron:last-child { margin-bottom: 0; } .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-label-row { margin-bottom: 8px; } .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-label-row .synapse-field-label { font-weight: 600; color: #495057; font-size: 14px; } .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area input, .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area select, .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area textarea { width: 100%; padding: 12px 16px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 14px; transition: all 0.2s ease; background: #fff; } .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area input:focus, .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area select:focus, .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area input::placeholder, .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area select::placeholder, .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area textarea::placeholder { color: #adb5bd; } .synapse-add-content-dialog .synapse .neuron.has-field .synapse-field-input-row .synapse-field-input-area select { cursor: pointer; background-image: url("/site/core/packages/synapse/1.x/css/data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; padding-right: 40px; } .synapse-add-content-dialog .synapse .neuron.has-button { text-align: center; margin-top: 24px; } .synapse-add-content-dialog .synapse .neuron.has-button input[type=button] { padding: 12px 32px; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; min-width: 120px; } .synapse-add-content-dialog .synapse .neuron.has-button input[type=button].btn-containedHighEmphasis { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; border: none; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } .synapse-add-content-dialog .synapse .neuron.has-button input[type=button].btn-containedHighEmphasis:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4); } .synapse-add-content-dialog .synapse .neuron.has-button input[type=button].btn-containedHighEmphasis:active { transform: translateY(0); } .synapse-add-content-dialog .synapse-placeholder { text-align: center; padding: 48px 24px; color: #6c757d; font-style: italic; font-size: 16px; background: #f8f9fa; border-radius: 8px; border: 2px dashed #dee2e6; } .helix-wrapped-dialog.synapse-add-content-dialog .smartBox-titleBar { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; border-radius: 8px 8px 0 0; } .helix-wrapped-dialog.synapse-add-content-dialog .smartBox-titleBar .smartBox-title { font-weight: 600; font-size: 16px; } .helix-wrapped-dialog.synapse-add-content-dialog .smartBox-content { border-radius: 0 0 8px 8px; overflow: hidden; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .neuron-editor-inplace-main { height: 100%; display: flex !important; flex-direction: column !important; } .neuron-editor-inplace-main .neuron-editor-inplace-content { flex: 1; overflow-y: auto !important; padding: 16px; padding-bottom: 0; } .neuron-editor-inplace-main .neuron-editor-actions { flex-shrink: 0; padding: 16px; border-top: 1px solid var(--synapse-tree-border); background: var(--synapse-tree-node-hover); justify-content: flex-end; gap: 12px; } .neuron-editor-group-content { margin-bottom: 16px; } .neuron-editor-group-content:last-child { margin-bottom: 0; } .synapse-tree-node-content { cursor: pointer; } .synapse-tree-node-content:hover { background: var(--synapse-tree-node-hover); } .synapse-tree-node-content:active { background: var(--synapse-tree-node-selected); } .synapse-tree-node.has-missing-variables > .synapse-tree-node-content { color: #dc3545 !important; font-weight: 500; } .synapse-tree-node.has-missing-variables > .synapse-tree-node-content .synapse-tree-label { color: #dc3545 !important; } .synapse-tree-node.has-missing-variables > .synapse-tree-node-content .tree-node-error-icon { color: #dc3545; margin-left: 5px; cursor: pointer; font-size: 14px; } .synapse-tree-node.has-missing-variables > .synapse-tree-node-content .tree-node-error-icon:hover { color: #b02a37; } .synapse-tree-node:not(.expanded):has(.has-missing-variables) { border-left: 3px solid #dc3545; padding-left: 8px; margin-left: -8px; } .synapse-tree-node:not(.expanded):has(.has-missing-variables) > .synapse-tree-node-content .synapse-tree-label { color: #dc3545 !important; font-weight: 500; } .synapse-tree-node.expanded { border-left: none; padding-left: 0; margin-left: 0; } .missing-variables-dialog { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .missing-variables-dialog h3 { color: #dc3545; margin-bottom: 15px; font-size: 18px; } .missing-variables-dialog h4 { color: #495057; margin: 15px 0 8px 0; font-size: 14px; font-weight: 600; } .missing-variables-dialog p { margin-bottom: 12px; color: #6c757d; line-height: 1.4; } .missing-variables-dialog code { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 3px; padding: 2px 6px; font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; font-size: 13px; color: #e83e8c; } .missing-variables-dialog .missing-variable-item { background-color: #fff5f5; border: 1px solid #fed7d7; border-radius: 6px; padding: 15px; margin-bottom: 15px; } .missing-variables-dialog .missing-variable-item h4 { margin-top: 0; color: #c53030; } .missing-variables-dialog .missing-variable-item ul { margin: 8px 0 0 0; padding-left: 20px; } .missing-variables-dialog .missing-variable-item ul li { margin-bottom: 6px; color: #4a5568; } .missing-variables-dialog .missing-variable-item ul li strong { color: #2d3748; } .missing-variables-dialog .missing-variable-item ul li code { background-color: #edf2f7; border-color: #cbd5e0; color: #2b6cb0; } .missing-variables-dialog .missing-equation-item { background-color: #fff5f5; border: 1px solid #fed7d7; border-radius: 6px; padding: 15px; margin-bottom: 15px; } .missing-variables-dialog .missing-equation-item h4 { margin-top: 0; color: #c53030; font-size: 16px; font-weight: 600; } .missing-variables-dialog .missing-equation-item .equation-code { background-color: #f7fafc; border: 1px solid #e2e8f0; border-radius: 4px; padding: 10px; margin: 10px 0; font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; font-size: 13px; color: #2d3748; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } .missing-variables-dialog .missing-equation-item p { margin: 8px 0 0 0; color: #4a5568; } .missing-variables-dialog .missing-equation-item p strong { color: #c53030; font-weight: 600; } .missing-variables-dialog .missing-equation-item p code { background-color: #fed7d7; color: #c53030; padding: 2px 4px; border-radius: 3px; font-size: 12px; font-weight: 500; margin: 0 2px; } .missing-variables-dialog em { color: #718096; font-style: italic; font-size: 14px; } .helix-dialog .synaptic-network[data-network-id=add-dialog-network] { padding: 0; } .helix-dialog .synaptic-network[data-network-id=add-dialog-network] .neuron { margin-bottom: 15px; } .helix-dialog .synaptic-network[data-network-id=add-dialog-network] .neuron:last-child { margin-bottom: 0; } .helix-dialog .synaptic-network[data-network-id=add-dialog-network] .neuron.has-tabs .tab-content { padding-top: 15px; } .helix-dialog .synaptic-network[data-network-id=add-dialog-network] .neuron.has-field .neuron_field-supportText { font-size: 12px; color: #6c757d; margin-top: 5px; } .todo-message { padding: 20px; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; color: #856404; } .todo-message p { margin: 0 0 10px 0; } .todo-message p:last-child { margin-bottom: 0; } .todo-message p strong { color: #533f03; } .existing-fields-list { padding: 10px; } .existing-fields-list .existing-fields-header { margin-bottom: 15px; } .existing-fields-list .existing-fields-header h4 { margin: 0; color: #495057; font-size: 16px; font-weight: 500; } .existing-fields-list .no-fields-message { text-align: center; color: #6c757d; font-style: italic; padding: 20px; } .existing-fields-list .existing-fields-items { max-height: 300px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 4px; } .existing-fields-list .existing-fields-items .existing-field-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid #e9ecef; transition: background-color 0.2s ease; } .existing-fields-list .existing-fields-items .existing-field-item:last-child { border-bottom: none; } .existing-fields-list .existing-fields-items .existing-field-item:hover { background-color: #f8f9fa; } .existing-fields-list .existing-fields-items .existing-field-item .field-info { flex: 1; } .existing-fields-list .existing-fields-items .existing-field-item .field-info .field-name { font-weight: 500; color: #212529; margin-bottom: 2px; } .existing-fields-list .existing-fields-items .existing-field-item .field-info .field-type { font-size: 12px; color: #6c757d; margin-bottom: 2px; } .existing-fields-list .existing-fields-items .existing-field-item .field-info .field-id { font-size: 11px; color: #adb5bd; font-family: monospace; } .existing-fields-list .existing-fields-items .existing-field-item .add-existing-btn { background-color: #0d6efd; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background-color 0.2s ease; } .existing-fields-list .existing-fields-items .existing-field-item .add-existing-btn:hover { background-color: #0b5ed7; } .existing-fields-list .existing-fields-items .existing-field-item .add-existing-btn:focus { outline: none; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .existing-fields-error { padding: 20px; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24; } .existing-fields-error p { margin: 0 0 10px 0; } .existing-fields-error p:last-child { margin-bottom: 0; } .existing-fields-error p strong { color: #491217; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node-content { display: flex; flex-direction: row; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node-content .synapse-tree-expand { order: 10; margin-right: 0; margin-left: 8px; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node-content .synapse-tree-spacer { order: 10; margin-left: 8px; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node-content .synapse-tree-indent { order: 1; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node-content i { order: 2; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node-content .synapse-tree-label { order: 3; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node-content::after { right: 32px; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node.has-dependencies > .synapse-tree-node-content::after { right: 32px; } .synapse-editTree.synapse-tree-open-close-right .synapse-tree-node.has-missing-variables > .synapse-tree-node-content::after { right: 32px; } .synapse-inplace-editing-enabled .synapse-inplace-edit-tab { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.95); border: 1px solid #007bff; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); transition: all 0.2s ease; opacity: 0.9; } .synapse-inplace-editing-enabled .synapse-inplace-edit-tab:hover { opacity: 1; background: #007bff; border-color: #0056b3; transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4); } .synapse-inplace-editing-enabled .synapse-inplace-edit-tab:hover .synapse-inplace-edit-icon { color: white !important; } .synapse-inplace-editing-enabled .synapse-inplace-edit-tab .synapse-inplace-edit-icon { font-size: 12px; color: #007bff; transition: color 0.2s ease; } .synapse-inplace-editing-enabled .synapse-inplace-edit-tab .synapse-inplace-edit-icon::before { display: inline-block; } body:not(.synapse-inplace-editing-enabled) .synapse-inplace-edit-tab { display: none !important; } .synapse-tree-node-highlighted > .synapse-tree-node-content { background: rgba(0, 123, 255, 0.15) !important; border-left: 3px solid #007bff !important; padding-left: 5px !important; animation: pulse-highlight 1.5s ease-in-out infinite; } @keyframes pulse-highlight { 0%, 100% { background: rgba(0, 123, 255, 0.15); } 50% { background: rgba(0, 123, 255, 0.25); } } /** * Editor Dialog Styles * * Styles specific to neuron editor dialogs, including full-height tab handling * and proper overflow management for dialog content. */ .sb-theme-neuron-editor .neuron-editor-dialog-content { height: 100%; } .sb-theme-neuron-editor .neuron.has-tabs { height: 100% !important; display: flex !important; flex-direction: column !important; } .sb-theme-neuron-editor .neuron.has-tabs .tabs_tabBar { flex-shrink: 0; } .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container { flex: 1 !important; height: 0 !important; display: flex !important; flex-direction: column !important; } .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container.hideForPage { display: none !important; } .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container:not(.hideForPage) { display: flex !important; flex-direction: column !important; } .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container > * { flex: none; overflow: auto; } .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container > *:not(.neuron) { overflow-y: auto; overflow-x: hidden; } .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container > *.neuron { overflow: visible; } .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container > *.neuron > .neuron-content, .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container > *.neuron > .container-content, .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container > *.neuron > .field-container { overflow-y: auto; overflow-x: hidden; max-height: 100%; } .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container > *.form-content, .sb-theme-neuron-editor .neuron.has-tabs > .neuron.has-container > *.editor-content { overflow-y: auto; overflow-x: hidden; } .sb-theme-neuron-editor .neuron.has-tabs.tabs-vertical { height: 100% !important; } .sb-theme-neuron-editor .neuron.has-tabs.tabs-vertical .tabs_tabBar { height: 100%; overflow-y: auto; flex-shrink: 0; } .sb-theme-neuron-editor .neuron.has-tabs.tabs-vertical > .neuron.has-container { height: 100% !important; } .sb-theme-neuron-editor .neuron.has-tabs.tabs-vertical > .neuron.has-container > * { height: 100%; } .sb-theme-neuron-editor .missing-variables-dialog { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .sb-theme-neuron-editor .missing-variables-dialog h3 { color: #dc3545; margin-bottom: 15px; font-size: 18px; } .sb-theme-neuron-editor .missing-variables-dialog h4 { color: #495057; margin: 15px 0 8px 0; font-size: 14px; font-weight: 600; } .sb-theme-neuron-editor .missing-variables-dialog p { margin-bottom: 12px; color: #6c757d; line-height: 1.4; } .sb-theme-neuron-editor .missing-variables-dialog code { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 3px; padding: 2px 6px; font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; font-size: 13px; color: #e83e8c; } .sb-theme-neuron-editor .missing-variables-dialog .missing-variable-item { background-color: #fff5f5; border: 1px solid #fed7d7; border-radius: 6px; padding: 15px; margin-bottom: 15px; } .sb-theme-neuron-editor .missing-variables-dialog .missing-variable-item h4 { margin-top: 0; color: #c53030; } .sb-theme-neuron-editor .missing-variables-dialog .missing-variable-item ul { margin: 8px 0 0 0; padding-left: 20px; } .sb-theme-neuron-editor .missing-variables-dialog .missing-variable-item ul li { margin-bottom: 6px; color: #4a5568; } .sb-theme-neuron-editor .missing-variables-dialog .missing-variable-item ul li strong { color: #2d3748; } .sb-theme-neuron-editor .missing-variables-dialog .missing-variable-item ul li code { background-color: #edf2f7; border-color: #cbd5e0; color: #2b6cb0; } .sb-theme-neuron-editor .missing-variables-dialog em { color: #718096; font-style: italic; font-size: 14px; } .dialog-content > .neuron.has-tabs, .modal-content > .neuron.has-tabs, .wrapped-dialog > .neuron.has-tabs { height: 100% !important; display: flex !important; flex-direction: column !important; } .dialog-content > .neuron.has-tabs .tabs_tabBar, .modal-content > .neuron.has-tabs .tabs_tabBar, .wrapped-dialog > .neuron.has-tabs .tabs_tabBar { flex-shrink: 0; } .dialog-content > .neuron.has-tabs > .neuron.has-container, .modal-content > .neuron.has-tabs > .neuron.has-container, .wrapped-dialog > .neuron.has-tabs > .neuron.has-container { flex: 1 !important; height: 0 !important; display: flex !important; flex-direction: column !important; } .dialog-content > .neuron.has-tabs > .neuron.has-container.hideForPage, .modal-content > .neuron.has-tabs > .neuron.has-container.hideForPage, .wrapped-dialog > .neuron.has-tabs > .neuron.has-container.hideForPage { display: none !important; } .dialog-content > .neuron.has-tabs > .neuron.has-container:not(.hideForPage), .modal-content > .neuron.has-tabs > .neuron.has-container:not(.hideForPage), .wrapped-dialog > .neuron.has-tabs > .neuron.has-container:not(.hideForPage) { display: flex !important; flex-direction: column !important; } .dialog-content > .neuron.has-tabs > .neuron.has-container > *, .modal-content > .neuron.has-tabs > .neuron.has-container > *, .wrapped-dialog > .neuron.has-tabs > .neuron.has-container > * { flex: none; overflow: auto; } .dialog-content > .neuron.has-tabs > .neuron.has-container > *:not(.neuron), .modal-content > .neuron.has-tabs > .neuron.has-container > *:not(.neuron), .wrapped-dialog > .neuron.has-tabs > .neuron.has-container > *:not(.neuron) { overflow-y: auto; overflow-x: hidden; } .neuron-editor-dialog.dialog-large .neuron.has-tabs { height: calc(100vh - 200px) !important; min-height: 500px; } .neuron-editor-dialog.dialog-medium .neuron.has-tabs { height: calc(100vh - 250px) !important; min-height: 400px; } .neuron-editor-dialog.dialog-small .neuron.has-tabs { height: calc(100vh - 300px) !important; min-height: 300px; } .neuron-editor-dialog.dialog-fullscreen .neuron.has-tabs { height: calc(100vh - 120px) !important; min-height: 600px; } @media (max-width: 768px) { .neuron-editor-dialog .neuron.has-tabs { height: calc(100vh - 150px) !important; min-height: 300px; } .neuron-editor-dialog .neuron.has-tabs > .neuron.has-container > * { padding: 0.75rem; } } @media (max-width: 480px) { .neuron-editor-dialog .neuron.has-tabs { height: calc(100vh - 120px) !important; min-height: 250px; } .neuron-editor-dialog .neuron.has-tabs > .neuron.has-container > * { padding: 0.5rem; } } .field-name-display { height: auto !important; min-height: auto !important; max-height: none !important; width: auto !important; min-width: auto !important; max-width: none !important; display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 12px !important; margin: 8px 0 !important; background-color: #f8f9fa !important; border: 1px solid #dee2e6 !important; border-radius: 4px !important; font-size: 14px !important; line-height: 1.4 !important; font-family: inherit !important; flex: none !important; flex-grow: 0 !important; flex-shrink: 0 !important; grid-column: auto !important; grid-row: auto !important; } .field-name-display .field-name-label { font-weight: 500 !important; color: #495057 !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.4 !important; flex-shrink: 0 !important; white-space: nowrap !important; } .field-name-display .field-name-value-container { display: flex !important; align-items: center !important; gap: 6px !important; flex: 1 !important; margin: 0 !important; padding: 0 !important; } .field-name-display .field-name-value { background-color: #ffffff !important; border: 1px solid #ced4da !important; border-radius: 3px !important; padding: 4px 8px !important; font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace !important; font-size: 13px !important; color: #495057 !important; margin: 0 !important; line-height: 1.2 !important; word-break: break-all !important; user-select: all !important; flex: 1 !important; height: auto !important; min-height: auto !important; max-height: none !important; } .field-name-display .field-name-copy-btn { background-color: #007bff !important; color: white !important; border: none !important; border-radius: 3px !important; padding: 4px 6px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.2s ease !important; flex-shrink: 0 !important; width: 28px !important; height: 28px !important; margin: 0 !important; font-size: 12px !important; line-height: 1 !important; } .field-name-display .field-name-copy-btn:hover { background-color: #0056b3 !important; } .field-name-display .field-name-copy-btn:active { background-color: #004085 !important; } .field-name-display .field-name-copy-btn:focus { outline: 2px solid #80bdff !important; outline-offset: 1px !important; } .field-name-display .field-name-copy-btn.copied { background-color: #28a745 !important; font-size: 11px !important; font-weight: 500 !important; } .field-name-display .field-name-copy-btn.copied:hover { background-color: #28a745 !important; } .field-name-display .field-name-copy-btn.failed { background-color: #dc3545 !important; font-size: 11px !important; font-weight: 500 !important; } .field-name-display .field-name-copy-btn.failed:hover { background-color: #dc3545 !important; } .field-name-display .field-name-copy-btn .snps-icon { width: 14px !important; height: 14px !important; } .neuron.has-content .field-name-display, .neuron.has-container .field-name-display { position: static !important; transform: none !important; overflow: visible !important; display: flex !important; } @media (max-width: 768px) { .field-name-display { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .field-name-display .field-name-value-container { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .field-name-display .field-name-copy-btn { align-self: flex-end !important; width: auto !important; min-width: 60px !important; padding: 6px 12px !important; } } .import-branch-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10001; } .import-branch-dialog .import-dialog-content { background: var(--color-forms-surface-default); padding: var(--spacing-600); border-radius: var(--forms-border-radius-medium); max-width: 600px; max-height: 80vh; overflow-y: auto; box-shadow: 0 var(--spacing-100) var(--spacing-500) rgba(0, 0, 0, 0.3); } .import-branch-dialog .import-dialog-content h3 { margin: 0 0 var(--spacing-400) 0; color: var(--color-forms-text-label); font-size: var(--forms-font-size-section); } .import-branch-dialog .import-dialog-content p { margin: 0 0 var(--spacing-300) 0; color: var(--color-forms-text-supporting); font-size: var(--forms-font-size-input); } .import-branch-dialog .import-dialog-content .import-tree-container { margin: 0 0 var(--spacing-500) 0; max-height: 300px; overflow-y: auto; background: var(--color-forms-surface-read-only); padding: var(--spacing-300); border-radius: var(--forms-border-radius-small); font-family: monospace; font-size: var(--forms-font-size-help); } .import-branch-dialog .import-dialog-content .import-tree-container .import-tree-node { padding: var(--spacing-50) 0; color: var(--color-forms-text-input); } .import-branch-dialog .import-dialog-content .import-tree-container .import-tree-node.is-duplicate { color: var(--color-forms-button-danger-bg); font-weight: 600; } .import-branch-dialog .import-dialog-content .import-tree-container .import-tree-node .tree-connector { color: var(--color-forms-text-default); } .import-branch-dialog .import-dialog-content .import-question { margin: 0 0 var(--spacing-400) 0; font-weight: 600; color: var(--color-forms-text-label); font-size: var(--forms-font-size-input); } .import-branch-dialog .import-dialog-content .import-button-container { display: flex; gap: var(--spacing-200); flex-direction: column; } .import-branch-dialog .import-dialog-content .import-button-container button { padding: var(--forms-padding-button-vertical) var(--forms-padding-button-horizontal); font-size: var(--forms-font-size-button); border-radius: var(--forms-border-radius-small); border: var(--forms-border-width-default) solid; cursor: pointer; transition: all 0.2s ease; font-family: inherit; } .import-branch-dialog .import-dialog-content .import-button-container button.btn-primary { background: var(--color-forms-button-primary-bg); color: var(--color-forms-button-primary-text); border-color: var(--color-forms-button-primary-bg); } .import-branch-dialog .import-dialog-content .import-button-container button.btn-primary:hover { background: var(--color-forms-button-primary-bg-hover); border-color: var(--color-forms-button-primary-bg-hover); } .import-branch-dialog .import-dialog-content .import-button-container button.btn-primary:active { background: var(--color-forms-button-primary-bg-active); border-color: var(--color-forms-button-primary-bg-active); } .import-branch-dialog .import-dialog-content .import-button-container button.btn-secondary { background: var(--color-forms-button-secondary-bg); color: var(--color-forms-button-secondary-text); border-color: var(--color-forms-button-secondary-bg); } .import-branch-dialog .import-dialog-content .import-button-container button.btn-secondary:hover { background: var(--color-forms-button-secondary-bg-hover); border-color: var(--color-forms-button-secondary-bg-hover); } .import-branch-dialog .import-dialog-content .import-button-container button.btn-secondary:active { background: var(--color-forms-button-secondary-bg-active); border-color: var(--color-forms-button-secondary-bg-active); } .import-branch-dialog .import-dialog-content .import-button-container button.btn-danger { background: var(--color-forms-button-danger-bg); color: var(--color-forms-button-danger-text); border-color: var(--color-forms-button-danger-bg); } .import-branch-dialog .import-dialog-content .import-button-container button.btn-danger:hover { background: var(--color-forms-button-danger-bg-hover); border-color: var(--color-forms-button-danger-bg-hover); } .import-branch-dialog .import-dialog-content .import-button-container button.btn-danger:active { background: var(--color-forms-button-danger-bg-active); border-color: var(--color-forms-button-danger-bg-active); } .sb-window-content .neuron-editor-save, .sb-window-content .neuron-editor-cancel { display: inline-block !important; visibility: visible !important; } .sb-window-content .neuron.has-tabs > .neuron.has-container > * { flex: none !important; height: auto !important; } .sb-window-content .neuron.has-container.collapsed .neuron_label { font-size: inherit !important; line-height: inherit !important; } .tree-area { position: relative; } .neuron-editor-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; border: 1px solid #007bff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); z-index: 1000; display: flex; flex-direction: column; } .neuron-editor-overlay .neuron-editor-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f8f9fa; border-bottom: 1px solid #dee2e6; border-radius: 3px 3px 0 0; flex-shrink: 0; } .neuron-editor-overlay .neuron-editor-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: #495057; } .neuron-editor-overlay .neuron-editor-header .neuron-editor-close { background: none; border: none; font-size: 18px; font-weight: bold; color: #6c757d; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 3px; } .neuron-editor-overlay .neuron-editor-header .neuron-editor-close:hover { background-color: #e9ecef; color: #495057; } .neuron-editor-overlay .neuron-editor-content { flex: 1; overflow: auto; padding: 12px; } .neuron-editor-overlay .neuron-editor-content .neuron.has-tabs > .neuron.has-container > * { flex: none !important; height: auto !important; } .neuron-editor-overlay .neuron-editor-content .neuron { margin-bottom: 8px !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-container { padding: 8px !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-container .neuron_label { margin-bottom: 6px !important; font-size: 14px !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-field .neuron_inputRow { margin-bottom: 6px !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-field .neuron_label { margin-bottom: 4px !important; font-size: 13px !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-tabs, .neuron-editor-overlay .neuron-editor-content .neuron.has-container { align-items: flex-start !important; height: fit-content; } .neuron-editor-overlay .neuron-editor-content .neuron.has-tabs > *, .neuron-editor-overlay .neuron-editor-content .neuron.has-container > * { align-self: flex-start !important; width: 100% !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-container.collapsed { height: auto !important; flex: none !important; align-items: flex-start !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-container.collapsed .neuron_label { height: auto !important; flex: none !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-tabs > .neuron.has-container { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; height: auto !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-tabs > .neuron.has-container > * { flex: none !important; height: auto !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-tabs { height: auto !important; } .neuron-editor-overlay .neuron-editor-content .neuron.has-tabs > * { height: auto !important; flex: none !important; } .neuron-editor-overlay .neuron-editor-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; background: #f8f9fa; border-top: 1px solid #dee2e6; border-radius: 0 0 3px 3px; flex-shrink: 0; } .neuron-editor-overlay .neuron-editor-footer .atom_button { padding: 6px 12px; font-size: 13px; border-radius: 3px; border: 1px solid #ced4da; background: white; color: #495057; cursor: pointer; transition: all 0.2s ease; } .neuron-editor-overlay .neuron-editor-footer .atom_button:hover { background: #e9ecef !important; border-color: #adb5bd !important; } .neuron-editor-overlay .neuron-editor-footer .atom_button.mod_creative { background: #007bff; color: white; border-color: #007bff; } .neuron-editor-overlay .neuron-editor-footer .atom_button.mod_creative:hover { background: #0056b3; border-color: #0056b3; } /** * Template Neuron Styles * * Styles for template neurons in repeat containers. * Template neurons are hidden from view but maintain their structure * for cloning to create repeat instances. */ /* Hide template neurons from display */ .neuron-template { display: none !important; visibility: hidden !important; /* Ensure they don't take up space */ position: absolute !important; left: -9999px !important; top: -9999px !important; /* Prevent any interaction */ pointer-events: none !important; user-select: none !important; } /* In admin/editor mode, show template neurons with special styling */ .synapse-admin-mode .neuron-template, .synapse-editor-mode .neuron-template { display: block !important; visibility: visible !important; position: relative !important; left: auto !important; top: auto !important; pointer-events: auto !important; user-select: auto !important; /* Special styling to indicate it's a template */ border: 2px dashed #007cba !important; background-color: rgba(0, 124, 186, 0.1) !important; opacity: 0.7; /* Add template indicator */ } .synapse-admin-mode .neuron-template::before, .synapse-editor-mode .neuron-template::before { content: "TEMPLATE"; position: absolute; top: -2px; right: -2px; background: #007cba; color: white; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 0 0 0 4px; z-index: 1000; } /* Ensure template neurons don't interfere with layout calculations */ .has-repeat .neuron-template { /* Remove from normal document flow */ position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; } /** * Editor Styles Index * * Main entry point for all editor-related styles. * Imports all editor component stylesheets. */ .neuron.hasField.has-errors .neuron_inputRow { border-color: #dc3545 !important; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important; } .neuron.hasField.has-errors .neuron_inputRow:focus-within { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important; } .neuron.hasField.has-errors .neuron_inputRow .neuron_input { border-color: #dc3545 !important; } .neuron.hasField.has-errors .neuron_inputRow .neuron_input:focus { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important; } .neuron.has-field.has-errors .synapse-field-input-row .synapse-field-input-area input, .neuron.has-field.has-errors .synapse-field-input-row .synapse-field-input-area select, .neuron.has-field.has-errors .synapse-field-input-row .synapse-field-input-area textarea { border-color: #dc3545 !important; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important; } .neuron.has-field.has-errors .synapse-field-input-row .synapse-field-input-area input:focus, .neuron.has-field.has-errors .synapse-field-input-row .synapse-field-input-area select:focus, .neuron.has-field.has-errors .synapse-field-input-row .synapse-field-input-area textarea:focus { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important; } .neuron.hasField.has-errors .supportTextRow { display: block !important; } .neuron.hasField.has-errors .supportTextRow .support_text { color: #dc3545 !important; font-size: 12px; line-height: 1.4; font-weight: 500; } .neuron.hasField.has-errors .supportTextRow .support_text_icon { color: #dc3545 !important; font-size: 14px; margin-right: 6px; } .neuron.hasField.has-errors .supportTextRow .support_text_icon::before { content: "⚠"; font-weight: bold; } .neuron.hasField.has-errors .supportTextRow.error-generated { margin-top: 4px; padding: 4px 0; display: flex !important; align-items: center; } .neuron.hasField.has-errors .supportTextRow.error-generated .support_text_icon { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } .neuron.hasField.has-errors .supportTextRow.error-generated .support_text { flex: 1; margin: 0; padding: 0; } .synapse-error-message { display: flex; align-items: center; gap: 6px; color: #dc3545; font-size: 12px; line-height: 1.4; margin-top: 4px; padding: 4px 0; } .synapse-error-message .synapse-icon { flex-shrink: 0; width: 14px; height: 14px; } .synapse-error-message .synapse-icon.synapse-icon-alert::before { content: "⚠"; font-size: 12px; color: #dc3545; } .synapse-error-message span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .synapse-field-support-text-row { margin-top: 4px; min-height: 0; } .synapse-field-support-text-row:empty { display: none !important; } .neuron.has-field.has-errors .synapse-field-input-row .synapse-field-input-area { position: relative; } .neuron.has-field.has-errors .synapse-field-input-row .synapse-field-input-area::after { content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #dc3545; border-radius: 50%; opacity: 0.8; pointer-events: none; } @keyframes errorPulse { 0% { box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1); } 50% { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2); } 100% { box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1); } } .neuron.has-errors .synapse-field-input-area input, .neuron.has-errors .synapse-field-input-area select, .neuron.has-errors .synapse-field-input-area textarea, .neuron.has-errors .synapse-input-area input, .neuron.has-errors .synapse-input-area select, .neuron.has-errors .synapse-input-area textarea { animation: errorPulse 0.5s ease-in-out; } @media (prefers-color-scheme: dark) { .neuron.has-errors .synapse-field-input-area input, .neuron.has-errors .synapse-field-input-area select, .neuron.has-errors .synapse-field-input-area textarea { border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15) !important; } .neuron.has-errors .synapse-field-input-area input:focus, .neuron.has-errors .synapse-field-input-area select:focus, .neuron.has-errors .synapse-field-input-area textarea:focus { border-color: #e74c3c !important; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.25) !important; } .synapse-error-message { color: #e74c3c; } .synapse-error-message .synapse-icon.synapse-icon-alert::before { color: #e74c3c; } } @media (prefers-contrast: high) { .neuron.has-errors .synapse-field-input-area input, .neuron.has-errors .synapse-field-input-area select, .neuron.has-errors .synapse-field-input-area textarea { border-color: #ff0000 !important; border-width: 2px !important; box-shadow: none !important; } .synapse-error-message { color: #ff0000; font-weight: bold; } .synapse-error-message .synapse-icon.synapse-icon-alert::before { color: #ff0000; font-weight: bold; } } @media (prefers-reduced-motion: reduce) { .neuron.has-errors .synapse-field-input-area input, .neuron.has-errors .synapse-field-input-area select, .neuron.has-errors .synapse-field-input-area textarea, .neuron.has-errors .synapse-input-area input, .neuron.has-errors .synapse-input-area select, .neuron.has-errors .synapse-input-area textarea { animation: none; } } /** * Synapse Save Indicator Component * * Notification that appears at the top-center of the screen * to show save progress and status */ .synapse-save-indicator { position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); background: #fff; border: 1px solid #ddd; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 10px 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; max-width: 400px; width: auto; text-align: left; transition: transform 0.3s ease-out; pointer-events: none; opacity: 1 !important; visibility: visible !important; white-space: nowrap; } .synapse-save-indicator-content { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; box-sizing: border-box; } .synapse-save-indicator-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; } .synapse-save-indicator-title { font-weight: 600; margin: 0; line-height: 1.2; } .synapse-save-indicator-message { font-size: 12px; color: #666; margin: 0; line-height: 1.2; margin-top: 2px; } .synapse-save-indicator-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .synapse-save-indicator-saving { border-color: #007cba !important; background-color: #e7f3ff !important; } .synapse-save-indicator-saving .synapse-save-indicator-content { background-color: #e7f3ff !important; color: #333333 !important; border: 1px solid #007cba !important; } .synapse-save-indicator-saving .synapse-save-indicator-title { color: #333333 !important; } .synapse-save-indicator-saving .synapse-save-indicator-message { color: #666666 !important; } .synapse-save-indicator-saving .synapse-save-indicator-icon { color: #007cba !important; } .synapse-save-indicator-error { border-color: #dc3545 !important; background-color: #ffeaea !important; } .synapse-save-indicator-error .synapse-save-indicator-content { background-color: #ffeaea !important; color: #333333 !important; border: 1px solid #dc3545 !important; } .synapse-save-indicator-error .synapse-save-indicator-title { color: #dc3545 !important; } .synapse-save-indicator-error .synapse-save-indicator-message { color: #666666 !important; } .synapse-save-indicator-error .synapse-save-indicator-icon { color: #dc3545 !important; } .synapse-save-indicator-complete { border-color: #28a745 !important; background-color: #f0fff4 !important; } .synapse-save-indicator-complete .synapse-save-indicator-content { background-color: #f0fff4 !important; color: #333333 !important; border: 1px solid #28a745 !important; } .synapse-save-indicator-complete .synapse-save-indicator-title { color: #28a745 !important; } .synapse-save-indicator-complete .synapse-save-indicator-message { color: #666666 !important; } .synapse-save-indicator-complete .synapse-save-indicator-icon { color: #28a745 !important; } .synapse-save-indicator-visible { transform: translateX(-50%) translateY(0) !important; } .synapse-save-indicator-hidden { transform: translateX(-50%) translateY(-100%) !important; } .synapse-save-indicator-spinner { width: 16px; height: 16px; border: 2px solid #007cba; border-top: 2px solid transparent; border-radius: 50%; animation: synapse-save-indicator-spin 1s linear infinite; } .synapse-save-indicator-error-icon { width: 16px; height: 16px; background: #dc3545; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px; line-height: 1; } .synapse-save-indicator-success-icon { width: 16px; height: 16px; background: #28a745; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 10px; line-height: 1; } @keyframes synapse-save-indicator-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body .synapse-save-indicator { opacity: 1 !important; visibility: visible !important; display: block !important; } html body .synapse-save-indicator.synapse-save-indicator { opacity: 1 !important; visibility: visible !important; display: block !important; } /* Neuron Styling */ /* Note that most neurons/components layer. This means that for field base styles it goes in has/field and uses hasField as the base class This lets us add on css as neurons inherit others ONLY use the neurons folder if it is explicit for a type of neuron that you do not plan to inherit */ /* Load variable system - MUST be first */ /* For Type styling use the "has" folder */ /* For specific Neuron types, add them inside the neurons folder */ /* For visibility management (dependencies, admin override, etc.) */ /* For editor functionality (tree view, etc.) */ /* For validation error styling */ /* For save indicator component */ /* For Helix dialog theme */ /** * Synapse Theme for Helix Wrapped Dialogs * * A clean, modern dialog theme that uses Synapse CSS variables for consistent styling * across all dialog components including headers, footers, buttons, and borders. * * Usage: * dialog.addTheme('synapse'); * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ .sb-theme-synapse.sb-attachedToBody { z-index: 1000; } .sb-theme-synapse .sb-window-overlay { background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); } .sb-theme-synapse .sb-window-box { background-color: var(--color-forms-surface-default); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-large); box-shadow: 0 var(--spacing-400) var(--spacing-800) rgba(0, 0, 0, 0.15); } .sb-theme-synapse .sb-window-title-bar { padding: var(--spacing-400) var(--spacing-500); border-bottom: var(--forms-border-width-default) solid var(--color-forms-border-default); background-color: var(--color-forms-surface-subtle); } .sb-theme-synapse .sb-window-title-bar .sb-window-title { font-family: var(--font-family-primary); font-size: var(--font-size-500); font-weight: var(--font-weight-semibold); color: var(--color-forms-text-default); } .sb-theme-synapse .sb-window-title-bar .sb-window-control-bar .sb-button.close { padding: var(--spacing-100); border-radius: var(--border-radius-100); transition: background-color 0.2s ease, transform 0.2s ease; } .sb-theme-synapse .sb-window-title-bar .sb-window-control-bar .sb-button.close:hover { background-color: var(--color-forms-surface-hover); } .sb-theme-synapse .sb-window-title-bar .sb-window-control-bar .sb-button.close .sb-icon { font-size: var(--font-size-500); color: var(--color-forms-text-default); transition: color 0.2s ease, transform 0.3s ease; } .sb-theme-synapse .sb-window-title-bar .sb-window-control-bar .sb-button.close .sb-icon:hover { color: var(--color-forms-text-error); transform: rotate(90deg); } .sb-theme-synapse .sb-window-title-bar .sb-window-control-bar .sb-button.close .sb-icon:before { font-family: "Eco"; content: "\f02a"; } .sb-theme-synapse:not(.sb-title-bar) .sb-window-content { padding-top: var(--spacing-600); } .sb-theme-synapse header.sb-window-header { padding: var(--spacing-500) var(--spacing-600); color: var(--color-forms-text-default); font-size: var(--font-size-600); font-weight: var(--font-weight-semibold); line-height: 1.3; text-align: center; border-bottom: var(--forms-border-width-default) solid var(--color-forms-border-default); background-color: var(--color-forms-surface-subtle); } .sb-theme-synapse:not(.sb-title-bar) header.sb-window-header { padding-top: var(--spacing-600); } .sb-theme-synapse .sb-window-content { padding: var(--spacing-500) var(--spacing-600); color: var(--color-forms-text-default); font-size: var(--font-size-400); line-height: 1.5; } .sb-theme-synapse .sb-window-content .neuron.has-tabs { margin: 0; } .sb-theme-synapse footer.sb-window-footer { padding: var(--spacing-400) var(--spacing-500); border-top: var(--forms-border-width-default) solid var(--color-forms-border-default); background-color: var(--color-forms-surface-subtle); display: flex; justify-content: flex-end; gap: var(--spacing-300); } .sb-theme-synapse footer.sb-window-footer > *:only-child { margin-left: auto; } .sb-theme-synapse footer.sb-window-footer .atom_button, .sb-theme-synapse footer.sb-window-footer button, .sb-theme-synapse .sb-window-content .atom_button, .sb-theme-synapse .sb-window-content button { padding: var(--forms-padding-button-vertical) var(--forms-padding-button-horizontal); border: var(--forms-border-width-default) solid var(--color-forms-border-default); border-radius: var(--forms-border-radius-default); background-color: var(--color-forms-surface-default); color: var(--color-forms-text-default); font-size: var(--forms-font-size-input); font-weight: var(--font-weight-medium); cursor: pointer; transition: all 0.2s ease; min-width: var(--forms-button-min-width-medium); } .sb-theme-synapse footer.sb-window-footer .atom_button:hover, .sb-theme-synapse footer.sb-window-footer button:hover, .sb-theme-synapse .sb-window-content .atom_button:hover, .sb-theme-synapse .sb-window-content button:hover { background-color: var(--color-forms-surface-hover); border-color: var(--color-forms-border-hover); } .sb-theme-synapse footer.sb-window-footer .atom_button:active, .sb-theme-synapse footer.sb-window-footer button:active, .sb-theme-synapse .sb-window-content .atom_button:active, .sb-theme-synapse .sb-window-content button:active { transform: translateY(1px); } .sb-theme-synapse footer.sb-window-footer .atom_button.mod_creative, .sb-theme-synapse footer.sb-window-footer .atom_button.--affirm, .sb-theme-synapse footer.sb-window-footer button.mod_creative, .sb-theme-synapse footer.sb-window-footer button.--affirm, .sb-theme-synapse .sb-window-content .atom_button.mod_creative, .sb-theme-synapse .sb-window-content .atom_button.--affirm, .sb-theme-synapse .sb-window-content button.mod_creative, .sb-theme-synapse .sb-window-content button.--affirm { background-color: var(--color-forms-button-success-bg); color: var(--color-forms-button-success-text); border-color: var(--color-forms-button-success-bg); } .sb-theme-synapse footer.sb-window-footer .atom_button.mod_creative:hover, .sb-theme-synapse footer.sb-window-footer .atom_button.--affirm:hover, .sb-theme-synapse footer.sb-window-footer button.mod_creative:hover, .sb-theme-synapse footer.sb-window-footer button.--affirm:hover, .sb-theme-synapse .sb-window-content .atom_button.mod_creative:hover, .sb-theme-synapse .sb-window-content .atom_button.--affirm:hover, .sb-theme-synapse .sb-window-content button.mod_creative:hover, .sb-theme-synapse .sb-window-content button.--affirm:hover { background-color: var(--color-forms-button-success-bg-hover); border-color: var(--color-forms-button-success-bg-hover); } .sb-theme-synapse footer.sb-window-footer .atom_button.mod_destructive, .sb-theme-synapse footer.sb-window-footer .atom_button.--deny, .sb-theme-synapse footer.sb-window-footer button.mod_destructive, .sb-theme-synapse footer.sb-window-footer button.--deny, .sb-theme-synapse .sb-window-content .atom_button.mod_destructive, .sb-theme-synapse .sb-window-content .atom_button.--deny, .sb-theme-synapse .sb-window-content button.mod_destructive, .sb-theme-synapse .sb-window-content button.--deny { background-color: var(--color-forms-button-danger-bg); color: var(--color-forms-button-danger-text); border-color: var(--color-forms-button-danger-bg); } .sb-theme-synapse footer.sb-window-footer .atom_button.mod_destructive:hover, .sb-theme-synapse footer.sb-window-footer .atom_button.--deny:hover, .sb-theme-synapse footer.sb-window-footer button.mod_destructive:hover, .sb-theme-synapse footer.sb-window-footer button.--deny:hover, .sb-theme-synapse .sb-window-content .atom_button.mod_destructive:hover, .sb-theme-synapse .sb-window-content .atom_button.--deny:hover, .sb-theme-synapse .sb-window-content button.mod_destructive:hover, .sb-theme-synapse .sb-window-content button.--deny:hover { background-color: var(--color-forms-button-danger-bg-hover); border-color: var(--color-forms-button-danger-bg-hover); } .sb-theme-synapse footer.sb-window-footer .atom_button:disabled, .sb-theme-synapse footer.sb-window-footer .atom_button.mod_disabled, .sb-theme-synapse footer.sb-window-footer button:disabled, .sb-theme-synapse footer.sb-window-footer button.mod_disabled, .sb-theme-synapse .sb-window-content .atom_button:disabled, .sb-theme-synapse .sb-window-content .atom_button.mod_disabled, .sb-theme-synapse .sb-window-content button:disabled, .sb-theme-synapse .sb-window-content button.mod_disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .sb-theme-synapse .molecule_spinner { min-height: var(--scale-1200); } .sb-theme-synapse.sb-processing--active .sb-window-box { min-height: var(--scale-1200); } .sb-theme-synapse.sb-active-window .sb-window-box { box-shadow: 0 var(--spacing-600) var(--spacing-1000) rgba(0, 0, 0, 0.2); } .neuron.neuron_notYetViewed { /* Temporary while we work out the real styling */ min-height: 55px; } .clickable { cursor: pointer; } /*# scssSourceMappingURL=synapse.css.map */ /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/synapse/1.x/css/icons/embedded-woff.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/cc256cb8a63c62036ee8009abee90a23.min.css */ @font-face{font-family:Synapse;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAACBUAA0AAAAANfwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAgOAAAABsAAAAcouVaXk9TLzIAAAGkAAAARQAAAGAQ+ZHbY21hcAAAAogAAABeAAABcuDj69NjdnQgAAAC6AAAAAQAAAAEACECf2dhc3AAACAwAAAACAAAAAj//wADZ2x5ZgAAA6AAABpLAAArZAb4NhhoZWFkAAABMAAAADQAAAA2LirEBGhoZWEAAAFkAAAAIAAAACQIngXLaG10eAAAAewAAACaAAABVjgDFXhsb2NhAAAC7AAAALIAAACyu52wnm1heHAAAAGEAAAAIAAAACAApgDRbmFtZQAAHewAAAEAAAABy/kxQC9wb3N0AAAe7AAAAUEAAANqTdZgbXjaY2BkYGAA4oqJF4/G89t8ZeBm/gAUYXgq6qAOpTX/f/2fzvKGOQHI5WBgAokCAGbqDLp42mNgZGBgTmCYwBDN8ub/1/+/Wd4wAEVQQDAAqEgHcgABAAAAWACgAAwAAAAAAAIAAAABAAEAAABAAC4AAAAAeNpjYGG+xziBgZWBgamf6SADA0MvhGZ8zGDEyAIUZWBlZoABRgEGNNDAwPAhhDnhfwFDNHMCwwQglxFJVoGBEQBmTgttAAAAeNpjzGFQZAACxgAGBuYPKDgUiOugOBQNM2CRWw7FoSwWQPkVQCwBxVA1LA0MDCAM1TcPLPYGxazLIBqoXwhIrwbiSOYEsLwmhGZUBbM/MAij4CKEHXBcxMCEpF4Taj4HVH492K0rGPiBNFAdw0GofSAcDVYL1g8JC5a8/1+ZP/z/gxw+jD8gGMxfAaZ5gSGpycADCk0AKP5cbgAAeNrdTDkOgDAMc0lbJqTMqAMvQgw8g2+ze2MMoVRI8AQc5bAdGYDg7oKAC5uzUHnE4lu9pDoDJiaOnLmaPQrYs3BxReywXbMmjSot7YWQ0aL87nzE7wOQ8G+cGesSeAAAACECfwAAACoAKgAqACoAKgAqAGwApADYAQgBMAGCAcQB/gIiAlACigKyAvwDIgNcA74EAAReBKYE3AUYBTwFcAXSBigGVAbMBv4HQAdcB34H1Ag0CGYI0AkCCXoJuAnkCkAKmAr0C0wLrAvgC/oMJgxKDLoNAA0uDYINsA4+DngOkA6oDwYPbA+cD7QPzBAAECAQpBE2EZIRzhIMEpoS6hL4EwYTFBMiE/IUHBR+FOwVWBWEFbIAAHjanVoLeBTVvZ//mezOZrO72edssoRkH9mdTQgJ2dmZSVhIIIiB8JAsbBGQJAQoSlEpF3kEWCy1PvDRXFSutSa2tBqhrUKgVftVW3vbcG3tJxprtcXv9uFnK239bD/bpt6dyf2f2d1kE9B6b5I57/M//znn//j9z4QhTIBhoJZ8hWEZjqk/A0zDvGGuiPlz7IzRcHHeMEuwyJxhabOBNg9zRsjMGwbaLjoCDkF0hAJQ/Ifz58lX1J4A6WKQUmr8R+yXWTNTwniZMNJXvJyXEzhBEZSI38vbOaNfiNgViCmyFI+EgpzR4+ZhbEdiR/5vMfTu6+vbpw1iCjV3bd76kzvu2rp5BE4UjMnk+vfhWPX2zVvvuuMnWzffdfcIw1Ae0uN/ZneR3yAPpUwV8pBnwKt4IeAISIEY73G4jaFAMCI54jIRH0o8lP/TTKRD/Q7pqG5srFa/gylsK+xdRDpSuY5qOgjXI0yaYdnrcD2XvlqM9/KcV8RFJcEo1IMUl71B+pZijL4y9O9+GKDNErzQesHSse2WgYFbkjfckOzcvp38ZuCWbR0WbA9a2gAe3n3LQOoztKMz+Rl9nfzeOpiZDOOcvk7cIIU8IY/oESVRUj8cApgb9GaSmeplWw49ASuT6XQyzZqfOLRlWTW2eoNzAYY+XENb00lmGn3PlekHPJfRfUkbvozo40lKsAjp/RjplTBuJsjEGBn3xm30hOItLG5DkJbkGM/gtkyKgksWY17e4+aMoaAQkeLgCUnk0XTSFw77xKvE5KZ7NmmmkbvzQhE98OS3+g4e3PfU6f198FISnpN3zQo3+StC3kBjY2Bxb6/2q5G8cIBw8GDft5480Ne3//RT2qlUKisr+Xe24lsL9PSyy+tCKrtEKdQKMr580MiJLeDljaVgnAliHMZw4bwQ3plM3haOAnTf1w1Jdmu0DLxiY5I140pnckLapzYlfxqtjbd3dbXLdYK3vUwSF/HLszww4zez77PdDN0pPFmmQE/CRg5/vRBhZQV/BeAhAl8/9sADx7TrMIUtw3v348Lkml0PZUvqmV1sd673GI5shf17hx/aRa7pzjybLapnuqnM5nSERallwo5AOUzTCnZmoRrMadPV4tE54bzsRxqysp+jY2DKdG0HL3ABh1hASAx4AuBMHIHrE9rGzIT+zAnD17SNcCjXkYaV2nCecqpQHkuQdmWedlg05g9Hkb1cJIRVO+9X5IkVoC/J7s0ezN7h5PKFteJ9PWg9+M09E2sNnd2TPRXcsMpFNrZns3ZpZHPPFB0ooftSeBJOv2yP+I12aC+wT4PAj4zgZDzrQoM0km2mOjDEeNml5BnGwvCMn6nDvfYEpLiiy7mXBznmrQRjMCKztFmIoBIATdxeHtUizi5Vu+bvHVjQ0b6wVWuO3dU4B3qP9sJ65PPax69NQWv58nL8weTBdFqKrnA6amfB86LYeLS396i2cPbssqpgsAq+6vPhmLKy8uX6O+Z5MqO8FfJDKCMKssTTdf/tlhu27dl9iq43h668I5VaNruhoR7cSLsR18jpeHa/WLS1M6lHCYckkXykpXfR3kAy+csrG/lzyeQDGej7COsOL6ey+oILx9gypgKtylXUqpSCDfLilkADPJMKM6opvkk4QBfHvvkQj8xCPfY4lBYwxLGJ6rLHLQZiMup4Ucz3eFkyoj4S7+iIn4t3QCzeseOq8mJVhtN+Xvse7/fz53h/f3kneaJSfcQr2h43V5ItfBxzWBMMvFQpdMRJBZ3t7Iivl5zt6+mUappo/jOVwnXuMudLFrO73PGSDc+AvsgT+A5uKhNQoC4T/LOO6YyjC0Fm2Sc64uqaPJt98Y4luMLuHH9+nnyT9xOztpsOyPOjLYB7JrhR38Y0v49sGfJAveSiqVyIkwxMLuxxG2eBnlCuQjpryK+UZ1rEOWXdi7S6Rd3di+C1Rd1LpLBWF5akMLwWlpaYTSNmU7XJPGIyFxTJnsnx3eq7dGRuFgQuG0yLzGW8N3wy3nObme3/WD61OroUvPYvudP5Mhf6kaweMIAog/lILSA/1dbD49rBj0A6LcmPVAHmShgLXT46/pD0sZoHLydPncK/O6+8KJlLOz9uYV1mi24lFxAtom2sjsnUi7uL7PqG2un2kq++d/Lkeyc10+iDcPrB0dEHtVUPLjlJ2yqhdnRUe310Qn8pHco/IiZGnxvR6TiprFciTuDEWLVOn48V3aoTGtWJ3n1y75uLVq5c9OZe7Z86ZVCR7CiS1wLvnRSPP3lc1JtPotdIj7+Hvum3ui2fgd59Pu4VjwYujg4dTazAt4AQsQE3kU/2ZXGAUdc7Ny2FKIPkjCvudLmccZdzx4x2h698sfO7uXybW6Q9otsJkYd37jxw7ZKKUFWoYvDiRehzgsMpOx3gdDQdn+FrqagsW1iZy39c0Adre7fcvXZ/2Fcq2ytCF2HeRcbIDI7vZFezPShV5WhdwyjrzQzjmuarvTkjZ/QYQsE4KqOb4lyIyfMhQIFnOBSUaLPHnYGxGlmu0Uw1klxMFKdNM9kc0NHlcHTZtceJor5IvDan+qLDBha/3e63sz1yNPMzOocVo/JAq9XptPr9fnUZ2aNanLbWVpvTX2q3l+pyyfDsl9GvEJQQL+51GJlwGMLT8TaMQafaRU5oT2lPkROhhoaQ2oUp9I9qJvjahQunGqs1E4UCMEYBtgHx0Y1Ff2I34gpW3IG5zDUMoyBpRC05bc+a+0INd/P4ujIrROKtoCdyrAp4dBTGYAMU1r3Zxgz5QLWwuzL2JoEVI03aEXjLinY8Y493uKzwemTGvhnhCF9c3N5eXMybfMW7ivHP96tsZprs+D2M+dXt5HikqUk14E5R++u3OsuEIKzki8vpsPJiXp+Vo0Gzgp6J+IWVsTRDjyhQu10SKvnUbUTDK3pYes5jo6NDqZoJqBauSaUpWoNto2RFKlUI2VIpdRO8RP12Gm3Ibn0NDpFbJLcKWpAwx1PI6Uf0TSGWwjO6GdGhicfthb5MZiiZhOZEisCNN2k/unhx8Mj2RLWW+GDtmjWpsdSaNayc0hoza+dvuf3RG2+6OPilXwN8an6l+sDaNYf61qxdu6bv0BpqAoAZZXjyAcqLFc/TxQY8ISHk5QKK6Bm9dIkEaurGjn8DrHU1PHRC52j6F2OpUSaHOX+E+2NmTIjZ0dKi5QtIXg5NrugJeASFWtckjA0NUSOb1ExDQ2jcMmmsv6Fnug1yjr9QFCHndWs9m2GKwYhyQWUFRcOLKJu1ATYorhZAOUGLIGAFZCxTkSkq1z60Wius1rfe0jMwWrUjrxIrF3IYXtEz7SlspoOwKzcQlKmTsAab1FqOI8UGJ3ldz9XjWWoF09AGfGP8GXYByyOGdDOzGIlpYhIYn1UCNxEnKREEMnhO9AApMlYEhHJCREZwSQ+TjVAr5sVjZL0BlxD48OHlRBBWrIxUP5yYrxDyxqyaunJb1Ep8O9sBUouXXwNwVVNVebCqMvHqndp7R4+CkyTI7us2NyuJpq7uBtJ/3z1f1L6yzFRS7GskFQvmLlwDsGnVzcsbYC3UBGaGcTs/BcGjat1RPK91KM//gTGCLs1hLqSEFFF/RE5/uJD+hFpJiINUZcp/svSJ2fjMTFVmptRK6zJ1DwwNpTKpoaFclspk8DxRbXCPetCnsLrtEXCfGhgRUU27LiEBA0q3IGatRBa+oB2aXqeBCvWkmHun9XHYDn3wjuaD69Ppkf5Sj6eUJtrQRBFmwqDWq7Wk03RYZqL9zyMj5M4lbyzpz1ZpAv7JsrpvyfTuJUuycl6D/us8+i+jHv94ORTzQGGYNh+5Rf1H+UfmX87KO5rUD4KiGFQtQTFFjVpKJKVDQ+kkdMZC6rlgY2Pw5Emy8uRQUMQ1jLhvO9ke3b9QHNXEtDKrqXWdak+n1wUpa3fzbWiFdDQYMHjECFUblDvPNER2Ce6heEnbrUOryfKUWj+5cIn3a6tg7DXOeNrYfBpjO161UNgKY7zcn8VbNCkorp8AYtrVZIGfv1T0mgMnzz5tl3l1H53L3oZkdJsD4fGHyAdsnKmhUS8NU7l6oCzmdpXyKzoqQZYogMzix5hMvt16ZMuWL/T0b5o/e1ZLK1sbnVc/qwWrn4PfapW9RwyGI72kZElPzxKtfVZiXi30azvLPW4fPFufmDdb/Rv26OfJfAbPczNarYqs3aKYzUaBNG5RjOcoogrpgIO44Wxq6OmZh1dvP3Zs++rDr1IDTn3k904NDS3fcOy1Yxv+Hrt6zpwQOkiM4Mc/z15kV6B1qGXm0diImgApXk8o9NNjSa+Li1USj5tDlIMvWU/iLcSFro96Q84YzHlIuP23vZuam9t2PfKpz9JCc/Om12DzuVtXlpWtn3fwBC2tvPXcLf2cjefSafQTJlM/x7fisN7PfuqRXW20QCkgYMFx117bsXTf7I1YGsGJ2t33cryN272b40xu070co/N9BPlert+8NOt8t0CObRu4r8y0grxO+nKs6EzvyvG8a9eVOA7gqsjyvRx3L67NLWhu/uGuLL8/fPuHeW7XLS3gVh2k72fj8PW4fpOJ45ksv59DfpchmqyhFriQ34/eZmcOZXATyGMKxx+1y4MFe4WcL5zk+WP2eGTKwSD3DPP/3md6DTCBl7DyCfZ5c+HSyMon2ehLBS+JG67fKdD7sF1sN/p3aslpZCoqcWRjFqD1k7KmJhRE1eQCFOLqSqvXcZ+pFutBagFM0g0QOZ4GtrvI6NIuwAnLk66KV0r+AieKTM/VyMdKyL9/ukKODspRrT2qKNEBJQpJgXzeZcAZ6tESuK/C9aRF/WrJ85xhtVwDz2LZwu75dIWg/iWqdEdlOUr2RmUsZOMz5kHEwQm0qS4mhNxLqNyUK8yphnOegET9CVX7BGCOQQ4JnFq7f//aU6ekFSukOm247tRkHS51HnzyYOeK7SvWJZPfyJcRP6XQr9I4EL2fIWxwCeEZYOBIRsPfxW/D7D17YPbbrsFBEM77wKP90Xdev9/Kz8EYDoe79IkuVvEKSgOgpJKbcNbiCRoDA4O19zzb3v7sPfA333ntzTw59eaenm/vs588ad+Xuzf7Bb7zP5BuaSFdjwPpCtNoUorw3+XntTeQWvR8OZQ9qR3oPrvPjlif4NnvxrMv1WO2Vor1w6HJmxF6vBz6PIULCPRWxDDhpyfczcS9BEo5neJlp82HLQ0lVmtJg9lme5lGPN+pBmewyPBdI6z7ms3ptFU1CeqLkSY/DXVOLCpp8I54G0oa6HAznVhnM8NJSkBba7Z1k+MPNTcbW3GW1aVuR9gfIcddVqzsdPl8rsyHhYMZxgJhpo38lNyj45QS/S29Oi4K5TALE0anIOYe4ROUoS+VSWYQC01PH0jqP6dS+s9QLss2Zu1CDVOH/ugEnpkDo0uG8fNeG/gjgszkYnuZyi2KKWyAuf9IJP6hjWAK804fOHD6wOD29vbt7eTEN7/4xW/iow32Dff1Df9iKW1GHa5BjH4eMV8p+ro6JoYyYeQEWawEL82leggLCnCCMVQPgozCl/1AomQb4l6K1Tww1lC5ftXawb8npI19dujTNndJ5A/SfWt7sEn8zNMLyw5cWysudJukdpK53SQtJXNZ6/pK+OZ9B5b3RYRr97s2SWqZdHcIW25d/fRCsXZdX9nCIlgimWy3LZWm3F87GZ5iLN1YcwLgvtLvRegTvSCwRb0Wy22diYR253nYk0h03lZSrf5qFazuJD/vtVSX6F1Hz8M+2mVRz6yCZCe1YybEVn9AbMXhLkjMRlwvt5/V+r2GHGc9fEyR8PURsMuCEhG4iCBhoOXBPTJyXqOX471KJQSxUUCcIiiS0AJ0tIQG2aP3eTkPHhod7oFHhw8fHj4Mrj2p1J7UX2M9savnrls8c53Fsm7m4nVzr57e8NcHeoIV3e3L+a4ufnl7d0WwZ3oDWXCYklRSlKJ2x7aSkm0zGsSObhrVdneIDTMua/n5zBvtbmXRF7qUJUrXFxYpbvuNMy9vKrjDcmL0Sb9DOmj0NuWjASvQG38D4lu9DYPAsWRDSDOF58wJw8rkc4kj4EqoFhjTTKEG8oxmymSylwahhqR2O+32zE+qF3EOqc7Gm08xPnYpOYd+hQGOgnyuGIjyDqXwTkI7CyvI/neT7yZgBazQxw/h+IXZ8S4pICjFeAJDMPYOjtDOJt6BFhysncXiu4yOpUvHz7NP5M7bq+NpxNgYP5ZiKKlMz4VcXuTmck5W0S8lDF5FgDGHojjwgf25gvq34E03BfE5lmtgfWa1zlxp3mk2k9dorr0677F5bI/e6XBoL+cKcECfFgweyzVcV0kn4rxKOtG88whOw/Ogdvevut2tYZahFSq4K6X2ldrZ/PHordSRSbQtb53FiWvg2KQTpuGTRK7XthnNZiN8CVMIsjWyy5q5xupEp1l2w/333zDwlrqpjH7hc1nTVictlDmt2F9nNlbReZi0KlFqjaPK/a/en35roL8/jNjaF9ZNtD/s09p94SpqurNx0wvMh6wIbzE2HWcLVOlomEwDZdlAP3XoWki/ekAjW9/WhiuWl5a2wR1seSTc1nZdW2kp/JLV83Jkp83JlmJFH6bLxTcYnl1MTutyJDhCDk4oBtacFx2IvqOZ8lKSG1+J45/R5ciL4YXiLYZ33s0JDzxeIIBZOd0w/hP2QbZIv/sRPCLqAScoIY+eeaWQnnGiRDPS0zramnjssQRm8x97bP6UGqm+UmuuVmD7inCnGK8EyBbSzKLrNLwyoM0hHSsGVpRUW3otrkG4MKA1kGXYYMF6tS4zNyJO24jyXsd0MUzeqoHE5WKnYDacQSvF42+gBei3DDRk9A8Hybrz5r30mgKFzIZJYZip0FsnoZ6lAhcjP4xUVEQqtDeLaipm1FrWCtV+f4u9VljMwcaiZa1zLa1V5R3/Qza1XdXr8C1MXLMlKtiDXi3hDdrrqwLWxUJowxJ3WQUlQsznSEVN7QztRbExYvJUmn2B+Ur0eH3tPLGkzFXqI8WnSNumTW3trLVYgOs31IpbVvBG54w0Fc30DKfRLVR6TOGyWNXqXjyvEj2Gfj+n9/SWtoZpRJw9n1nILGY267oUR41BtJrNDYGYx43vKMWd0/yscVqdIh0XveEL0GuxvF4VIp0srlEC5DHtcbsd1tvtuVw7nqvEfC6Xz2mIh8Px8N0F5VZ2V+a+QYp/4JLW64aR5gGUfl9X2Ke+6At3+8KR8sEqGLvk96f9/m56xQv/dNL5y8N0fnNB+WlIZP4ED8Mbrf5IufZjX1j7NN0qeBifRHkERYOb+MZN7+x8TBAj1RgzF/Uh96Yyk9VS9I35gjPbEfPnhuSdZ779Fwi7VykyWYRJTVRWP1iFMLxGXoyNyiryu1W0VxugFfk5hdbI7/VMUZ/Th8h6CoFcAVNtQM/YuF7XMdL438ZvLvoc28VYGQ9yzYCLXiwrruwnOWfej4PI62dCTTi87STuHjdBuHjQXHqoQ5Y7ZAu8UTRDUTLXyMoMeGPGDvij9oHHA5aS0lLttESHkO9nftbQ3d3AivX6upnxG9h39P2y0P9LCIssOiyKiXSR4GIfEeiwQjdRj8Kz0Sa1juxRj75I9liiTXKkW46oRwW5OdrVfJjs1mvwJVJkyTZ3CXJTDdkTbeqONlErNf4knpU/58cERmHaMabZihqe23p5Wm6Y9nVt6l385XXUgOwFS4BGbY7p3wcW1c6tnfpHfDaztpcicLiLplcuqwpbUWQyFWXeLqEfK+iHC4zmzus07i9IG+aYrVYzTc5fofQDUxEZLDJZ1F4L65ajaoce3n0nF9sx49twbzailtObWPrdkRcDE8wjhOExwqfBqnEmhKhbNCCIwyLGfqDHfHQPyNkKF1gqMGBwVWQipc+Zzc/ZhAy2jb1A7BmLU7VdvGhzutgN2vuuCrXPVUGH3+q22543V5R831bquZWYXBXmF4qsTktG/WnaaWu1OrO+g2F2sO+TLfRrXTgA7PsZO4ztgLFs3/hOGEM7Reh9t4N6HbheM7HvT+szFIPeN9YPYzhzCs1iwr6vmTQT2UIHMOaJ79jZ+0Mar3UzNzOHmS8yj17+VZaTsnqD8qB/n/FMq4en1eFf9P9fx09fj31CCqsW+kmXfKB/+D1HbxKnJNqvJ8vgv3L7JxkzmZDn1Uf0Jbdg+uYO2kqTCxOlX0+UtGuv0Pgvuifp6PJqHf86+2u2Xo83eWpHEK+IUsgFIZ6jZyNkbdZ/bsWf1fACKSkpcWXSrhJEai+Ya5+BJRq3lZzOfNfucDhKnezVTpSHANqHV9A+IE7MgjyHOFXH0RQFPJe15SPzvEVA6xWQCtrYV1zWpUutLpdV+zEFdsu0nctojjVXvgcSeg/06z1Yc7HQanOqR3UVcFqxnMlMlsmey9upyHLZ+BTjjyhilzlo4VqYNubqQonNcx2RWkBESKTjRq+by71WDUYsLkfAATZADxBRshmH7x3Ah/1y9qOm0xcL3W4i7dLCcFlZeCHGqabbQzGfFtTegGgSolpjuccdd3t+l81+QG/vtadgm/YU/SwKnWWOdHWji1faxaoqsV3hXY3VaUcZjuikD3SytdFoLaun/8zH9QbGMv4i+1vWoH8JCaJWJtByy/XIaSUA/SIE9NtWPYYiLRiCsC7cfW/MyxswBvXyVVACEUXmvC6I6B/D0MPud1qqo/hA+XqnpVh7vjjqpAVoK47eWzRqqfRs9ZTatebrwOV2FdeUvF5s4jpX/EDb5QCwLrC5PWX67KiT/KAep6r34FxaILudFsOntS2kyFNJSu1SLeBE9watEV5HQrsXaBugA2fbVyKd3L3gTvYRtFHUJ9J7Ewb1OStM9N9MXfp/eLJelG4Pu9NszTwznDzL/teh4UOvsuyaNf2/91hNv2dbhjvPaltewdYX1W+P1n4CuqzBRf99FPJ0VUvn2WQXWQaUCDTkKROSPNtJvsKqT58/OHxI7aGk/xf+ZxJPAHjadY7NasJAFIXPaKII4q5QuppFoauEyUAQ3Igb6a7Qgl1nMQQhTmQSER/HF+hj+AgufY4ue2LupgsH5s537tyfA2CGHyj0Z4oXYYUx5sID8ofwEK84C0fMX4Vj9v4KjzBWT6xU0YTq+d7VseKuN+EBeSk8xDu+hSPmL8Ixe2/CI8xUjDVqBLTQWOEIh4Z6xxfrOrR6dXRNvaP6wgkeBfYs6OTJF/uG8ElV4oCKf4HSlYeqIHRjPcf240tWaVikMHwXvP/n9bkMORJGw2gZLTVt+JZWSqdtavRCy2ZSlieZSayx+WN7G6rA3PZup1vRW8DGhWZbe51x6MP2P34oQ2d42m3Px1KUYRBG4f8MKGbEjAlUzGm+7v4JJsLAmEZUlCpuwY07b8AbV0vP0req6yyf6m7Q/d2vn110/9vBn6MbMGCqm2KaQxxmhiMc5RjHOcFJTjHLaeY4w1nOcZ4LXOQS81zmCle5xnUWWOQGN7nFEre5w13ucZ8HPOQRj3nCU4Y0gqToWWaFVdZ4xnNe8JJXrLPBJluM2GaHMa95w1ve8Z4JH9jlI5/4zB5f+Mr+9O7+ZDIY7c38+P5tPBwObbNh05bt7YpdtWt2027Zkd22O3b8r0236Tbdptt0m25btvpNv+k3/abbdJtu0w3d0A3d0A3d0A3d0A3d0A3d8O/QD/3QD/3UT/3UT/3UT/3UT/3UT/3UT/3UT/3UT/3SL/3SL/3SL/3SL/3SL/3SL/3SL/3S73V73V631+3rN7fQx2AAAAAAAAAB//8AAnjaY2BgYGQAghu7bvGC6KeiDupQWhMAQxIFPwA=) format('woff');font-weight:400;font-style:normal}.snps{display:inline-block;font:normal normal normal 14px/1 Synapse;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.snps-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.snps-2x{font-size:2em}.snps-3x{font-size:3em}.snps-4x{font-size:4em}.snps-5x{font-size:5em}.snps-fw{width:1.28571429em;text-align:center}.snps-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.snps-ul>li{position:relative}.snps-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.snps-li.snps-lg{left:-1.85714286em}.snps-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.snps.pull-left{margin-right:.3em}.snps.pull-right{margin-left:.3em}.snps-spin{-webkit-animation:snps-spin 2s infinite linear;animation:snps-spin 2s infinite linear}.snps-pulse{-webkit-animation:snps-spin 1s infinite steps(8);animation:snps-spin 1s infinite steps(8)}@-webkit-keyframes snps-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes snps-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.snps-rotate-90{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.snps-rotate-180{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.snps-rotate-270{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.snps-flip-horizontal{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.snps-flip-vertical{-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .snps-flip-horizontal,:root .snps-flip-vertical,:root .snps-rotate-180,:root .snps-rotate-270,:root .snps-rotate-90{filter:none}.snps-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.snps-stack-1x,.snps-stack-2x{position:absolute;left:0;width:100%;text-align:center}.snps-stack-1x{line-height:inherit}.snps-stack-2x{font-size:2em}.snps-inverse{color:#fff}.snps-close-circle-o:before{content:'\f000'}.snps-close-box-o:before{content:'\f001'}.snps-magnify:before{content:'\f002'}.snps-magnify-plus:before{content:'\f003'}.snps-magnify-minus:before{content:'\f004'}.snps-help-o:before{content:'\f005'}.snps-help-circle:before{content:'\f007'}.snps-block:before{content:'\f008'}.snps-checkbox-blank-o:before{content:'\f009'}.snps-checkbox-marked-o:before{content:'\f00a'}.snps-checkbox-marked-circle-o:before{content:'\f00b'}.snps-checkbox-blank-circle-o:before{content:'\f00c'}.snps-person-o:before{content:'\f00d'}.snps-person:before{content:'\f00e'}.snps-information-o:before{content:'\f00f'}.snps-folder-open-o:before{content:'\f010'}.snps-folder-o:before{content:'\f011'}.snps-plus-square-o:before{content:'\f012'}.snps-minus-square-o:before{content:'\f013'}.snps-minus-circle-o:before{content:'\f014'}.snps-plus-circle-o:before{content:'\f015'}.snps-toggle-on:before{content:'\f016'}.snps-toggle-off:before{content:'\f017'}.snps-color-lens:before{content:'\f018'}.snps-phone:before{content:'\f019'}.snps-email-outline:before{content:'\f01a'}.snps-laptop-code:before{content:'\f01c'}.snps-calendar:before{content:'\f01d'}.snps-timer:before{content:'\f01e'}.snps-sigma:before{content:'\f01f'}.snps-repeat:before{content:'\f020'}.snps-code:before{content:'\f021'}.snps-sort-numeric:before{content:'\f022'}.snps-pound:before{content:'\f023'}.snps-sliders:before{content:'\f024'}.snps-input:before{content:'\f025'}.snps-file-text-o:before{content:'\f026'}.snps-paperclip:before{content:'\f027'}.snps-key:before{content:'\f028'}.snps-chevron-circle-up:before{content:'\f029'}.snps-chevron-circle-right:before{content:'\f02a'}.snps-chevron-circle-left:before{content:'\f02b'}.snps-chevron-circle-down:before{content:'\f02c'}.snps-copy:before{content:'\f02d'}.snps-link:before{content:'\f02e'}.snps-star:before{content:'\f02f'}.snps-star-outline:before{content:'\f030'}.snps-star-half:before{content:'\f031'}.snps-trash:before{content:'\f032'}.snps-drag:before{content:'\f033'}.snps-eye:before{content:'\f034'}.snps-eye-off:before{content:'\f035'}.snps-eyedropper-variant:before{content:'\f036'}.snps-gear:before{content:'\f037'}.snps-checkbox-multiple-marked-outline:before{content:'\f038'}.snps-arrow-left:before{content:'\f039'}.snps-arrow-right:before{content:'\f03a'}.snps-magic:before{content:'\f03b'}.snps-microscope:before{content:'\f03c'}.snps-dots-two-horizontal:before{content:'\f03d'}.snps-arrow-up:before{content:'\f03e'}.snps-arrow-down:before{content:'\f03f'}.snps-arrow-all:before{content:'\f040'}.snps-pencil:before{content:'\f041'}.snps-hand-point-up:before{content:'\f042'}.snps-print:before{content:'\f043'}.snps-spinner:before{content:'\f044'}.snps-exclamation-triangle:before{content:'\f045'}.snps-popup:before{content:'\f046'}.snps-list:before{content:'\f047'}.snps-file-import:before{content:'\f048'}.snps-caret-top:before{content:'\f049'}.snps-caret-right:before{content:'\f04a'}.snps-caret-left:before{content:'\f04b'}.snps-caret-bottom:before{content:'\f04c'}.snps-table:before{content:'\f04d'}.snps-warning:before{content:'\f04e'}.snps-heading:before{content:'\f050'}.snps-gift:before{content:'\f051'}.snps-colors:before{content:'\f052'}.snps-import:before{content:'\f053'}.snps-export:before{content:'\f054'}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/sticky-filter/1.0/css/sticky-filter.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/f965f3a31dc66e1aeb123377e514a8ab.min.css */ /** * Sticky Filter Styles * * Provides sticky positioning behavior for filter forms and other elements. * Add the 'sticky-filter' class to any element to enable sticky behavior. * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0.0 */ /* Sticky Filter Base Styles */ .sticky-filter { position: relative; z-index: 100; background-color: var(--foundation-0, #ffffff); transition: box-shadow 0.3s ease, padding 0.3s ease; } .sticky-filter.is-stuck { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 15px 20px; animation: slideDown 0.3s ease; } .sticky-filter-placeholder { display: none; } .sticky-filter-placeholder.active { display: block; } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /*# scssSourceMappingURL=sticky-filter.css.map */ /* Original Source: /mnt/home/ils/chuck/public_html/site/custom/packages/ils-synapse/1.0/css/styles.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/718688c71a3ce60b820add4214ea5a11.min.css */ /** * ILS Synapse Custom Styles * * Custom styling for ILS-specific Synapse components * * @author Chuck Neal * @copyright 2025 Binary Evolution * @version 1.0 */ .neuron-Content .override-flag { position: absolute; top: 0px; left: -10px; z-index: 10; cursor: pointer; width: 34px; height: 20px; opacity: 0; transition: opacity 0.3s ease-in-out; /* .neuron.has-content:hover & { .override-flag-content { background: linear-gradient(270deg, #5ba0f2 0%, #4080cd 100%); // Slightly brighter blue on hover box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15); } } */ } .neuron-Content .override-flag .override-flag-content { position: absolute; left: 0; top: 0; background: linear-gradient(270deg, #4a90e2 0%, #357abd 100%); width: 26px; height: 20px; border-radius: 2px 2px 0 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); } .neuron-Content .override-flag .override-flag-content::before { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #4a90e2; filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.1)); } .neuron-Content .override-flag .override-flag-content::after { content: ""; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; background: linear-gradient(270deg, #4a90e2 0%, transparent 50%); border-radius: 1px 1px 0 1px; pointer-events: none; } .neuron-Content.overrideContentActive .override-flag, .neuron-Content:hover .override-flag { opacity: 1; } li.neuron-Content > .neuron-content-area { display: inline; } li.neuron-Content > .neuron-content-area > p:first-child { display: inline; } li.neuron-Content > .neuron-content-area > p:first-child::before { content: none; display: inline; width: auto; } @media (max-width: 768px) { .neuron-Content .override-flag { left: -12px; } .neuron-Content .override-flag .override-flag-content { width: 14px; height: 18px; } .neuron-Content .override-flag .override-flag-content::before { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 6px; right: -6px; } } .overrideValue { display: none; } .overrideContentActive { border: dashed 1px #4a90e2; } .overrideContentActive .overrideValue { display: block; } .overrideContentActive .neuron-content-area { display: none; } .dynamicDocument_documentBody h1 { text-align: center; font-size: 1.1em; font-weight: bold; margin: 5px; } .dynamicDocument_documentBody h2 { text-align: center; font-size: 1em; font-weight: bold; margin: 5px; } .dynamicDocument_documentBody h3 { text-align: center; font-size: 0.9em; font-weight: bold; margin: 5px; } .dynamicDocument_documentBody h4 { text-align: center; font-size: 0.8em; font-weight: bold; margin: 5px; } .dynamicDocument_documentBody h5 { text-align: center; font-size: 0.7em; font-weight: bold; margin: 5px; } .dynamicDocument_documentBody h6 { text-align: center; font-size: 0.6em; font-weight: bold; margin: 5px; } .synapseCover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background-color: #ffffff; opacity: 1; transition: opacity 0.3s ease-in-out; } .synapseCover .message { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 2em; line-height: 1.5em; color: #333; text-align: center; } .synapseCover .message .subMessage { font-size: 0.5em; } .synapseCover .molecule_spinner { position: absolute; top: calc(45% + 150px); left: 50%; transform: translate(-50%, -50%); } .synapseReady .synapseCover { display: none; opacity: 0; } /* Adjustments so that inside dynamicDocument_documentBody we do not get borders and margins for containers and such */ .dynamicDocument_documentBody .has-repeat { border: none; padding: 0; background-color: transparent; box-shadow: none; } .dynamicDocument_documentBody .has-repeat .repeat-instance { border: none; padding: 0; background-color: transparent; margin: 0; box-shadow: none; } .dynamicDocument_documentBody .neuron.has-embeddedlayout .neuron_inputRow .neuron_input.embedded-layout-container { border: none; padding: 0; background-color: transparent; box-shadow: none; } /* Product Filter Styles */ /* Note: Sticky filter styles moved to core sticky-filter package */ .product-filter-container { padding: 20px; margin-bottom: 20px; } /* Product Card Animations */ .productCard { opacity: 1; transform: scale(1); transition: opacity 0.3s ease, transform 0.3s ease; } /* Hiding animation */ .productCard.filtering-out { opacity: 0; transform: scale(0.95); pointer-events: none; /* Prevent interaction during hide */ } /* Completely hidden - removed from layout */ .productCard.filtered-hidden { display: none; } /* Showing animation */ .productCard.filtering-in { animation: filterIn 0.4s ease forwards; } @keyframes filterIn { 0% { opacity: 0; transform: scale(0.95) translateY(-10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Category Container Animations */ .productCategory { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; } /* Hiding category animation */ .productCategory.filtering-out { opacity: 0; transform: translateY(-20px); pointer-events: none; /* Prevent interaction during hide */ } /* Completely hidden - removed from layout */ .productCategory.filtered-hidden { display: none; } /* Showing category animation */ .productCategory.filtering-in { animation: categoryFilterIn 0.4s ease forwards; } @keyframes categoryFilterIn { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } /* Stagger animation for multiple cards */ .productCard.filtering-in:nth-child(1) { animation-delay: 0s; } .productCard.filtering-in:nth-child(2) { animation-delay: 0.05s; } .productCard.filtering-in:nth-child(3) { animation-delay: 0.1s; } .productCard.filtering-in:nth-child(4) { animation-delay: 0.15s; } .productCard.filtering-in:nth-child(5) { animation-delay: 0.2s; } .productCard.filtering-in:nth-child(6) { animation-delay: 0.25s; } .productCard.filtering-in:nth-child(7) { animation-delay: 0.3s; } .productCard.filtering-in:nth-child(8) { animation-delay: 0.35s; } .productCard.filtering-in:nth-child(9) { animation-delay: 0.4s; } .productCard.filtering-in:nth-child(10) { animation-delay: 0.45s; } /* For cards beyond 10, no additional delay */ .productCard.filtering-in:nth-child(n+11) { animation-delay: 0.5s; } @media (max-width: 768px) { .product-filter-container { padding: 15px; } .product-filter-container .neuron.has-container.display-row { flex-direction: column; gap: 15px; } .product-filter-container .neuron.has-checkboxlist .neuron_input { grid-template-columns: 1fr; } } /*# scssSourceMappingURL=styles.css.map */ /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/be/icons/tools/1.x/css/icons.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/a3030e9d1d6121e30387e7866dccbce2.min.css */ @font-face{font-family:BinaryEvolutionEditorTools;src:url(data:application/font-woff;charset=utf-8;base64,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) format('woff');font-weight:400;font-style:normal}.betool{display:inline-block;font:normal normal normal 14px/1 BinaryEvolutionEditorTools;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.betool-paint-bucket:before{content:'\f000'}.betool-text-bold:before{content:'\f001'}.betool-text-italic:before{content:'\f002'}.betool-text-underline:before{content:'\f003'}.betool-text-color:before{content:'\f004'}.betool-text-strikethrough:before{content:'\f005'}.betool-function:before{content:'\f006'}.betool-text-wrap:before{content:'\f007'}.betool-text-size:before{content:'\f009'}.betool-text-align-right:before{content:'\f00a'}.betool-text-align-left:before{content:'\f00b'}.betool-text-justify-center:before{content:'\f00c'}.betool-text-align-center:before{content:'\f00d'}.betool-git-branch:before{content:'\f00e'}.betool-file-text-o:before{content:'\f00f'}.betool-file-image-o:before{content:'\f010'}.betool-file-pdf-o:before{content:'\f011'}.betool-file-word-o:before{content:'\f012'}.betool-file-excel-o:before{content:'\f013'}.betool-file-video-o:before{content:'\f014'}.betool-file-code-o:before{content:'\f015'}.betool-file-audio-o:before{content:'\f016'}.betool-file-archive-o:before{content:'\f017'}.betool-files-o:before{content:'\f018'}.betool-funnel-o:before{content:'\f019'}.betool-funnel:before{content:'\f01a'}.betool-folder-open-o:before{content:'\f01b'}.betool-mouse:before{content:'\f01c'}.betool-chart-bar:before{content:'\f01d'}.betool-folder:before{content:'\f01e'}.betool-wireframe-page:before{content:'\f01f'}.betool-wireframe-form:before{content:'\f020'}.betool-paint-brush:before{content:'\f021'}.betool-paint-brush-o:before{content:'\f022'}.betool-hammer:before{content:'\f023'}.betool-hammer-o:before{content:'\f024'}.betool-table-row-remove:before{content:'\f026'}.betool-table-column-remove:before{content:'\f028'}.betool-table-column-plus-after:before{content:'\f029'}.betool-table-row-plus-after:before{content:'\f02a'}.betool-file-powerpoint-o:before{content:'\f02c'}.betool-file-o:before{content:'\f031'}.betool-arrow-repeat:before{content:'\f032'}.betool-tab:before{content:'\f033'}.betool-wireframe-event:before{content:'\f034'}.betool-wireframe-newsletter:before{content:'\f035'}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/be/icons/tools/1.x/css/aliases.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/e784c0dcb0a2b917ce1351328ba49f33.min.css */ .betool-color-fill:before{content:'\f000'} .betool-bar-chart:before{content:'\f01d'} .betool-filter-outline:before{content:'\f019'} .betool-filter:before{content:'\f01a'} /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/be/icons/tools/1.x/css/atoms.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/d7fb90376c3ae467a617cbf79ba9ad67.min.css */ /* {{generatedBy}} by {{authorName}} {{authorEmail}} * * Import this file instead of _eco.scss to only load the variables from core and custom for use in your own SCSS file. * * */ /* {{generatedBy}} by {{authorName}} {{authorEmail}} * * This document contains variable definitions with default values provided for all customizable aspects of the eco * system. The atoms, molecules, organisms, and modifiers within eco should be making use of these to provide a * consistent and easily customizable user interface. */ /* {{generatedBy}} by {{authorName}} {{authorEmail}} * * Use this document to override default values for core eco SCSS variables or define your own SCSS variables to be used * within your custom atoms, mixins, modifiers, molecules, organisms, and other project level SCSS. */ .atom_button.mod_icon-left .betool { margin-right: 17px; } .atom_button.mod_skinny.mod_icon-left .betool { margin-right: 7.5px; } /*# scssSourceMappingURL=atoms.css.map */ /* Original Source: /mnt/home/ils/chuck/public_html/site/core/packages/filedrop/2.0.0/css/filedrop.css */ /* Bundle Source: /mnt/home/ils/chuck/public_html/site/cache/public/compiled-sources/5052a9c7684f58ceb9c7810e17cf3b7e.min.css */ /*** Styles below are only required if you're using