mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-08 08:52:12 +00:00
l0ng-ai
2760c91bde
Welcome › Projects can put recent projects into named groups: Move to Group (other groups, New Group…, Remove from group) on a project, Rename / New / Remove Group on a group (removing keeps its projects). Groups are listed first, fold with click, Enter or ←/→, and searching lists matches without groups. Groups live in recent-groups.json beside recent.json; grouped projects are exempt from the 30-project cap and leave their group when removed from recent projects. Fixes #1420
532 lines
9.3 KiB
CSS
532 lines
9.3 KiB
CSS
.welcome {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
|
|
/* ---- Sidebar ---------------------------------------------------------- */
|
|
|
|
.sidebar {
|
|
flex: none;
|
|
width: 240px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 28px 12px 14px;
|
|
background: var(--bg-elev);
|
|
box-shadow: inset -1px 0 0 var(--border);
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 6px 8px;
|
|
}
|
|
.tagline {
|
|
margin: 0 0 20px;
|
|
padding: 0 6px;
|
|
color: var(--fg-muted);
|
|
font-size: var(--fs-tiny);
|
|
line-height: 15px;
|
|
}
|
|
.logo {
|
|
flex: none;
|
|
width: 32px;
|
|
height: 32px;
|
|
-webkit-user-drag: none;
|
|
}
|
|
.brandText {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
line-height: 18px;
|
|
}
|
|
.appName {
|
|
color: var(--fg-strong);
|
|
}
|
|
.version {
|
|
color: var(--fg-muted);
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.navItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 34px;
|
|
padding: 0 24px;
|
|
border: 0;
|
|
border-radius: var(--radius-selection);
|
|
background: transparent;
|
|
color: var(--fg-strong);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: default;
|
|
}
|
|
.navItem:hover {
|
|
background: var(--bg-tree-hover);
|
|
}
|
|
.navItem:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: -2px;
|
|
}
|
|
.navItem[aria-current="page"] {
|
|
background: var(--bg-tree-selected);
|
|
}
|
|
.sidebarSpacer {
|
|
flex: 1;
|
|
}
|
|
.sidebarFooter {
|
|
display: flex;
|
|
padding: 0 4px;
|
|
}
|
|
.gear {
|
|
color: var(--fg-secondary);
|
|
}
|
|
|
|
/* ---- Content ---------------------------------------------------------- */
|
|
|
|
.content {
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-island);
|
|
}
|
|
.contentPlugins {
|
|
padding: 16px 20px 12px;
|
|
}
|
|
.dropOverlay {
|
|
position: absolute;
|
|
inset: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border: 2px dashed var(--accent);
|
|
border-radius: var(--radius-popup-large);
|
|
background: color-mix(in srgb, var(--bg-island) 88%, transparent);
|
|
color: var(--fg-strong);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ---- Projects page ---------------------------------------------------- */
|
|
|
|
.projects {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.header {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
height: 76px;
|
|
margin-left: 14px;
|
|
padding: 0 14px 0 6px;
|
|
box-shadow: inset 0 -1px 0 var(--border);
|
|
}
|
|
.search {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.headerButtons {
|
|
flex: none;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.projectList {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 14px 16px 14px 24px;
|
|
outline: none;
|
|
}
|
|
.noMatches {
|
|
padding: 8px 10px;
|
|
color: var(--fg-faint);
|
|
}
|
|
|
|
.project {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 8px 10px;
|
|
border-radius: var(--radius-popup);
|
|
cursor: default;
|
|
}
|
|
.project:hover {
|
|
background: var(--bg-tree-hover);
|
|
}
|
|
/* Lighter than the nav selection, as in IntelliJ's welcome list. */
|
|
.projectSelected,
|
|
.projectSelected:hover {
|
|
background: color-mix(in srgb, var(--bg-list-selected) 70%, var(--bg-island));
|
|
}
|
|
.projectBadge {
|
|
margin-top: 1px;
|
|
}
|
|
/* A project group: one line, folds its projects. */
|
|
.group {
|
|
align-items: center;
|
|
gap: 6px;
|
|
--icon-color: var(--fg-muted);
|
|
}
|
|
.groupName {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: var(--fg-strong);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.groupCount {
|
|
color: var(--fg-faint);
|
|
}
|
|
.projectNested {
|
|
padding-left: 32px;
|
|
}
|
|
.projectText {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 20px;
|
|
}
|
|
.projectName {
|
|
color: var(--fg-strong);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.projectPath {
|
|
color: var(--fg-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.projectBranch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
color: var(--fg-muted);
|
|
--icon-color: var(--fg-muted);
|
|
}
|
|
.projectBranchName {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.projectMore {
|
|
flex: none;
|
|
align-self: center;
|
|
visibility: hidden;
|
|
}
|
|
.project:hover .projectMore,
|
|
.projectSelected .projectMore,
|
|
.projectMore:focus-visible {
|
|
visibility: visible;
|
|
}
|
|
.projectSpinner {
|
|
flex: none;
|
|
align-self: center;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
/* Shared project avatar (welcome rows and the Recent Projects popup). */
|
|
.tile {
|
|
flex: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-small);
|
|
background: linear-gradient(135deg, var(--project-color), var(--project-color-end));
|
|
color: var(--fg-button-primary);
|
|
font-size: var(--fs-tiny);
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ---- Customize page --------------------------------------------------- */
|
|
|
|
.customize {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
padding: 28px 32px;
|
|
}
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.sectionTitle {
|
|
margin: 0 0 2px;
|
|
font-size: var(--fs-ui);
|
|
font-weight: 600;
|
|
color: var(--fg-strong);
|
|
}
|
|
.field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: var(--h-field);
|
|
}
|
|
.fieldLabel {
|
|
width: 96px;
|
|
color: var(--fg);
|
|
}
|
|
.fieldControl {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
.swatches {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.swatch {
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: var(--swatch);
|
|
cursor: default;
|
|
}
|
|
.swatch[aria-checked="true"] {
|
|
box-shadow:
|
|
0 0 0 2px var(--bg-island),
|
|
0 0 0 4px var(--swatch);
|
|
}
|
|
.swatch:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 3px;
|
|
}
|
|
.link {
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
color: var(--link);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.link:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-small);
|
|
}
|
|
|
|
/* ---- Empty landing ---------------------------------------------------- */
|
|
|
|
.landing {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
.landingTitle {
|
|
color: var(--fg-strong);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
.landingText {
|
|
margin: 0;
|
|
color: var(--fg-muted);
|
|
line-height: 20px;
|
|
}
|
|
/* Equal columns (as wide as the longest label) keep the icon spacing uniform
|
|
regardless of each label's length. */
|
|
.landingActions {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 1fr;
|
|
gap: 24px;
|
|
margin-top: 16px;
|
|
}
|
|
.landingAction {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
color: var(--fg-strong);
|
|
font: inherit;
|
|
cursor: default;
|
|
}
|
|
.landingIcon {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-popup-large);
|
|
background: var(--bg-elev);
|
|
box-shadow: inset 0 0 0 1px var(--border-button);
|
|
}
|
|
.landingAction:hover .landingIcon {
|
|
background: var(--bg-hover);
|
|
}
|
|
.landingAction:focus-visible {
|
|
outline: none;
|
|
}
|
|
.landingAction:focus-visible .landingIcon {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 1px;
|
|
}
|
|
.landingAction:disabled {
|
|
color: var(--fg-faint);
|
|
}
|
|
.landingHint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
color: var(--fg-faint);
|
|
}
|
|
|
|
.reopening {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
color: var(--fg-muted);
|
|
padding-bottom: 38px;
|
|
}
|
|
|
|
.reopeningTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.reopeningStage {
|
|
width: 320px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
.reopeningStage > [role="progressbar"] {
|
|
align-self: stretch;
|
|
}
|
|
|
|
/* ---- Recent projects popup -------------------------------------------- */
|
|
|
|
.popup {
|
|
height: min(460px, 70vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.popup > div {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px 10px 8px;
|
|
}
|
|
.popupHeader {
|
|
padding: 0 2px 8px;
|
|
color: var(--fg-muted);
|
|
font-size: var(--fs-small);
|
|
}
|
|
.popupList {
|
|
gap: 8px;
|
|
}
|
|
|
|
.recentList {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.searchRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
.recent {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.recentText {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.recentTop {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
.recentName {
|
|
color: var(--fg-strong);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.branch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: var(--fs-small);
|
|
color: var(--fg-subtle);
|
|
}
|
|
.recentPath {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--fg-subtle);
|
|
font-size: var(--fs-small);
|
|
}
|
|
.when {
|
|
flex: none;
|
|
color: var(--fg-faint);
|
|
font-size: var(--fs-small);
|
|
}
|
|
.rowMore {
|
|
flex: none;
|
|
opacity: 0;
|
|
}
|
|
.recent:hover .rowMore,
|
|
.rowMore:focus-visible {
|
|
opacity: 1;
|
|
}
|