Skip to content

Commit 0654836

Browse files
happybigboyhappybigboy
committed
Add sticky header, accordion, and floating menu styles with dark mode support
1 parent 7de70a5 commit 0654836

File tree

3 files changed

+278
-281
lines changed

3 files changed

+278
-281
lines changed

‎index.html‎

Lines changed: 8 additions & 228 deletions
Original file line numberDiff line numberDiff line change
@@ -2,230 +2,10 @@
22
<html class="dark:bg-gray-800">
33
<head>
44
<title>GitHub Tokens</title>
5-
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
5+
<link href="./src/output.css" rel="stylesheet">
66
<script type="module" src="./app.js"></script>
7-
<style>
8-
/* Base transitions */
9-
* {
10-
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
11-
}
12-
13-
/* Light mode defaults */
14-
:root {
15-
color-scheme: light dark;
16-
--bg-primary: #ffffff;
17-
--bg-secondary: #f3f4f6;
18-
--text-primary: #111827;
19-
--text-secondary: #4b5563;
20-
--border-color: #e5e7eb;
21-
--bg-secondary-rgb: 243, 244, 246;
22-
}
23-
24-
/* Dark mode colors */
25-
.dark {
26-
--bg-primary: #121212;
27-
--bg-secondary: #1e1e1e;
28-
--text-primary: #e0e0e0;
29-
--text-secondary: #b0b0b0;
30-
--border-color: #333333;
31-
--bg-secondary-rgb: 30, 30, 30;
32-
}
33-
34-
/* Apply variables */
35-
body {
36-
background-color: var(--bg-secondary);
37-
color: var(--text-primary);
38-
}
39-
40-
.dark .dark\:bg-gray-700 {
41-
background-color: var(--bg-secondary);
42-
}
43-
44-
.dark .dark\:bg-gray-800 {
45-
background-color: var(--bg-primary);
46-
}
47-
48-
.dark .dark\:text-gray-200 {
49-
color: var(--text-primary);
50-
}
51-
52-
/* Table styles */
53-
.dark table {
54-
border-color: var(--border-color);
55-
}
56-
57-
.dark th {
58-
background-color: var(--bg-secondary);
59-
color: var(--text-primary);
60-
}
61-
62-
.dark td {
63-
border-color: var(--border-color);
64-
}
65-
66-
/* Input styles */
67-
.dark input, .dark select {
68-
background-color: var(--bg-primary);
69-
color: var(--text-primary);
70-
border-color: var(--border-color);
71-
}
72-
73-
/* Button styles */
74-
.dark button:not(.bg-blue-500) {
75-
background-color: var(--bg-secondary);
76-
color: var(--text-primary);
77-
border-color: var(--border-color);
78-
}
79-
80-
/* Card styles */
81-
.dark .bg-white {
82-
background-color: var(--bg-secondary);
83-
border-color: var(--border-color);
84-
}
85-
86-
/* Hover states */
87-
.dark tr:hover {
88-
background-color: var(--bg-secondary);
89-
}
90-
91-
.dark button:hover:not(.bg-blue-500) {
92-
background-color: var(--bg-primary);
93-
}
94-
95-
/* Custom scrollbar for dark mode */
96-
.dark ::-webkit-scrollbar {
97-
width: 10px;
98-
height: 10px;
99-
}
100-
101-
.dark ::-webkit-scrollbar-track {
102-
background: var(--bg-secondary);
103-
}
104-
105-
.dark ::-webkit-scrollbar-thumb {
106-
background: var(--border-color);
107-
border-radius: 5px;
108-
}
109-
110-
.dark ::-webkit-scrollbar-thumb:hover {
111-
background: var(--text-secondary);
112-
}
113-
114-
/* Sticky header styles */
115-
.sticky-header {
116-
position: sticky;
117-
top: 0;
118-
z-index: 40;
119-
backdrop-filter: blur(8px);
120-
padding: 1rem;
121-
margin: -1rem;
122-
background-color: rgba(var(--bg-secondary-rgb), 0.95);
123-
border-bottom: 1px solid var(--border-color);
124-
}
125-
126-
/* Accordion styles */
127-
.accordion-content {
128-
max-height: 0;
129-
overflow: hidden;
130-
transition: max-height 0.3s ease-out;
131-
}
132-
133-
.accordion-content.open {
134-
max-height: 2000px; /* Large enough to show content */
135-
}
136-
137-
.accordion-header {
138-
cursor: pointer;
139-
user-select: none;
140-
}
141-
142-
.accordion-icon {
143-
transition: transform 0.3s ease;
144-
}
145-
146-
.accordion-header.open .accordion-icon {
147-
transform: rotate(180deg);
148-
}
149-
150-
/* Floating Menu Styles */
151-
.floating-menu {
152-
color: #d1d5db;
153-
position: fixed;
154-
top: 16px;
155-
right: 16px;
156-
display: flex;
157-
flex-direction: column;
158-
align-items: flex-end;
159-
z-index: 50;
160-
}
161-
162-
.dark .floating-menu {
163-
color: #d1d5db;
164-
}
165-
166-
.floating-menu-items {
167-
position: absolute;
168-
top: 48px; /* Changed from bottom positioning */
169-
right: 0;
170-
display: flex;
171-
flex-direction: column;
172-
gap: 8px;
173-
visibility: hidden; /* Changed from opacity */
174-
transform: translateY(-10px);
175-
transition: all 0.2s ease;
176-
}
177-
178-
.floating-menu.active .floating-menu-items {
179-
visibility: visible; /* Changed from opacity */
180-
transform: translateY(0);
181-
}
182-
183-
.floating-menu-item {
184-
width: 36px;
185-
height: 36px;
186-
border-radius: 50%;
187-
background-color: white;
188-
color: #374151;
189-
display: flex;
190-
align-items: center;
191-
justify-content: center;
192-
cursor: pointer;
193-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
194-
transition: transform 0.2s;
195-
}
196-
197-
.dark .floating-menu-item {
198-
background-color: var(--bg-secondary);
199-
color: var(--text-primary);
200-
}
201-
202-
.floating-menu-item:hover {
203-
transform: scale(1.1);
204-
}
205-
206-
.floating-menu-tooltip {
207-
position: absolute;
208-
right: 64px;
209-
background-color: var(--bg-secondary);
210-
color: var(--text-primary);
211-
padding: 4px 8px;
212-
border-radius: 4px;
213-
font-size: 14px;
214-
white-space: nowrap;
215-
opacity: 0;
216-
pointer-events: none;
217-
transition: opacity 0.2s;
218-
}
219-
220-
.floating-menu-item:hover .floating-menu-tooltip {
221-
opacity: 1;
222-
}
223-
</style>
2247
</head>
2258
<body class="p-6 bg-gray-100 dark:bg-gray-800 dark:text-white min-h-screen">
226-
<!-- Remove the old dark mode button div -->
227-
<!-- Remove the individual refresh buttons -->
228-
2299
<!-- Repository Section -->
23010
<div class="w-full mt-6">
23111
<div class="accordion-header flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-t-lg shadow-md" data-target="reposAccordion">
@@ -234,14 +14,12 @@ <h2 class="text-xl font-bold">Repositories</h2>
23414
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
23515
</svg>
23616
</div>
17+
23718
<div id="reposAccordion" class="accordion-content open">
238-
<div class="sticky-header">
239-
<div class="mb-4 flex gap-4">
240-
<input type="text"
241-
id="repoSearch"
242-
placeholder="Search repositories..."
243-
class="w-full px-4 py-2 rounded-lg bg-white border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
244-
<select id="searchType" class="px-4 py-2 rounded-lg bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
19+
<div class="sticky-header mt-2">
20+
<div class="flex gap-2"></div>
21+
<input type="text" id="repoSearch" placeholder="Search..." class="w-4/5 ring-2 px-2 py-1 rounded bg-white border-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
22+
<select id="searchType" class="px-2 py-1 rounded bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
24523
<option value="name">Name</option>
24624
<option value="language">Language</option>
24725
<option value="owner">Owner</option>
@@ -406,5 +184,7 @@ <h2 class="text-xl font-bold">GitHub Stars</h2>
406184
</svg>
407185
</button>
408186
</div>
187+
188+
409189
</body>
410190
</html>

‎src/input.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,126 @@
44

55
* {
66
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
7+
}
8+
9+
/* Sticky header styles */
10+
.sticky-header {
11+
position: sticky;
12+
top: 0;
13+
z-index: 40;
14+
backdrop-filter: blur(20px);
15+
padding: 2rem;
16+
background-color: rgba(255, 255, 255, 0.95);
17+
border-bottom: 1px solid rgba(229, 231, 235, 1);
18+
margin-bottom: 1rem;
19+
}
20+
21+
.dark .sticky-header {
22+
background-color: rgba(55, 65, 81, 0.95);
23+
border-bottom: 1px solid rgba(75, 85, 99, 1);
24+
}
25+
26+
/* Accordion styles */
27+
.accordion-content {
28+
max-height: 0;
29+
overflow: hidden;
30+
transition: max-height 0.3s ease-out;
31+
}
32+
33+
.accordion-content.open {
34+
max-height: 2000px; /* Large enough to show content */
35+
}
36+
37+
.accordion-header {
38+
cursor: pointer;
39+
user-select: none;
40+
}
41+
42+
.accordion-icon {
43+
transition: transform 0.3s ease;
44+
}
45+
46+
.accordion-header.open .accordion-icon {
47+
transform: rotate(180deg);
48+
}
49+
50+
/* Floating Menu Styles */
51+
.floating-menu {
52+
color: #d1d5db;
53+
position: fixed;
54+
top: 16px;
55+
right: 16px;
56+
display: flex;
57+
flex-direction: column;
58+
align-items: flex-end;
59+
z-index: 50;
60+
}
61+
62+
.dark .floating-menu {
63+
color: #d1d5db;
64+
}
65+
66+
.floating-menu-items {
67+
position: absolute;
68+
top: 48px; /* Changed from bottom positioning */
69+
right: 0;
70+
display: flex;
71+
flex-direction: column;
72+
gap: 8px;
73+
visibility: hidden; /* Changed from opacity */
74+
transform: translateY(-10px);
75+
transition: all 0.2s ease;
76+
}
77+
78+
.floating-menu.active .floating-menu-items {
79+
visibility: visible; /* Changed from opacity */
80+
transform: translateY(0);
81+
}
82+
83+
.floating-menu-item {
84+
width: 36px;
85+
height: 36px;
86+
border-radius: 50%;
87+
background-color: white;
88+
color: #374151;
89+
display: flex;
90+
align-items: center;
91+
justify-content: center;
92+
cursor: pointer;
93+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
94+
transition: transform 0.2s;
95+
}
96+
97+
.dark .floating-menu-item {
98+
background-color: bg-gray-800;
99+
color: text-white;
100+
}
101+
102+
.floating-menu-item:hover {
103+
transform: scale(1.1);
104+
}
105+
106+
.floating-menu-tooltip {
107+
position: absolute;
108+
right: 48px; /* Adjusted position */
109+
top: 50%;
110+
transform: translateY(-50%);
111+
background-color: #1f2937; /* Dark gray background */
112+
color: #f3f4f6; /* Light text */
113+
padding: 6px 12px;
114+
border-radius: 6px;
115+
font-size: 14px;
116+
white-space: nowrap;
117+
visibility: hidden; /* Changed from opacity */
118+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
119+
transition: visibility 0.2s ease;
120+
}
121+
122+
.dark .floating-menu-tooltip {
123+
background-color: #f3f4f6; /* Light background in dark mode */
124+
color: #1f2937; /* Dark text in dark mode */
125+
}
126+
127+
.floating-menu-item:hover .floating-menu-tooltip {
128+
visibility: visible; /* Changed from opacity */
7129
}

0 commit comments

Comments
 (0)