my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	/* Admin Page Styles */
#2	.devices-page {
#3	display: flex;
#4	flex-direction: column;
#5	gap: 2rem;
#6	}
#7
#8	/* Loading state */
#9	.loading {
#10	display: flex;
#11	flex-direction: column;
#12	align-items: center;
#13	justify-content: center;
#14	min-height: 300px;
#15	gap: 1rem;
#16	color: var(--text-secondary);
#17	}
#18
#19	.spinner {
#20	width: 40px;
#21	height: 40px;
#22	border: 3px solid var(--border-color);
#23	border-top-color: var(--primary-color);
#24	border-radius: 50%;
#25	animation: spin 1s linear infinite;
#26	}
#27
#28	@keyframes spin {
#29	to {
#30	transform: rotate(360deg);
#31	}
#32	}
#33
#34	/* Error banner */
#35	.error-banner {
#36	background-color: rgba(239, 68, 68, 0.15);
#37	border: 1px solid var(--error-color);
#38	border-radius: var(--border-radius);
#39	padding: 1rem;
#40	display: flex;
#41	justify-content: space-between;
#42	align-items: center;
#43	gap: 1rem;
#44	color: var(--error-color);
#45	}
#46
#47	.dismiss-btn {
#48	background: none;
#49	border: none;
#50	color: var(--error-color);
#51	padding: 0.25rem 0.5rem;
#52	font-size: 0.875rem;
#53	opacity: 0.8;
#54	}
#55
#56	.dismiss-btn:hover {
#57	opacity: 1;
#58	text-decoration: underline;
#59	}
#60
#61	/* Warning banner (R2 not configured) */
#62	.warning-banner {
#63	background-color: rgba(251, 191, 36, 0.15);
#64	border: 1px solid var(--warning-color);
#65	border-radius: var(--border-radius);
#66	padding: 1rem;
#67	color: var(--warning-color);
#68	}
#69
#70	.warning-banner .warning-content strong {
#71	display: block;
#72	margin-bottom: 0.5rem;
#73	}
#74
#75	.warning-banner .warning-content p {
#76	margin: 0;
#77	font-size: 0.875rem;
#78	opacity: 0.9;
#79	}
#80
#81	.warning-banner .missing-secrets {
#82	margin-top: 0.5rem;
#83	font-family: monospace;
#84	font-size: 0.8rem;
#85	opacity: 0.8;
#86	}
#87
#88	/* Success banner (R2 configured) */
#89	.success-banner {
#90	background-color: rgba(74, 222, 128, 0.15);
#91	border: 1px solid var(--success-color);
#92	border-radius: var(--border-radius);
#93	padding: 1rem;
#94	color: var(--success-color);
#95	font-size: 0.875rem;
#96	}
#97
#98	.success-banner .storage-status {
#99	display: flex;
#100	justify-content: space-between;
#101	align-items: center;
#102	gap: 1rem;
#103	flex-wrap: wrap;
#104	}
#105
#106	.success-banner .storage-info {
#107	display: flex;
#108	flex-direction: column;
#109	gap: 0.25rem;
#110	}
#111
#112	.success-banner .last-sync {
#113	font-size: 0.8rem;
#114	opacity: 0.8;
#115	}
#116
#117	/* Small button variant */
#118	.btn-sm {
#119	padding: 0.375rem 0.75rem;
#120	font-size: 0.8rem;
#121	}
#122
#123	/* Section styles */
#124	.devices-section {
#125	background-color: var(--surface-color);
#126	border-radius: var(--border-radius);
#127	padding: 1.5rem;
#128	box-shadow: var(--shadow);
#129	}
#130
#131	.section-header {
#132	display: flex;
#133	justify-content: space-between;
#134	align-items: center;
#135	margin-bottom: 1.5rem;
#136	flex-wrap: wrap;
#137	gap: 1rem;
#138	}
#139
#140	.section-header h2 {
#141	font-size: 1.25rem;
#142	font-weight: 600;
#143	color: var(--text-primary);
#144	margin: 0;
#145	}
#146
#147	.header-actions {
#148	display: flex;
#149	gap: 0.5rem;
#150	align-items: center;
#151	}
#152
#153	/* Gateway section */
#154	.gateway-section {
#155	border-left: 3px solid var(--primary-color);
#156	}
#157
#158	.gateway-section .hint {
#159	margin: 0;
#160	font-size: 0.875rem;
#161	color: var(--text-muted);
#162	}
#163
#164	/* Empty state */
#165	.empty-state {
#166	text-align: center;
#167	padding: 3rem 1rem;
#168	color: var(--text-secondary);
#169	}
#170
#171	.empty-state p {
#172	margin: 0;
#173	}
#174
#175	.empty-state .hint {
#176	margin-top: 0.5rem;
#177	font-size: 0.875rem;
#178	color: var(--text-muted);
#179	}
#180
#181	/* Devices grid */
#182	.devices-grid {
#183	display: grid;
#184	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
#185	gap: 1rem;
#186	}
#187
#188	/* Device card */
#189	.device-card {
#190	background-color: var(--bg-color);
#191	border: 1px solid var(--border-color);
#192	border-radius: var(--border-radius);
#193	padding: 1rem;
#194	display: flex;
#195	flex-direction: column;
#196	gap: 1rem;
#197	}
#198
#199	.device-card.pending {
#200	border-color: var(--warning-color);
#201	border-width: 2px;
#202	}
#203
#204	.device-card.paired {
#205	border-color: var(--success-color);
#206	}
#207
#208	.device-header {
#209	display: flex;
#210	justify-content: space-between;
#211	align-items: center;
#212	gap: 0.5rem;
#213	}
#214
#215	.device-name {
#216	font-weight: 600;
#217	color: var(--text-primary);
#218	word-break: break-word;
#219	}
#220
#221	.device-badge {
#222	font-size: 0.75rem;
#223	font-weight: 500;
#224	padding: 0.25rem 0.5rem;
#225	border-radius: 4px;
#226	text-transform: uppercase;
#227	white-space: nowrap;
#228	}
#229
#230	.device-badge.pending {
#231	background-color: rgba(251, 191, 36, 0.2);
#232	color: var(--warning-color);
#233	}
#234
#235	.device-badge.paired {
#236	background-color: rgba(74, 222, 128, 0.2);
#237	color: var(--success-color);
#238	}
#239
#240	/* Device details */
#241	.device-details {
#242	display: flex;
#243	flex-direction: column;
#244	gap: 0.5rem;
#245	font-size: 0.875rem;
#246	}
#247
#248	.detail-row {
#249	display: flex;
#250	gap: 0.5rem;
#251	}
#252
#253	.detail-row .label {
#254	color: var(--text-muted);
#255	min-width: 80px;
#256	}
#257
#258	.detail-row .value {
#259	color: var(--text-secondary);
#260	word-break: break-all;
#261	}
#262
#263	/* Device actions */
#264	.device-actions {
#265	display: flex;
#266	gap: 0.5rem;
#267	margin-top: auto;
#268	}
#269
#270	/* Buttons */
#271	.btn {
#272	padding: 0.5rem 1rem;
#273	border-radius: var(--border-radius);
#274	font-weight: 500;
#275	font-size: 0.875rem;
#276	border: none;
#277	transition: all 0.15s ease;
#278	display: inline-flex;
#279	align-items: center;
#280	justify-content: center;
#281	gap: 0.5rem;
#282	}
#283
#284	/* Button spinner (inline) */
#285	.btn-spinner {
#286	width: 14px;
#287	height: 14px;
#288	border: 2px solid currentColor;
#289	border-top-color: transparent;
#290	border-radius: 50%;
#291	animation: spin 0.8s linear infinite;
#292	opacity: 0.8;
#293	}
#294
#295	.btn:disabled {
#296	opacity: 0.5;
#297	cursor: not-allowed;
#298	}
#299
#300	.btn-primary {
#301	background-color: var(--primary-color);
#302	color: white;
#303	}
#304
#305	.btn-primary:hover:not(:disabled) {
#306	background-color: var(--primary-hover);
#307	}
#308
#309	.btn-secondary {
#310	background-color: var(--surface-hover);
#311	color: var(--text-primary);
#312	border: 1px solid var(--border-color);
#313	}
#314
#315	.btn-secondary:hover:not(:disabled) {
#316	background-color: var(--border-color);
#317	}
#318
#319	.btn-success {
#320	background-color: var(--success-color);
#321	color: var(--bg-color);
#322	}
#323
#324	.btn-success:hover:not(:disabled) {
#325	filter: brightness(1.1);
#326	}
#327
#328	.btn-danger {
#329	background-color: var(--error-color);
#330	color: white;
#331	}
#332
#333	.btn-danger:hover:not(:disabled) {
#334	filter: brightness(1.1);
#335	}
#336
#337	/* Responsive adjustments */
#338	@media (max-width: 640px) {
#339	.devices-section {
#340	padding: 1rem;
#341	}
#342
#343	.section-header {
#344	flex-direction: column;
#345	align-items: flex-start;
#346	}
#347
#348	.devices-grid {
#349	grid-template-columns: 1fr;
#350	}
#351	}
#352

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public