search

JaniRefsnes / w3css

W3.CSS - CSS Framework
MIT License
434 stars 131 forks source link

Add darkness and lightness to hover effects #18

Open mouhammad-zd opened 4 years ago

mouhammad-zd commented 4 years ago

I am wonder how can i achieve the w3-theme-d1 etc... for a hover effect

I can override that manually but i do not want because if you update this i will lose my changes and i will need again to re add them, if you can add .w3-hover-theme-d1 ..... .w3-hover-d5 and .w3-hover-theme-l1 ........ .w3-hover-theme-l5

Example, you have :

.w3-theme-l5 {color:#000 !important; background-color:#f4faf4 !important}
.w3-theme-l4 {color:#000 !important; background-color:#dbefdc !important}
.w3-theme-l3 {color:#000 !important; background-color:#b7dfb8 !important}
.w3-theme-l2 {color:#000 !important; background-color:#93cf95 !important}
.w3-theme-l1 {color:#fff !important; background-color:#6ec071 !important}
.w3-theme-d1 {color:#fff !important; background-color:#459c48 !important}
.w3-theme-d2 {color:#fff !important; background-color:#3d8b40 !important}
.w3-theme-d3 {color:#fff !important; background-color:#357a38 !important}
.w3-theme-d4 {color:#fff !important; background-color:#2e6830 !important}
.w3-theme-d5 {color:#fff !important; background-color:#265728 !important}

in these file https://www.w3schools.com/lib/w3-theme-green.css

If you can copy theme to contain also hover effect it willbe perfect

look like this 

.w3-hover-theme-l5:hover {color:#000 !important; background-color:#f4faf4 !important}
.w3-hover-theme-l4:hover {color:#000 !important; background-color:#dbefdc !important}
.w3-hover-theme-l3:hover {color:#000 !important; background-color:#b7dfb8 !important}
.w3-hover-theme-l2:hover {color:#000 !important; background-color:#93cf95 !important}
.w3-hover-theme-l1:hover {color:#fff !important; background-color:#6ec071 !important}
.w3-hover-theme-d1:hover {color:#fff !important; background-color:#459c48 !important}
.w3-hover-theme-d2:hover {color:#fff !important; background-color:#3d8b40 !important}
.w3-hover-theme-d3:hover {color:#fff !important; background-color:#357a38 !important}
.w3-hover-theme-d4:hover {color:#fff !important; background-color:#2e6830 !important}
.w3-hover-theme-d5:hover {color:#fff !important; background-color:#265728 !important}

also if you add the same for text hover effects like these:

.w3-hover-text-theme-l5:hover {color:#f4faf4 !important}
.w3-hover-text-theme-l4:hover {color:#dbefdc !important}
.w3-hover-text-theme-l3:hover {color:#b7dfb8 !important}
.w3-hover-text-theme-l2:hover {color:#93cf95 !important}
.w3-hover-text-theme-l1:hover {color:#6ec071 !important}
.w3-hover-text-theme-d1:hover {color:#459c48 !important}
.w3-hover-text-theme-d2:hover {color:#3d8b40 !important}
.w3-hover-text-theme-d3:hover {color:#357a38 !important}
.w3-hover-text-theme-d4:hover {color:#2e6830 !important}
.w3-hover-text-theme-d5:hover {color:#265728 !important}

also if you add the same for border hover effects like these:

.w3-hover-border-theme-l5:hover {border-color:#f4faf4 !important}
.w3-hover-border-theme-l4:hover {border-color:#dbefdc !important}
.w3-hover-border-theme-l3:hover {border-color:#b7dfb8 !important}
.w3-hover-border-theme-l2:hover {border-color:#93cf95 !important}
.w3-hover-border-theme-l1:hover {border-color:#6ec071 !important}
.w3-hover-border-theme-d1:hover {border-color:#459c48 !important}
.w3-hover-border-theme-d2:hover {border-color:#3d8b40 !important}
.w3-hover-border-theme-d3:hover {border-color:#357a38 !important}
.w3-hover-border-theme-d4:hover {border-color:#2e6830 !important}
.w3-hover-border-theme-d5:hover {border-color:#265728 !important}

also do the same for both border and text color

This it will be a great addition as i think and it is almost needed

mesbahulalam commented 4 years ago

You don't have to edit the original CSS, put the new rules in another file, and link to it. Even if the base CSS is updated, your additions won't get lost. The framework is kept light so that users get a lot of room for customization.

umbundu commented 4 years ago

I wish we had a sass/scss version so we could write the css in a more manageable way!