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

Update sass style file

pull/25/head
Kévin Cocchi 4 years ago
parent
add27513fe
commit
9350d5f27b
2 changed files with 45 additions and 223 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 221
      web/style/index.css
  2. 47
      web/style/index.sass

221
web/style/index.css
View File

@ -1,220 +1 @@
* {
font-family: sans-serif
}
body {
margin: 0
}
h1 {
font-size: 1rem
}
:root {
--stickers-per-row: 4;
--sticker-size: calc(100vw / var(--stickers-per-row))
}
main {
color: var(--text-color)
}
main.spinner {
margin-top: 5rem
}
main.error,
main.empty {
margin: 2rem
}
main.empty {
text-align: center
}
div.search-empty {
margin: 1rem;
text-align: center
}
main.has-content {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-rows: calc(12vw + 2px) min-content auto
}
main.theme-light {
--highlight-color: #eee;
--search-box-color: var(--highlight-color);
--text-color: black;
background-color: white
}
main.theme-dark {
--highlight-color: #444;
--search-box-color: #383e4b;
--text-color: white;
background-color: #22262e
}
main.theme-black {
--highlight-color: #222;
--search-box-color: var(--highlight-color);
--text-color: white;
background-color: black
}
.icon {
width: 100%;
height: 100%;
background-color: var(--text-color);
mask-size: contain;
-webkit-mask-size: contain;
mask-image: var(--icon-image);
-webkit-mask-image: var(--icon-image)
}
.icon.icon-settings {
--icon-image: url(../res/settings.svg)
}
.icon.icon-recent {
--icon-image: url(../res/recent.svg)
}
.icon.icon-search {
--icon-image: url(../res/search.svg)
}
nav {
display: flex;
overflow-x: auto
}
nav>a {
border-bottom: 2px solid transparent
}
nav>a.visible {
border-bottom-color: green
}
nav>a>div.sticker {
width: 12vw;
height: 12vw
}
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 + 2 * .7rem + 2 * 1rem + 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: var(--sticker-size);
height: var(--sticker-size);
box-sizing: border-box
}
div.sticker:hover {
background-color: var(--highlight-color)
}
div.sticker>img {
display: none;
width: 100%;
object-fit: contain
}
div.sticker>img.visible {
display: initial
}
div.sticker>.icon {
width: 70%;
height: 70%;
margin: 15%
}
div.search-box {
position: relative;
display: flex;
}
div.search-box>input[type="text"] {
flex-grow: 1;
background-color: var(--search-box-color);
outline: none;
border: none;
border-radius: .25rem;
padding: .7rem 1.8rem .7rem .7rem;
margin: .5rem;
font-size: 1rem;
color: var(--text-color);
}
div.search-box>span.icon {
display: flex;
position: absolute;
right: 1rem;
top: calc(50% - .5rem);
width: 1rem;
height: 1rem;
box-sizing: border-box;
}
div.settings-list {
display: flex;
flex-direction: column
}
div.settings-list>* {
margin: .5rem
}
div.settings-list button {
padding: .5rem;
border-radius: .25rem
}
div.settings-list input {
width: 100%
}
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main{color:var(--text-color)}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) min-content auto}main.theme-light{--highlight-color: #eee;--search-box-color: var(--highlight-color);--text-color: black;background-color:white}main.theme-dark{--highlight-color: #444;--search-box-color: #383e4b;--text-color: white;background-color:#22262e}main.theme-black{--highlight-color: #222;--search-box-color: var(--highlight-color);--text-color: white;background-color:black}.icon{width:100%;height:100%;background-color:var(--text-color);mask-size:contain;-webkit-mask-size:contain;mask-image:var(--icon-image);-webkit-mask-image:var(--icon-image)}.icon.icon-settings{--icon-image: url(../res/settings.svg)}.icon.icon-recent{--icon-image: url(../res/recent.svg)}.icon.icon.icon-search{--icon-image: url(../res/search.svg)}nav{display:flex;overflow-x:auto}nav>a{border-bottom:2px solid transparent}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}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(calc(12vw + 2px) + calc(2 * .7rem + 2 * .5rem + 1rem));bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}div.search-empty{margin:1.2rem;text-align:center}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:var(--sticker-size);height:var(--sticker-size);box-sizing:border-box}div.sticker:hover{background-color:var(--highlight-color)}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.sticker>.icon{width:70%;height:70%;margin:15%}div.search-box{position:relative;display:flex}div.search-box>input[type="text"]{flex-grow:1;background-color:var(--search-box-color);outline:none;border:none;border-radius:.25rem;height:1rem;padding:.7rem;padding-right:calc(1rem + .7rem);margin:.5rem;font-size:1rem;color:var(--text-color)}div.search-box>span.icon{display:flex;position:absolute;top:calc(50% - 1rem / 2);right:1rem;width:1rem;height:1rem;box-sizing:border-box}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%}

47
web/style/index.sass
View File

@ -32,6 +32,12 @@ $nav-bottom-highlight: 2px
$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight}) $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight}) $nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
$search-box-icon-size: 1rem
$search-box-input-height: 1rem
$search-box-input-padding: .7rem
$search-box-input-margin: .5rem
$search-box-height: calc(2 * #{$search-box-input-padding} + 2 * #{$search-box-input-margin} + #{$search-box-input-height})
main main
color: var(--text-color) color: var(--text-color)
@ -50,22 +56,24 @@ main
left: 0 left: 0
right: 0 right: 0
bottom: 0 bottom: 0
display: grid display: grid
grid-template-rows: $nav-height auto
grid-template-rows: $nav-height min-content auto
main.theme-light main.theme-light
--highlight-color: #eee --highlight-color: #eee
--search-box-color: var(--highlight-color)
--text-color: black --text-color: black
background-color: white background-color: white
main.theme-dark main.theme-dark
--highlight-color: #444 --highlight-color: #444
--search-box-color: #383e4b
--text-color: white --text-color: white
background-color: #22262e background-color: #22262e
main.theme-black main.theme-black
--highlight-color: #222 --highlight-color: #222
--search-box-color: var(--highlight-color)
--text-color: white --text-color: white
background-color: black background-color: black
@ -84,6 +92,9 @@ main.theme-black
&.icon-recent &.icon-recent
--icon-image: url(../res/recent.svg) --icon-image: url(../res/recent.svg)
&.icon.icon-search
--icon-image: url(../res/search.svg)
nav nav
display: flex display: flex
overflow-x: auto overflow-x: auto
@ -109,12 +120,16 @@ div.pack-list
div.pack-list.ios-safari-hack div.pack-list.ios-safari-hack
position: fixed position: fixed
top: $nav-height
top: calc(#{$nav-height} + #{$search-box-height})
bottom: 0 bottom: 0
left: 0 left: 0
right: 0 right: 0
-webkit-overflow-scrolling: touch -webkit-overflow-scrolling: touch
div.search-empty
margin: 1.2rem
text-align: center
section.stickerpack section.stickerpack
margin-top: .75rem margin-top: .75rem
@ -150,6 +165,32 @@ div.sticker
height: 70% height: 70%
margin: 15% margin: 15%
div.search-box
position: relative
display: flex
>input[type="text"]
flex-grow: 1
background-color: var(--search-box-color)
outline: none
border: none
border-radius: .25rem
height: $search-box-input-height
padding: $search-box-input-padding
padding-right: calc(#{$search-box-icon-size} + #{$search-box-input-padding})
margin: $search-box-input-margin
font-size: 1rem
color: var(--text-color)
>span.icon
display: flex
position: absolute
top: calc(50% - #{$search-box-icon-size} / 2)
right: $search-box-icon-size
width: $search-box-icon-size
height: $search-box-icon-size
box-sizing: border-box
div.settings-list div.settings-list
display: flex display: flex
flex-direction: column flex-direction: column

Write Preview
Loading…
Cancel
Save