Mirror
/
stickerpicker
mirror of https://github.com/maunium/stickerpicker.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Compress compiled CSS

pull/26/head
Tulir Asokan 4 years ago
parent
81caaa2ebe
commit
ed2b9f7e64
4 changed files with 71 additions and 157 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/package.json
  2. 93
      web/style/index.css
  3. 65
      web/style/spinner.css
  4. 68
      web/style/spinner.sass

2
web/package.json
View File

@ -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": [

93
web/style/index.css
View File

@ -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}

65
web/style/spinner.css
View File

@ -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
View 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)
Write Preview
Loading…
Cancel
Save