improve the launcher and application switcher, now laucher become plugin based fully
This commit is contained in:
34 files changed
+3085
-768
No files matched your search
+24
-24
@@ -1,32 +1,32 @@
|
||||
:vars {
|
||||
--foreground: #e0e3e8;
|
||||
--background: #101417;
|
||||
--cursor: #e0e3e8;
|
||||
--primary: #96ccf8;
|
||||
--on-primary: #00344f;
|
||||
--secondary: #b7c9d9;
|
||||
--on-secondary: #22323f;
|
||||
--tertiary: #d0c0e8;
|
||||
--on-tertiary: #362b4a;
|
||||
--surface: #101417;
|
||||
--surface-bright: #363a3e;
|
||||
--foreground: #f0dfd6;
|
||||
--background: #19120d;
|
||||
--cursor: #f0dfd6;
|
||||
--primary: #ffb784;
|
||||
--on-primary: #502500;
|
||||
--secondary: #e4bfa8;
|
||||
--on-secondary: #422b1b;
|
||||
--tertiary: #c8ca94;
|
||||
--on-tertiary: #30330b;
|
||||
--surface: #19120d;
|
||||
--surface-bright: #413731;
|
||||
--error: #ffb4ab;
|
||||
--error-dim: #ff8678;
|
||||
--on-error: #690005;
|
||||
--error-container: #93000a;
|
||||
--outline: #8b9198;
|
||||
--outline: #9f8d83;
|
||||
--shadow: #000000;
|
||||
--red: #ffb2b9;
|
||||
--red-dim: #ff7f8b;
|
||||
--green: #95d5a7;
|
||||
--green-dim: #70c789;
|
||||
--yellow: #b8cf84;
|
||||
--yellow-dim: #a3c15f;
|
||||
--blue: #afc6ff;
|
||||
--blue-dim: #7ca2ff;
|
||||
--magenta: #e4b7f3;
|
||||
--magenta-dim: #d48bec;
|
||||
--cyan: #82d3e2;
|
||||
--cyan-dim: #59c4d8;
|
||||
--red: #ffb598;
|
||||
--red-dim: #ff9065;
|
||||
--green: #b7d085;
|
||||
--green-dim: #a1c260;
|
||||
--yellow: #dec56e;
|
||||
--yellow-dim: #d5b444;
|
||||
--blue: #cebdfe;
|
||||
--blue-dim: #a98bfd;
|
||||
--magenta: #fcb0d5;
|
||||
--magenta-dim: #fa7fbb;
|
||||
--cyan: #84d5c4;
|
||||
--cyan-dim: #5ec8b2;
|
||||
--white: #82d3e0;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
#kanban {
|
||||
/* background-color: var(--shadow); */
|
||||
border-radius: 20px;
|
||||
border: 4px solid var(--surface);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#kanban-header {
|
||||
border: 2px solid var(--surface);
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#column-header {
|
||||
padding: 4px;
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#kanban-note {
|
||||
background-color: var(--surface);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#kanban-row:first-child > * > * {
|
||||
border-radius: 16px 16px 4px 4px;
|
||||
}
|
||||
|
||||
#kanban-row:last-child > * > * {
|
||||
border-radius: 4px 4px 16px 16px;
|
||||
}
|
||||
|
||||
#inline-editor {
|
||||
border: 2px solid var(--surface-bright);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#kanban-btn,
|
||||
#kanban-btn-add {
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#kanban-btn {
|
||||
background-color: var(--shadow);
|
||||
}
|
||||
|
||||
#kanban-btn:hover,
|
||||
#kanban-btn-add:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#kanban-btn:active,
|
||||
#kanban-btn-add:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#kanban-btn-label,
|
||||
#kanban-btn-neg {
|
||||
font-size: 20px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#kanban-btn-neg {
|
||||
color: var(--red-dim);
|
||||
}
|
||||
|
||||
#kanban-btn:active #kanban-btn-label,
|
||||
#kanban-btn-add:active #kanban-btn-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
#launcher {
|
||||
background: var(--shadow);
|
||||
padding: 12px;
|
||||
border-radius: 34px;
|
||||
min-width: 550px;
|
||||
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
#close-button,
|
||||
#config-button {
|
||||
background-color: var(--surface);
|
||||
border-radius: 40px;
|
||||
padding: 8px;
|
||||
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
#close-button:hover,
|
||||
#close-button:focus,
|
||||
#config-button:hover,
|
||||
#config-button:focus {
|
||||
background-color: var(--surface-bright);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
#close-button:active {
|
||||
background-color: var(--red-dim);
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
#close-label {
|
||||
color: var(--red-dim);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#close-button:active #close-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#config-button:active {
|
||||
background-color: var(--primary);
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
#config-label {
|
||||
color: var(--primary);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#config-button:active #config-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#launcher-icon-label {
|
||||
font-size: 32px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#launcher-search {
|
||||
font-weight: bold;
|
||||
background-color: var(--surface);
|
||||
color: var(--foreground);
|
||||
border-radius: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#launcher-search selection {
|
||||
color: var(--background);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#launcher-results-scroll {
|
||||
margin-top: 10px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
#launcher-results-scroll scrollbar {
|
||||
border-radius: 10px;
|
||||
background-color: var(--surface);
|
||||
padding: 4px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
#launcher-results-scroll slider {
|
||||
border-radius: 8px;
|
||||
min-width: 10px;
|
||||
min-height: 38px;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#launcher-results {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#launcher-result-item {
|
||||
border-radius: 40px;
|
||||
padding: 0 16px;
|
||||
animation: loadSlot 0.5s ease;
|
||||
min-height: 52px;
|
||||
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
@keyframes loadSlot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#launcher-result-item:focus,
|
||||
#launcher-result-item:selected,
|
||||
#launcher-result-item:hover,
|
||||
#launcher-result-item.selected {
|
||||
border-radius: 16px;
|
||||
background-color: var(--surface);
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#result-item-main {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
#launcher-result-item {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
#result-item-icon {
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
#result-item-text {
|
||||
}
|
||||
|
||||
#result-item-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#result-item-subtitle {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#result-item-plugin {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: italic;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
+49
-48
@@ -1,95 +1,96 @@
|
||||
/* Simple Launcher Styles */
|
||||
|
||||
#launcher-window {
|
||||
background: rgba(30, 30, 30, 0.95);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
#launcher-icon-label{
|
||||
font-size: 32px;
|
||||
padding: 8px;
|
||||
/* #launcher-window { */
|
||||
/* border-radius: 12px; */
|
||||
/* border: 1px solid rgba(255, 255, 255, 0.1); */
|
||||
/* } */
|
||||
|
||||
#launcher-icon-label {
|
||||
font-size: 32px;
|
||||
padding: 8px;
|
||||
}
|
||||
#launcher-main {
|
||||
padding: 20px;
|
||||
min-width: 550px
|
||||
background: var(--shadow);
|
||||
padding: 20px;
|
||||
min-width: 550px;
|
||||
}
|
||||
|
||||
#launcher-search {
|
||||
background: rgba(50, 50, 50, 0.8);
|
||||
border: 2px solid rgba(100, 100, 100, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--outline);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#launcher-search:focus {
|
||||
border-color: #4a9eff;
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
#launcher-results-scroll {
|
||||
background: transparent;
|
||||
border: none;
|
||||
min-height: 100px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
#launcher-results {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#launcher-result-item {
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin: 2px 0;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin: 2px 0;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
#launcher-result-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#launcher-result-item.selected {
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
border-color: #4a9eff;
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
#result-item-main {
|
||||
min-height: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
#launcher-result-item {
|
||||
min-height: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
#result-item-icon {
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
margin-right: 12px;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
#result-item-text {
|
||||
}
|
||||
|
||||
#result-item-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#result-item-subtitle {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 2px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#result-item-plugin {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: italic;
|
||||
margin-bottom: 8px;
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: italic;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
Reference in new issue
Block a user