Skip to content

H
Hunger Buster - Breadcrumbs
Commit 12606681 authored by Andrea Tsai's avatar Andrea Tsai
Browse files
Options

Improved hover effect

parent a38602bb
Hide whitespace changes
Inline Side-by-side
Showing with 12 additions and 16 deletions
HTML and CSS Files/mainFridgeList.css
View file @ 12606681
...@@ -38,8 +38,7 @@ body { ...@@ -38,8 +38,7 @@ body {
} }
.sideItem { .sideItem {
display: grid; display: grid;
background-color: rgba(104, 104, 104, 1); background-color: rgba(104, 104, 104, 0.7);
opacity: 0.7;
transform: none; transform: none;
} }
.sideText { .sideText {
...@@ -110,9 +109,8 @@ body { ...@@ -110,9 +109,8 @@ body {
.addItemButton { .addItemButton {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
background-color: rgba(175, 175, 175, 1); background-color: rgba(175, 175, 175, 0.7);
border-radius: 100px; border-radius: 100px;
opacity: 0.7;
transform: none; transform: none;
} }
.addItemText { .addItemText {
...@@ -126,8 +124,7 @@ body { ...@@ -126,8 +124,7 @@ body {
grid-row: 2/3; grid-row: 2/3;
} }
.changeViewDropdown { .changeViewDropdown {
background-color: rgba(228, 228, 228, 1); background-color: rgba(228, 228, 228, 0.7);
opacity: 0.7;
transform: none; transform: none;
} }
.changeViewText { .changeViewText {
...@@ -147,11 +144,10 @@ body { ...@@ -147,11 +144,10 @@ body {
grid-row-gap: 3vw; grid-row-gap: 3vw;
} }
.listItem { .listItem {
background-color: rgba(237, 237, 237, 1); background-color: rgba(237, 237, 237, 0.7);
display: grid; display: grid;
grid-template-columns: 10vw 15vw; grid-template-columns: 10vw 15vw;
grid-template-rows: repeat(5, 5vh); grid-template-rows: repeat(5, 5vh);
opacity: 0.7;
transform: none; transform: none;
} }
#listIcon { #listIcon {
...@@ -248,20 +244,20 @@ body { ...@@ -248,20 +244,20 @@ body {
.sideItem:hover { .sideItem:hover {
opacity: 1; background-color: rgba(104, 104, 104, 1);
transition: opacity .5s; transition: background-color .5s;
} }
.listItem:hover { .listItem:hover {
opacity: 1; background-color: rgba(237, 237, 237, 1);
transition: opacity .5s; transition: background-color .5s;
} }
.addItemButton:hover { .addItemButton:hover {
opacity: 1; background-color: rgba(175, 175, 175, 1);
transition: opacity .5s; transition: background-color .5s;
} }
.changeViewDropdown:hover { .changeViewDropdown:hover {
opacity: 1; background-color: rgba(240, 240, 240, 1);
transition: opacity .5s; transition: background-color .5s;
} }
.main{ .main{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment