init
This commit is contained in:
Christoph Brandau
+834
@@ -0,0 +1,834 @@
|
||||
:root {
|
||||
color: #202326;
|
||||
background: #eef1f3;
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #c7ced4;
|
||||
border-radius: 6px;
|
||||
color: #202326;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 140ms ease,
|
||||
border-color 140ms ease,
|
||||
color 140ms ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
border-color: #8fa0ad;
|
||||
background: #f6f8f9;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #c7ced4;
|
||||
border-radius: 6px;
|
||||
color: #202326;
|
||||
background: #ffffff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: #2f7da1;
|
||||
box-shadow: 0 0 0 3px rgba(47, 125, 161, 0.14);
|
||||
}
|
||||
|
||||
input {
|
||||
height: 34px;
|
||||
padding: 0 11px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 132px;
|
||||
padding: 10px 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
gap: 12px;
|
||||
min-height: 54px;
|
||||
padding: 10px;
|
||||
border: 1px solid #d2d8de;
|
||||
border-radius: 8px;
|
||||
background: #fbfcfd;
|
||||
}
|
||||
|
||||
.repo-form {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(280px, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.repo-form label {
|
||||
color: #54606a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
border-color: #256f8f;
|
||||
color: #ffffff;
|
||||
background: #256f8f;
|
||||
}
|
||||
|
||||
.primary-button:hover:not(:disabled) {
|
||||
border-color: #1f5f7b;
|
||||
background: #1f5f7b;
|
||||
}
|
||||
|
||||
.notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 36px;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.notice.error {
|
||||
border-color: #e8aaa4;
|
||||
color: #8e2d27;
|
||||
background: #fff4f2;
|
||||
}
|
||||
|
||||
.notice.busy {
|
||||
border-color: #a7cfe2;
|
||||
color: #245d78;
|
||||
background: #edf8fd;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 340px minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.left-sidebar {
|
||||
display: grid;
|
||||
grid-template-rows: minmax(220px, 0.9fr) minmax(260px, 1.1fr);
|
||||
min-height: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.branches,
|
||||
.explorer-panel,
|
||||
.main-panel,
|
||||
.status-panel,
|
||||
.commit-panel,
|
||||
.file-history-panel,
|
||||
.history-panel {
|
||||
min-height: 0;
|
||||
border: 1px solid #d2d8de;
|
||||
border-radius: 8px;
|
||||
background: #fbfcfd;
|
||||
}
|
||||
|
||||
.branches,
|
||||
.explorer-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 58px;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #dce1e5;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.repo-summary h1 {
|
||||
margin: 1px 0 0;
|
||||
color: #202326;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.repo-summary h1 {
|
||||
font-size: 24px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: #697681;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.counter,
|
||||
.active-pill,
|
||||
.status-counts span,
|
||||
.sync-stats strong,
|
||||
.sync-stats span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.counter,
|
||||
.status-counts span,
|
||||
.sync-stats span {
|
||||
color: #4f5d66;
|
||||
background: #edf0f2;
|
||||
}
|
||||
|
||||
.active-pill {
|
||||
color: #176239;
|
||||
background: #e4f4ea;
|
||||
}
|
||||
|
||||
.branch-list,
|
||||
.explorer-list,
|
||||
.file-list,
|
||||
.history-list {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.branch-list,
|
||||
.explorer-list {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.branch-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 48px;
|
||||
padding: 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.branch-row + .branch-row {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.branch-row.current {
|
||||
border-color: #b9ddc6;
|
||||
background: #f0f8f3;
|
||||
}
|
||||
|
||||
.branch-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.branch-info div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.branch-info strong,
|
||||
.file-title strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.branch-info strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.branch-info span {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: #697681;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.branch-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.branch-actions button {
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.explorer-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
justify-content: stretch;
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
padding: 5px 8px 5px calc(8px + var(--depth, 0) * 14px);
|
||||
border: 1px solid #c7ced4;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
text-align: left;
|
||||
transition:
|
||||
background 140ms ease,
|
||||
border-color 140ms ease;
|
||||
}
|
||||
|
||||
.explorer-row + .explorer-row {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.explorer-row:hover {
|
||||
border-color: #8fa0ad;
|
||||
background: #f6f8f9;
|
||||
}
|
||||
|
||||
.explorer-row.active {
|
||||
border-color: #9fc8dc;
|
||||
background: #edf8fd;
|
||||
}
|
||||
|
||||
.explorer-row.folder {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.explorer-row svg {
|
||||
color: #4f7d96;
|
||||
}
|
||||
|
||||
.tree-toggle,
|
||||
.explorer-select {
|
||||
min-height: 22px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tree-toggle {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.tree-toggle:hover:not(:disabled),
|
||||
.explorer-select:hover:not(:disabled) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.explorer-select {
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tree-spacer {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.explorer-select span {
|
||||
overflow: hidden;
|
||||
font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.repo-summary {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #dce1e5;
|
||||
}
|
||||
|
||||
.repo-summary p {
|
||||
overflow: hidden;
|
||||
margin: 5px 0 0;
|
||||
color: #5f6b75;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sync-stats,
|
||||
.status-counts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sync-stats strong:first-of-type {
|
||||
color: #8a4c0e;
|
||||
background: #fff2d7;
|
||||
}
|
||||
|
||||
.sync-stats strong:last-of-type {
|
||||
color: #255b8b;
|
||||
background: #e7f1fb;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 360px;
|
||||
min-height: 0;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.status-panel,
|
||||
.commit-panel,
|
||||
.file-history-panel,
|
||||
.history-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.side-stack {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(210px, 0.75fr) minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.file-row {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border: 1px solid #dce1e5;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.file-row + .file-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.file-title strong {
|
||||
font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.change-lanes {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.change-lane {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
padding: 7px;
|
||||
border: 1px solid #dce1e5;
|
||||
border-radius: 6px;
|
||||
background: #f7f9fa;
|
||||
}
|
||||
|
||||
.change-lane.inactive {
|
||||
color: #8a949c;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.lane-name {
|
||||
color: #596670;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.lane-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.lane-actions button {
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quiet {
|
||||
overflow: hidden;
|
||||
color: #7d8891;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
min-width: 74px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-badge.modified {
|
||||
color: #7b4a05;
|
||||
background: #ffe8bb;
|
||||
}
|
||||
|
||||
.status-badge.added,
|
||||
.status-badge.untracked {
|
||||
color: #176239;
|
||||
background: #dff3e7;
|
||||
}
|
||||
|
||||
.status-badge.deleted {
|
||||
color: #9b2e29;
|
||||
background: #ffe1df;
|
||||
}
|
||||
|
||||
.status-badge.renamed {
|
||||
color: #255b8b;
|
||||
background: #e0effd;
|
||||
}
|
||||
|
||||
.status-badge.conflicted {
|
||||
color: #8f2d61;
|
||||
background: #fde2f0;
|
||||
}
|
||||
|
||||
.status-badge.unknown,
|
||||
.status-badge.none {
|
||||
color: #596670;
|
||||
background: #e9edef;
|
||||
}
|
||||
|
||||
.commit-panel {
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.commit-form {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.commit-form .primary-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.commit-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 12px 12px;
|
||||
padding: 10px;
|
||||
border: 1px solid #dce1e5;
|
||||
border-radius: 8px;
|
||||
color: #596670;
|
||||
background: #f7f9fa;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.commit-hint strong {
|
||||
color: #202326;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.commit-row {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border: 1px solid #dce1e5;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.commit-row + .commit-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.commit-row.compact {
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.commit-line {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.commit-line svg {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 2px;
|
||||
color: #4f7d96;
|
||||
}
|
||||
|
||||
.commit-line div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.commit-line strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #202326;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.commit-line span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-top: 3px;
|
||||
color: #697681;
|
||||
font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ref-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.ref-list span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
color: #255b8b;
|
||||
background: #e7f1fb;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.commit-file-list {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.commit-file-button {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
justify-content: stretch;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 5px 7px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.commit-file-button strong {
|
||||
overflow: hidden;
|
||||
color: #202326;
|
||||
font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.commit-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.commit-actions time {
|
||||
overflow: hidden;
|
||||
color: #6c7882;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.commit-actions button {
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.blank-state,
|
||||
.empty-note {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 120px;
|
||||
margin: 0;
|
||||
padding: 18px;
|
||||
color: #6c7882;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-note {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: spin 900ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.workspace {
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.commit-panel {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.side-stack {
|
||||
min-height: 760px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.shell {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.repo-form,
|
||||
.workspace,
|
||||
.repo-summary,
|
||||
.change-lanes {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.toolbar,
|
||||
.sync-stats {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.branch-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.branches {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.left-sidebar {
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
.change-lane {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.lane-actions {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user