mirror of
https://github.com/maunium/stickerpicker
synced 2024-11-09 03:44:10 +00:00
Compress compiled CSS
This commit is contained in:
Tulir Asokan
parent
81caaa2ebe
commit
ed2b9f7e64
4 changed files with 71 additions and 157 deletions
|
|
@ -8,7 +8,7 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"snowpack": "snowpack",
|
||||
"sass": "node-sass -o style style/*.sass"
|
||||
"sass": "node-sass -o style style/*.sass --output-style compressed"
|
||||
},
|
||||
"snowpack": {
|
||||
"install": [
|
||||
|
|
|
|||
|
|
@ -1,92 +1 @@
|
|||
* {
|
||||
font-family: sans-serif; }
|
||||
|
||||
body {
|
||||
margin: 0; }
|
||||
|
||||
h1 {
|
||||
font-size: 1rem; }
|
||||
|
||||
main.spinner {
|
||||
margin-top: 5rem; }
|
||||
|
||||
main.error, main.empty {
|
||||
margin: 2rem; }
|
||||
|
||||
main.empty {
|
||||
text-align: center; }
|
||||
|
||||
main.has-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
grid-template-rows: calc(12vw + 2px) auto; }
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
height: calc(12vw + 2px);
|
||||
background-color: white; }
|
||||
nav > a {
|
||||
border-bottom: 2px solid transparent; }
|
||||
nav > a.visible {
|
||||
border-bottom-color: green; }
|
||||
nav > a > div.sticker {
|
||||
width: 12vw;
|
||||
height: 12vw; }
|
||||
nav > a > div.sticker.icon > img {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
padding: 15%; }
|
||||
|
||||
div.pack-list, nav {
|
||||
scrollbar-width: none; }
|
||||
div.pack-list::-webkit-scrollbar, nav::-webkit-scrollbar {
|
||||
display: none; }
|
||||
|
||||
div.pack-list {
|
||||
overflow-y: auto; }
|
||||
|
||||
div.pack-list.ios-safari-hack {
|
||||
position: fixed;
|
||||
top: calc(12vw + 2px);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
|
||||
section.stickerpack {
|
||||
margin-top: .75rem; }
|
||||
section.stickerpack > div.sticker-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap; }
|
||||
section.stickerpack > h1 {
|
||||
margin: 0 0 0 .75rem; }
|
||||
|
||||
div.sticker {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 25vw;
|
||||
height: 25vw;
|
||||
box-sizing: border-box; }
|
||||
div.sticker:hover {
|
||||
background-color: #eee; }
|
||||
div.sticker > img {
|
||||
display: none;
|
||||
width: 100%;
|
||||
object-fit: contain; }
|
||||
div.sticker > img.visible {
|
||||
display: initial; }
|
||||
|
||||
div.settings-list {
|
||||
display: flex; }
|
||||
div.settings-list button {
|
||||
width: 100%;
|
||||
margin: .5rem;
|
||||
padding: .5rem;
|
||||
border-radius: .25rem; }
|
||||
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:calc(12vw + 2px) auto}nav{display:flex;overflow-x:auto;height:calc(12vw + 2px);background-color:white}nav>a{border-bottom:2px solid transparent}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}nav>a>div.sticker.icon>img{width:70%;height:70%;padding:15%}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(12vw + 2px);bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:25vw;height:25vw;box-sizing:border-box}div.sticker:hover{background-color:#eee}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.settings-list{display:flex}div.settings-list button{width:100%;margin:.5rem;padding:.5rem;border-radius:.25rem}
|
||||
|
|
|
|||
|
|
@ -1,64 +1 @@
|
|||
/* Chase spinner from https://tobiasahlin.com/spinkit/. MIT license */
|
||||
.sk-center-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.sk-chase {
|
||||
position: relative;
|
||||
animation: sk-chase 2.5s infinite linear both;
|
||||
}
|
||||
|
||||
.sk-chase-dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
animation: sk-chase-dot 2.0s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.sk-chase-dot:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
border-radius: 100%;
|
||||
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.sk-chase.green > .sk-chase-dot:before {
|
||||
background-color: #00C853;
|
||||
}
|
||||
|
||||
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
|
||||
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
|
||||
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
|
||||
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
|
||||
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
|
||||
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
|
||||
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
|
||||
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
|
||||
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
|
||||
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
|
||||
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
|
||||
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
|
||||
|
||||
@keyframes sk-chase {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes sk-chase-dot {
|
||||
80%, 100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes sk-chase-dot-before {
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
}
|
||||
100%, 0% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
.sk-center-wrapper{width:100%;display:flex;justify-content:space-around}.sk-chase{position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase.green>.sk-chase-dot:before{background-color:#00C853}.sk-chase>.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase>.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both;background-color:#FFF}.sk-chase>.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase>.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase>.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase>.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1)}}
|
||||
|
|
|
|||
68
web/style/spinner.sass
Normal file
68
web/style/spinner.sass
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
// Chase spinner from https://tobiasahlin.com/spinkit/. MIT license
|
||||
.sk-center-wrapper
|
||||
width: 100%
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
|
||||
.sk-chase
|
||||
position: relative
|
||||
animation: sk-chase 2.5s infinite linear both
|
||||
|
||||
&.green > .sk-chase-dot:before
|
||||
background-color: #00C853
|
||||
|
||||
> .sk-chase-dot
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
animation: sk-chase-dot 2.0s infinite ease-in-out both
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
display: block
|
||||
width: 25%
|
||||
height: 25%
|
||||
border-radius: 100%
|
||||
animation: sk-chase-dot-before 2.0s infinite ease-in-out both
|
||||
background-color: #FFF
|
||||
|
||||
&:nth-child(1)
|
||||
animation-delay: -1.1s
|
||||
&:nth-child(2)
|
||||
animation-delay: -1.0s
|
||||
&:nth-child(3)
|
||||
animation-delay: -0.9s
|
||||
&:nth-child(4)
|
||||
animation-delay: -0.8s
|
||||
&:nth-child(5)
|
||||
animation-delay: -0.7s
|
||||
&:nth-child(6)
|
||||
animation-delay: -0.6s
|
||||
&:nth-child(1):before
|
||||
animation-delay: -1.1s
|
||||
&:nth-child(2):before
|
||||
animation-delay: -1.0s
|
||||
&:nth-child(3):before
|
||||
animation-delay: -0.9s
|
||||
&:nth-child(4):before
|
||||
animation-delay: -0.8s
|
||||
&:nth-child(5):before
|
||||
animation-delay: -0.7s
|
||||
&:nth-child(6):before
|
||||
animation-delay: -0.6s
|
||||
|
||||
@keyframes sk-chase
|
||||
100%
|
||||
transform: rotate(360deg)
|
||||
|
||||
@keyframes sk-chase-dot
|
||||
80%, 100%
|
||||
transform: rotate(360deg)
|
||||
|
||||
@keyframes sk-chase-dot-before
|
||||
50%
|
||||
transform: scale(0.4)
|
||||
100%, 0%
|
||||
transform: scale(1.0)
|
||||
Loading…
Reference in a new issue