Skip to content

Instantly share code, notes, and snippets.

@macedonga
Last active September 11, 2021 17:40
Show Gist options
  • Save macedonga/7468d85414dedb12e12c2a96698099c3 to your computer and use it in GitHub Desktop.
Save macedonga/7468d85414dedb12e12c2a96698099c3 to your computer and use it in GitHub Desktop.
A style for Caards.
html {
background: #123;
}
head::before, head::after,
body::before, body::after {
position: fixed;
z-index: -1;
top: 50%;
left: 50%;
width: 5em;
height: 5em;
content: ".";
color: #ffffff01;
mix-blend-mode: screen;
animation: 44s -27s move infinite ease-in-out alternate;
}
body::before {
text-shadow: 1.4573333584em 2.4616698005em 7px rgba(160, 255, 0, 0.9), 1.8440672358em 2.149492883em 7px rgba(189, 255, 0, 0.9), 1.7896684698em 2.2710266486em 7px rgba(255, 4, 0, 0.9), -0.3017640167em 2.4950668586em 7px rgba(91, 0, 255, 0.9), 1.0805241176em 2.4722901917em 7px rgba(135, 0, 255, 0.9), 1.2128262456em 0.5678939297em 7px rgba(136, 0, 255, 0.9), 1.4650325448em -0.4524611047em 7px rgba(0, 255, 94, 0.9), 1.769912229em 1.5808960495em 7px rgba(255, 0, 99, 0.9), 1.017878487em 0.2293864426em 7px rgba(211, 255, 0, 0.9), 2.0000887571em 0.4536392849em 7px rgba(255, 0, 1, 0.9), 0.2969025073em 2.0234585135em 7px rgba(0, 226, 255, 0.9), 0.2116999985em 0.4510923309em 7px rgba(255, 191, 0, 0.9), -0.1673834361em 1.7874024222em 7px rgba(61, 255, 0, 0.9), 1.428834143em 0.5522530242em 7px rgba(255, 0, 62, 0.9), 0.8172760702em 0.1752281438em 7px rgba(135, 0, 255, 0.9), 2.192975443em 0.6103946486em 7px rgba(255, 251, 0, 0.9), 2.304943536em 1.5948368745em 7px rgba(255, 212, 0, 0.9), 1.2402669263em 1.7645409575em 7px rgba(0, 71, 255, 0.9), 1.937299215em 0.0502864714em 7px rgba(0, 77, 255, 0.9), 2.13376343em 2.1157154919em 7px rgba(0, 170, 255, 0.9), 0.1070290992em -0.2449431453em 7px rgba(0, 255, 216, 0.9), 1.2394189735em -0.0885627968em 7px rgba(255, 46, 0, 0.9), 0.2669871084em -0.1131262521em 7px rgba(255, 0, 144, 0.9), 0.7469441917em 0.8461030712em 7px rgba(255, 0, 225, 0.9), 1.5563691966em 0.0098279845em 7px rgba(29, 255, 0, 0.9), 0.3229686877em 0.336561079em 7px rgba(0, 118, 255, 0.9), 0.2592781429em 2.1417102971em 7px rgba(255, 0, 237, 0.9), 1.720295614em 1.2224985247em 7px rgba(255, 218, 0, 0.9), 2.4752740724em 0.2725783333em 7px rgba(99, 255, 0, 0.9), -0.2603124138em 2.00127668em 7px rgba(186, 255, 0, 0.9), -0.1154753813em -0.3551556691em 7px rgba(255, 63, 0, 0.9), 0.4149062458em 2.2020629524em 7px rgba(96, 0, 255, 0.9), 0.7154985306em 1.8954154497em 7px rgba(213, 255, 0, 0.9), 1.188447152em 0.6268767438em 7px rgba(24, 0, 255, 0.9), 2.470125271em 1.5042899747em 7px rgba(38, 255, 0, 0.9), 1.712818628em 0.4027563621em 7px rgba(56, 0, 255, 0.9), -0.1894259838em 1.0180248594em 7px rgba(0, 255, 241, 0.9), -0.3409779274em 1.182106971em 7px rgba(0, 255, 255, 0.9), 2.4199582469em 0.1834739696em 7px rgba(255, 174, 0, 0.9), 1.6033144873em 1.8485863444em 7px rgba(27, 255, 0, 0.9), 1.2801070427em 2.4765915478em 7px rgba(0, 8, 255, 0.9);
animation-duration: 44s;
animation-delay: -27s;
}
body::after {
text-shadow: 1.0573933324em 1.4713171046em 7px rgba(253, 255, 0, 0.9), 1.3565371446em 2.1996041507em 7px rgba(0, 255, 109, 0.9), 2.1430778657em 1.9693701259em 7px rgba(255, 0, 228, 0.9), -0.4410722053em 1.4231962462em 7px rgba(0, 21, 255, 0.9), 2.0472058724em 1.5082134602em 7px rgba(129, 0, 255, 0.9), 2.1837098199em 1.9549811913em 7px rgba(255, 117, 0, 0.9), 2.3538916939em 1.6870613593em 7px rgba(255, 0, 41, 0.9), 1.6983731875em -0.2041700992em 7px rgba(203, 255, 0, 0.9), 0.7289503552em -0.4870912956em 7px rgba(255, 0, 133, 0.9), 1.8461390002em 2.4738137222em 7px rgba(255, 0, 23, 0.9), 0.2277263101em 0.1459789124em 7px rgba(255, 0, 206, 0.9), 2.4906684458em 1.9360068779em 7px rgba(255, 165, 0, 0.9), 2.175132342em 0.8463496748em 7px rgba(255, 0, 207, 0.9), 2.4948420451em -0.1471492393em 7px rgba(104, 0, 255, 0.9), 1.133045135em -0.1484295744em 7px rgba(255, 97, 0, 0.9), 1.1860621597em 0.5246659936em 7px rgba(0, 255, 103, 0.9), -0.3365099783em -0.0190966393em 7px rgba(255, 0, 232, 0.9), 0.6714603581em 0.5323990176em 7px rgba(0, 255, 3, 0.9), 1.4231258619em 0.895183394em 7px rgba(0, 158, 255, 0.9), 1.0957643153em -0.2910909516em 7px rgba(255, 9, 0, 0.9), 2.3745820157em 1.5883737589em 7px rgba(255, 242, 0, 0.9), 1.2863690883em 1.1091770734em 7px rgba(238, 0, 255, 0.9), -0.0968262647em 1.7095953104em 7px rgba(255, 171, 0, 0.9), 0.5282580737em -0.3937858611em 7px rgba(135, 0, 255, 0.9), 2.3940581959em 1.0603120438em 7px rgba(0, 17, 255, 0.9), 0.8897716986em 0.9035558643em 7px rgba(197, 0, 255, 0.9), 2.131079446em 0.5355731669em 7px rgba(233, 255, 0, 0.9), 1.5575729073em 0.8981045981em 7px rgba(255, 35, 0, 0.9), 1.3831384734em 1.7962167503em 7px rgba(0, 215, 255, 0.9), 1.5499171928em 0.7812219631em 7px rgba(173, 255, 0, 0.9), 1.1922306196em 1.4340908712em 7px rgba(0, 229, 255, 0.9), 1.6166768974em 2.3697847484em 7px rgba(246, 0, 255, 0.9), 0.3974200799em -0.0156253417em 7px rgba(44, 0, 255, 0.9), 1.8370764401em 1.6427430217em 7px rgba(0, 59, 255, 0.9), -0.3373955104em 2.3106168246em 7px rgba(255, 0, 96, 0.9), 1.1940437193em 1.1896185642em 7px rgba(171, 255, 0, 0.9), 2.330784922em -0.0887197561em 7px rgba(159, 0, 255, 0.9), 2.1121909218em 2.3054039322em 7px rgba(255, 0, 66, 0.9), 2.1272348105em 0.1214657302em 7px rgba(255, 0, 26, 0.9), 1.6499534162em -0.4566142641em 7px rgba(221, 0, 255, 0.9), 1.8651511749em 0.075578171em 7px rgba(255, 0, 11, 0.9);
animation-duration: 43s;
animation-delay: -32s;
}
head::before {
text-shadow: 1.4922527081em 1.2982314192em 7px rgba(0, 185, 255, 0.9), 0.2493853009em 1.1214551606em 7px rgba(255, 0, 141, 0.9), 1.5235567595em 2.46140327em 7px rgba(121, 0, 255, 0.9), 2.3257732514em 1.9973592537em 7px rgba(0, 255, 86, 0.9), 0.9371554131em 2.3569674194em 7px rgba(0, 55, 255, 0.9), 1.7412241433em 2.4612248723em 7px rgba(0, 14, 255, 0.9), 0.7371114158em 2.1737100416em 7px rgba(0, 212, 255, 0.9), 0.3464666325em -0.0920200302em 7px rgba(154, 255, 0, 0.9), 2.1528259446em 1.1248429988em 7px rgba(255, 229, 0, 0.9), 0.3784741995em -0.0701594536em 7px rgba(0, 255, 3, 0.9), 0.7386434425em 0.1480528273em 7px rgba(39, 0, 255, 0.9), 0.9537547749em 2.2347531828em 7px rgba(30, 0, 255, 0.9), 1.1302483569em 0.3843309055em 7px rgba(182, 0, 255, 0.9), 0.0509195365em 2.3188926298em 7px rgba(0, 255, 195, 0.9), -0.1772309705em 1.1108295569em 7px rgba(255, 71, 0, 0.9), 1.8761422455em 1.0234282924em 7px rgba(255, 0, 115, 0.9), 0.1620469092em -0.4833235138em 7px rgba(181, 0, 255, 0.9), 1.4044386452em 1.6124995475em 7px rgba(0, 255, 249, 0.9), 1.9619192239em -0.1032406509em 7px rgba(126, 0, 255, 0.9), 1.4876271075em 0.900027411em 7px rgba(0, 64, 255, 0.9), -0.0055341385em 1.7236238836em 7px rgba(255, 0, 206, 0.9), -0.1254747513em 1.5166050546em 7px rgba(236, 255, 0, 0.9), 1.1343257574em 0.7756621087em 7px rgba(255, 100, 0, 0.9), 1.4290646956em 1.0635981056em 7px rgba(148, 255, 0, 0.9), 1.2129531519em 0.7049948393em 7px rgba(255, 45, 0, 0.9), 2.3239893565em 1.4140026554em 7px rgba(0, 76, 255, 0.9), 2.0678116907em 2.1823108076em 7px rgba(255, 0, 23, 0.9), 2.0443437423em 0.926455031em 7px rgba(0, 255, 46, 0.9), 2.1775189947em 1.6053409504em 7px rgba(0, 104, 255, 0.9), 0.5834091179em 1.8758170827em 7px rgba(255, 0, 66, 0.9), 0.8860967001em 1.6672711014em 7px rgba(255, 183, 0, 0.9), 0.2995854202em 1.6192497962em 7px rgba(255, 192, 0, 0.9), 0.7699458495em -0.4853568188em 7px rgba(73, 255, 0, 0.9), 2.1883997954em 1.9982210901em 7px rgba(0, 155, 255, 0.9), 1.8235488585em 2.0974946774em 7px rgba(187, 255, 0, 0.9), 0.3514456613em 0.7009659193em 7px rgba(255, 86, 0, 0.9), 1.6190391288em 0.7342888693em 7px rgba(0, 255, 165, 0.9), 2.1102992693em 1.4523173694em 7px rgba(91, 255, 0, 0.9), 0.1430892363em 0.7979227727em 7px rgba(255, 79, 0, 0.9), 2.4405095336em 1.1210790249em 7px rgba(255, 98, 0, 0.9), 1.6617070916em 2.0504469075em 7px rgba(0, 255, 200, 0.9);
animation-duration: 42s;
animation-delay: -23s;
}
head::after {
text-shadow: 0.9726577495em 1.5709283449em 7px rgba(175, 0, 255, 0.9), 0.9366001083em 2.3297878374em 7px rgba(132, 255, 0, 0.9), -0.2688740974em 1.0569413865em 7px rgba(0, 255, 128, 0.9), 0.0286515105em 1.6495362308em 7px rgba(255, 112, 0, 0.9), 2.254003277em 1.4889482192em 7px rgba(135, 0, 255, 0.9), 1.9690423228em 0.6308566759em 7px rgba(39, 0, 255, 0.9), 1.0030671298em 0.7447328651em 7px rgba(0, 255, 206, 0.9), 0.4202957127em 1.9188983317em 7px rgba(170, 0, 255, 0.9), 0.9132433048em 1.0324469479em 7px rgba(0, 71, 255, 0.9), 0.6097211577em 1.6411561242em 7px rgba(255, 205, 0, 0.9), 1.8675609961em 1.1366340127em 7px rgba(167, 255, 0, 0.9), 0.5504828403em -0.0052038579em 7px rgba(0, 34, 255, 0.9), 1.7194325454em 0.6263849049em 7px rgba(255, 36, 0, 0.9), 1.0207087604em 1.3869759365em 7px rgba(58, 255, 0, 0.9), 1.8126239252em 2.4951342735em 7px rgba(0, 255, 8, 0.9), -0.1321247653em -0.2895294388em 7px rgba(0, 69, 255, 0.9), -0.1747515504em 1.5156086148em 7px rgba(0, 161, 255, 0.9), 2.0049950875em 0.4703660133em 7px rgba(52, 0, 255, 0.9), 0.2655384405em -0.205986648em 7px rgba(0, 255, 66, 0.9), 0.4651843912em 1.5187580415em 7px rgba(228, 0, 255, 0.9), 1.9222828256em 1.4085729376em 7px rgba(161, 255, 0, 0.9), -0.2675763805em 0.9930542727em 7px rgba(208, 255, 0, 0.9), 0.3617340388em 0.9399324681em 7px rgba(255, 237, 0, 0.9), 2.039568969em 0.0459775278em 7px rgba(189, 0, 255, 0.9), -0.385613468em 1.9827732076em 7px rgba(0, 50, 255, 0.9), 1.9624236724em 1.7287107012em 7px rgba(255, 26, 0, 0.9), 2.4979616185em 0.6779527502em 7px rgba(255, 69, 0, 0.9), -0.0588716417em 1.5692776274em 7px rgba(255, 251, 0, 0.9), 0.804885016em 2.1416306457em 7px rgba(255, 42, 0, 0.9), 0.4187662564em 1.3852871345em 7px rgba(125, 255, 0, 0.9), 1.9020734454em 2.3611940639em 7px rgba(81, 255, 0, 0.9), -0.3503650138em 1.5749826353em 7px rgba(28, 255, 0, 0.9), 1.9505634987em -0.2436621501em 7px rgba(255, 74, 0, 0.9), 1.9539640371em 1.335293027em 7px rgba(255, 215, 0, 0.9), 1.9081131675em -0.2630701103em 7px rgba(186, 255, 0, 0.9), 2.1547080585em -0.3641121845em 7px rgba(0, 11, 255, 0.9), 0.589587688em 0.1449406489em 7px rgba(255, 0, 233, 0.9), 0.8238187865em -0.3349444905em 7px rgba(0, 255, 251, 0.9), 1.8333404226em 1.9627025422em 7px rgba(250, 0, 255, 0.9), 0.6196503702em 0.4370346423em 7px rgba(255, 0, 75, 0.9), 1.4721224591em 2.2936160718em 7px rgba(190, 0, 255, 0.9);
animation-duration: 41s;
animation-delay: -19s;
}
@keyframes move {
from {
transform: rotate(0deg) scale(12) translateX(-20px);
}
to {
transform: rotate(360deg) scale(18) translateX(20px);
}
}
.Caard {
background-color: #22334455 !important;
}
.Caard[caard-type="fullscreen"] {
background-color: #00000000 !important;
}
.Widgets-Container div {
background-color: #11223355;
}
.Widgets-Container button {
background-color: #00112255 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment