ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/css: generate transparency grid via pure CSS

Browse source
This commit is contained in:
Shyam Sunder 2020-10-12 16:07:49 -04:00
parent a302b2c4a4
commit 5945271166
6 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/build.js
View file

@ -227,7 +227,6 @@ function bundleConfig() {
function bundleBinaryAssets() { function bundleBinaryAssets() {
fs.copyFileSync('./img/favicon.png', './public/img/favicon.png'); fs.copyFileSync('./img/favicon.png', './public/img/favicon.png');
fs.copyFileSync('./img/transparency_grid.png', './public/img/transparency_grid.png');
console.info('Copied images'); console.info('Copied images');
fs.copyFileSync('./fonts/open_sans.woff2', './public/fonts/open_sans.woff2') fs.copyFileSync('./fonts/open_sans.woff2', './public/fonts/open_sans.woff2')

1
client/css/colors.styl
View file

@ -61,3 +61,4 @@ $safety-sketchy = #F3D75F
$safety-unsafe = #F3985F $safety-unsafe = #F3985F
$scrollbar-thumb-color = $main-color $scrollbar-thumb-color = $main-color
$scrollbar-bg-color = $input-enabled-background-color $scrollbar-bg-color = $input-enabled-background-color
$transparency-grid-square-color = #F0F0F0

9
client/css/core-general.styl
View file

@ -287,9 +287,14 @@ a .access-key
width: 20px width: 20px
height: 20px height: 20px
&.empty &.empty
background-image: url('../img/transparency_grid.png') background-image:
linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
background-position: 0 0, 0 10px, 10px -10px, -10px 0px
background-repeat: repeat background-repeat: repeat
background-size: initial background-size: 20px 20px
img img
opacity: 0 opacity: 0
width: 100% width: 100%

10
client/css/post-content-control.styl
View file

@ -1,6 +1,14 @@
@import colors
.post-container .post-container
.post-content.transparency-grid img .post-content.transparency-grid img
background: url('../img/transparency_grid.png') background-image:
linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
background-size: 20px 20px
background-position: 0 0, 0 10px, 10px -10px, -10px 0px
text-align: center text-align: center
.post-content .post-content

3
client/css/post-list-view.styl
View file

@ -116,10 +116,11 @@
.thumbnail .thumbnail
background-position: 50% 30%
width: 100% width: 100%
height: 100% height: 100%
outline-offset: -3px outline-offset: -3px
&:not(.empty)
background-position: 50% 30%
.thumbnail-wrapper.no-tags .thumbnail-wrapper.no-tags
.thumbnail .thumbnail

BIN
client/img/transparency_grid.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 100 B