add the cube master

This commit is contained in:
hamid zarghami
2025-12-09 11:06:48 +03:30
parent 53b9139506
commit d2325e9090
65 changed files with 6843 additions and 0 deletions
@@ -0,0 +1,16 @@
{
"output": {
"dir": "../../assets/css/",
"structure": "nested"
},
"compile": {
"style": "compressed",
"line-numbers": false,
"line-comments": false,
"load-path": false,
"plugin-path": false,
"sourcemap": false,
"omit-map-comment": false,
"precision": false
}
}
@@ -0,0 +1,46 @@
.btn
-webkit-appearance: none
-moz-appearance: none
appearance: none
background-color: transparent
border-radius: 0
border-width: 0
position: absolute
pointer-events: none
font-size: 1.2em
color: rgba(#000, 0.25)
opacity: 0
&:after
position: absolute
content: ''
width: 3em
height: 3em
left: 50%
top: 50%
margin-left: -1.5em
margin-top: -1.5em
border-radius: 100%
&--tr
top: 0.8em
right: 0.8em
&--tl
top: 0.8em
left: 0.8em
&--bl
bottom: 0.8em
left: 0.8em
&--br
bottom: 0.8em
right: 0.8em
&--bc
bottom: 0.8em
left: calc(50% - 0.5em)
svg
display: block
@@ -0,0 +1,40 @@
*
&,
&:before,
&:after
-webkit-user-select: none
-moz-user-select: none
user-select: none
box-sizing: border-box
cursor: inherit
margin: 0
padding: 0
outline: none
font-size: inherit
font-family: inherit
font-weight: inherit
font-style: inherit
text-transform: uppercase
&:focus
outline: none
html
-webkit-tap-highlight-color: transparent
-webkit-text-size-adjust: 100%
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-ms-text-size-adjust: 100%
-webkit-text-size-adjust: 100%
overflow: hidden
height: 100%
body
font-family: 'BungeeFont', sans-serif
font-weight: normal
font-style: normal
line-height: 1
cursor: default
overflow: hidden
height: 100%
font-size: 5rem
@@ -0,0 +1,6 @@
.icon
display: inline-block
font-size: inherit
overflow: visible
vertical-align: -0.125em
preserveAspectRatio: none
@@ -0,0 +1,137 @@
.range
position: relative
width: 14em
z-index: 1
opacity: 0
&:not(:last-child)
margin-bottom: 2em
&__label
position: relative
font-size: 0.9em
line-height: 0.75em
padding-bottom: 0.5em
z-index: 2
&__track
position: relative
height: 1em
margin-left: 0.5em
margin-right: 0.5em
z-index: 3
&-line
position: absolute
background: rgba(#000, 0.2)
height: 2px
top: 50%
margin-top: -1px
left: -0.5em
right: -0.5em
transform-origin: left center
&__handle
position: absolute
width: 0
height: 0
top: 50%
left: 0
cursor: pointer
z-index: 1
div
transition: background 500ms ease
position: absolute
left: 0
top: 0
width: 0.9em
height: 0.9em
border-radius: 0.2em
margin-left: -0.45em
margin-top: -0.45em
background: #41aac8
border-bottom: 2px solid rgba(#000, 0.2)
.range.is-active &
transform: scale(1.25)
&:after
content: ''
position: absolute
left: 0
top: 0
width: 3em
height: 3em
margin-left: -1.5em
margin-top: -1.5em
&__list
display: flex
flex-flow: row nowrap
justify-content: space-between
position: relative
padding-top: 0.5em
font-size: 0.55em
color: rgba(#000, 0.5)
z-index: 1
&--type
&-color
&:not(:last-child)
margin-bottom: 1em
.range
&__list
display: none
&__handle
> div
background: currentColor !important
&__track
&-line
background: transparent
&:after
+inset
content: ''
opacity: 0.5
&--color
&-hue
.range
&__handle
color: red
&__track
color: red
&-line
&:after
background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
&-saturation
.range
&__handle
color: red
&__track
color: red
&-line
&:after
background: linear-gradient(to right, gray, currentColor)
&-lightness
.range
&__handle
color: red
&__track
color: red
&-line
&:after
background: linear-gradient(to right, black, currentColor, white)
@@ -0,0 +1,26 @@
.stats
position: relative
width: 14em
z-index: 1
display: flex
justify-content: space-between
opacity: 0
&:not(:last-child)
margin-bottom: 1.5em
> i
display: block
color: rgba(#000, 0.5)
font-size: 0.9em
> b
display: block
font-size: 0.9em
> i
font-size: 0.75em
&[name="worst-time"]
display: none
@@ -0,0 +1,40 @@
.text
position: absolute
left: 0
right: 0
text-align: center
line-height: 0.75
perspective: 100rem
opacity: 0
i
display: inline-block
opacity: 0
white-space: pre-wrap
&--title
bottom: 75%
font-size: 4.4em
height: 1.2em
span
display: block
&:first-child
font-size: 0.5em
margin-bottom: 0.2em
&--note
top: 87%
font-size: 1em
&--timer
bottom: 78%
font-size: 3.5em
line-height: 1
&--complete,
&--best-time
font-size: 1.5em
top: 83%
line-height: 1em
@@ -0,0 +1,52 @@
.ui
pointer-events: none
color: #070d15
&,
&__background,
&__game,
&__texts,
&__prefs,
&__theme,
&__stats,
&__buttons
+inset
overflow: hidden
&__background
z-index: 1
transition: background 500ms ease
background: #d1d5db
&:after
+inset
content: ''
background-image: linear-gradient(to bottom, rgba(#fff, 1) 50%, rgba(#fff, 0) 100%)
&__game
pointer-events: all
z-index: 2
canvas
display: block
width: 100%
height: 100%
&__texts
z-index: 3
&__prefs,
&__stats,
&__theme
display: flex
flex-flow: column nowrap
justify-content: center
align-items: center
overflow: hidden
z-index: 4
&__theme
padding-top: 15em
&__buttons
z-index: 5
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
=inset($position: absolute)
position: $position
top: 0
left: 0
right: 0
bottom: 0
@@ -0,0 +1,13 @@
@import "fonts/bungee"
@import "variables/easings"
@import "mixins/inset"
@import "components/document"
@import "components/icon"
@import "components/range"
@import "components/stats"
@import "components/text"
@import "components/btn"
@import "components/ui"
@@ -0,0 +1,31 @@
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715)
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1)
$easeInOutSine: cubic-bezier(0.39, 0.575, 0.565, 1)
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53)
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94)
$easeInOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94)
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19)
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1)
$easeInOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1)
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22)
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1)
$easeInOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1)
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06)
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1)
$easeInOutQuint: cubic-bezier(0.23, 1, 0.32, 1)
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035)
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1)
$easeInOutExpo: cubic-bezier(0.19, 1, 0.22, 1)
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335)
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1)
$easeInOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1)
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045)
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275)
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55)