Skip to content

Instantly share code, notes, and snippets.

@phun-ky
Created January 29, 2025 13:33
Show Gist options
  • Save phun-ky/cd6c8c97c5fa983e6f2bbd05fd0877a8 to your computer and use it in GitHub Desktop.
Save phun-ky/cd6c8c97c5fa983e6f2bbd05fd0877a8 to your computer and use it in GitHub Desktop.
@property --moebius-radial-position-0-x {
syntax: '<percentage>';
inherits: false;
initial-value: 63%;
}
@property --moebius-radial-position-0-y {
syntax: '<percentage>';
inherits: false;
initial-value: 94%;
}
@property --moebius-radial-position-1-x {
syntax: '<percentage>';
inherits: false;
initial-value: 21%;
}
@property --moebius-radial-position-1-y {
syntax: '<percentage>';
inherits: false;
initial-value: 49%;
}
@property --moebius-radial-position-2-x {
syntax: '<percentage>';
inherits: false;
initial-value: 35%;
}
@property --moebius-radial-position-2-y {
syntax: '<percentage>';
inherits: false;
initial-value: 55%;
}
@property --moebius-radial-position-3-x {
syntax: '<percentage>';
inherits: false;
initial-value: 78%;
}
@property --moebius-radial-position-3-y {
syntax: '<percentage>';
inherits: false;
initial-value: 24%;
}
@property --moebius-radial-position-4-x {
syntax: '<percentage>';
inherits: false;
initial-value: 64%;
}
@property --moebius-radial-position-4-y {
syntax: '<percentage>';
inherits: false;
initial-value: 44%;
}
@property --moebius-radial-position-5-x {
syntax: '<percentage>';
inherits: false;
initial-value: 76%;
}
@property --moebius-radial-position-5-y {
syntax: '<percentage>';
inherits: false;
initial-value: 74%;
}
@property --moebius-radial-position-6-x {
syntax: '<percentage>';
inherits: false;
initial-value: 71%;
}
@property --moebius-radial-position-6-y {
syntax: '<percentage>';
inherits: false;
initial-value: 95%;
}
@property --moebius-color-0 {
syntax: '<color>';
inherits: false;
initial-value: #fff;
}
@property --moebius-color-1 {
syntax: '<color>';
inherits: false;
initial-value: #e8fcf2;
}
@property --moebius-color-2 {
syntax: '<color>';
inherits: false;
initial-value: #eef5b3;
}
@property --moebius-color-3 {
syntax: '<color>';
inherits: false;
initial-value: #75ffd1;
}
@property --moebius-color-4 {
syntax: '<color>';
inherits: false;
initial-value: #f9dced;
}
@property --moebius-color-5 {
syntax: '<color>';
inherits: false;
initial-value: #6ef2d1;
}
@property --moebius-color-6 {
syntax: '<color>';
inherits: false;
initial-value: #ef83f6;
}
@property --moebius-background-color{
syntax: '<color>';
inherits: false;
initial-value: #b26157;
}
.slide-background{
transition: --moebius-background-color 1.5s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-0-x 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-0-y 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-1-x 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-1-y 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-2-x 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-2-y 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-3-x 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-3-y 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-4-x 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-4-y 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-5-x 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-5-y 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-6-x 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-radial-position-6-y 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-color-0 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-color-1 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-color-2 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-color-3 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-color-4 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-color-5 2s cubic-bezier(0.4, 0, 0.2, 1),
--moebius-color-6 2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.slide-background{
--moebius-background-color: hsla(96, 62%, 87%, 1);
--moebius-radial-position-0-x: 88%;
--moebius-radial-position-0-y: 66%;
--moebius-color-0: hsla(158, 84%, 84%, 1);
--moebius-radial-position-1-x: 1%;
--moebius-radial-position-1-y: 19%;
--moebius-color-1: hsla(339, 91%, 91%, 1);
--moebius-radial-position-2-x: 55%;
--moebius-radial-position-2-y: 80%;
--moebius-color-2: hsla(301, 65%, 84%, 1);
--moebius-radial-position-3-x: 0%;
--moebius-radial-position-3-y: 76%;
--moebius-color-3: hsla(215, 78%, 81%, 1);
--moebius-radial-position-4-x: 4%;
--moebius-radial-position-4-y: 20%;
--moebius-color-4: hsla(353, 71%, 83%, 1);
--moebius-radial-position-5-x: 66%;
--moebius-radial-position-5-y: 27%;
--moebius-color-5: hsla(227, 91%, 81%, 1);
--moebius-radial-position-6-x: 6%;
--moebius-radial-position-6-y: 49%;
--moebius-color-6: hsla(287, 83%, 75%, 1);
background-color: var(--moebius-background-color);
background-image: radial-gradient(at var(--moebius-radial-position-0-x) var(--moebius-radial-position-0-y), var(--moebius-color-0) 0px, transparent 50%),radial-gradient(at var(--moebius-radial-position-1-x) var(--moebius-radial-position-1-y), var(--moebius-color-1) 0px, transparent 50%),radial-gradient(at var(--moebius-radial-position-2-x) var(--moebius-radial-position-2-y), var(--moebius-color-2) 0px, transparent 50%),radial-gradient(at var(--moebius-radial-position-3-x) var(--moebius-radial-position-3-y), var(--moebius-color-3) 0px, transparent 50%),radial-gradient(at var(--moebius-radial-position-4-x) var(--moebius-radial-position-4-y), var(--moebius-color-4) 0px, transparent 50%),radial-gradient(at var(--moebius-radial-position-5-x) var(--moebius-radial-position-5-y), var(--moebius-color-5) 0px, transparent 50%),radial-gradient(at var(--moebius-radial-position-6-x) var(--moebius-radial-position-6-y), var(--moebius-color-6) 0px, transparent 50%);
}
.slide-background.slide-1{
--moebius-background-color: hsla(96, 62%, 87%, 1);
--moebius-radial-position-0-x: 88%;
--moebius-radial-position-0-y: 66%;
--moebius-color-0: hsla(158, 84%, 84%, 1);
--moebius-radial-position-1-x: 1%;
--moebius-radial-position-1-y: 19%;
--moebius-color-1: hsla(339, 91%, 91%, 1);
--moebius-radial-position-2-x: 55%;
--moebius-radial-position-2-y: 80%;
--moebius-color-2: hsla(301, 65%, 84%, 1);
--moebius-radial-position-3-x: 0%;
--moebius-radial-position-3-y: 76%;
--moebius-color-3: hsla(215, 78%, 81%, 1);
--moebius-radial-position-4-x: 4%;
--moebius-radial-position-4-y: 20%;
--moebius-color-4: hsla(353, 71%, 83%, 1);
--moebius-radial-position-5-x: 66%;
--moebius-radial-position-5-y: 27%;
--moebius-color-5: hsla(227, 91%, 81%, 1);
--moebius-radial-position-6-x: 6%;
--moebius-radial-position-6-y: 49%;
--moebius-color-6: hsla(287, 83%, 75%, 1);
}
.slide-background.slide-1.past{
--moebius-background-color: hsla(348, 83%, 87%, 1);
--moebius-radial-position-0-x: 12%;
--moebius-radial-position-0-y: 7%;
--moebius-color-0: hsla(190, 85%, 100%, 1);
--moebius-radial-position-1-x: 22%;
--moebius-radial-position-1-y: 80%;
--moebius-color-1: hsla(72, 70%, 90%, 1);
--moebius-radial-position-2-x: 51%;
--moebius-radial-position-2-y: 75%;
--moebius-color-2: hsla(226, 94%, 94%, 1);
--moebius-radial-position-3-x: 4%;
--moebius-radial-position-3-y: 59%;
--moebius-color-3: hsla(270, 64%, 90%, 1);
--moebius-radial-position-4-x: 86%;
--moebius-radial-position-4-y: 79%;
--moebius-color-4: hsla(190, 67%, 70%, 1);
--moebius-radial-position-5-x: 56%;
--moebius-radial-position-5-y: 23%;
--moebius-color-5: hsla(226, 84%, 83%, 1);
--moebius-radial-position-6-x: 55%;
--moebius-radial-position-6-y: 69%;
--moebius-color-6: hsla(244, 78%, 79%, 1);
}
.slide-background.slide-2{
--moebius-background-color: hsla(96, 62%, 87%, 1);
--moebius-radial-position-0-x: 88%;
--moebius-radial-position-0-y: 66%;
--moebius-color-0: hsla(158, 84%, 84%, 1);
--moebius-radial-position-1-x: 1%;
--moebius-radial-position-1-y: 19%;
--moebius-color-1: hsla(339, 91%, 91%, 1);
--moebius-radial-position-2-x: 55%;
--moebius-radial-position-2-y: 80%;
--moebius-color-2: hsla(301, 65%, 84%, 1);
--moebius-radial-position-3-x: 0%;
--moebius-radial-position-3-y: 76%;
--moebius-color-3: hsla(215, 78%, 81%, 1);
--moebius-radial-position-4-x: 4%;
--moebius-radial-position-4-y: 20%;
--moebius-color-4: hsla(353, 71%, 83%, 1);
--moebius-radial-position-5-x: 66%;
--moebius-radial-position-5-y: 27%;
--moebius-color-5: hsla(227, 91%, 81%, 1);
--moebius-radial-position-6-x: 6%;
--moebius-radial-position-6-y: 49%;
--moebius-color-6: hsla(287, 83%, 75%, 1);
}
.slide-background.slide-2.present{
--moebius-background-color: hsla(348, 83%, 87%, 1);
--moebius-radial-position-0-x: 12%;
--moebius-radial-position-0-y: 7%;
--moebius-color-0: hsla(190, 85%, 100%, 1);
--moebius-radial-position-1-x: 22%;
--moebius-radial-position-1-y: 80%;
--moebius-color-1: hsla(72, 70%, 90%, 1);
--moebius-radial-position-2-x: 51%;
--moebius-radial-position-2-y: 75%;
--moebius-color-2: hsla(226, 94%, 94%, 1);
--moebius-radial-position-3-x: 4%;
--moebius-radial-position-3-y: 59%;
--moebius-color-3: hsla(270, 64%, 90%, 1);
--moebius-radial-position-4-x: 86%;
--moebius-radial-position-4-y: 79%;
--moebius-color-4: hsla(190, 67%, 70%, 1);
--moebius-radial-position-5-x: 56%;
--moebius-radial-position-5-y: 23%;
--moebius-color-5: hsla(226, 84%, 83%, 1);
--moebius-radial-position-6-x: 55%;
--moebius-radial-position-6-y: 69%;
--moebius-color-6: hsla(244, 78%, 79%, 1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment