彭峰 2 месяцев назад
Родитель
Сommit
187a52a012
1 измененных файлов с 7 добавлено и 8 удалено
  1. 7 8
      src/app/features/course-center/course-center-page.component.scss

+ 7 - 8
src/app/features/course-center/course-center-page.component.scss

@@ -22,14 +22,14 @@ header span { color: var(--ink-soft); font-size: 12px; }
 .course-list button > lucide-icon { color: var(--ink-soft); }
 .course-list button > lucide-icon { color: var(--ink-soft); }
 .course-list button:disabled { cursor: not-allowed; opacity: .58; }
 .course-list button:disabled { cursor: not-allowed; opacity: .58; }
 .schedule-tools { padding: 12px 14px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 42%, white), white 72%); border-bottom: 1px solid var(--line); }
 .schedule-tools { padding: 12px 14px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 42%, white), white 72%); border-bottom: 1px solid var(--line); }
-.schedule-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); align-items: center; gap: 10px; }
-.range-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; background: rgb(255 255 255 / 82%); border: 1px solid var(--line); border-radius: 10px; gap: 3px; }
-.range-tabs button { min-height: 36px; padding: 6px 4px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 8px; font-size: 12px; }
+.schedule-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); align-items: end; gap: 10px; }
+.range-tabs { display: grid; height: 48px; grid-template-columns: repeat(4, 1fr); padding: 3px; background: rgb(255 255 255 / 82%); border: 1px solid var(--line); border-radius: 10px; gap: 3px; }
+.range-tabs button { min-height: 40px; padding: 6px 4px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 8px; font-size: 12px; }
 .range-tabs button.active { color: white; background: var(--brand-strong); box-shadow: 0 4px 12px rgb(20 53 45 / 16%); font-weight: 700; }
 .range-tabs button.active { color: white; background: var(--brand-strong); box-shadow: 0 4px 12px rgb(20 53 45 / 16%); font-weight: 700; }
-.student-filter { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
-.student-filter span { color: var(--ink-soft); font-size: 11px; }
-.student-filter select { width: 100%; height: 40px; padding: 0 29px 0 11px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; outline: 0; }
-.student-filter select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
+.student-filter { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 4px; }
+.student-filter span { color: var(--ink-soft); font-size: 11px; line-height: 13px; }
+.student-filter::after { position: absolute; right: 16px; bottom: 14px; color: var(--ink); font-size: 18px; line-height: 1; content: '⌄'; pointer-events: none; }
+.student-filter select { width: 100%; height: 48px; padding: 0 42px 0 11px; color: var(--ink); appearance: none; background: white; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; outline: 0; }
 .schedule-filters { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 14px 8px; padding: 3px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 8px; gap: 3px; }
 .schedule-filters { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 14px 8px; padding: 3px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 8px; gap: 3px; }
 .schedule-tools .schedule-filters { margin: 10px 0 0; background: rgb(255 255 255 / 78%); }
 .schedule-tools .schedule-filters { margin: 10px 0 0; background: rgb(255 255 255 / 78%); }
 .schedule-filters button { min-height: 36px; padding: 6px 4px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 6px; font-size: 12px; }
 .schedule-filters button { min-height: 36px; padding: 6px 4px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 6px; font-size: 12px; }
@@ -39,7 +39,6 @@ header span { color: var(--ink-soft); font-size: 12px; }
 .calendar-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; margin-bottom: 8px; text-align: center; }
 .calendar-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; margin-bottom: 8px; text-align: center; }
 .calendar-heading strong { color: var(--ink); font-size: 15px; }
 .calendar-heading strong { color: var(--ink); font-size: 15px; }
 .calendar-heading button { display: grid; width: 34px; height: 34px; padding: 0; color: var(--brand-strong); background: var(--brand-soft); border: 0; border-radius: 50%; font-size: 24px; line-height: 1; place-items: center; }
 .calendar-heading button { display: grid; width: 34px; height: 34px; padding: 0; color: var(--brand-strong); background: var(--brand-soft); border: 0; border-radius: 50%; font-size: 24px; line-height: 1; place-items: center; }
-.calendar-heading button:active, .calendar-day:active, .range-tabs button:active, .schedule-filters button:active { transform: translateY(1px); }
 .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
 .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
 .calendar-weekdays { margin-bottom: 6px; color: var(--ink-soft); font-size: 11px; text-align: center; }
 .calendar-weekdays { margin-bottom: 6px; color: var(--ink-soft); font-size: 11px; text-align: center; }
 .calendar-day { position: relative; display: grid; min-width: 0; min-height: 42px; padding: 5px 2px 4px; color: var(--ink); background: var(--surface-muted); border: 1px solid transparent; border-radius: 11px; font-size: 13px; place-items: center; }
 .calendar-day { position: relative; display: grid; min-width: 0; min-height: 42px; padding: 5px 2px 4px; color: var(--ink); background: var(--surface-muted); border: 1px solid transparent; border-radius: 11px; font-size: 13px; place-items: center; }