round-timing/input.css at staging · rousseau-romain/round-timing · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   CSS Variables (Design Tokens)
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-accent: theme('colors.orange.400');
  --color-success: theme('colors.green.500');
  --color-danger: theme('colors.red.500');
  --color-primary: theme('colors.indigo.600');

  /* Background */
  --color-bg-primary: theme('colors.white');
  --color-bg-secondary: theme('colors.gray.50');

  /* Text */
  --color-text-primary: theme('colors.gray.900');
  --color-text-secondary: theme('colors.gray.700');
  --color-text-muted: theme('colors.gray.500');

  /* Borders */
  --color-border: theme('colors.gray.300');
  --color-border-light: theme('colors.gray.200');
}

.dark {
  /* Background */
  --color-bg-primary: theme('colors.gray.900');
  --color-bg-secondary: theme('colors.gray.800');

  /* Text */
  --color-text-primary: theme('colors.white');
  --color-text-secondary: theme('colors.gray.200');
  --color-text-muted: theme('colors.gray.400');

  /* Borders */
  --color-border: theme('colors.gray.600');
  --color-border-light: theme('colors.gray.700');
}

/* ==========================================================================
   Typography
   ========================================================================== */

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

@layer base {
  [type="text"],
  [type="password"],
  [type="email"],
  [type="number"],
  [type="url"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="week"],
  [type="time"],
  [type="search"],
  [type="tel"],
  select,
  select[multiple],
  textarea {
    @apply shadow-sm rounded-md block w-full sm:text-sm border-gray-300
        focus:ring-orange-400 focus:border-orange-400 focus:outline-none focus:ring-inset
        dark:focus:border-orange-400 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200;
  }

  [type="checkbox"],
  [type="radio"] {
    @apply rounded focus:ring-orange-400 dark:bg-gray-900;
  }
}

/* ==========================================================================
   Links
   ========================================================================== */

@layer base {
  .content a,
  .breadcrumbs a {
    @apply text-green-500 hover:text-green-700;
  }
  footer a {
    @apply text-gray-500 hover:text-gray-700 font-bold;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

@layer utilities {
  /* Tooltip */
  .tooltip {
    @apply invisible absolute bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
  }

  .has-tooltip:hover .tooltip {
    @apply visible z-50;
  }
}

/* ==========================================================================
   Third-party Integration (HTMX)
   ========================================================================== */

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}