Checkpoint
This commit is contained in:
30
ui/src/styles/theme/_badges.scss
Normal file
30
ui/src/styles/theme/_badges.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
color: var(--app-status-success);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: rgba(250, 204, 21, 0.15);
|
||||
color: var(--app-status-warning);
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--app-status-error);
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background: rgba(96, 165, 250, 0.15);
|
||||
color: var(--app-status-info);
|
||||
}
|
||||
80
ui/src/styles/theme/_buttons.scss
Normal file
80
ui/src/styles/theme/_buttons.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
/* Button Styles */
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-family: inherit;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--app-accent-primary);
|
||||
color: var(--app-bg);
|
||||
border-color: var(--app-accent-primary);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--app-blue-light);
|
||||
box-shadow: 0 4px 12px rgba(142, 180, 255, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--app-accent-primary);
|
||||
border-color: var(--app-accent-primary);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--app-button-hover);
|
||||
border-color: var(--app-blue-light);
|
||||
color: var(--app-blue-light);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tertiary {
|
||||
background: transparent;
|
||||
color: var(--app-text-muted);
|
||||
border-color: var(--app-border-color);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--app-text);
|
||||
border-color: var(--app-accent-primary);
|
||||
background: var(--app-button-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
color: var(--app-status-error);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: var(--app-status-error);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: rgba(74, 222, 128, 0.12);
|
||||
color: var(--app-status-success);
|
||||
border-color: rgba(74, 222, 128, 0.3);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: rgba(74, 222, 128, 0.2);
|
||||
border-color: var(--app-status-success);
|
||||
}
|
||||
}
|
||||
37
ui/src/styles/theme/_code.scss
Normal file
37
ui/src/styles/theme/_code.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
/* Code Styles */
|
||||
.code-block {
|
||||
background: var(--app-code-bg);
|
||||
border: 1px solid var(--app-border-color);
|
||||
border-radius: 8px;
|
||||
overflow: auto;
|
||||
margin-bottom: 20px;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--app-text-code);
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inline-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
color: var(--app-text-code);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.highlight-tech {
|
||||
color: var(--app-accent-yellow);
|
||||
font-weight: 600;
|
||||
}
|
||||
42
ui/src/styles/theme/_forms.scss
Normal file
42
ui/src/styles/theme/_forms.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
/* Form Elements */
|
||||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--app-text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
padding: 10px 12px;
|
||||
background: var(--app-bg);
|
||||
border: 1px solid var(--app-border-color);
|
||||
border-radius: 6px;
|
||||
color: var(--app-text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--app-accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(142, 180, 255, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--app-text-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.form-input-search {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23afc1e6' stroke-width='2'%3E%3Ccircle cx='6.5' cy='6.5' r='5'%3E%3C/circle%3E%3Cpath d='M11 11l4 4'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.form-input-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--app-text-code);
|
||||
}
|
||||
19
ui/src/styles/theme/_tags.scss
Normal file
19
ui/src/styles/theme/_tags.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
/* Tag Styles */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.tag-blue {
|
||||
background: rgba(142, 180, 255, 0.15);
|
||||
color: var(--app-accent-primary);
|
||||
}
|
||||
|
||||
.tag-yellow {
|
||||
background: rgba(255, 215, 0, 0.15);
|
||||
color: var(--app-accent-yellow);
|
||||
}
|
||||
58
ui/src/styles/theme/_typography.scss
Normal file
58
ui/src/styles/theme/_typography.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
/* Typography Styles */
|
||||
.type-h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 12px 0;
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
.type-h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
margin: 0 0 12px 0;
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
.type-h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin: 0 0 12px 0;
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
.type-body {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 12px 0;
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
.type-small {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 12px 0;
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.type-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
color: var(--app-text-code);
|
||||
background: var(--app-code-bg);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.type-meta {
|
||||
font-size: 12px;
|
||||
color: var(--app-text-muted);
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
56
ui/src/styles/theme/_utilities.scss
Normal file
56
ui/src/styles/theme/_utilities.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
/* Color Utilities */
|
||||
.text-primary {
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.text-subtle {
|
||||
color: var(--app-text-subtle);
|
||||
}
|
||||
|
||||
.text-code {
|
||||
color: var(--app-text-code);
|
||||
}
|
||||
|
||||
.text-accent-primary {
|
||||
color: var(--app-accent-primary);
|
||||
}
|
||||
|
||||
.text-accent-yellow {
|
||||
color: var(--app-accent-yellow);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--app-status-success);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--app-status-warning);
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: var(--app-status-error);
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: var(--app-status-info);
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: var(--app-bg);
|
||||
}
|
||||
|
||||
.bg-elevated {
|
||||
background-color: var(--app-bg-elevated);
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border-color: var(--app-border-color);
|
||||
}
|
||||
|
||||
.border-active {
|
||||
border-color: var(--app-border-color-active);
|
||||
}
|
||||
Reference in New Issue
Block a user