@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-toolbar/kritzel-toolbar.css

@@ -0,0 +1,348 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  max-width: 100%;
+  z-index: 1;
+}
+
+:host(.mobile) {
+  --kritzel-toolbar-control-hover-background-color: transparent;
+  --kritzel-toolbar-control-active-background-color: transparent;
+}
+
+.kritzel-toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--kritzel-toolbar-gap, 8px);
+  height: 100%;
+  padding: var(--kritzel-toolbar-padding, 8px);
+  background-color: var(--kritzel-toolbar-background-color, #ffffff);
+  border-radius: var(--kritzel-toolbar-border-radius, 16px);
+  box-shadow: var(--kritzel-toolbar-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-toolbar-border, 1px solid #ebebeb);
+  z-index: 1;
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.kritzel-tools-scroll {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kritzel-toolbar-gap, 8px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px;
+  margin: -4px;
+
+  /* Hide scrollbar for all browsers */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.kritzel-tools-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* Scroll indicator gradients */
+.scroll-indicator-left,
+.scroll-indicator-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 32px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+  z-index: 1;
+}
+
+.scroll-indicator-left {
+  left: 0;
+  background: linear-gradient(to right, var(--kritzel-toolbar-background-color, #ffffff), transparent);
+  border-radius: var(--kritzel-toolbar-border-radius, 16px) 0 0 var(--kritzel-toolbar-border-radius, 16px);
+}
+
+.scroll-indicator-right {
+  right: 0;
+  background: linear-gradient(to left, var(--kritzel-toolbar-background-color, #ffffff), transparent);
+  border-radius: 0 var(--kritzel-toolbar-border-radius, 16px) var(--kritzel-toolbar-border-radius, 16px) 0;
+}
+
+.scroll-indicator-left.visible,
+.scroll-indicator-right.visible {
+  opacity: 1;
+}
+
+.kritzel-control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--kritzel-toolbar-control-color, #000000);
+  border-radius: var(--kritzel-toolbar-control-border-radius, 12px);
+  padding: var(--kritzel-toolbar-control-padding, 8px);
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+  font-weight: bold;
+}
+
+.kritzel-control:focus,
+.kritzel-control:hover {
+  background-color: var(--kritzel-toolbar-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.kritzel-control:active {
+  background-color: var(--kritzel-toolbar-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.kritzel-control.selected,
+.kritzel-control.selected:hover,
+.kritzel-control.selected:active {
+  background-color: var(--kritzel-toolbar-control-selected-background-color, #007AFF) !important;
+  color: var(--kritzel-toolbar-control-selected-color, #ffffff) !important;
+}
+
+.kritzel-control.selected:focus {
+  background-color: var(--kritzel-toolbar-control-selected-background-color, #007bffe3) !important;
+
+}
+
+.kritzel-control:disabled,
+.kritzel-control.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.kritzel-control-separator {
+  width: 1px;
+  height: 24px;
+  background-color: var(--kritzel-toolbar-separator-color, #ebebeb);
+  margin: 0 4px;
+}
+
+
+/* Split-button control styles */
+.kritzel-control-split {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: var(--kritzel-toolbar-control-border-radius, 12px);
+  color: var(--kritzel-toolbar-control-color, #000000);
+}
+
+.kritzel-control-split .kritzel-control-main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--kritzel-toolbar-control-padding, 8px);
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--kritzel-toolbar-control-border-radius, 12px);
+  color: inherit;
+}
+
+/* When selected, main button only has left-rounded corners (dropdown appears on right) */
+.kritzel-control-split.selected .kritzel-control-main {
+  border-radius: var(--kritzel-toolbar-control-border-radius, 12px) 0 0 var(--kritzel-toolbar-control-border-radius, 12px);
+}
+
+.kritzel-control-split .kritzel-control-dropdown {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+  border-radius: 0 var(--kritzel-toolbar-control-border-radius, 12px) var(--kritzel-toolbar-control-border-radius, 12px) 0;
+  color: inherit;
+
+  /* Hidden state - collapsed with no visibility */
+  width: 0;
+  padding: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  /* Smooth transition */
+  transition: width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out;
+}
+
+.kritzel-control-split .kritzel-control-dropdown.visible {
+  width: auto;
+  padding: 0 6px;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.kritzel-control-split .kritzel-control-main:focus,
+.kritzel-control-split .kritzel-control-main:hover,
+.kritzel-control-split .kritzel-control-dropdown:focus,
+.kritzel-control-split .kritzel-control-dropdown:hover {
+  background-color: var(--kritzel-toolbar-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.kritzel-control-split .kritzel-control-main:active,
+.kritzel-control-split .kritzel-control-dropdown:active {
+  background-color: var(--kritzel-toolbar-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.kritzel-control-split.selected {
+  background-color: var(--kritzel-toolbar-control-selected-background-color, #007AFF) !important;
+  color: var(--kritzel-toolbar-control-selected-color, #ffffff) !important;
+}
+
+.kritzel-control-split.selected .kritzel-control-main:hover,
+.kritzel-control-split.selected .kritzel-control-dropdown:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.kritzel-control-split .kritzel-control-main:disabled,
+.kritzel-control-split .kritzel-control-main.disabled,
+.kritzel-control-split .kritzel-control-dropdown:disabled,
+.kritzel-control-split .kritzel-control-dropdown.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Submenu content styles (positioned by kritzel-tooltip) */
+.kritzel-submenu-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kritzel-submenu-gap, 4px);
+  min-width: 140px;
+}
+
+.kritzel-submenu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border-radius: 8px;
+  color: var(--kritzel-toolbar-control-color, #000000);
+  font-size: 14px;
+  text-align: left;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.kritzel-submenu-item:hover {
+  background-color: var(--kritzel-toolbar-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.kritzel-submenu-item.active {
+  background-color: var(--kritzel-toolbar-control-selected-background-color, #007AFF);
+  color: var(--kritzel-toolbar-control-selected-color, #ffffff);
+}
+
+.kritzel-submenu-item.active:hover {
+  background-color: var(--kritzel-toolbar-control-selected-background-color, #007AFF);
+}
+
+.kritzel-config-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  flex-shrink: 0;
+
+  /* Hidden state - collapsed */
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  margin-left: calc(-1 * var(--kritzel-toolbar-gap, 8px));
+
+  /* Smooth transition */
+  transition: width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out;
+}
+
+.kritzel-config-container.visible {
+  width: 40px;
+  opacity: 1;
+  pointer-events: auto;
+  margin-left: 0;
+  overflow: visible;
+}
+
+/* Left gradient on config container */
+.config-gradient-left {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -32px;
+  width: 32px;
+  background: linear-gradient(to right, transparent, var(--kritzel-toolbar-background-color, #ffffff));
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.config-gradient-left.visible {
+  opacity: 1;
+}
+
+.kritzel-config {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border-radius: 50%;
+}
+
+.color-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
+}
+
+.font-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
+}
+
+.no-config {
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  border: 1px dashed gray;
+}
+
+kritzel-tooltip {
+  z-index: 10001;
+}