slop-or-not/styles.css at main · eclecticv/slop-or-not · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/*
 * Slop or Not - Badge Styles
 * Inspired by Apple Human Interface Guidelines & Medium's clean aesthetic
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Neutrals */
  --color-text-primary: #1D1D1F;
  --color-text-secondary: #6E6E73;
  --color-text-tertiary: #AEAEB2;
  --color-background: #FFFFFF;
  --color-surface: #F5F5F7;
  --color-border: rgba(0, 0, 0, 0.06);

  /* Shadows - Apple-style layered shadows */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* Timing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   Badge Container
   ============================================ */
.slop-detector-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  background: #ffffff;
  cursor: default;
  font-family: var(--font-family);
  transition: all 0.2s var(--ease-out-quad);
  max-width: 200px;
}

/* Colored borders based on level */
.slop-detector-badge[data-level="2"] {
  border: 2px solid #10b981; /* Green border for Human */
}

.slop-detector-badge[data-level="1"] {
  border: 2px solid #ef4444; /* Red border for Slop */
}

.slop-detector-badge:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

/* ============================================
   Badge Content Layout
   ============================================ */
.slop-badge-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================
   Icon
   ============================================ */
.slop-icon {
  font-size: 20px;
  line-height: 1;
}

/* ============================================
   Label Typography
   ============================================ */
.slop-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.slop-detector-badge[data-level="2"] .slop-label {
  color: #10b981;
}

.slop-detector-badge[data-level="1"] .slop-label {
  color: #ef4444;
}

/* ============================================
   Commentary
   ============================================ */
.slop-commentary {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* ============================================
   Entry Animation
   ============================================ */
@keyframes badgeAppear {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.slop-detector-badge {
  animation: badgeAppear 0.3s var(--ease-out-expo) forwards;
}


/* ============================================
   Dark Mode Support (respects system preference)
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1C1C1E;
    --color-surface: #2C2C2E;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-text-primary: #F5F5F7;
    --color-text-secondary: #A1A1A6;

    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  /* Keep white badge background in dark mode */
  .slop-detector-badge {
    background: #ffffff;
  }
}