Hugging Face's logo

Spaces:
oopshnik
/
cosmic-checkboxes
Running

App Files Community
cosmic-checkboxes
File size: 3,457 Bytes 
6e41318
 
fdd1e68
 
991c76b
6e41318
 
fdd1e68
6e41318
 
 
 
fdd1e68
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6e41318
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
991c76b
 
6e41318
 
991c76b
 
6e41318
 
991c76b
 
6e41318
 
991c76b
 
6e41318
 
 
991c76b
6e41318
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 

/* Cosmic Theme */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

body {
    background: #000;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    min-height: 100vh;
    padding: 2rem;
}

.cosmic-text {
    position: relative;
    display: inline-block;
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
}

.cosmic-text::after {
    content: 'Seek the unknown';
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
    z-index: -1;
    animation: cosmicGlow 3s infinite alternate;
}

@keyframes cosmicGlow {
    0% {
        transform: translate(0, 0);
        opacity: 0.5;
    }
    25% {
        transform: translate(2px, -2px);
    }
    50% {
        transform: translate(-2px, 2px);
    }
    75% {
        transform: translate(1px, -1px);
    }
    100% {
        transform: translate(-1px, 1px);
        opacity: 0.8;
    }
}
/* Base Checkbox Styles */
.checkbox-container {
    @apply relative;
}
.checkbox-label {
    @apply flex items-center cursor-pointer select-none;
}

.checkbox-input {
    @apply absolute opacity-0 h-0 w-0;
}

.checkbox-text {
    @apply ml-3 text-gray-700 font-medium;
}

/* Simple Checkbox */
.checkbox-custom {
    @apply relative h-6 w-6 rounded border-2 border-gray-300 transition-all duration-200;
}

.checkbox-input:checked ~ .checkbox-custom {
    @apply bg-indigo-500 border-indigo-500;
}

.checkbox-input:checked ~ .checkbox-custom::after {
    content: '';
    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-3 border-r-2 border-b-2 border-white rotate-45;
}

/* Animated Checkbox */
.animated-checkbox {
    @apply relative h-6 w-12 rounded-full bg-gray-300 transition-all duration-300;
}

.animated-checkbox-inner {
    @apply absolute top-1 left-1 h-4 w-4 rounded-full bg-white shadow-md transition-all duration-300;
}

.checkbox-input:checked ~ .animated-checkbox {
    @apply bg-indigo-500;
}

.checkbox-input:checked ~ .animated-checkbox .animated-checkbox-inner {
    @apply transform translate-x-6;
}

/* Icon Checkbox */
.icon-checkbox {
    @apply relative h-6 w-6 rounded border-2 border-gray-300 flex items-center justify-center transition-all duration-200;
}

.icon-check {
    @apply text-transparent w-4 h-4 stroke-[3px] transition-all duration-200;
}
.checkbox-input:checked ~ .checkbox-custom {
    @apply bg-transparent border-white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.checkbox-input:checked ~ .checkbox-custom::after {
    @apply border-white;
}

.checkbox-input:checked ~ .animated-checkbox {
    @apply bg-transparent border-white;
}

.checkbox-input:checked ~ .animated-checkbox .animated-checkbox-inner {
    @apply bg-white;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.checkbox-input:checked ~ .icon-checkbox {
    @apply bg-transparent border-white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.checkbox-input:checked ~ .icon-checkbox .icon-check {
    @apply text-white;
}

/* Hover Effects */
.checkbox-label:hover .checkbox-custom,
.checkbox-label:hover .animated-checkbox,
.checkbox-label:hover .icon-checkbox {
    @apply shadow-md;
}

/* Focus Styles */
.checkbox-input:focus ~ .checkbox-custom,
.checkbox-input:focus ~ .animated-checkbox,
.checkbox-input:focus ~ .icon-checkbox {
    @apply ring-2 ring-indigo-200;
}