-
-
Save phun-ky/cd6c8c97c5fa983e6f2bbd05fd0877a8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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