@jsenv/plugin-toolbar 0.0.1 → 0.1.1

package/dist/css/{toolbar_main.css → toolbar.css}

@@ -1,4 +1,79 @@
-#loader-icon {
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: arial, sans;
+}
+
+html[data-animation-disabled] * {
+  transition: none !important;
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+}
+
+[data-when], [data-force-hide] {
+  display: none !important;
+}
+
+button:focus, a:focus, input:focus, [data-contains-hidden-input] input:focus + * {
+  outline-offset: -2px;
+  outline-style: none;
+}
+
+[data-contains-hidden-input] input:focus + * {
+  outline-offset: -2px;
+  outline-width: 4px;
+}
+
+button:focus-visible, a:focus-visible, input:focus-visible, [data-contains-hidden-input] input:focus-visible + * {
+  outline-style: auto;
+}
+
+[data-contains-hidden-input] input:focus-visible + * {
+  outline-color: #0096ff;
+}
+
+@-moz-document url-prefix() {
+  button:focus-visible, a:focus-visible, input:focus-visible, [data-input-customized] input:focus-visible + * {
+    outline-offset: 0;
+    outline: 2px solid #0096ff;
+  }
+}
+
+::-moz-focus-inner {
+  border: 0;
+}
+
+#toolbar_wrapper {
+  justify-content: center;
+  display: flex;
+}
+
+#toolbar_overlay {
+  width: 100%;
+  height: 100%;
+  filter: url(#better-blur);
+  background-color: #0003;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+#toolbar {
+  height: 40px;
+  width: 100%;
+  background: #404040;
+  position: fixed;
+  bottom: 0;
+}
+#execution_pending_icon {
   width: 20px;
   height: 20px;
   color: #cecece;
@@ -6,7 +81,7 @@
   transform: scaleX(-1);
 }
 
-#loader-icon[data-animate] {
+#execution_pending_icon[data-animate] {
   opacity: 0;
   transform-origin: center;
   animation: 1s linear infinite rotateLoader !important;
@@ -28,19 +103,18 @@
   }
 }
 
-#check-icon {
+#execution_completed_icon {
   width: 25px;
   height: 25px;
   opacity: 0;
   stroke-width: 5px;
-  margin: 7px;
 }
 
-#check-icon[data-animate] {
+#execution_completed_icon[data-animate] {
   opacity: 1;
 }
 
-#check-icon[data-animate] path {
+#execution_completed_icon[data-animate] path {
   transform-origin: 50%;
   stroke-dasharray: 48;
   stroke-dashoffset: 48px;
@@ -54,7 +128,7 @@
   }
 }
 
-#cross-icon {
+#execution_failed_icon {
   width: 20px;
   height: 20px;
   opacity: 0;
@@ -62,21 +136,21 @@
   margin: 10px;
 }
 
-#cross-icon rect {
+#execution_failed_icon rect {
   width: 33px;
   height: 0;
   fill: #d74640;
 }
 
-#cross-icon[data-animate] {
+#execution_failed_icon[data-animate] {
   opacity: 1;
 }
 
-#cross-icon[data-animate] #cross_p1 {
+#execution_failed_icon[data-animate] #cross_p1 {
   animation: .5s cubic-bezier(.65, 0, .45, 1) forwards draw;
 }
 
-#cross-icon[data-animate] #cross_p2 {
+#execution_failed_icon[data-animate] #cross_p2 {
   animation: .5s cubic-bezier(.65, 0, .45, 1) .2s forwards draw;
 }
 
@@ -86,44 +160,16 @@
     width: 45px;
   }
 }
-button:focus, a:focus, input:focus, [data-contains-hidden-input] input:focus + * {
-  outline-offset: -2px;
-  outline-style: none;
-}
-
-[data-contains-hidden-input] input:focus + * {
-  outline-offset: -2px;
-  outline-width: 4px;
-}
-
-html[data-last-interaction="keyboard"] button:focus, html[data-last-interaction="keyboard"] a:focus, html[data-last-interaction="keyboard"] input:focus, html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus + * {
-  outline-style: auto;
-}
-
-html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus + * {
-  outline-color: #0096ff;
-}
-
-@-moz-document url-prefix() {
-  html[data-last-interaction="keyboard"] button:focus, html[data-last-interaction="keyboard"] a:focus, html[data-last-interaction="keyboard"] input:focus, html[data-last-interaction="keyboard"] [data-input-customized] input:focus + * {
-    outline-offset: 0;
-    outline: 2px solid #0096ff;
-  }
-}
-
-::-moz-focus-inner {
-  border: 0;
-}
-#eventsource-indicator button {
+#server_indicator button {
   position: relative;
 }
 
-#eventsource-indicator button svg {
+#server_indicator button svg {
   width: 40px;
   height: 40px;
 }
 
-#eventsource-indicator .event-source-autoreload {
+#server_indicator .autoreload {
   width: 32px;
   height: 32px;
   margin: 4px;
@@ -132,25 +178,21 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus
   left: 0;
 }
 
-.event-source-autoreload[data-variant="enabled"] {
+.autoreload[data-variant="enabled"] {
   color: green;
 }
 
-#eventsource-indicator .event-source-icon {
+#server_indicator .icon {
   width: 40px;
   height: 40px;
 }
 
-.eventsource-circle {
+.server_indicator_circle {
   stroke: #000;
   stroke-width: 0;
 }
 
-.eventsource-circle[data-variant="off"] {
-  fill: #cecece;
-}
-
-.eventsource-circle[data-variant="connecting"] {
+.server_indicator_circle[data-variant="connecting"] {
   fill: #cecece;
   transform-origin: center;
   animation: 1.2s ease-out infinite wink;
@@ -170,7 +212,15 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus
   }
 }
 
-.eventsource-ring {
+.server_indicator_circle[data-variant="connected"] {
+  fill: green;
+}
+
+.server_indicator_circle[data-variant="closed"] {
+  fill: #c00;
+}
+
+.server_indicator_ring {
   stroke: #cecece75;
   stroke-width: 4px;
   fill: #0000;
@@ -193,87 +243,130 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus
     transform: scale(1);
   }
 }
+html[data-theme="light"] #toolbar {
+  background: #e8eff3;
+}
 
-.eventsource-circle[data-variant="connected"] {
-  fill: green;
+html[data-theme="light"] .toolbar_icon {
+  fill: #404040;
 }
 
-.eventsource-circle[data-variant="failed"] {
-  fill: #c00;
+html[data-theme="light"] .toolbar_icon:hover {
+  fill: #757575 !important;
 }
-#overflow-menu-button {
-  width: 40px;
-  background: #404040;
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
+
+html[data-theme="light"] #loader-icon {
+  color: #404040;
 }
 
-#dotsIconSvg {
-  width: 25px;
+html[data-theme="light"] #settings-box, html[data-theme="light"] #settings[data-active] button {
+  background: #87acd3;
 }
 
-#overflow-menu {
-  visibility: hidden;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  background: #404040;
-  display: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 100%;
+html[data-theme="light"] .settings-box-item {
+  background: #97b9da;
 }
 
-#overflow-menu[data-animate] {
-  transition-property: left, opacity;
-  transition-duration: .3s;
+html[data-theme="light"] #settings-box-header .settings-icon {
+  stroke: #076570;
 }
 
-#overflow-menu > * {
-  vertical-align: middle;
-  text-align: center;
-  display: table-cell;
+html[data-theme="light"] #button-close-settings {
+  fill: #076570;
 }
 
-#toolbar[data-overflow-menu-enabled] #overflow-menu-button {
-  display: block;
+html[data-theme="light"] #settings-box h3, html[data-theme="light"] #settings-box .category-title {
+  color: #076570;
 }
 
-#toolbar[data-overflow-menu-visible] #overflow-menu-button {
-  background: #030713;
+html[data-theme="light"] #settings-box .category-title svg {
+  fill: #076570;
 }
 
-#toolbar[data-overflow-menu-enabled][data-overflow-menu-visible] #toolbar-wrapper {
-  visibility: hidden;
+html[data-theme="light"] #settings-box .category-subtitle {
+  color: #5d5d5d;
 }
 
-#toolbar[data-overflow-menu-visible] #overflow-menu {
-  visibility: visible;
-  opacity: 1;
-  margin-left: -40px;
-  display: block;
-  left: 0;
+html[data-theme="light"] label {
+  color: #002e33;
 }
 
-#toolbar[data-overflow-menu-enabled] #settings-box {
-  right: -40px;
+html[data-theme="light"] .switch input + * .slider, html[data-theme="light"] .switch input + * .square {
+  background-color: gray;
+}
+
+html[data-theme="light"] .switch input:checked + * .slider, html[data-theme="light"] .switch input:checked + * .square {
+  background-color: #076570;
+}
+
+html[data-theme="light"] .tooltip {
+  color: #fff;
+  background-color: #8a919a;
+}
+
+html[data-theme="light"] .tooltip_action {
+  border-color: #fff;
+}
+
+html[data-theme="light"] .tooltip:after {
+  border-color: #8a919a #0000 #0000;
+}
+
+html[data-theme="light"] #menu_overflow_button {
+  background: #e8eff3;
+}
+
+html[data-theme="light"] #toolbar[data-menu-overflow-opened] #menu_overflow_button {
+  background: #a5a9ad;
+}
+
+html[data-theme="light"] #menu_overflow {
+  background: #dfe4e7;
+}
+
+html[data-theme="light"] h2, html[data-theme="light"] h4 {
+  color: #076570;
+}
+
+html[data-theme="light"] #explorables_icon {
+  fill: #076570;
+}
+
+html[data-theme="light"] #explorables h2 span {
+  color: #ff8d00;
+}
+
+html[data-theme="light"] article[data-page="file-list"] {
+  background: #bbd5ea;
+}
+
+html[data-theme="light"] #explorables fieldset input:checked + * {
+  color: #ff8d00;
+  background: #bbd5ea;
+}
+
+html[data-theme="light"] #explorables #explorables-header, html[data-theme="light"] #explorables fieldset label input + * {
+  background: #ddf0ff;
 }
-#settings-button {
+
+html[data-theme="light"] .execution-link {
+  color: #076570;
+  background: #ddf0ff;
+}
+
+#settings_button {
   position: relative;
 }
 
-#settings-button[data-warning] svg {
+#settings_button[data-warning] svg {
   fill: #cb5909;
 }
 
-#settings-button[data-warning] svg:hover {
+#settings_button[data-warning] svg:hover {
   fill: #ff8c00 !important;
 }
 
-#settings-box {
+#settings_box {
   text-align: center;
   color: #fff;
   min-width: 250px;
@@ -289,7 +382,7 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus
   right: 0;
 }
 
-[data-active] #settings-box {
+[data-active] #settings_box {
   animation: .3s comeUp;
   display: block;
 }
@@ -306,7 +399,7 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus
   }
 }
 
-#settings-box-body {
+#settings_box_body {
   text-align: left;
   max-height: 80vh;
   width: 100vw;
@@ -316,21 +409,21 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus
   overflow: auto;
 }
 
-.settings-box-items-wrapper {
+.settings_box_items_wrapper {
   max-width: 700px;
   flex-wrap: wrap;
   justify-content: center;
   display: flex;
 }
 
-.settings-box-item {
+.settings_box_item {
   width: 250px;
   background: #0c111b;
   margin: 9px 18px;
   padding: 15px;
 }
 
-#settings-box-header .settings-icon {
+#settings_box_header .settings_icon {
   fill: none;
   stroke: #24b1b0;
   stroke-width: 2px;
@@ -341,19 +434,19 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus
   top: 4px;
 }
 
-#settings-box h3 {
+#settings_box h3 {
   color: #24b1b0;
   margin: 10px 0;
   font-size: 20px;
   display: inline-block;
 }
 
-#button-close-settings {
+#settings_close_button {
   float: right;
   fill: #24b1b0;
 }
 
-#button-close-settings:hover {
+#settings_close_button:hover {
   opacity: .6;
 }
 
@@ -364,7 +457,7 @@ label {
   display: block;
 }
 
-#settings-box .category-title {
+#settings_box .category_title {
   color: #24b1b0;
   margin-top: 4px;
   margin-bottom: 15px;
@@ -372,7 +465,7 @@ label {
   display: inline-block;
 }
 
-#settings-box .category-title svg {
+#settings_box .category_title svg {
   fill: currentColor;
   vertical-align: top;
   width: 18px;
@@ -380,7 +473,7 @@ label {
   margin-right: 5px;
 }
 
-#settings-box .category-subtitle {
+#settings_box .category_subtitle {
   color: #a9a8a8;
   max-width: 220px;
   font-size: 14px;
@@ -445,131 +538,80 @@ label {
   transform: translateX(1.6em);
 }
 
-.settings-box-item[data-disabled] {
+.settings_box_item[data-disabled] {
   cursor: default;
   background-color: #0c111b66;
 }
 
-.settings-box-item[data-disabled] .category-title, .settings-box-item[data-disabled] .switch, .settings-box-item[data-disabled] .category-subtitle {
+.settings_box_item[data-disabled] .category_title, .settings_box_item[data-disabled] .switch, .settings_box_item[data-disabled] .category_subtitle {
   opacity: .4;
 }
 
-.settings-box-item[data-disabled] .category-title span, .settings-box-item[data-disabled] .category-subtitle {
+.settings_box_item[data-disabled] .category_title span, .settings_box_item[data-disabled] .category_subtitle {
   text-decoration: line-through;
 }
 
-.settings-box-item[data-disabled] .switch {
+.settings_box_item[data-disabled] .switch {
   cursor: default;
 }
-html[data-theme="light"] #toolbar {
-  background: #e8eff3;
-}
-
-html[data-theme="light"] .iconToolbar {
-  fill: #404040;
-}
-
-html[data-theme="light"] .iconToolbar:hover {
-  fill: #757575 !important;
-}
-
-html[data-theme="light"] #loader-icon {
-  color: #404040;
-}
-
-html[data-theme="light"] #settings-box, html[data-theme="light"] #settings[data-active] button {
-  background: #87acd3;
-}
-
-html[data-theme="light"] .settings-box-item {
-  background: #97b9da;
-}
-
-html[data-theme="light"] #settings-box-header .settings-icon {
-  stroke: #076570;
-}
-
-html[data-theme="light"] #button-close-settings {
-  fill: #076570;
-}
-
-html[data-theme="light"] #settings-box h3, html[data-theme="light"] #settings-box .category-title {
-  color: #076570;
-}
-
-html[data-theme="light"] #settings-box .category-title svg {
-  fill: #076570;
-}
-
-html[data-theme="light"] #settings-box .category-subtitle {
-  color: #5d5d5d;
-}
-
-html[data-theme="light"] label {
-  color: #002e33;
-}
-
-html[data-theme="light"] .switch input + * .slider, html[data-theme="light"] .switch input + * .square {
-  background-color: gray;
-}
-
-html[data-theme="light"] .switch input:checked + * .slider, html[data-theme="light"] .switch input:checked + * .square {
-  background-color: #076570;
-}
-
-html[data-theme="light"] .tooltip {
-  color: #fff;
-  background-color: #8a919a;
-}
-
-html[data-theme="light"] .tooltipAction {
-  border-color: #fff;
-}
-
-html[data-theme="light"] .tooltip:after {
-  border-color: #8a919a #0000 #0000;
-}
-
-html[data-theme="light"] #overflow-menu-button {
-  background: #e8eff3;
+#menu_overflow_button {
+  width: 40px;
+  background: #404040;
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
-html[data-theme="light"] #toolbar[data-overflow-menu-visible] #overflow-menu-button {
-  background: #a5a9ad;
+#menu_overflow_icon {
+  width: 25px;
 }
 
-html[data-theme="light"] #overflow-menu {
-  background: #dfe4e7;
+#menu_overflow {
+  visibility: hidden;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: #404040;
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 100%;
 }
 
-html[data-theme="light"] h2, html[data-theme="light"] h4 {
-  color: #076570;
+#menu_overflow[data-animate] {
+  transition-property: left, opacity;
+  transition-duration: .3s;
 }
 
-html[data-theme="light"] #fileIconSvgConfig {
-  fill: #076570;
+#menu_overflow > * {
+  vertical-align: middle;
+  text-align: center;
 }
 
-html[data-theme="light"] #explorables h2 span {
-  color: #ff8d00;
+#toolbar[data-menu-overflow-enabled] #menu_overflow_button {
+  display: block;
 }
 
-html[data-theme="light"] article[data-page="file-list"], html[data-theme="light"] #file-list-link[data-active] a {
-  background: #bbd5ea;
+#toolbar[data-menu-overflow-opened] #menu_overflow_button {
+  background: #030713;
 }
 
-html[data-theme="light"] #explorables fieldset input:checked + * {
-  color: #ff8d00;
-  background: #bbd5ea;
+#toolbar[data-menu-overflow-enabled][data-menu-overflow-opened] #toolbar-wrapper {
+  visibility: hidden;
 }
 
-html[data-theme="light"] #explorables #explorables-header, html[data-theme="light"] #explorables fieldset label input + * {
-  background: #ddf0ff;
+#toolbar[data-menu-overflow-opened] #menu_overflow {
+  visibility: visible;
+  opacity: 1;
+  margin-left: -40px;
+  display: block;
+  left: 0;
 }
 
-html[data-theme="light"] .execution-link {
-  color: #076570;
-  background: #ddf0ff;
+#toolbar[data-menu-overflow-enabled] #settings_box {
+  right: -40px;
 }
 .tooltip {
   color: #fff;
@@ -578,22 +620,29 @@ html[data-theme="light"] .execution-link {
   cursor: default;
   background-color: #5e5e5e;
   border-radius: 6px;
-  margin-left: -40px;
+  margin-bottom: 6px;
   padding: 10px;
   font-size: 14px;
   display: none;
   position: absolute;
-  bottom: 120%;
+  bottom: 100%;
 }
 
 .tooltip:after {
   content: "";
   border: 5px solid #0000;
   border-top-color: #5e5e5e;
-  margin-left: -5px;
   position: absolute;
   top: 100%;
-  left: 60px;
+  left: 14px;
+}
+
+.tooltip[data-toolip-left] {
+  margin-right: 5px;
+}
+
+.tooltip[data-toolip-left]:after {
+  left: 15px;
 }
 
 [data-tooltip-visible] .tooltip, [data-tooltip-auto-visible] .tooltip {
@@ -611,7 +660,7 @@ html[data-theme="light"] .execution-link {
   }
 }
 
-.tooltipAction {
+.tooltip_action {
   border: 1px solid #a0a0a0;
   border-radius: 3px;
   margin-top: 6px;
@@ -619,111 +668,55 @@ html[data-theme="light"] .execution-link {
   display: inline-block;
 }
 
-.tooltipAction a {
+.tooltip_action a {
   vertical-align: middle;
   color: #fff;
   text-decoration: none;
 }
 
-.tooltipIcon {
+.tooltip_icon {
   fill: #fff;
   width: 20px;
   height: 20px;
   vertical-align: middle;
 }
 
-html[data-animation-disabled] * {
-  transition: none !important;
-  animation-duration: 0s !important;
-  animation-delay: 0s !important;
-}
-
-[data-when] {
-  display: none !important;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-family: arial, sans;
-}
-
-[data-force-hide] {
-  display: none !important;
-}
-
-#toolbar-overlay {
-  width: 100%;
-  height: 100%;
-  filter: url(#better-blur);
-  background-color: #0003;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-#toolbar {
+.toolbar_control {
   height: 40px;
-  width: 100%;
-  background: #404040;
-  position: fixed;
-  bottom: 0;
-}
-
-#toolbar-wrapper {
-  width: 100%;
-  height: 100%;
-  display: table;
-}
-
-#toolbar-wrapper > * {
-  vertical-align: middle;
-  display: table-cell;
-}
-
-#toolbar button {
-  height: 100%;
+  width: 40px;
   background: none;
   border: none;
+  justify-content: center;
+  align-items: center;
   padding: 0;
+  display: flex;
 }
 
-#toolbar button:hover, #toolbar a:hover {
+.toolbar_control:hover {
   cursor: pointer;
 }
 
-#fileIconSvg, .settings-icon {
+#document_index_icon, .settings-icon {
   width: 20px;
 }
 
-.iconToolbar {
+.toolbar_icon {
   height: 40px;
   fill: #cecece;
   color: #cecece;
 }
 
-.iconToolbar:hover {
+.toolbar_icon:hover {
   fill: #909090 !important;
 }
 
-.toolbar-icon-wrapper {
+.toolbar_icon_wrapper {
   height: 100%;
   text-align: center;
   width: 40px;
   display: inline-block;
 }
 
-#file-list-link[data-active] a {
-  background: #1f262c;
-}
-
 #file[data-active] {
   background: #1f262cb8;
 }
@@ -732,53 +725,26 @@ html {
   background: #030713;
 }
 
-#crossIconSvg {
+#toolbar_close_button_icon {
   width: 18px;
 }
 
-#toolbar-trigger {
-  height: 40px;
-  width: 40px;
-  background: none;
-  border: 1px solid #00000054;
-  border-bottom: none;
-  border-radius: 5px 5px 0 0;
-  padding: 0;
-  display: block;
-  position: absolute;
-  bottom: -32px;
-  right: 20px;
-  overflow: hidden;
-  box-shadow: 0 0 6px 2px #00000075;
-}
-
-#toolbar-trigger[data-animate] {
-  transition: all .6s;
-}
-
-#toolbar-trigger #jsenvLogoSvg {
-  width: 35px;
-  height: 35px;
-  opacity: 0;
-  transition: all .6s;
-}
-
-html[data-toolbar-visible] #toolbar-trigger {
-  display: none;
-}
-
-#toolbar-trigger:hover {
-  cursor: pointer;
+#toolbar a {
+  color: inherit;
 }
 
-#toolbar-trigger[data-expanded] {
-  bottom: 0;
+#changes_indicator button {
+  width: auto;
+  justify-content: center;
+  align-items: stretch;
+  display: flex;
 }
 
-#toolbar-trigger[data-expanded] #jsenvLogoSvg {
-  opacity: 1;
+.changes_icon {
+  width: 32px;
 }
 
-#toolbar a {
-  color: inherit;
+.changes_text {
+  align-items: center;
+  display: flex;
 }