Clarify active Windows client architecture
This commit is contained in:
325
apps/windows-client/src/styles/app.css
Normal file
325
apps/windows-client/src/styles/app.css
Normal file
@@ -0,0 +1,325 @@
|
||||
:root {
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
sans-serif;
|
||||
color: #e5e7eb;
|
||||
background: #101216;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: #101216;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.56;
|
||||
}
|
||||
|
||||
.simple-shell {
|
||||
display: block;
|
||||
min-height: 100vh;
|
||||
background: #101216;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.simple-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: #101216;
|
||||
box-shadow: none;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.simple-header,
|
||||
.finder-card,
|
||||
.section-head,
|
||||
.add-line,
|
||||
.app-row,
|
||||
.notice-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.simple-header {
|
||||
margin: -18px -18px 16px;
|
||||
border-bottom: 1px solid #2a2f3a;
|
||||
background: #181b22;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.simple-header small,
|
||||
.simple-field span,
|
||||
.app-row span,
|
||||
.config-path,
|
||||
.finder-card span {
|
||||
color: #8d99ae;
|
||||
}
|
||||
|
||||
.simple-header h1,
|
||||
.section-head h2 {
|
||||
margin: 0;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.simple-header h1 {
|
||||
margin-top: 4px;
|
||||
font-size: 22px;
|
||||
line-height: 1.1;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.add-line button,
|
||||
.app-row button,
|
||||
.open-config-button {
|
||||
min-height: 36px;
|
||||
border: 1px solid #343b49;
|
||||
border-radius: 4px;
|
||||
background: #242a35;
|
||||
color: #eef2ff;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ghost-button:hover,
|
||||
.add-line button:hover,
|
||||
.app-row button:hover,
|
||||
.open-config-button:hover {
|
||||
background: #2d3543;
|
||||
}
|
||||
|
||||
.finder-card {
|
||||
justify-content: flex-start;
|
||||
min-height: 56px;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #151923;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.finder-card > div,
|
||||
.app-row > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.finder-card strong,
|
||||
.finder-card span,
|
||||
.app-row strong,
|
||||
.app-row span {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.status-light {
|
||||
flex: 0 0 auto;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.finder-card.found .status-light {
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
|
||||
}
|
||||
|
||||
.finder-card.missing .status-light {
|
||||
background: #f59e0b;
|
||||
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
|
||||
}
|
||||
|
||||
.simple-field {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.simple-field input,
|
||||
.add-line input,
|
||||
.add-line select {
|
||||
min-height: 42px;
|
||||
width: 100%;
|
||||
border: 1px solid #343b49;
|
||||
border-radius: 4px;
|
||||
background: #0d1016;
|
||||
color: #f8fafc;
|
||||
outline: none;
|
||||
padding: 9px 11px;
|
||||
}
|
||||
|
||||
.simple-field input:focus,
|
||||
.add-line input:focus,
|
||||
.add-line select:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
.apps-section {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.section-head span {
|
||||
min-width: 28px;
|
||||
border: 1px solid #343b49;
|
||||
border-radius: 4px;
|
||||
background: #1b202b;
|
||||
color: #dbeafe;
|
||||
padding: 3px 9px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.add-line {
|
||||
display: grid;
|
||||
grid-template-columns: 130px minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.add-line button {
|
||||
min-width: 104px;
|
||||
border-color: #166534;
|
||||
background: #14532d;
|
||||
}
|
||||
|
||||
.add-line button:hover {
|
||||
background: #166534;
|
||||
}
|
||||
|
||||
.app-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-row,
|
||||
.empty-state,
|
||||
.notice-line {
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #131720;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.app-row button {
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: #8d99ae;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.notice-line {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.notice-line strong,
|
||||
.notice-line span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notice-line.success {
|
||||
border-color: rgba(34, 197, 94, 0.42);
|
||||
background: rgba(20, 83, 45, 0.32);
|
||||
}
|
||||
|
||||
.notice-line.error {
|
||||
border-color: rgba(239, 68, 68, 0.42);
|
||||
background: rgba(127, 29, 29, 0.32);
|
||||
}
|
||||
|
||||
.notice-line.info {
|
||||
border-color: rgba(59, 130, 246, 0.42);
|
||||
background: rgba(30, 58, 138, 0.26);
|
||||
}
|
||||
|
||||
.command-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 132px;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.apply-button {
|
||||
min-height: 46px;
|
||||
width: 100%;
|
||||
border: 1px solid #16a34a;
|
||||
border-radius: 4px;
|
||||
background: #22c55e;
|
||||
color: #04130a;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.apply-button:hover {
|
||||
background: #4ade80;
|
||||
}
|
||||
|
||||
.open-config-button {
|
||||
min-height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.config-path {
|
||||
margin: 10px 0 0;
|
||||
font-size: 12px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.simple-shell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.simple-panel {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.simple-header,
|
||||
.app-row,
|
||||
.notice-line {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.add-line {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user