@openviking/react 0.0.0-stage → 0.1.1

package/dist/components/file-preview/style.css

@@ -0,0 +1,285 @@
+.ov-file-preview {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  color: inherit;
+  flex-direction: column;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+}
+
+.ov-file-preview__tab-row {
+  border-bottom: 1px solid var(--ov-ui-border, #00000014);
+  flex: none;
+  align-items: flex-end;
+  gap: 2px;
+  min-width: 0;
+  padding: 4px 8px 0;
+  display: flex;
+  overflow-x: auto;
+}
+
+.ov-file-preview__tab {
+  border-radius: var(--ov-ui-radius, 6px) var(--ov-ui-radius, 6px) 0 0;
+  max-width: 220px;
+  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 1px solid #0000;
+  border-bottom: none;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  display: inline-flex;
+}
+
+.ov-file-preview__tab:hover:not(:disabled) {
+  color: inherit;
+  background: var(--ov-ui-row-hover, #0000000a);
+}
+
+.ov-file-preview__tab[aria-selected="true"] {
+  border-color: var(--ov-ui-border, #00000014);
+  background: var(--ov-ui-surface, canvas);
+  color: inherit;
+}
+
+.ov-file-preview__tab:focus-visible {
+  outline: 2px solid var(--ov-ui-focus-ring, #2563c5);
+  outline-offset: -2px;
+}
+
+.ov-file-preview__tab:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.ov-file-preview__tab-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ov-file-preview__icon-slot {
+  color: var(--ov-ui-icon, color-mix(in srgb, currentColor 62%, transparent));
+  flex: none;
+  align-items: center;
+  display: inline-flex;
+}
+
+.ov-file-preview__icon {
+  display: block;
+}
+
+.ov-file-preview__header {
+  border-bottom: 1px solid var(--ov-ui-border, #00000014);
+  flex-wrap: wrap;
+  flex: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 8px 12px;
+  display: flex;
+}
+
+.ov-file-preview__path-row {
+  flex: auto;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-file-preview__breadcrumb {
+  border-radius: var(--ov-ui-radius, 6px);
+  min-width: 0;
+  color: var(--ov-ui-accent, #2563c5);
+  font: inherit;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  overflow: hidden;
+}
+
+.ov-file-preview__breadcrumb:disabled {
+  color: inherit;
+  cursor: default;
+}
+
+.ov-file-preview__breadcrumb:not(:disabled):hover {
+  background: var(--ov-ui-row-hover, #0000000a);
+}
+
+.ov-file-preview__title-extra {
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  display: inline-flex;
+}
+
+.ov-file-preview__header-actions {
+  flex-wrap: wrap;
+  flex: 0 auto;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-file-preview__action {
+  border: 1px solid var(--ov-ui-border, #00000014);
+  border-radius: var(--ov-ui-radius, 6px);
+  width: 26px;
+  height: 26px;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.ov-file-preview__action:hover:not(:disabled) {
+  background: var(--ov-ui-row-hover, #0000000a);
+}
+
+.ov-file-preview__action:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+
+.ov-file-preview__action-icon {
+  display: block;
+}
+
+.ov-file-preview__button, .ov-file-preview__button--primary {
+  border-radius: var(--ov-ui-radius, 6px);
+  font: inherit;
+  cursor: pointer;
+  padding: 3px 10px;
+}
+
+.ov-file-preview__button {
+  border: 1px solid var(--ov-ui-border, #00000014);
+  color: inherit;
+  background: none;
+}
+
+.ov-file-preview__button:hover {
+  background: var(--ov-ui-row-hover, #0000000a);
+}
+
+.ov-file-preview__button--primary {
+  background: var(--ov-ui-accent, #2563c5);
+  color: #fff;
+  border: 1px solid #0000;
+}
+
+.ov-file-preview__switch {
+  border-radius: var(--ov-ui-radius, 6px);
+  background: var(--ov-ui-row-hover, #0000000a);
+  padding: 2px;
+  display: inline-flex;
+}
+
+.ov-file-preview__switch-item {
+  border-radius: calc(var(--ov-ui-radius, 6px) - 2px);
+  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 2px 10px;
+}
+
+.ov-file-preview__switch-item[data-active] {
+  background: var(--ov-ui-surface, canvas);
+  color: inherit;
+}
+
+.ov-file-preview__switch-item:focus-visible {
+  outline: 2px solid var(--ov-ui-focus-ring, #2563c5);
+  outline-offset: -2px;
+}
+
+.ov-file-preview__extra-actions {
+  align-items: center;
+  gap: 6px;
+  display: inline-flex;
+}
+
+.ov-file-preview__body {
+  flex: auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.ov-file-preview__text-body {
+  padding: 12px;
+}
+
+.ov-file-preview__pre {
+  font-family: var(--ov-ui-font-mono, ui-monospace, monospace);
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.ov-file-preview__editor {
+  flex-direction: column;
+  height: 100%;
+  min-height: 240px;
+  display: flex;
+}
+
+.ov-file-preview__save-error {
+  padding: 8px 12px;
+}
+
+.ov-file-preview__textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  color: inherit;
+  font-family: var(--ov-ui-font-mono, ui-monospace, monospace);
+  resize: none;
+  background: none;
+  border: none;
+  flex: auto;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.ov-file-preview__textarea:focus-visible {
+  outline: 2px solid var(--ov-ui-focus-ring, #2563c5);
+  outline-offset: -2px;
+}
+
+.ov-file-preview__state {
+  justify-content: center;
+  align-items: center;
+  min-height: 120px;
+  padding: 24px;
+  display: flex;
+}
+
+.ov-file-preview__muted {
+  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+}
+
+
+