forked from ProfessionalUwU/stickerpicker
Split web things into subdirectories
This commit is contained in:
Tulir Asokan
92
web/style/index.css
Normal file
92
web/style/index.css
Normal file
@ -0,0 +1,92 @@
|
||||
* {
|
||||
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; }
|
||||
116
web/style/index.sass
Normal file
116
web/style/index.sass
Normal file
@ -0,0 +1,116 @@
|
||||
// Copyright (c) 2020 Tulir Asokan
|
||||
//
|
||||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
*
|
||||
font-family: sans-serif
|
||||
|
||||
body
|
||||
margin: 0
|
||||
|
||||
h1
|
||||
font-size: 1rem
|
||||
|
||||
$sticker-size: 25vw
|
||||
$nav-sticker-size: 12vw
|
||||
$nav-bottom-highlight: 2px
|
||||
$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
|
||||
$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
|
||||
|
||||
main
|
||||
&.spinner
|
||||
margin-top: 5rem
|
||||
|
||||
&.error, &.empty
|
||||
margin: 2rem
|
||||
|
||||
&.empty
|
||||
text-align: center
|
||||
|
||||
&.has-content
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
|
||||
display: grid
|
||||
grid-template-rows: $nav-height auto
|
||||
|
||||
nav
|
||||
display: flex
|
||||
overflow-x: auto
|
||||
|
||||
height: $nav-height
|
||||
|
||||
background-color: white
|
||||
|
||||
> a
|
||||
border-bottom: $nav-bottom-highlight solid transparent
|
||||
&.visible
|
||||
border-bottom-color: green
|
||||
> div.sticker
|
||||
width: $nav-sticker-size
|
||||
height: $nav-sticker-size
|
||||
> div.sticker.icon > img
|
||||
width: 70%
|
||||
height: 70%
|
||||
padding: 15%
|
||||
|
||||
div.pack-list, nav
|
||||
scrollbar-width: none
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
div.pack-list
|
||||
overflow-y: auto
|
||||
|
||||
div.pack-list.ios-safari-hack
|
||||
position: fixed
|
||||
top: $nav-height
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
-webkit-overflow-scrolling: touch
|
||||
|
||||
section.stickerpack
|
||||
margin-top: .75rem
|
||||
|
||||
> div.sticker-list
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
|
||||
> h1
|
||||
margin: 0 0 0 .75rem
|
||||
|
||||
div.sticker
|
||||
display: flex
|
||||
padding: 4px
|
||||
cursor: pointer
|
||||
position: relative
|
||||
width: $sticker-size
|
||||
height: $sticker-size
|
||||
box-sizing: border-box
|
||||
|
||||
&:hover
|
||||
background-color: #eee
|
||||
|
||||
> img
|
||||
display: none
|
||||
width: 100%
|
||||
object-fit: contain
|
||||
|
||||
&.visible
|
||||
display: initial
|
||||
|
||||
div.settings-list
|
||||
display: flex
|
||||
|
||||
button
|
||||
width: 100%
|
||||
margin: .5rem
|
||||
padding: .5rem
|
||||
border-radius: .25rem
|
||||
64
web/style/spinner.css
Normal file
64
web/style/spinner.css
Normal file
@ -0,0 +1,64 @@
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user