-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCustom CSS for Doras.to
169 lines (142 loc) · 8.77 KB
/
Custom CSS for Doras.to
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/* This is the Custom CSS made for LuckyLootTube's Doras.to Profile Page https://doras.to/luckyloottube */
/* I've spent some time on it so for the sake of saving your time and because I believe that share is care, you can just copy the following Custom CSS, edit it and use it on your Doras.to Profile page. */
/* 3 */
/* 2 */
/* 1 */
/* GO! */
/* Define keyframes for a very subtle wobble animation */
@keyframes gentle-wobble {
0% { transform: translateX(0); }
15% { transform: translateX(-0.5px) rotate(-0.1deg); }
30% { transform: translateX(0.4px) rotate(0.1deg); }
45% { transform: translateX(-0.3px) rotate(-0.05deg); }
60% { transform: translateX(0.2px) rotate(0.05deg); }
75% { transform: translateX(-0.1px); }
100% { transform: translateX(0); }
}
/* Define keyframes for a gentle hover effect with scaling */
@keyframes gentle-hover {
0% { transform: scale(1); }
50% { transform: scale(1.05); } /* Slight scaling */
100% { transform: scale(1); }
}
/* Apply the gentle wobble animation to the profile picture */
#profile-picture {
animation: gentle-wobble 3s infinite; /* Slower and more subtle wobble */
transition: all 0.3s ease; /* Smooth transition */
}
/* Apply gentle wobble and color transitions to the button */
button#block {
animation: gentle-wobble 3s infinite;
transition: all 0.3s ease; /* Smooth transition */
background-color: #0A1236; /* Original button color */
color: #ebbc3c; /* Original text color */
border: none; /* Ensure no border for visual clarity */
}
/* Apply gentle wobble and color transitions to the email button */
#email-block {
animation: gentle-wobble 3s infinite;
transition: all 0.3s ease; /* Smooth transition */
background-color: #0A1236; /* Original button color */
color: #ebbc3c; /* Original text color */
border: none; /* Ensure no border for visual clarity */
}
/* Apply a subtle hover effect with scaling, and invert colors on hover for buttons */
button#block:hover {
animation: gentle-hover 0.6s infinite; /* Subtle scaling effect on hover */
background-color: #ebbc3c; /* Inverted button color */
color: #0A1236; /* Inverted text color */
}
/* Apply a subtle hover effect with scaling, and invert colors on hover for email button */
#email-block:hover {
animation: gentle-hover 0.6s infinite; /* Subtle scaling effect on hover */
background-color: #ebbc3c; /* Inverted button color */
color: #0A1236; /* Inverted text color */
}
/* Apply a subtle hover effect with scaling, and invert colors on hover for multi link blocks */
#multiLinkButton:hover {
animation: gentle-hover 0.6s infinite; /* Subtle scaling effect on hover */
background-color: #ebbc3c; /* Inverted button color */
color: #0A1236; /* Inverted text color */
}
/* Define keyframes for a gentle zoom-in and zoom-out animation */
@keyframes gentle-zoom {
0% { transform: scale(0.9); } /* 10% smaller */
50% { transform: scale(1.1); } /* 10% larger */
100% { transform: scale(0.9); } /* Back to 10% smaller */
}
/* Apply the gentle zoom animation to the uploaded image */
#uploaded-image {
animation: gentle-zoom 5s infinite ease-in-out; /* Smooth zoom in and out */
transition: transform 0.3s ease; /* Smooth transition */
}
/* Define keyframes for a gentle zoom-in and zoom-out animation */
@keyframes gentle-zoom {
0% { transform: scale(0.99); } /* 10% smaller */
50% { transform: scale(1.01); } /* 10% larger */
100% { transform: scale(0.99); } /* Back to 10% smaller */
}
/* Apply the gentle zoom animation to the rich text boxes */
.richText {
animation: gentle-zoom 5s infinite ease-in-out; /* Smooth zoom in and out */
transition: transform 0.3s ease; /* Smooth transition */
}
/* Apply the gentle zoom animation to the title stringed text */
#profile-heading {
animation: gentle-zoom 5s infinite ease-in-out; /* Smooth zoom in and out */
transition: transform 0.3s ease; /* Smooth transition */
}
#items {
text-shadow: 6px 6px 0px rgba(0,0,0,0.1);
background-color: rgb(10 18 54 / 15%); /* Box blur effect */
}
/* Define keyframes for a gentle fading animation */
@keyframes fade {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* Apply the infinite fading effect to the block icon */
#block-icon {
animation: fade 8s infinite;
}
/* Define keyframes for a subtle zoom-in and zoom-out animation */
@keyframes subtle-zoom {
0% { transform: scale(1); }
50% { transform: scale(1.1); } /* Zoom in slightly */
100% { transform: scale(1); }
}
/* Apply hover effect to the carousel arrows */
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-right-2.top-1\/2.-translate-y-1\/2.hover\:scale-105 {
transition: all 0.3s ease; /* Smooth transition */
background: rgb(10, 18, 54);
color: rgb(233, 189, 69);
border: 0px;
}
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-right-2.top-1\/2.-translate-y-1\/2.hover\:scale-105:hover {
background-color: #ebbc3c; /* Change background color on hover */
color: #0A1236; /* Change text color on hover */
}
/* Apply hover effect to the SVG path within the button */
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-right-2.top-1\/2.-translate-y-1\/2.hover\:scale-105:hover path {
fill: #0A1236; /* Change arrow color on hover */
}
/* Common styles for both next and previous buttons */
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-right-2.top-1\/2.-translate-y-1\/2.hover\:scale-105,
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-left-2.top-1\/2.-translate-y-1\/2.hover\:scale-105 {
transition: all 0.3s ease; /* Smooth transition */
background: rgb(10, 18, 54);
color: rgb(233, 189, 69);
border: 0px;
}
/* Hover effect for both next and previous buttons */
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-right-2.top-1\/2.-translate-y-1\/2.hover\:scale-105:hover,
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-left-2.top-1\/2.-translate-y-1\/2.hover\:scale-105:hover {
background-color: #ebbc3c; /* Change background color on hover */
color: #0A1236; /* Change text color on hover */
}
/* Apply hover effect to the SVG paths within the buttons */
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-right-2.top-1\/2.-translate-y-1\/2.hover\:scale-105:hover path,
button.inline-flex.items-center.justify-center.whitespace-nowrap.text-sm.font-medium.transition-colors.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-20.border.bg-transparent.shadow-sm.hover\:bg-accent.hover\:text-accent-foreground.absolute.h-8.w-8.rounded-full.-left-2.top-1\/2.-translate-y-1\/2.hover\:scale-105:hover path {
fill: #0A1236; /* Change arrow color on hover */
}