alvierahman90/styles.alv.cx
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

use variables in soft_media module

Browse Source
This commit is contained in:
Akbar Rahman 2022-04-14 16:15:42 +01:00
parent f0795da618
commit 27d832b244
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/readmes/soft_media.txt
View File

@ -2,5 +2,11 @@ in the css
@import url("https://styles.alv.cx/modules/soft_media.css"); @import url("https://styles.alv.cx/modules/soft_media.css");
variables:
--soft-media-opacity: 0.75;
--soft-media-transition-time: .5s;
--soft-media-transition-timing-function: ease-in-out;
this module makes reduces the opacity of all images to give the webpage a softer look, this module makes reduces the opacity of all images to give the webpage a softer look,
even when in light mode (this is default behaviour in dark mode). even when in light mode (this is default behaviour in dark mode).

10
modules/soft_media.css
View File

@ -1,6 +1,12 @@
:root {
--soft-media-opacity: 0.75;
--soft-media-transition-time: .5s;
--soft-media-transition-timing-function: ease-in-out;
}
img, video { img, video {
opacity: .75; opacity: var(--soft-media-opacity);
transition: opacity .5s ease-in-out; transition: opacity var(--soft-media-transition-time) var(--soft-media-transition-timing-function);
} }
img:hover, video:hover { img:hover, video:hover {
opacity: 1; opacity: 1;