Claude-Code-Workflow/ccw/src/templates/dashboard-css/25-skills-rules.css

/* ==========================================
   SKILLS & RULES MANAGER STYLES
   ========================================== */

/* Skills Manager */
.skills-manager {
  width: 100%;
}

.skills-manager.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: hsl(var(--muted-foreground));
}

.skills-section {
  margin-bottom: 2rem;
  width: 100%;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  width: 100%;
}

.skill-card {
  position: relative;
  transition: all 0.2s ease;
}

.skill-card:hover {
  border-color: hsl(var(--primary));
  transform: translateY(-2px);
}

.skills-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

/* Skill Detail Panel */
.skill-detail-panel {
  animation: slideIn 0.2s ease-out;
}

.skill-detail-overlay {
  animation: fadeIn 0.15s ease-out;
}

/* Rules Manager */
.rules-manager {
  width: 100%;
}

.rules-manager.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: hsl(var(--muted-foreground));
}

.rules-section {
  margin-bottom: 2rem;
  width: 100%;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  width: 100%;
}

.rule-card {
  position: relative;
  transition: all 0.2s ease;
}

.rule-card:hover {
  border-color: hsl(var(--success));
  transform: translateY(-2px);
}

.rules-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

/* Rule Detail Panel */
.rule-detail-panel {
  animation: slideIn 0.2s ease-out;
}

.rule-detail-overlay {
  animation: fadeIn 0.15s ease-out;
}

/* Shared Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Line clamp utility for card descriptions */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .skills-grid,
  .rules-grid {
    grid-template-columns: 1fr;
  }

  .skill-detail-panel,
  .rule-detail-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* Badge styles for skills and rules */
.skill-card .badge,
.rule-card .badge {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Code preview in rule cards */
.rule-card pre {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Create modal styles (shared) */
.skill-modal,
.rule-modal {
  animation: fadeIn 0.15s ease-out;
}

.skill-modal-backdrop,
.rule-modal-backdrop {
  animation: fadeIn 0.15s ease-out;
}

.skill-modal-content,
.rule-modal-content {
  animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skill-modal.hidden,
.rule-modal.hidden {
  display: none;
}

/* Form group styles */
.skill-modal .form-group label,
.rule-modal .form-group label {
  display: block;
  margin-bottom: 0.25rem;
}

.skill-modal input,
.skill-modal textarea,
.rule-modal input,
.rule-modal textarea {
  transition: border-color 0.15s, box-shadow 0.15s;
}

.skill-modal input:focus,
.skill-modal textarea:focus,
.rule-modal input:focus,
.rule-modal textarea:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

/* ==========================================
   CREATE MODAL STYLES (Skills & Rules)
   ========================================== */

/* Modal Overlay */
.modal-overlay {
  animation: fadeIn 0.15s ease-out;
  backdrop-filter: blur(2px);
}

/* Modal Dialog */
.modal-dialog {
  animation: slideUpModal 0.2s ease-out;
}

@keyframes slideUpModal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Location Selection Buttons */
.location-btn {
  cursor: pointer;
}

.location-btn:active {
  transform: scale(0.98);
}

/* Validation Result Animations */
#skillValidationResult > div,
#ruleValidationResult > div {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Path Input List Animations */
#rulePathsList > div {
  animation: slideDown 0.15s ease-out;
}

/* Form Input Focus States */
.modal-dialog input:focus,
.modal-dialog textarea:focus,
.modal-dialog select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  ring: 2px;
  ring-color: hsl(var(--primary) / 0.2);
}

/* Checkbox Custom Styling */
.modal-dialog input[type="checkbox"] {
  cursor: pointer;
  accent-color: hsl(var(--primary));
}

/* Textarea Specific */
.modal-dialog textarea {
  resize: vertical;
  min-height: 100px;
}

/* Button Hover States */
.modal-dialog button:not(:disabled):hover {
  opacity: 0.9;
}

.modal-dialog button:not(:disabled):active {
  transform: scale(0.98);
}

/* Loading Spinner in Validation */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Modal */
@media (max-width: 640px) {
  .modal-dialog {
    max-width: 95vw;
    max-height: 95vh;
  }
}