atomicuilibrary 0.0.1

package/dist/collection/components/code-editor/code-editor.css

@@ -0,0 +1,1081 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  font-family: "Menlo", "Monaco", "Courier New", monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border-color, var(--border-subtle, #e2e8f0));
+  background-color: var(--editor-bg);
+  color: var(--editor-fg);
+  --editor-bg: var(--bg-primary, #ffffff);
+  --editor-fg: var(--text-primary, #1e293b);
+  --line-num-bg: var(--bg-primary, #f8fafc);
+  --line-num-fg: var(--color-primary, #94a3b8);
+  --indent-guide: rgba(0, 0, 0, 0.05);
+  --cursor-color: var(--text-primary, #000);
+  --selection-bg: var(--color-primary, #b3d4fc);
+  --status-bar-bg: var(--bg-secondary, #f1f5f9);
+  --status-bar-fg: var(--color-primary, #64748b);
+  --minimap-width: 60px;
+  --git-added: var(--color-success, #28a745);
+  --git-modified: var(--color-danger, #ffc107);
+}
+
+:host(.theme-vs-dark) {
+  --editor-bg: var(--bg-primary, #1e1e1e);
+  --editor-fg: var(--bg-secondary, #d4d4d4);
+  --line-num-bg: var(--bg-primary, #1e1e1e);
+  --line-num-fg: var(--text-muted, #858585);
+  --cursor-color: var(--text-standard, #ffffff);
+  --selection-bg: var(--color-primary, #264f78);
+  --status-bar-bg: var(--color-primary, #007acc);
+  --status-bar-fg: var(--bg-primary, #ffffff);
+  border-color: var(--border-strong, #333);
+}
+
+.code-editor-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
+.code-editor-layout {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--editor-bg);
+}
+
+.sidebar-tabs {
+  width: 48px;
+  flex-shrink: 0;
+  background-color: var(--status-bar-bg);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 0;
+  gap: 20px;
+}
+.sidebar-tabs .sidebar-tab {
+  font-size: 20px;
+  color: var(--status-bar-fg);
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  padding: 8px 0;
+  opacity: 0.6;
+  transition: all 0.2s;
+}
+.sidebar-tabs .sidebar-tab.active {
+  opacity: 1;
+  color: var(--color-primary, #007acc);
+  border-left: 2px solid var(--color-primary, #007acc);
+}
+.sidebar-tabs .sidebar-tab:hover {
+  opacity: 1;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.sidebar-header {
+  padding: 10px 16px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--status-bar-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.file-list {
+  padding: 4px 0;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 16px;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--status-bar-fg);
+  transition: background 0.2s;
+}
+.file-item:hover {
+  background-color: rgba(128, 128, 128, 0.1);
+  color: var(--editor-fg);
+}
+.file-item.active {
+  background-color: rgba(0, 122, 204, 0.1);
+  color: var(--color-primary, #007acc);
+  font-weight: 500;
+}
+.file-item i {
+  width: 16px;
+  text-align: center;
+}
+.file-item .text-warning {
+  color: var(--color-warning, #f59e0b);
+}
+.file-item .text-danger {
+  color: var(--color-danger, #ef4444);
+}
+.file-item .text-primary {
+  color: var(--color-primary, #10b981);
+}
+
+.editor-main-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.editor-breadcrumbs {
+  height: 35px;
+  background-color: var(--editor-bg);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  font-size: 13px;
+  color: var(--status-bar-fg);
+  gap: 10px;
+  user-select: none;
+}
+.editor-breadcrumbs .breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+.editor-breadcrumbs .breadcrumb-item:hover {
+  color: var(--editor-fg);
+}
+.editor-breadcrumbs .breadcrumb-item i {
+  font-size: 14px;
+}
+.editor-breadcrumbs .breadcrumb-item .separator {
+  opacity: 0.5;
+  margin: 0 4px;
+}
+
+.editor-bottom-panel {
+  height: 250px;
+  background-color: var(--editor-bg);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: height 0.3s ease;
+}
+.editor-bottom-panel.collapsed {
+  height: 0;
+  border-top: none;
+}
+.editor-bottom-panel .panel-header {
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--status-bar-bg);
+}
+.editor-bottom-panel .panel-tabs {
+  display: flex;
+  gap: 20px;
+  height: 100%;
+}
+.editor-bottom-panel .panel-tabs .panel-tab {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--status-bar-fg);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  opacity: 0.7;
+  transition: all 0.2s;
+}
+.editor-bottom-panel .panel-tabs .panel-tab:hover {
+  opacity: 1;
+}
+.editor-bottom-panel .panel-tabs .panel-tab.active {
+  opacity: 1;
+  color: var(--color-primary, #007acc);
+  border-bottom-color: var(--color-primary, #007acc);
+}
+.editor-bottom-panel .panel-controls i {
+  font-size: 12px;
+  color: var(--status-bar-fg);
+  cursor: pointer;
+  opacity: 0.6;
+}
+.editor-bottom-panel .panel-controls i:hover {
+  opacity: 1;
+  color: var(--color-danger, #ef4444);
+}
+.editor-bottom-panel .panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+  font-family: "Menlo", "Monaco", "Courier New", monospace;
+  background-color: var(--editor-bg);
+}
+.editor-bottom-panel .terminal-content .log-item {
+  margin-bottom: 4px;
+  font-size: 12px;
+  display: flex;
+  gap: 8px;
+}
+.editor-bottom-panel .terminal-content .log-item .log-time {
+  opacity: 0.5;
+}
+.editor-bottom-panel .terminal-content .log-item.info {
+  color: var(--color-success, #10b981);
+}
+.editor-bottom-panel .terminal-content .log-item.error {
+  color: var(--color-danger, #ef4444);
+}
+.editor-bottom-panel .terminal-content .log-item.warn {
+  color: var(--color-warning, #f59e0b);
+}
+.editor-bottom-panel .terminal-content .terminal-input-line {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  align-items: center;
+}
+.editor-bottom-panel .terminal-content .terminal-input-line .terminal-prompt {
+  color: var(--color-primary, #007acc);
+  font-weight: bold;
+}
+.editor-bottom-panel .terminal-content .terminal-input-line .terminal-input {
+  background: transparent;
+  border: none;
+  color: var(--editor-fg);
+  outline: none;
+  flex: 1;
+  font-family: inherit;
+  font-size: 12px;
+}
+
+.line-numbers {
+  flex-shrink: 0;
+  padding: 10px 0;
+  text-align: right;
+  background-color: var(--line-num-bg);
+  color: var(--line-num-fg);
+  border-right: 1px solid rgba(128, 128, 128, 0.1);
+  user-select: none;
+  min-width: 45px;
+  overflow: hidden;
+}
+.line-numbers .line-number {
+  display: flex;
+  padding: 0 4px 0 8px;
+  height: 1.5em;
+  white-space: nowrap;
+  justify-content: space-between;
+  cursor: pointer;
+}
+.line-numbers .line-number .fold-icon {
+  opacity: 0;
+  font-size: 9px;
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
+  color: var(--line-num-fg);
+}
+.line-numbers .line-number.git-added {
+  border-left: 3px solid var(--git-added);
+}
+.line-numbers .line-number.git-modified {
+  border-left: 3px solid var(--git-modified);
+}
+.line-numbers .line-number:hover .fold-icon {
+  opacity: 1;
+  color: var(--editor-fg);
+}
+
+.folded-placeholder {
+  background-color: var(--status-bar-bg);
+  color: var(--status-bar-fg);
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 10px;
+  cursor: pointer;
+  user-select: none;
+  margin-left: 4px;
+  display: inline-block;
+  height: 14px;
+  line-height: 14px;
+}
+
+.editor-wrapper {
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Common styles for textarea and pre to ensure perfect overlay */
+.editor-content,
+.syntax-highlighter {
+  margin: 0;
+  padding: 10px;
+  border: none;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  tab-size: 2;
+  white-space: pre;
+  word-wrap: normal;
+  overflow-x: auto;
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.editor-content {
+  color: transparent;
+  background: transparent;
+  caret-color: var(--cursor-color);
+  z-index: 1;
+  resize: none;
+  outline: none;
+  /* Indent Guides */
+  background-image: linear-gradient(to right, var(--indent-guide) 1px, transparent 1px);
+  background-size: calc(var(--indent-size, 2) * 8.4px) 100%;
+  background-repeat: repeat-x;
+  background-attachment: local;
+}
+
+.editor-content::selection {
+  background: var(--selection-bg);
+  color: transparent;
+}
+
+.syntax-highlighter {
+  z-index: 0;
+  pointer-events: none;
+  color: var(--editor-fg);
+}
+
+/* Linting Error Style */
+.lint-error {
+  text-decoration: underline wavy var(--color-danger, #ff4d4d);
+  text-decoration-thickness: 2px;
+  position: relative;
+}
+
+/* Minimap Styles */
+.minimap-container {
+  width: var(--minimap-width);
+  border-left: 1px solid rgba(128, 128, 128, 0.1);
+  background: var(--editor-bg);
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.minimap-content {
+  transform-origin: top left;
+  transform: scale(0.15);
+  /* Scaled down view */
+  width: 666%;
+  /* Compensate for scale (1 / 0.15) */
+  pointer-events: none;
+  padding: 10px;
+}
+
+.minimap-viewport {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  background: rgba(100, 100, 100, 0.2);
+  cursor: grab;
+  transition: background 0.2s;
+}
+.minimap-viewport:hover {
+  background: rgba(100, 100, 100, 0.3);
+}
+.minimap-viewport:active {
+  cursor: grabbing;
+  background: rgba(100, 100, 100, 0.4);
+}
+
+/* Status Bar Styles */
+.status-bar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 4px 12px;
+  background-color: var(--status-bar-bg);
+  color: var(--status-bar-fg);
+  font-size: 11px;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: default;
+}
+.status-item i {
+  font-size: 10px;
+}
+
+/* Command Palette */
+.command-palette-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 20px;
+  backdrop-filter: blur(1px);
+}
+
+.command-palette {
+  width: 400px;
+  max-width: 90%;
+  background: var(--editor-bg);
+  border: 1px solid var(--border-color, #454545);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideDown 0.15s ease-out;
+}
+.command-palette input {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background: var(--status-bar-bg);
+  color: var(--editor-fg);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+  border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
+}
+.command-palette .command-list {
+  max-height: 250px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.command-palette .command-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  display: flex;
+  justify-content: space-between;
+  color: var(--editor-fg);
+  border-left: 2px solid transparent;
+  /* Selection indicator */
+}
+.command-palette .command-item:hover, .command-palette .command-item.active {
+  background-color: var(--selection-bg);
+  border-left-color: var(--status-bar-bg);
+}
+.command-palette .command-item .shortcut {
+  opacity: 0.6;
+  font-size: 11px;
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+/* Syntax Highlighting Colors (Basic/Generic) */
+.token.comment {
+  color: var(--color-success, #6a9955);
+  font-style: italic;
+}
+
+.token.string {
+  color: var(--color-danger, #ce9178);
+}
+
+.token.number {
+  color: var(--color-primary, #b5cea8);
+}
+
+.token.boolean {
+  color: var(--color-primary, #569cd6);
+}
+
+.token.keyword {
+  color: var(--color-primary, #c586c0);
+  font-weight: bold;
+}
+
+.token.function {
+  color: var(--color-primary, #dcdcaa);
+}
+
+.token.operator {
+  color: var(--bg-secondary, #d4d4d4);
+}
+
+.token.class {
+  color: var(--color-primary, #4ec9b0);
+}
+
+.token.variable {
+  color: var(--color-primary, #9cdcfe);
+}
+
+.token.tag {
+  color: var(--color-primary, #569cd6);
+}
+
+.token.attr-name {
+  color: var(--color-primary, #9cdcfe);
+}
+
+.token.property {
+  color: var(--color-primary, #9cdcfe);
+}
+
+.token.selector {
+  color: var(--color-primary, #d7ba7d);
+}
+
+/* Theme overrides for light mode if needed explicitly */
+:host(:not(.theme-vs-dark)) .token.string {
+  color: var(--color-danger, #a31515);
+}
+:host(:not(.theme-vs-dark)) .token.keyword {
+  color: var(--color-primary, #af00db);
+}
+:host(:not(.theme-vs-dark)) .token.function {
+  color: var(--color-primary, #795e26);
+}
+:host(:not(.theme-vs-dark)) .token.number {
+  color: var(--color-success, #098658);
+}
+:host(:not(.theme-vs-dark)) .token.comment {
+  color: var(--color-success, #008000);
+}
+:host(:not(.theme-vs-dark)) .token.selector {
+  color: var(--text-primary, #800000);
+}
+
+.copy-button {
+  position: absolute;
+  top: 8px;
+  right: 20px;
+  /* Shifted to avoid minimap overlay */
+  z-index: 10;
+  background: rgba(128, 128, 128, 0.2);
+  border: none;
+  color: var(--editor-fg);
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+  font-size: 12px;
+}
+.copy-button:hover {
+  background: rgba(128, 128, 128, 0.4);
+}
+
+:host(:hover) .copy-button {
+  opacity: 1;
+}
+
+/* Search Widget */
+.search-widget {
+  position: absolute;
+  top: 10px;
+  right: 40px;
+  /* Left of copy button or below? overlap? */
+  right: 60px;
+  z-index: 50;
+  display: flex;
+  background: var(--editor-bg);
+  border: 1px solid var(--border-color, #ccc);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 4px;
+  align-items: center;
+}
+.search-widget .search-input {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--editor-fg);
+  padding: 4px;
+  font-size: 13px;
+  width: 150px;
+}
+.search-widget .search-actions {
+  display: flex;
+  gap: 2px;
+}
+.search-widget .search-actions button {
+  background: transparent;
+  border: none;
+  color: var(--status-bar-fg);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 2px;
+}
+.search-widget .search-actions button:hover {
+  background: var(--line-num-bg);
+  color: var(--editor-fg);
+}
+
+/* Autocompletion Suggestions */
+.suggestion-list {
+  position: absolute;
+  z-index: 100;
+  background: var(--editor-bg);
+  border: 1px solid var(--border-color, #ccc);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  max-height: 200px;
+  overflow-y: auto;
+  width: 200px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+  font-family: inherit;
+}
+.suggestion-list li {
+  padding: 4px 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--editor-fg);
+}
+.suggestion-list li.active, .suggestion-list li:hover {
+  background: var(--selection-bg);
+  color: var(--editor-fg);
+}
+.suggestion-list li .icon {
+  opacity: 0.7;
+  font-size: 11px;
+}
+
+/* Tab Bar Styles */
+.editor-tabs {
+  display: flex;
+  background-color: var(--status-bar-bg);
+  /* Use darker bg for tab bar container? */
+  background-color: var(--bg-primary, #252526);
+  /* VS Code dark tab bar usually */
+  overflow-x: auto;
+  flex-shrink: 0;
+  /* Scrollbar hiding if desired */
+}
+.editor-tabs::-webkit-scrollbar {
+  height: 4px;
+}
+.editor-tabs::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.3);
+}
+
+:host(:not(.theme-vs-dark)) .editor-tabs {
+  background-color: var(--bg-primary, #f3f3f3);
+}
+
+.editor-tab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  color: var(--text-muted, #969696);
+  background-color: transparent;
+  cursor: pointer;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 13px;
+  white-space: nowrap;
+  border-top: 2px solid transparent;
+  /* Selection indicator space */
+}
+.editor-tab:hover {
+  background-color: rgba(128, 128, 128, 0.1);
+  color: var(--editor-fg);
+}
+.editor-tab.active {
+  background-color: var(--editor-bg);
+  color: var(--editor-fg);
+  border-top-color: var(--color-primary, #007acc);
+  /* VS Code blue */
+}
+.editor-tab .tab-icon {
+  font-size: 12px;
+  opacity: 0.8;
+}
+.editor-tab {
+  /* Icon Colors based on class/extension could be added here if we had specific classes */
+}
+
+/* Ribbon Toolbar Styles */
+.editor-ribbon-container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ribbon-bg, #f3f3f3);
+  border-bottom: 1px solid var(--border-color, #d1d1d1);
+  flex-shrink: 0;
+  user-select: none;
+  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+  --ribbon-bg: var(--bg-primary, #f3f3f3);
+  --ribbon-tab-active: var(--bg-primary, #ffffff);
+  --ribbon-tab-fg: var(--text-secondary, #333333);
+  --ribbon-accent: var(--color-primary, #2b579a);
+  /* Word Blue */
+}
+
+:host(.theme-vs-dark) .editor-ribbon-container {
+  --ribbon-bg: var(--bg-secondary, #2d2d2d);
+  --ribbon-tab-active: var(--text-secondary, #3c3c3c);
+  --ribbon-tab-fg: var(--bg-secondary, #cccccc);
+  --ribbon-accent: var(--color-primary, #007acc);
+  border-bottom-color: var(--border-strong, #3e3e3e);
+}
+
+.ribbon-tabs {
+  display: flex;
+  padding: 0 10px;
+  background-color: var(--ribbon-accent);
+  gap: 2px;
+}
+
+.ribbon-tab {
+  padding: 4px 12px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: all 0.2s;
+  border-bottom: 2px solid transparent;
+  font-size: 11px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 60px;
+  justify-content: center;
+}
+.ribbon-tab ui-tooltip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.ribbon-tab i {
+  font-size: 14px;
+}
+.ribbon-tab:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  opacity: 1;
+}
+.ribbon-tab:hover i {
+  transform: scale(1.1);
+}
+.ribbon-tab.active {
+  background-color: var(--ribbon-bg);
+  color: var(--ribbon-tab-fg);
+  font-weight: 600;
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  margin-top: 4px;
+  padding-top: 4px;
+  opacity: 1;
+}
+.ribbon-tab.active i {
+  opacity: 1;
+}
+
+.ribbon-content {
+  background: var(--editor-bg);
+  border-bottom: 1px solid var(--border-color);
+  min-height: 0;
+  padding: 4px;
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+}
+.labels-hover .ribbon-content, .labels-hidden .ribbon-content {
+  min-height: 48px;
+}
+
+.ribbon-panel {
+  display: flex;
+  gap: 12px;
+  height: 100%;
+  align-items: stretch;
+}
+
+.ribbon-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-right: 12px;
+  border-right: 1px solid var(--border-color);
+  height: 100%;
+  justify-content: space-between;
+}
+.ribbon-group:last-child {
+  border-right: none;
+}
+.ribbon-group.divider {
+  padding: 0;
+  width: 1px;
+  background: linear-gradient(to bottom, transparent 10%, var(--border-color, #d1d1d1) 20%, var(--border-color, #d1d1d1) 80%, transparent 90%);
+  margin: 2px 4px;
+}
+
+.ribbon-group-content {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex: 1;
+}
+
+.ribbon-group-label {
+  font-size: 9px;
+  color: var(--status-bar-fg);
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.7;
+}
+.labels-hidden .ribbon-group-label {
+  display: none;
+}
+
+.ribbon-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--editor-fg);
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 32px;
+  font-size: 11px;
+}
+.ribbon-btn i {
+  font-size: 16px;
+}
+.ribbon-btn:hover {
+  background: rgba(144, 144, 144, 0.1);
+  border-color: var(--border-color);
+}
+.ribbon-btn.active {
+  background: rgba(0, 122, 204, 0.1);
+  border-color: var(--color-primary, #007acc);
+  color: var(--color-primary, #007acc);
+}
+.ribbon-btn.lg {
+  padding: 4px 12px;
+  gap: 4px;
+  min-width: 48px;
+}
+.ribbon-btn.lg i {
+  font-size: 20px;
+}
+.ribbon-btn.icon-only {
+  padding: 4px;
+  min-width: 28px;
+  height: 28px;
+}
+.ribbon-btn.icon-only span {
+  display: none;
+}
+.ribbon-btn.icon-only i {
+  font-size: 16px;
+}
+
+.ribbon-select-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+}
+.ribbon-select-container select {
+  padding: 2px 4px;
+  font-size: 11px;
+  border: 1px solid var(--border-color, #ccc);
+  border-radius: 3px;
+  background: var(--editor-bg);
+  color: var(--editor-fg);
+  outline: none;
+}
+.ribbon-select-container span {
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+/* Help Modal */
+.help-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 200;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(2px);
+}
+
+.help-modal {
+  background: var(--editor-bg);
+  color: var(--editor-fg);
+  width: 400px;
+  max-width: 90%;
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #454545);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: fadeIn 0.2s ease-out;
+}
+.help-modal .help-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--status-bar-bg);
+  color: var(--status-bar-fg);
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+}
+.help-modal .help-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+.help-modal .help-header .close-btn {
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+}
+.help-modal .help-header .close-btn:hover {
+  opacity: 0.8;
+}
+.help-modal .help-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.help-modal .help-section h4 {
+  margin: 0 0 8px 0;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.7;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+  padding-bottom: 4px;
+}
+.help-modal .help-section ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 13px;
+}
+.help-modal .help-section ul li {
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.help-modal kbd {
+  background: rgba(128, 128, 128, 0.2);
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: 11px;
+  border: 1px solid rgba(128, 128, 128, 0.3);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}