diff --git a/src/style.css b/src/style.css index 7eddea2..420baf8 100644 --- a/src/style.css +++ b/src/style.css @@ -27,73 +27,18 @@ --glp-radius: 4px; } -.app-shell { min-height: 100vh; background: var(--glp-bg); color: var(--glp-text); font-family: var(--glp-font-ui); display: flex; flex-direction: column; } -.topbar { height: 64px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: var(--glp-bg); border-bottom: 1px solid var(--glp-border); } -.brand, .topbar-actions, .editor-actions, .breadcrumbs, .output-title, .statusbar, .cloud-status, .workspace-button, .secondary-button, .run-button, .help-link { display: flex; align-items: center; } -.brand { gap: 10px; font-weight: 700; letter-spacing: -.3px; color: var(--glp-text); } -.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; color: var(--glp-on-accent); background: var(--glp-accent); border-radius: var(--glp-radius); transform: rotate(-5deg); } -.brand-divider { color: var(--glp-border); font-weight: 400; margin-left: 3px; } -.workspace-name { color: var(--glp-text-muted); font-weight: 500; } -.topbar-actions { gap: 7px; } -.workspace-button, .cloud-status { gap: 7px; padding: 8px 10px; border: 1px solid var(--glp-border-control); border-radius: var(--glp-radius); color: var(--glp-text); background: var(--glp-bg); cursor: pointer; font-size: 13px; font-weight: 600; } -.workspace-button:hover { color: var(--glp-accent); border-color: var(--glp-accent); } -.project-menu { position: relative; } -.project-menu summary { list-style: none; } -.project-menu summary::-webkit-details-marker { display: none; } -.project-menu-options { position: absolute; z-index: 5; top: calc(100% + 7px); left: 0; min-width: 155px; padding: 5px; background: var(--glp-bg); border: 1px solid var(--glp-border); border-radius: var(--glp-radius); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); } -.project-menu-options button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: var(--glp-radius); color: var(--glp-text); background: transparent; text-align: left; font-size: 13px; cursor: pointer; } -.project-menu-options button:hover { color: var(--glp-accent); background: var(--glp-surface); } -.project-menu-options button.active { color: var(--glp-on-accent); background: var(--glp-accent); font-weight: 700; } -.language-menu .project-menu-options { left: auto; right: 0; } -.cloud-status { color: var(--glp-text-muted); } -.cloud-status.connected { color: var(--glp-success); } +.editor-actions, .breadcrumbs, .output-title, .secondary-button, .run-button { display: flex; align-items: center; } .hidden-input { display: none; } +.glpython-workspace :is(button, input, select, summary, [role="button"]):focus-visible { outline: 2px solid var(--glp-accent); outline-offset: 2px; } .icon-button { display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--glp-text); cursor: pointer; padding: 6px; border-radius: var(--glp-radius); } .icon-button:hover { background: var(--glp-surface); color: var(--glp-accent); } .icon-button.small { padding: 4px; } -.avatar { width: 29px; height: 29px; display: grid; place-items: center; color: var(--glp-text); background: var(--glp-surface); border-radius: 50%; } -.workspace { min-height: 0; flex: 1; display: flex; } -.sidebar { width: 255px; flex-shrink: 0; background: var(--glp-bg); border-right: 1px solid var(--glp-border); padding: 29px 17px 21px; display: flex; flex-direction: column; } -.course-heading { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 8px; } -.eyebrow, .nav-label { display: block; color: var(--glp-text-muted); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; } -.course-heading h1 { margin: 6px 0 0; font-size: 21px; line-height: 1.1; letter-spacing: -.5px; color: var(--glp-text); } -.progress-row { display: flex; justify-content: space-between; margin: 29px 8px 9px; font-size: 13px; color: var(--glp-text-muted); } -.progress-row strong { color: var(--glp-accent); font-weight: 700; } -.progress-track { height: 4px; margin: 0 8px; background: var(--glp-border); border-radius: var(--glp-radius); overflow: hidden; } -.progress-track span { display: block; width: 12%; height: 100%; background: var(--glp-accent); border-radius: var(--glp-radius); } - -.lesson-nav { margin-top: 33px; } -.nav-section { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 10px; } -.file-item { width: 100%; display: flex; align-items: center; gap: 2px; padding: 2px; margin: 2px 0; border-radius: var(--glp-radius); color: var(--glp-text); text-align: left; background: transparent; font-size: 13px; } -.file-item:hover { background: var(--glp-surface); } -.file-item.active { color: var(--glp-accent); background: var(--glp-surface); font-weight: 600; } -.file-open-button { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; color: inherit; text-align: left; background: transparent; font: inherit; cursor: pointer; } -.file-icon { width: 25px; height: 25px; display: grid; place-items: center; flex-shrink: 0; border-radius: var(--glp-radius); color: var(--glp-text-muted); background: var(--glp-surface); } -.file-item.active .file-icon { color: var(--glp-accent); background: var(--glp-bg); } -.open-file-mark { width: 5px; height: 5px; margin-left: auto; background: var(--glp-accent); border-radius: 50%; } -.file-actions { display: flex; gap: 1px; padding-right: 3px; opacity: 0; transition: opacity .15s ease; } -.file-item:hover .file-actions, .file-item.active .file-actions { opacity: 1; } -.file-action { display: grid; place-items: center; padding: 5px; border: 0; color: var(--glp-text-muted); background: transparent; border-radius: var(--glp-radius); cursor: pointer; } -.file-action:hover { color: var(--glp-accent); background: var(--glp-bg); } -.file-action.danger:hover { color: var(--glp-error); background: var(--glp-error-bg); } - -.sidebar-bottom { margin-top: auto; } -.teacher-note { display: flex; gap: 10px; padding: 13px 12px; color: var(--glp-text-muted); background: var(--glp-surface); border-radius: var(--glp-radius); } -.teacher-note svg { flex-shrink: 0; color: var(--glp-text-muted); } -.teacher-note div { display: flex; flex-direction: column; gap: 3px; } -.teacher-note strong { font-size: 13px; color: var(--glp-text); } -.teacher-note span { font-size: 13px; line-height: 1.3; } -.help-link { width: 100%; box-sizing: border-box; gap: 8px; padding: 13px 7px 0; border: 0; color: var(--glp-text-muted); background: transparent; cursor: pointer; font-size: 13px; text-decoration: none; } -.help-link:hover { color: var(--glp-accent); } - -.main-area { min-width: 0; flex: 1; display: flex; flex-direction: column; padding: 24px 31px; gap: 14px; } .main-split { min-height: 0; flex: 1; display: flex; align-items: stretch; gap: 14px; } .editor-column { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 14px; } .editor-header { min-height: 37px; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .breadcrumbs { gap: 10px; color: var(--glp-text-muted); font-size: 13px; } .breadcrumbs strong { color: var(--glp-text); font-family: var(--glp-font-code); font-size: 13px; font-weight: 500; } -.unsaved { padding-left: 8px; color: var(--glp-warning); font-size: 13px; } .editor-actions { gap: 8px; } /* Buttons: the run button filled with the accent, all others outlined. */ @@ -104,7 +49,6 @@ .run-button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--glp-accent) 88%, black); background: color-mix(in srgb, var(--glp-accent) 88%, black); } .secondary-button:disabled, .run-button:disabled, .icon-button:disabled { opacity: .5; cursor: not-allowed; } .icon-button:disabled:hover { color: var(--glp-text); background: transparent; } -:is(.app-shell, .glpython-workspace) :is(button, input, select, summary, [role="button"]):focus-visible { outline: 2px solid var(--glp-accent); outline-offset: 2px; } .glpython-workspace { min-width: 0; min-height: 0; display: flex; flex: 1; color: var(--glp-text); font-family: var(--glp-font-ui); } .glpython-workspace > .main-split { width: 100%; } @@ -131,7 +75,7 @@ .output-title { gap: 8px; color: var(--glp-text); font-size: 13px; font-weight: 700; } .output-title svg { color: var(--glp-text-muted); } .runtime-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; padding: 2px 7px; color: var(--glp-text-muted); background: var(--glp-surface); border-radius: var(--glp-radius); font-size: 13px; font-weight: 500; } -.pulse, .status-dot { width: 6px; height: 6px; display: inline-block; background: var(--glp-success); border-radius: 50%; } +.pulse { width: 6px; height: 6px; display: inline-block; background: var(--glp-success); border-radius: 50%; } .runtime-badge--failed { color: var(--glp-error); background: var(--glp-error-bg); } .runtime-badge--failed .pulse { background: var(--glp-error); } .output-hint { color: var(--glp-text-muted); font-size: 13px; } @@ -141,8 +85,6 @@ .console pre { margin: 0; color: inherit; white-space: pre-wrap; font: inherit; } .console-note { margin: 6px 0 0; color: var(--glp-text-muted); font: italic 13px/1.5 var(--glp-font-ui); } -.statusbar { min-height: 29px; justify-content: space-between; padding: 0 31px; color: var(--glp-text-muted); background: var(--glp-bg); border-top: 1px solid var(--glp-border); font-size: 13px; } -.statusbar span { display: inline-flex; align-items: center; gap: 6px; } .graphics-panel { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--glp-bg); border: 1px solid var(--glp-border); border-radius: var(--glp-radius); overflow: hidden; } .graphics-canvas { display: block; width: 100%; height: auto; image-rendering: auto; } .graphics-empty { margin: 0; padding: 12px; color: var(--glp-text-muted); font-size: 13px; line-height: 1.5; } @@ -150,9 +92,6 @@ .graphics-collapsed-toggle { width: 34px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; border: 1px solid var(--glp-border); border-radius: var(--glp-radius); color: var(--glp-text-muted); background: var(--glp-bg); cursor: pointer; } .graphics-collapsed-toggle:hover { color: var(--glp-accent); border-color: var(--glp-accent); } .graphics-collapsed-toggle span { writing-mode: vertical-rl; font-size: 13px; font-weight: 600; letter-spacing: .4px; } -.devbar { min-height: 29px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 31px; color: var(--glp-text-muted); background: var(--glp-surface); border-top: 1px dashed var(--glp-border); font-size: 13px; } -.devbar button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--glp-border-control); border-radius: var(--glp-radius); color: var(--glp-text); background: var(--glp-bg); font-size: 13px; cursor: pointer; } -.devbar button:hover { color: var(--glp-error); border-color: var(--glp-error); background: var(--glp-error-bg); } .input-dialog-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0, 0, 0, .45); padding: 20px; } .input-dialog { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; padding: 20px; color: var(--glp-text); background: var(--glp-bg); border: 1px solid var(--glp-border); border-radius: var(--glp-radius); box-shadow: 0 20px 48px rgba(0, 0, 0, .25); } @@ -163,25 +102,10 @@ .input-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } @media (max-width: 760px) { - .topbar { padding: 0 15px; } - .workspace-name, .workspace-button span, .cloud-status span, .statusbar span:nth-child(2), .statusbar span:nth-child(3) { display: none; } - .topbar-actions { gap: 3px; } - .workspace-button, .cloud-status { padding: 7px; } - .sidebar { width: 62px; padding: 21px 9px; } - .course-heading, .progress-row, .progress-track, .nav-label, .sidebar-bottom { display: none; } - .lesson-nav { margin-top: 0; } - .nav-section { justify-content: center; padding: 0 0 9px; } - .file-item { justify-content: center; padding: 2px; } - .file-open-button { justify-content: center; padding: 7px 3px; } - .file-open-button > span:not(.file-icon):not(.open-file-mark), .file-actions { display: none; } - .open-file-mark { position: absolute; margin: 0 0 0 35px; } - .main-area { padding: 15px 12px; } .editor-header { align-items: flex-start; flex-direction: column; gap: 12px; } .editor-actions { width: 100%; } - .editor-actions .secondary-button:first-child { display: none; } .secondary-button, .run-button { flex: 1; justify-content: center; } .visualizer-bar .secondary-button { flex: 0 0 auto; } - .statusbar { padding: 0 14px; } .output-hint { display: none; } .main-split { flex-direction: column; } .graphics-panel { width: 100%; } @@ -373,7 +297,6 @@ .frame-hint { padding: 2px 12px 4px; color: var(--glp-text-muted); font: italic 13px/1.5 var(--glp-font-ui); white-space: normal; } - .test-report { margin-top: 6px; } .test-report pre { min-height: 0; max-height: none; margin: 0; padding: 0; background: transparent; white-space: pre-wrap; font: inherit; } .test-output { margin-bottom: 8px !important; color: var(--glp-text-muted); }