appclean 2.0.0 → 2.0.3

package/dist/ui/client/styles/components.css

@@ -1,22 +1,30 @@
-/* Component Styles - Buttons, Cards, Inputs, Badges, Modals */
+/* ============================================================================
+   Component Styles - Buttons, Cards, Inputs, Badges, Alerts, and More
+   ============================================================================ */
+
+/* ============================================================================
+   Buttons
+   ============================================================================ */
 
-/* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
-  padding: var(--space-2) var(--space-4);
-  font-size: var(--font-sm);
+  padding: var(--space-3) var(--space-6);
+  font-family: inherit;
+  font-size: var(--font-base);
   font-weight: var(--fw-medium);
   line-height: var(--lh-normal);
   border: 1px solid transparent;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   cursor: pointer;
   transition: all var(--transition-fast);
   user-select: none;
   text-decoration: none;
   white-space: nowrap;
+  position: relative;
+  overflow: hidden;
 }
 
 .btn:disabled {
@@ -24,91 +32,134 @@
   cursor: not-allowed;
 }
 
+.btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
 /* Button Sizes */
-.btn-sm {
-  padding: var(--space-1) var(--space-3);
+.btn-xs {
+  padding: var(--space-1) var(--space-2);
   font-size: var(--font-xs);
 }
 
+.btn-sm {
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--font-sm);
+}
+
 .btn-lg {
-  padding: var(--space-3) var(--space-6);
-  font-size: var(--font-base);
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--font-lg);
+}
+
+.btn-xl {
+  padding: var(--space-5) var(--space-10);
+  font-size: var(--font-lg);
 }
 
 /* Button Variants */
+
+/* Primary Button */
 .btn-primary {
-  background-color: var(--color-primary);
+  background: var(--gradient-primary);
   color: white;
-  border-color: var(--color-primary);
+  border: none;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
 }
 
 .btn-primary:hover:not(:disabled) {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-primary-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
 }
 
 .btn-primary:active:not(:disabled) {
   transform: translateY(0);
-  box-shadow: var(--shadow-sm);
 }
 
+/* Secondary Button */
 .btn-secondary {
-  background-color: var(--color-neutral-200);
+  background-color: var(--bg-secondary);
   color: var(--text-primary);
-  border-color: var(--color-neutral-200);
+  border: 1px solid var(--border-color);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background-color: var(--color-neutral-300);
-  border-color: var(--color-neutral-300);
+  background-color: var(--bg-hover);
+  border-color: var(--border-color-hover);
   transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
 }
 
+/* Danger Button */
 .btn-danger {
-  background-color: var(--color-danger);
+  background: var(--gradient-danger);
   color: white;
-  border-color: var(--color-danger);
+  border: none;
 }
 
 .btn-danger:hover:not(:disabled) {
-  background-color: #dc2626;
-  border-color: #dc2626;
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
 }
 
+/* Success Button */
+.btn-success {
+  background: var(--gradient-success);
+  color: white;
+  border: none;
+}
+
+.btn-success:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+/* Ghost Button (Text-only) */
 .btn-ghost {
   background-color: transparent;
-  color: var(--text-secondary);
-  border-color: transparent;
+  color: var(--text-primary);
+  border: none;
 }
 
 .btn-ghost:hover:not(:disabled) {
-  background-color: var(--bg-secondary);
-  border-color: var(--border-color);
+  background-color: var(--bg-hover);
 }
 
-.btn-ghost-primary {
-  background-color: var(--color-primary-light);
+/* Outline Button */
+.btn-outline {
+  background-color: transparent;
   color: var(--color-primary);
-  border-color: transparent;
+  border: 2px solid var(--color-primary);
 }
 
-.btn-ghost-primary:hover:not(:disabled) {
-  background-color: var(--color-primary);
-  color: white;
+.btn-outline:hover:not(:disabled) {
+  background-color: var(--color-primary-50);
+}
+
+/* Link Button */
+.btn-link {
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  padding: var(--space-1) 0;
+  text-decoration: underline;
+}
+
+.btn-link:hover:not(:disabled) {
+  color: var(--color-primary-600);
 }
 
-/* Cards */
+/* ============================================================================
+   Cards
+   ============================================================================ */
+
 .card {
-  background-color: var(--bg-primary);
+  background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
-  padding: var(--space-4);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
   transition: all var(--transition-normal);
+  position: relative;
 }
 
 .card:hover {
@@ -119,11 +170,23 @@
 
 .card-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  padding-bottom: var(--space-3);
+  margin-bottom: var(--space-4);
+  padding-bottom: var(--space-4);
   border-bottom: 1px solid var(--border-color);
-  margin-bottom: var(--space-3);
+}
+
+.card-title {
+  font-size: var(--font-lg);
+  font-weight: var(--fw-semibold);
+  color: var(--text-primary);
+}
+
+.card-subtitle {
+  font-size: var(--font-sm);
+  color: var(--text-muted);
+  margin-top: var(--space-1);
 }
 
 .card-body {
@@ -131,69 +194,76 @@
 }
 
 .card-footer {
-  display: flex;
-  gap: var(--space-2);
-  padding-top: var(--space-3);
+  margin-top: var(--space-4);
+  padding-top: var(--space-4);
   border-top: 1px solid var(--border-color);
-  margin-top: var(--space-3);
+  display: flex;
+  gap: var(--space-3);
+  justify-content: flex-end;
 }
 
-/* Input Fields */
-.form-group {
-  margin-bottom: var(--space-4);
+.card-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-xl);
+  background-color: var(--color-primary-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary);
+  flex-shrink: 0;
 }
 
-.form-label {
-  display: block;
-  margin-bottom: var(--space-2);
-  font-weight: var(--fw-medium);
-  color: var(--text-primary);
-  font-size: var(--font-sm);
+.card-stat {
+  text-align: center;
+  padding: var(--space-4);
 }
 
-.form-input {
-  width: 100%;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  background-color: var(--bg-primary);
+.card-stat-value {
+  font-size: var(--font-3xl);
+  font-weight: var(--fw-bold);
   color: var(--text-primary);
-  font-size: var(--font-base);
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 }
 
-.form-input::placeholder {
+.card-stat-label {
+  font-size: var(--font-sm);
   color: var(--text-muted);
+  margin-top: var(--space-1);
 }
 
-.form-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-light);
+/* Elevated Card */
+.card-elevated {
+  box-shadow: var(--shadow-md);
+  border: none;
 }
 
-.form-input:disabled {
-  background-color: var(--bg-secondary);
-  color: var(--text-muted);
-  cursor: not-allowed;
-  opacity: 0.5;
+.card-elevated:hover {
+  box-shadow: var(--shadow-lg);
 }
 
-/* Badges */
+/* ============================================================================
+   Badges & Tags
+   ============================================================================ */
+
 .badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-sm);
+  padding: var(--space-1) var(--space-3);
   font-size: var(--font-xs);
-  font-weight: var(--fw-medium);
+  font-weight: var(--fw-semibold);
+  border-radius: var(--radius-full);
   white-space: nowrap;
 }
 
 .badge-primary {
-  background-color: var(--color-primary-light);
-  color: var(--color-primary);
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-700);
+}
+
+body.dark-mode .badge-primary {
+  background-color: var(--color-primary-900);
+  color: var(--color-primary-300);
 }
 
 .badge-success {
@@ -201,161 +271,228 @@
   color: var(--color-success);
 }
 
-.badge-warning {
-  background-color: var(--color-warning-light);
-  color: var(--color-warning);
-}
-
 .badge-danger {
   background-color: var(--color-danger-light);
   color: var(--color-danger);
 }
 
-.badge-neutral {
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-700);
+.badge-warning {
+  background-color: var(--color-warning-light);
+  color: var(--color-warning);
 }
 
-/* Modals */
-.modal-backdrop {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: var(--z-modal-backdrop);
+.badge-info {
+  background-color: var(--color-info-light);
+  color: var(--color-info);
 }
 
-.modal-backdrop.active {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.badge-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  margin-right: var(--space-1);
 }
 
-.modal {
-  background-color: var(--bg-primary);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-xl);
-  padding: var(--space-6);
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-  z-index: var(--z-modal);
-  position: relative;
-}
+/* ============================================================================
+   Alerts
+   ============================================================================ */
 
-.modal-header {
+.alert {
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  border-left: 4px solid;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  gap: var(--space-3);
   margin-bottom: var(--space-4);
-  padding-bottom: var(--space-3);
-  border-bottom: 1px solid var(--border-color);
+  animation: slideUp var(--transition-normal);
 }
 
-.modal-title {
-  font-size: var(--font-xl);
-  font-weight: var(--fw-bold);
-  margin: 0;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: var(--font-xl);
-  cursor: pointer;
-  color: var(--text-muted);
-  padding: 0;
-  width: 32px;
-  height: 32px;
+.alert-icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
 }
 
-.modal-close:hover {
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
+.alert-content {
+  flex: 1;
 }
 
-.modal-body {
-  margin-bottom: var(--space-4);
+.alert-title {
+  font-weight: var(--fw-semibold);
+  margin-bottom: var(--space-1);
 }
 
-.modal-footer {
-  display: flex;
-  gap: var(--space-2);
-  justify-content: flex-end;
-  padding-top: var(--space-4);
-  border-top: 1px solid var(--border-color);
+.alert-message {
+  font-size: var(--font-sm);
+  line-height: var(--lh-normal);
 }
 
-/* Alerts */
-.alert {
-  padding: var(--space-3) var(--space-4);
-  border-radius: var(--radius-md);
-  margin-bottom: var(--space-4);
-  display: flex;
-  gap: var(--space-2);
-  align-items: flex-start;
+.alert-close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--transition-fast);
+}
+
+.alert-close:hover {
+  opacity: 1;
 }
 
 .alert-success {
   background-color: var(--color-success-light);
+  border-color: var(--color-success);
   color: var(--color-success);
-  border: 1px solid var(--color-success);
 }
 
 .alert-danger {
   background-color: var(--color-danger-light);
+  border-color: var(--color-danger);
   color: var(--color-danger);
-  border: 1px solid var(--color-danger);
 }
 
 .alert-warning {
   background-color: var(--color-warning-light);
+  border-color: var(--color-warning);
   color: var(--color-warning);
-  border: 1px solid var(--color-warning);
 }
 
 .alert-info {
   background-color: var(--color-info-light);
+  border-color: var(--color-info);
   color: var(--color-info);
-  border: 1px solid var(--color-info);
 }
 
-/* Tabs */
+/* ============================================================================
+   Form Elements
+   ============================================================================ */
+
+.form-group {
+  margin-bottom: var(--space-6);
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: block;
+  font-weight: var(--fw-medium);
+  margin-bottom: var(--space-2);
+  color: var(--text-primary);
+}
+
+.form-label.required::after {
+  content: '*';
+  color: var(--color-danger);
+  margin-left: var(--space-1);
+}
+
+.form-hint {
+  font-size: var(--font-sm);
+  color: var(--text-muted);
+  margin-top: var(--space-1);
+}
+
+.form-error {
+  font-size: var(--font-sm);
+  color: var(--color-danger);
+  margin-top: var(--space-1);
+}
+
+.form-control {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.form-control input[type="checkbox"],
+.form-control input[type="radio"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+}
+
+/* ============================================================================
+   Modals & Dialogs
+   ============================================================================ */
+
+.modal-dialog {
+  background-color: var(--bg-primary);
+  border-radius: var(--radius-2xl);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-6);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.modal-title {
+  font-size: var(--font-2xl);
+  font-weight: var(--fw-bold);
+  margin: 0;
+}
+
+.modal-body {
+  padding: var(--space-6);
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  padding: var(--space-6);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  gap: var(--space-3);
+  justify-content: flex-end;
+}
+
+/* ============================================================================
+   Tabs
+   ============================================================================ */
+
 .tabs {
   display: flex;
-  gap: 0;
   border-bottom: 1px solid var(--border-color);
-  margin-bottom: var(--space-4);
+  margin-bottom: var(--space-6);
+  gap: var(--space-4);
 }
 
-.tab-button {
-  padding: var(--space-3) var(--space-4);
-  background: none;
+.tab {
+  padding: var(--space-4);
   border: none;
+  background: none;
   cursor: pointer;
-  font-size: var(--font-base);
-  font-weight: var(--fw-medium);
   color: var(--text-secondary);
-  border-bottom: 2px solid transparent;
-  transition: all var(--transition-fast);
+  font-weight: var(--fw-medium);
+  position: relative;
+  transition: color var(--transition-fast);
 }
 
-.tab-button:hover {
+.tab:hover {
   color: var(--text-primary);
 }
 
-.tab-button.active {
+.tab.active {
   color: var(--color-primary);
-  border-bottom-color: var(--color-primary);
+}
+
+.tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--color-primary);
 }
 
 .tab-content {
@@ -364,37 +501,277 @@
 
 .tab-content.active {
   display: block;
+  animation: fadeIn var(--transition-normal);
 }
 
-/* Status Indicator */
-.status {
-  display: inline-flex;
+/* ============================================================================
+   Lists
+   ============================================================================ */
+
+.list {
+  list-style: none;
+}
+
+.list-item {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background-color var(--transition-fast);
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+.list-item:hover {
+  background-color: var(--bg-hover);
+}
+
+.list-item-content {
+  flex: 1;
+}
+
+.list-item-title {
+  font-weight: var(--fw-medium);
+  color: var(--text-primary);
+}
+
+.list-item-subtitle {
+  font-size: var(--font-sm);
+  color: var(--text-muted);
+  margin-top: var(--space-1);
+}
+
+/* ============================================================================
+   Progress Bar
+   ============================================================================ */
+
+.progress {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--border-color);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  margin-bottom: var(--space-2);
+}
+
+.progress-bar {
+  height: 100%;
+  background: var(--gradient-primary);
+  border-radius: var(--radius-full);
+  transition: width var(--transition-slow);
+}
+
+.progress-bar.success {
+  background: var(--gradient-success);
+}
+
+.progress-bar.danger {
+  background: var(--gradient-danger);
+}
+
+.progress-bar.warning {
+  background: var(--gradient-warning);
+}
+
+/* ============================================================================
+   Breadcrumbs
+   ============================================================================ */
+
+.breadcrumbs {
+  display: flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--font-sm);
+  margin-bottom: var(--space-6);
+}
+
+.breadcrumb {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.breadcrumb:hover {
+  color: var(--text-primary);
+}
+
+.breadcrumb.active {
+  color: var(--text-primary);
   font-weight: var(--fw-medium);
 }
 
-.status::before {
-  content: '';
+.breadcrumb-separator {
+  color: var(--text-muted);
+}
+
+/* ============================================================================
+   Dropdowns
+   ============================================================================ */
+
+.dropdown {
+  position: relative;
   display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
 }
 
-.status-success::before {
-  background-color: var(--color-success);
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  min-width: 200px;
+  z-index: var(--z-dropdown);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all var(--transition-fast);
+  margin-top: var(--space-2);
+}
+
+.dropdown.open .dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.dropdown-item {
+  padding: var(--space-3) var(--space-4);
+  color: var(--text-secondary);
+  text-decoration: none;
+  display: block;
+  transition: all var(--transition-fast);
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--font-sm);
 }
 
-.status-warning::before {
-  background-color: var(--color-warning);
+.dropdown-item:hover {
+  background-color: var(--bg-hover);
+  color: var(--text-primary);
 }
 
-.status-danger::before {
-  background-color: var(--color-danger);
+.dropdown-divider {
+  height: 1px;
+  background-color: var(--border-color);
+  margin: var(--space-2) 0;
 }
 
-.status-neutral::before {
-  background-color: var(--text-muted);
+/* ============================================================================
+   Tooltips
+   ============================================================================ */
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-text {
+  position: absolute;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--text-primary);
+  color: var(--bg-primary);
+  text-align: center;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  z-index: var(--z-tooltip);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--transition-fast);
+  font-size: var(--font-xs);
+}
+
+.tooltip:hover .tooltip-text {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* ============================================================================
+   Search Input
+   ============================================================================ */
+
+.search-input {
+  position: relative;
+}
+
+.search-input input {
+  padding-left: var(--space-10);
+}
+
+.search-icon {
+  position: absolute;
+  left: var(--space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.search-clear {
+  position: absolute;
+  right: var(--space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: var(--space-1);
+  transition: color var(--transition-fast);
+}
+
+.search-clear:hover {
+  color: var(--text-primary);
+}
+
+/* ============================================================================
+   Skeleton Loader
+   ============================================================================ */
+
+.skeleton {
+  background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-hover) 50%, var(--bg-secondary) 100%);
+  background-size: 200% 100%;
+  animation: loading 2s infinite;
+  border-radius: var(--radius-lg);
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.skeleton-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+}
+
+.skeleton-text {
+  height: 1rem;
+  margin-bottom: var(--space-2);
+  border-radius: var(--radius-md);
+}
+
+.skeleton-text:last-child {
+  margin-bottom: 0;
+}
+
+.skeleton-button {
+  height: 2.5rem;
+  border-radius: var(--radius-lg);
+  min-width: 100px;
 }