@jsenv/core 23.6.1 → 23.8.0

package/src/internal/toolbar/toolbar.main.css

@@ -1,188 +1,196 @@
-@import "./animation/animation.css";
-@import "./execution/execution.css";
-@import "./compilation/compilation.css";
-@import "./focus/focus.css";
-@import "./eventsource/eventsource.css";
-@import "./responsive/overflow-menu.css";
-@import "./settings/settings.css";
-@import "./theme/light-theme.css";
-@import "./tooltip/tooltip.css";
-@import "./variant/variant.css";
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-family: arial, sans;
-}
-
-/* global utils */
-[data-force-hide] {
-  display: none !important;
-}
-
-#toolbar-overlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  filter: url(#better-blur);
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-#toolbar {
-  position: fixed;
-  bottom: 0;
-  height: 40px;
-  width: 100%;
-  background: #404040;
-}
-
-#toolbar-wrapper {
-  display: table;
-  width: 100%;
-  height: 100%;
-}
-
-#toolbar-wrapper > * {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-#toolbar button {
-  background: none;
-  border: none;
-  height: 100%;
-  padding: 0;
-}
-
-#toolbar button:hover {
-  cursor: pointer;
-}
-
-#toolbar a:hover {
-  cursor: pointer;
-}
-
-/* file name input & indicators */
-#file {
-  max-width: 40%;
-  padding: 0 1.2em;
-}
-
-#file-input {
-  width: 100%;
-  padding: 0px;
-  font-family: monospace;
-  font-size: 15px;
-  color: #cecece;
-  background: transparent;
-  border: transparent;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-#file-input:focus {
-  border-bottom: 1px solid grey;
-}
-
-/* file and settings icons */
-#fileIconSvg,
-.settings-icon {
-  width: 20px;
-}
-
-.iconToolbar {
-  height: 40px;
-  fill: #cecece;
-  color: #cecece;
-}
-
-.iconToolbar:hover {
-  fill: #909090 !important;
-}
-
-.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: rgba(31, 38, 44, 0.72);
-}
-
-#settings[data-active] button {
-  background: #030713;
-}
-
-/* close icon */
-#crossIconSvg {
-  width: 18px;
-}
-
-/* re-open toolbar-trigger */
-#toolbar-trigger {
-  display: block;
-  overflow: hidden;
-  position: absolute;
-  bottom: -32px;
-  right: 20px;
-  height: 40px;
-  width: 40px;
-  padding: 0;
-  border-radius: 5px 5px 0 0;
-  border: 1px solid rgba(0, 0, 0, 0.33);
-  border-bottom: none;
-  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
-  background: transparent;
-}
-
-#toolbar-trigger[data-animate] {
-  transition: 600ms;
-}
-
-#toolbar-trigger #jsenvLogoSvg {
-  width: 35px;
-  height: 35px;
-  opacity: 0;
-  transition: 600ms;
-}
-
-html[data-toolbar-visible] #toolbar-trigger {
-  display: none;
-}
-
-#toolbar-trigger:hover {
-  cursor: pointer;
-}
-
-#toolbar-trigger[data-expanded] {
-  bottom: 0;
-}
-
-#toolbar-trigger[data-expanded] #jsenvLogoSvg {
-  opacity: 1;
-}
-
-/* #jsenvLogo {
-  transition: 600ms;
-} */
-
-#toolbar a {
-  color: inherit;
-}
+@import "./execution/execution.css";
+@import "./compilation/compilation.css";
+@import "./focus/focus.css";
+@import "./eventsource/eventsource.css";
+@import "./responsive/overflow-menu.css";
+@import "./settings/settings.css";
+@import "./theme/light-theme.css";
+@import "./tooltip/tooltip.css";
+
+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;
+}
+
+/* global utils */
+[data-force-hide] {
+  display: none !important;
+}
+
+#toolbar-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  filter: url(#better-blur);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+#toolbar {
+  position: fixed;
+  bottom: 0;
+  height: 40px;
+  width: 100%;
+  background: #404040;
+}
+
+#toolbar-wrapper {
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+
+#toolbar-wrapper > * {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#toolbar button {
+  background: none;
+  border: none;
+  height: 100%;
+  padding: 0;
+}
+
+#toolbar button:hover {
+  cursor: pointer;
+}
+
+#toolbar a:hover {
+  cursor: pointer;
+}
+
+/* file name input & indicators */
+#file {
+  max-width: 40%;
+  padding: 0 1.2em;
+}
+
+#file-input {
+  width: 100%;
+  padding: 0px;
+  font-family: monospace;
+  font-size: 15px;
+  color: #cecece;
+  background: transparent;
+  border: transparent;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#file-input:focus {
+  border-bottom: 1px solid grey;
+}
+
+/* file and settings icons */
+#fileIconSvg,
+.settings-icon {
+  width: 20px;
+}
+
+.iconToolbar {
+  height: 40px;
+  fill: #cecece;
+  color: #cecece;
+}
+
+.iconToolbar:hover {
+  fill: #909090 !important;
+}
+
+.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: rgba(31, 38, 44, 0.72);
+}
+
+#settings[data-active] button {
+  background: #030713;
+}
+
+/* close icon */
+#crossIconSvg {
+  width: 18px;
+}
+
+/* re-open toolbar-trigger */
+#toolbar-trigger {
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  bottom: -32px;
+  right: 20px;
+  height: 40px;
+  width: 40px;
+  padding: 0;
+  border-radius: 5px 5px 0 0;
+  border: 1px solid rgba(0, 0, 0, 0.33);
+  border-bottom: none;
+  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
+  background: transparent;
+}
+
+#toolbar-trigger[data-animate] {
+  transition: 600ms;
+}
+
+#toolbar-trigger #jsenvLogoSvg {
+  width: 35px;
+  height: 35px;
+  opacity: 0;
+  transition: 600ms;
+}
+
+html[data-toolbar-visible] #toolbar-trigger {
+  display: none;
+}
+
+#toolbar-trigger:hover {
+  cursor: pointer;
+}
+
+#toolbar-trigger[data-expanded] {
+  bottom: 0;
+}
+
+#toolbar-trigger[data-expanded] #jsenvLogoSvg {
+  opacity: 1;
+}
+
+/* #jsenvLogo {
+  transition: 600ms;
+} */
+
+#toolbar a {
+  color: inherit;
+}