Skip to content
Extraits de code Groupes Projets
Valider ed2b9f7e rédigé par Tulir Asokan's avatar Tulir Asokan
Parcourir les fichiers

Compress compiled CSS

parent 81caaa2e
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
web/package.json
+ 1
− 1
Voir le fichier @ ed2b9f7e
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
"private": true, "private": true,
"scripts": { "scripts": {
"snowpack": "snowpack", "snowpack": "snowpack",
"sass": "node-sass -o style style/*.sass" "sass": "node-sass -o style style/*.sass --output-style compressed"
}, },
"snowpack": { "snowpack": {
"install": [ "install": [
......
web/style/index.css
+ 1
− 92
Voir le fichier @ ed2b9f7e
* { *{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; }
web/style/spinner.css
+ 1
− 64
Voir le fichier @ ed2b9f7e
/* 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.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)}}
.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);
}
}
web/style/spinner.sass 0 → 100644
+ 68
− 0
Voir le fichier @ ed2b9f7e
// 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)
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter