diff --git a/web/style/index.css b/web/style/index.css index b7b2aec..10312b1 100644 --- a/web/style/index.css +++ b/web/style/index.css @@ -1 +1,181 @@ -*{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) auto}main.theme-light{--highlight-color: #eee;--text-color: black;background-color:white}main.theme-dark{--highlight-color: #444;--text-color: white;background-color:#22262e}main.theme-black{--highlight-color: #222;--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)}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 + 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.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) auto +} + +main.theme-light { + --highlight-color: #eee; + --text-color: black; + background-color: white +} + +main.theme-dark { + --highlight-color: #444; + --text-color: white; + background-color: #22262e +} + +main.theme-black { + --highlight-color: #222; + --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) +} + +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 + 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.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% +}