0% found this document useful (0 votes)
134 views4 pages

SD Hackrr

The document contains CSS code that defines styles and properties for generating different colored radial gradients and linear gradients to be used as backgrounds and skeleton loading effects on a webpage. It includes definitions for variable properties that control the position and color of gradient "blobs" and enables animating their movement. It also styles additional elements like text placeholders, borders, and containers for the skeleton loading interfaces.

Uploaded by

deys47654
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
134 views4 pages

SD Hackrr

The document contains CSS code that defines styles and properties for generating different colored radial gradients and linear gradients to be used as backgrounds and skeleton loading effects on a webpage. It includes definitions for variable properties that control the position and color of gradient "blobs" and enables animating their movement. It also styles additional elements like text placeholders, borders, and containers for the skeleton loading interfaces.

Uploaded by

deys47654
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

SUBHAM <SD?

>
HACKER
:root{--blob-a-x:55%;--blob-a-y:15%;--blob-b-x:101%;--blob-b-y:3%;--blob-c-
x:94%;--blob-c-y:113%;--blob-d-x:10%;--blob-d-y:70%;--blob-e-x:0%;--blob-e-
y:0%}@property --blob-a-x{syntax:"<percentage>";inherits:false;initial-
value:10%}@property --blob-a-y{syntax:"<percentage>";inherits:false;initial-
value:10%}@property --blob-b-x{syntax:"<percentage>";inherits:false;initial-
value:50%}@property --blob-b-y{syntax:"<percentage>";inherits:false;initial-
value:50%}@property --blob-c-x{syntax:"<percentage>";inherits:false;initial-
value:10%}@property --blob-c-y{syntax:"<percentage>";inherits:false;initial-
value:90%}@property --blob-d-x{syntax:"<percentage>";inherits:false;initial-
value:90%}@property --blob-d-y{syntax:"<percentage>";inherits:false;initial-
value:10%}@property --blob-e-x{syntax:"<percentage>";inherits:false;initial-
value:10%}@property --blob-e-y{syntax:"<percentage>";inherits:false;initial-
value:10%}html[ghost-cards-diffuse-1] .skeleton-bg-color{background:radial-
gradient(ellipse 100% 100% at var(--blob-a-x) bar(--blob-a-
y),rgba(255,255,255,0.7),transparent 100%),radial-gradient(ellipse 100% 100%
at var(--blob-b-x) var(--blob-b-y),rgba(255,234,207,1),transparent
100%),radial-gradient(ellipse 100% 100% at var(--blob-c-x) var(--blob-c-
y),rgba(255,222,255,1),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-d-x) var(--blob-d-y),rgba(255,228,253,1),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-e-x) var(--blob-e-
y),rgba(255,234,207,1),transparent 100%)}html[ghost-cards-diffuse-
2] .skeleton-bg-color{background:radial-gradient(ellipse 100% 100% at var(--
blob-a-x) var(--blob-a-y),rgba(255,255,255,0.7),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-b-x) var(--blob-b-
y),rgba(239,222,255,1),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-c-x) var(--blob-c-y),rgba(202,221,255,1),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-d-x) var(--blob-d-
y),rgba(212,255,248,1),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-e-x) var(--blob-e-y),rgba(239,222,255,1),transparent
100%)}html[ghost-cards-diffuse-3] .skeleton-bg-color{background:radial-
gradient(ellipse 100% 100% at var(--blob-a-x) var(--blob-a-
y),rgba(255,255,255,0.7),transparent 100%),radial-gradient(ellipse 100% 100%
at var(--blob-b-x) var(--blob-b-y),rgba(255,255,179,1),transparent
100%),radial-gradient(ellipse 100% 100% at var(--blob-c-x) var(--blob-c-
y),rgba(212,255,248,1),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-d-x) var(--blob-d-y),rgba(222,255,222,1),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-e-x) var(--blob-e-
y),rgba(255,255,179,1),transparent 100%)}html[dark][ghost-cards-diffuse-
1] .skeleton-bg-color{background:radial-gradient(ellipse 100% 100% at var(--
blob-a-x) var(--blob-a-y),rgba(0,0,0,0.5),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-b-x) var(--blob-b-
y),rgba(26,0,89,1),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-c-x) var(--blob-c-y),rgba(97,38,191,1),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-d-x) var(--blob-d-
y),rgba(0,0,102,0.9),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-e-x) var(--blob-e-y),rgba(26,0,89,1),transparent 100%)}html[dark]
[ghost-cards-diffuse-2] .skeleton-bg-color{background:radial-gradient(ellipse
100% 100% at var(--blob-a-x) var(--blob-a-y),rgba(0,0,0,0.5),transparent
100%),radial-gradient(ellipse 100% 100% at var(--blob-b-x) var(--blob-b-
y),rgba(127,14,127,1),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-c-x) var(--blob-c-y),rgba(89,0,0,1),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-d-x) var(--blob-d-
y),rgba(102,26,0,0.9),transparent 100%),radial-gradient(ellipse 100% 100% at
SUBHAM <SD?>
HACKER
var(--blob-e-x) var(--blob-e-y),rgba(127,14,127,1),transparent
100%)}html[dark][ghost-cards-diffuse-3] .skeleton-bg-color{background:radial-
gradient(ellipse 100% 100% at var(--blob-a-x) var(--blob-a-
y),rgba(0,0,0,0.5),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-b-x) var(--blob-b-y),rgba(0,72,89,1),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-c-x) var(--blob-c-
y),rgba(0,63,51,1),transparent 100%),radial-gradient(ellipse 100% 100% at
var(--blob-d-x) var(--blob-d-y),rgba(0,0,102,0.9),transparent 100%),radial-
gradient(ellipse 100% 100% at var(--blob-e-x) var(--blob-e-
y),rgba(0,72,89,1),transparent 100%)}html[ghost-cards-1] .skeleton-bg-
color{background:linear-gradient(258deg,rgba(255,234,207,1)
1%,rgba(255,222,255,1),rgba(255,228,253,1),rgba(255,234,207,1),rgba(255,222,25
5,1),rgba(255,228,253,1),rgba(255,234,207,1))}html[ghost-cards-2] .skeleton-
bg-color{background:linear-gradient(258deg,rgba(239,222,255,1)
1%,rgba(202,221,255,1),rgba(212,255,248,1),rgba(239,222,255,1),rgba(202,221,25
5,1),rgba(212,255,248,1),rgba(239,222,255,1))}html[ghost-cards-3] .skeleton-
bg-color{background:linear-gradient(258deg,rgba(255,255,179,1)
1%,rgba(212,255,248,1),rgba(222,255,222,1),rgba(255,255,179,1),rgba(212,255,24
8,1),rgba(222,255,222,1),rgba(255,255,179,1))}html[dark][ghost-cards-
1] .skeleton-bg-color{background:linear-gradient(258deg,rgba(26,0,89,1)
1%,rgba(0,0,102,1),rgba(97,38,191,1),rgba(26,0,89,1),rgba(0,0,102,1),rgba(97,3
8,191,1),rgba(26,0,89,1))}html[dark][ghost-cards-2] .skeleton-bg-
color{background:linear-gradient(258deg,rgba(89,0,0,1)
1%,rgba(102,26,0,1),rgba(127,14,127,1),rgba(89,0,0,1),rgba(102,26,0,1),rgba(12
7,14,127,1),rgba(89,0,0,1))}html[dark][ghost-cards-3] .skeleton-bg-
color{background:linear-gradient(258deg,rgba(0,0,102,1)
1%,rgba(0,72,89,1),rgba(0,63,51,1),rgba(0,0,102,1),rgba(0,72,89,1),rgba(0,63,5
1,1),rgba(0,0,102,1))}html[ghost-cards-1] #home-page-skeleton .video-
details .rich-thumbnail:before,html[ghost-cards-1] #home-page-
skeleton .skeleton-bg-color,html[ghost-cards-2] #home-page-skeleton .video-
details .rich-thumbnail:before,html[ghost-cards-2] #home-page-
skeleton .skeleton-bg-color,html[ghost-cards-3] #home-page-skeleton .video-
details .rich-thumbnail:before,html[ghost-cards-3] #home-page-
skeleton .skeleton-bg-color,html[ghost-cards-diffuse-1] #home-page-
skeleton .video-details .rich-thumbnail:before,html[ghost-cards-diffuse-1]
#home-page-skeleton .skeleton-bg-color,html[ghost-cards-diffuse-2] #home-page-
skeleton .video-details .rich-thumbnail:before,html[ghost-cards-diffuse-2]
#home-page-skeleton .skeleton-bg-color,html[ghost-cards-diffuse-3] #home-page-
skeleton .video-details .rich-thumbnail:before,html[ghost-cards-diffuse-3]
#home-page-skeleton .skeleton-bg-color{background-
color:transparent}html[ghost-cards-1] .skeleton-bg-color,html[ghost-cards-
2] .skeleton-bg-color,html[ghost-cards-3] .skeleton-bg-color,html[dark][ghost-
cards-1] .skeleton-bg-color,html[dark][ghost-cards-2] .skeleton-bg-
color,html[dark][ghost-cards-3] .skeleton-bg-color{background-size:200%
200%}@media not (prefers-reduced-motion){html[ghost-cards-diffuse-1][animated-
cards] .skeleton-bg-color,html[ghost-cards-diffuse-2][animated-
cards] .skeleton-bg-color,html[ghost-cards-diffuse-3][animated-
cards] .skeleton-bg-color{animation:WalkYourBlobs 4s linear 10}html[dark]
[ghost-cards-diffuse-1][animated-cards] .skeleton-bg-color,html[dark][ghost-
cards-diffuse-2][animated-cards] .skeleton-bg-color,html[dark][ghost-cards-
diffuse-3][animated-cards] .skeleton-bg-color{animation:WalkYourBlobs 8s
linear 10}html[ghost-cards-1][animated-cards] .skeleton-bg-color,html[ghost-
cards-2][animated-cards] .skeleton-bg-color,html[ghost-cards-3][animated-
SUBHAM <SD?>
HACKER
cards] .skeleton-bg-color{animation:GhostCardSlide 3s linear 30}}@keyframes
WalkYourBlobs{0%{--blob-a-x:55%;--blob-a-y:15%;--blob-b-x:101%;--blob-b-
y:3%;--blob-c-x:94%;--blob-c-y:113%;--blob-d-x:10%;--blob-d-y:70%}10%{--blob-
a-x:50%;--blob-a-y:29%;--blob-b-x:91%;--blob-b-y:-4%;--blob-c-x:75%;--blob-c-
y:113%;--blob-d-x:2%;--blob-d-y:76%}20%{--blob-a-x:37%;--blob-a-y:38%;--blob-
b-x:78%;--blob-b-y:-4%;--blob-c-x:60%;--blob-c-y:102%;--blob-d-x:0%;--blob-d-
y:85%}30%{--blob-a-x:22%;--blob-a-y:38%;--blob-b-x:68%;--blob-b-y:3%;--blob-c-
x:55%;--blob-c-y:85%;--blob-d-x:2%;--blob-d-y:93%}40%{--blob-a-x:9%;--blob-a-
y:29%;--blob-b-x:65%;--blob-b-y:15%;--blob-c-x:60%;--blob-c-y:67%;--blob-d-
x:10%;--blob-d-y:99%}50%{--blob-a-x:5%;--blob-a-y:15%;--blob-b-x:68%;--blob-b-
y:26%;--blob-c-x:75%;--blob-c-y:56%;--blob-d-x:19%;--blob-d-y:99%}60%{--blob-
a-x:9%;--blob-a-y:0%;--blob-b-x:78%;--blob-b-y:34%;--blob-c-x:94%;--blob-c-
y:56%;--blob-d-x:27%;--blob-d-y:93%}70%{--blob-a-x:22%;--blob-a-y:-8%;--blob-
b-x:91%;--blob-b-y:34%;--blob-c-x:109%;--blob-c-y:67%;--blob-d-x:30%;--blob-d-
y:85%}80%{--blob-a-x:37%;--blob-a-y:-8%;--blob-b-x:101%;--blob-b-y:26%;--blob-
c-x:115%;--blob-c-y:85%;--blob-d-x:27%;--blob-d-y:76%}90%{--blob-a-x:50%;--
blob-a-y:0%;--blob-b-x:105%;--blob-b-y:15%;--blob-c-x:109%;--blob-c-y:102%;--
blob-d-x:19%;--blob-d-y:70%}100%{--blob-a-x:55%;--blob-a-y:15%;--blob-b-
x:101%;--blob-b-y:3%;--blob-c-x:94%;--blob-c-y:113%;--blob-d-x:10%;--blob-d-
y:70%}}@keyframes GhostCardSlide{0%{background-position:100% 0}100%
{background-position:0 100%}}#watch-page-skeleton{position:relative;z-
index:1;margin:0 auto}#watch-page-skeleton,#watch-page-skeleton #info-
container,#watch-page-skeleton #related{box-sizing:border-box}.watch-
skeleton .text-shell{height:20px;border-radius:8px}.watch-skeleton .skeleton-
bg-color{background-color:hsl(0,0%,89%)}.watch-skeleton .skeleton-light-
border-bottom{border-bottom:1px solid hsl(0,0%,93.3%)}html[dark] .watch-
skeleton .skeleton-bg-color{background-color:hsl(0,0%,16%)}html[dark] .watch-
skeleton .skeleton-light-border-bottom{border-bottom:1px solid
hsla(0,100%,100%,.08)}.watch-skeleton .flex-1{flex:1;flex-
basis:0.000000001px}.watch-skeleton #primary-info{height:64px;padding:20px 0
8px 0}.watch-skeleton #primary-info #title{width:400px;margin-
bottom:12px}.watch-skeleton #primary-info #info{display:flex;flex-
direction:row;align-items:center}.watch-skeleton #primary-info #info
#count{width:200px}.watch-skeleton #primary-info #info
#menu{display:flex;flex-direction:row;padding-right:8px}.watch-skeleton
#primary-info .menu-button{height:20px;width:20px;border-radius:50%;margin-
left:20px}.watch-skeleton #secondary-info{height:151px;margin-
bottom:24px;padding:16px 0}.watch-skeleton #secondary-info #top-row,.watch-
skeleton #secondary-info #top-row #video-owner{display:flex;flex-
direction:row}.watch-skeleton #secondary-info #top-row #video-owner #channel-
icon{height:48px;width:48px;border-radius:50%;margin-right:16px}.watch-
skeleton #secondary-info #top-row #video-owner #upload-info{display:flex;flex-
direction:column;justify-content:center}.watch-skeleton #secondary-info #top-
row #video-owner #upload-info #owner-name{width:200px;margin-
bottom:12px}.watch-skeleton #secondary-info #top-row #video-owner #upload-info
#published-date{width:200px}.watch-skeleton #secondary-info #top-row
#subscribe-button{width:137px;height:36px;border-radius:8px;margin-
right:4px;margin:7px 4px 0 0}#watch-page-skeleton
#related{float:right;position:relative;clear:right;max-
width:426px;width:calc(100% - 640px)}#watch-page-skeleton.theater
#related{width:100%}.watch-skeleton #related .autoplay{margin-
bottom:16px}.watch-skeleton #related[playlist] .autoplay{border-
bottom:none;margin-bottom:0}.watch-skeleton #related
SUBHAM <SD?>
HACKER
#upnext{height:20px;width:120px;margin-bottom:14px}.watch-skeleton
#related[playlist] #upnext{display:none}.watch-skeleton #related .video-
details{display:flex;flex-direction:row;padding-bottom:8px}.watch-skeleton
#related:not([playlist]) .autoplay .video-details{padding-bottom:16px}.watch-
skeleton #related .video-details .thumbnail{height:94px;width:168px;margin-
right:8px}.watch-skeleton #related .video-details .video-
title{width:200px;margin-bottom:12px}.watch-skeleton #related .video-
details .video-meta{width:120px}@media (max-width:999px){#watch-page-
skeleton{width:854px}#watch-page-skeleton #container{display:flex;flex-
direction:column}#watch-page-skeleton #info-container{order:1}#watch-page-
skeleton #related{order:2;width:100%;max-width:100%}}@media (max-width:856px)
{#watch-page-skeleton{width:640px}}@media (max-width:656px){#watch-page-
skeleton{width:426px}}@media (min-width:882px){#watch-page-
skeleton.theater{width:100%;max-width:1706px;padding:0 32px}#watch-page-
skeleton.theater #related{margin-top:0}#watch-page-skeleton.theater #info-
container>*{margin-right:24px}}@media (min-width:1000px){#watch-page-
skeleton{width:100%;max-width:1066px}#watch-page-skeleton #related{margin-
top:-360px;padding-left:24px}#watch-page-skeleton #info-
container{width:640px}#watch-page-skeleton.theater #info-
container{width:100%;padding-right:426px}}@media (min-width:1294px) and (min-
height:630px){#watch-page-skeleton{width:100%;max-width:1280px}#watch-page-
skeleton #related{margin-top:-480px}#watch-page-skeleton #info-
container{width:854px}}@media (min-width:1720px) and (min-height:980px)
{#watch-page-skeleton{width:100%;max-width:1706px}#watch-page-skeleton
#related{margin-top:-720px}#watch-page-skeleton #info-
container{width:1280px}}#watch-page-skeleton.theater.theater-all-
widths{width:100%;max-width:1706px;padding:0 32px}#watch-page-
skeleton.theater.theater-all-widths #related{margin-top:0}#watch-page-
skeleton.theater.theater-all-widths #info-container>*{margin-
right:24px}#watch-page-skeleton #related{display:none}sentinel{}

You might also like