FlexGrid/styles.css at main · speakeztech/FlexGrid · 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
@tailwind base;
@tailwind components;
@tailwind utilities;

/* SpeakEZ brand base styles */
@layer base {
  body {
    font-family: 'Montserrat', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', system-ui, sans-serif;
  }

  code, pre {
    font-family: 'Fira Code', monospace;
    font-feature-settings: "liga" 1, "calt" 1;
  }
}

/* Custom spreadsheet styles */
@layer components {
  .cell-base {
    @apply border border-speakez-neutral/30 dark:border-speakez-neutral-light/20 px-2 py-1 text-right font-mono text-sm;
  }

  .cell-input {
    @apply cell-base bg-amber-50 dark:bg-amber-900/30 text-speakez-neutral dark:text-amber-100;
  }

  .cell-input:focus-within {
    @apply bg-amber-100 dark:bg-amber-800/40 outline-none ring-2 ring-speakez-teal dark:ring-speakez-teal-dark;
  }

  .cell-formula {
    @apply cell-base bg-white dark:bg-speakez-neutral-dark text-speakez-neutral dark:text-speakez-neutral-light;
  }

  .cell-label {
    @apply cell-base bg-slate-100 dark:bg-speakez-neutral text-left font-sans text-speakez-neutral dark:text-speakez-neutral-light;
  }

  .cell-header {
    @apply cell-base bg-speakez-teal/10 dark:bg-speakez-teal-dark/20 font-semibold text-center text-speakez-neutral dark:text-speakez-neutral-light;
  }

  .cell-error {
    @apply cell-base bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300;
  }

  .spreadsheet-table {
    @apply border-collapse shadow-lg rounded-lg overflow-hidden;
  }

  .spreadsheet-input {
    @apply w-full bg-transparent text-right outline-none;
  }

  /* SpeakEZ themed buttons */
  .btn-speakez {
    @apply px-4 py-2 rounded-lg font-semibold transition-all duration-200;
  }

  .btn-speakez-teal {
    @apply btn-speakez bg-speakez-teal text-white hover:bg-speakez-teal-dark;
  }

  .btn-speakez-blue {
    @apply btn-speakez bg-speakez-blue text-white hover:bg-speakez-blue-light;
  }

  .btn-speakez-orange {
    @apply btn-speakez bg-speakez-orange text-white hover:bg-speakez-orange-light;
  }

  /* Card styling */
  .card-speakez {
    @apply bg-white dark:bg-speakez-neutral rounded-lg shadow-lg overflow-hidden;
    @apply border border-speakez-neutral/10 dark:border-speakez-neutral-light/10;
  }
}

/* Link styling - orange accent like SpeakEZ */
@layer utilities {
  .link-speakez {
    @apply text-speakez-orange hover:text-speakez-orange-light transition-colors;
  }
}