@grifhinz/logics-manager 2.1.2 → 2.3.0

package/clients/shared-web/media/css/toolbar.css

@@ -0,0 +1,576 @@
+.toolbar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  padding: 8px 8px;
+  background: var(--vscode-titleBar-activeBackground, #2d2d2d);
+  border-bottom: 1px solid var(--vscode-panel-border, #333333);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.toolbar__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+}
+
+.toolbar__row--primary {
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+
+.toolbar__row--secondary {
+  padding-top: 8px;
+  border-top: 1px solid var(--vscode-panel-border, #333333);
+  flex-wrap: wrap;
+}
+
+.toolbar__row--secondary[hidden] {
+  display: none;
+}
+
+.toolbar__filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.toolbar__buttons {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  flex-wrap: nowrap;
+  flex: 0 0 auto;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.toolbar__search {
+  flex: 1 1 220px;
+  min-width: 160px;
+  max-width: 320px;
+}
+
+.toolbar__ordering {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex: 0 1 auto;
+}
+
+.toolbar__select {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground, #9da5b4);
+}
+
+.toolbar__select select {
+  height: 28px;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: var(--vscode-dropdown-background, var(--vscode-input-background, #1f1f1f));
+  color: var(--vscode-dropdown-foreground, var(--vscode-input-foreground, #e5e5e5));
+  padding: 0 8px;
+  font-size: 12px;
+}
+
+.toolbar__select select:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--vscode-button-background, #0e639c));
+  outline-offset: 1px;
+}
+
+.toolbar__search-input {
+  width: 100%;
+  height: 28px;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: var(--vscode-input-background, #1f1f1f);
+  color: var(--vscode-input-foreground, #e5e5e5);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.toolbar__search-input::placeholder {
+  color: var(--vscode-input-placeholderForeground, #8b8b8b);
+}
+
+.toolbar__search-input:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--vscode-button-background, #0e639c));
+  outline-offset: 1px;
+}
+
+.toolbar__filter {
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vscode-foreground, #d4d4d4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+}
+
+.toolbar__filter svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.toolbar__filter--active {
+  border-color: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-background, #0e639c);
+}
+
+.toolbar__filter--open {
+  background: var(--vscode-button-secondaryBackground, #3a3d41);
+  border-color: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-background, #0e639c);
+}
+
+.toolbar__filter--active::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--vscode-button-background, #0e639c);
+  box-shadow: 0 0 0 2px var(--vscode-titleBar-activeBackground, #2d2d2d);
+}
+
+.filter-panel__reset {
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vscode-foreground, #d4d4d4);
+  font-size: 12px;
+  padding: 6px 8px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.toolbar__toggles {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  flex: 1 1 360px;
+}
+
+.toolbar__reset {
+  margin-left: auto;
+}
+
+.filter-panel__reset:hover {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+}
+
+.toolbar__tools {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.tools-panel {
+  position: absolute;
+  top: 34px;
+  left: 0;
+  right: auto;
+  min-width: 260px;
+  max-width: calc(100vw - 16px);
+  background: var(--vscode-editorWidget-background, #202020);
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 8px;
+  padding: 8px;
+  display: none;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 20;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+}
+
+.tools-panel--open {
+  display: flex;
+}
+
+.tools-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.tools-panel__header-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--vscode-descriptionForeground, #9da5b4);
+  padding: 0 2px;
+}
+
+.tools-panel__close {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #9da5b4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.tools-panel__close svg {
+  width: 12px;
+  height: 12px;
+}
+
+.tools-panel__close:hover {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+  color: var(--vscode-foreground, #d4d4d4);
+}
+
+.tools-panel__close:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--vscode-button-background, #0e639c));
+  outline-offset: 1px;
+}
+
+.tools-panel__switcher {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--vscode-panel-border, #333333);
+}
+
+.tools-panel__switch {
+  min-height: 30px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #9da5b4);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 0 6px;
+}
+
+.tools-panel__switch svg {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+}
+
+.tools-panel__switch:hover {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+  color: var(--vscode-foreground, #d4d4d4);
+}
+
+.tools-panel__switch.is-active {
+  background: var(--vscode-button-secondaryBackground, #3a3d41);
+  border-color: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-foreground, #ffffff);
+}
+
+.tools-panel__switch:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--vscode-button-background, #0e639c));
+  outline-offset: 1px;
+}
+
+.tools-panel__view {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tools-panel__view[hidden] {
+  display: none;
+}
+
+.tools-panel__item {
+  text-align: left;
+  background: transparent;
+  border: none;
+  color: var(--vscode-foreground, #d4d4d4);
+  font-size: 12px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.tools-panel__item:hover {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+}
+
+.tools-panel__item:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.tools-panel__section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tools-panel__section:not(:last-child) {
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--vscode-panel-border, #333333);
+}
+
+.tools-panel__section-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--vscode-descriptionForeground, #9da5b4);
+  padding: 0 8px;
+}
+
+.tools-panel__section-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.btn {
+  border: 1px solid var(--vscode-button-border, transparent);
+  background: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-foreground, #ffffff);
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn--primary {
+  background: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-foreground, #ffffff);
+}
+
+.btn--icon {
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn--icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.btn--secondary,
+.btn--contextual {
+  background: var(--vscode-button-secondaryBackground, #3a3d41);
+  color: var(--vscode-button-secondaryForeground, #e7e7e7);
+  border-color: var(--vscode-panel-border, #333333);
+}
+
+.btn--active:not(:disabled) {
+  background: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-foreground, #ffffff);
+  border-color: var(--vscode-button-border, transparent);
+}
+
+.btn--contextual.btn--contextual-active:not(:disabled) {
+  background: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-foreground, #ffffff);
+  border-color: var(--vscode-button-border, transparent);
+}
+
+.btn--active:not(:disabled) {
+  background: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-foreground, #ffffff);
+  border-color: var(--vscode-button-border, transparent);
+}
+
+.activity-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 0;
+  background: transparent;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.activity-panel[hidden] {
+  display: none;
+}
+
+.activity-panel__header {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vscode-descriptionForeground, #9da5b4);
+  padding: 0 12px;
+}
+
+.activity-panel__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 12px 12px;
+}
+
+.activity-panel__entry {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+  text-align: left;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vscode-foreground, #d4d4d4);
+  padding: 8px;
+  cursor: pointer;
+  min-width: 0;
+  white-space: normal;
+}
+
+.activity-panel__entry:hover {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+}
+
+.activity-panel__entry:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--vscode-button-background, #0e639c));
+  outline-offset: 1px;
+}
+
+.activity-panel__title {
+  font-size: 12px;
+  min-width: 0;
+  width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.activity-panel__meta {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground, #9da5b4);
+  min-width: 0;
+  width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.activity-panel__updated {
+  font-size: 11px;
+  color: var(--vscode-editorInfo-foreground, var(--vscode-descriptionForeground, #9da5b4));
+  min-width: 0;
+  width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.help-banner {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px;
+  border-bottom: 1px solid var(--vscode-panel-border, #333333);
+  background: rgba(14, 99, 156, 0.12);
+}
+
+.help-banner[hidden] {
+  display: none;
+}
+
+.help-banner__copy {
+  font-size: 12px;
+  color: var(--vscode-foreground, #d4d4d4);
+}
+
+.help-banner__dismiss {
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vscode-foreground, #d4d4d4);
+  font-size: 12px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.btn--caution {
+  background: rgba(220, 38, 38, 0.1);
+  color: var(--vscode-errorForeground, #f87171);
+  border-color: rgba(220, 38, 38, 0.35);
+}
+
+.btn[data-current-mode="list"] {
+  background: var(--vscode-button-secondaryBackground, #3a3d41);
+  color: var(--vscode-button-secondaryForeground, #e7e7e7);
+}
+
+.btn[data-current-mode="board"] {
+  background: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-foreground, #ffffff);
+}
+
+@media (max-width: 275px) {
+  .toolbar__row--primary {
+    flex-wrap: wrap;
+  }
+
+  .toolbar__buttons {
+    flex-wrap: wrap;
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .toolbar__search {
+    max-width: none;
+  }
+
+  .toolbar__reset {
+    margin-left: 0;
+  }
+}