fix: DockerSecretsResolver - don't normalize absolute paths like /var/www/html/...
Some checks failed
Deploy Application / deploy (push) Has been cancelled
Some checks failed
Deploy Application / deploy (push) Has been cancelled
This commit is contained in:
217
resources/css/components/admin/admin-ui-enhancements.css
Normal file
217
resources/css/components/admin/admin-ui-enhancements.css
Normal file
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* UI Enhancements Styles
|
||||
* ITCSS: Components Layer
|
||||
*/
|
||||
|
||||
/* Loading Overlay */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .loading-overlay {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid var(--border);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.loading-message {
|
||||
margin-top: var(--space-md);
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Loading State */
|
||||
button.loading,
|
||||
input[type="submit"].loading {
|
||||
position: relative;
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.button-spinner {
|
||||
display: inline-block;
|
||||
margin-right: var(--space-xs);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Optimistic Updates */
|
||||
.optimistic-delete {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through;
|
||||
transition: opacity var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.optimistic-update {
|
||||
background: oklch(from var(--info) l c h / 0.1);
|
||||
transition: background var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
/* Error Notifications */
|
||||
.error-notification {
|
||||
position: fixed;
|
||||
top: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
background: var(--error);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 10000;
|
||||
max-width: 400px;
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
.error-notification strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error-notification p {
|
||||
margin: var(--space-xs) 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error-notification button {
|
||||
margin-top: var(--space-sm);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-inverse);
|
||||
cursor: pointer;
|
||||
transition: background var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.error-notification button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Table Row Loading States */
|
||||
tr[data-loading="true"] {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
tr[data-loading="true"] td {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
tr[data-loading="true"] td::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent
|
||||
);
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Form Loading States */
|
||||
form[data-loading="true"] {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
form[data-loading="true"] input,
|
||||
form[data-loading="true"] textarea,
|
||||
form[data-loading="true"] select {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Retry Button */
|
||||
.retry-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
background: var(--warning);
|
||||
color: var(--text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: background var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
background: var(--warning-dark);
|
||||
}
|
||||
|
||||
/* Success Flash */
|
||||
.success-flash {
|
||||
position: fixed;
|
||||
top: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
background: var(--success);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 10000;
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.error-notification,
|
||||
.success-flash {
|
||||
top: var(--space-md);
|
||||
right: var(--space-md);
|
||||
left: var(--space-md);
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user