alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2025-09-10 08:27:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix css style issues,

Browse Source 
removed css for rating stars

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu
2022-11-15 01:08:32 +00:00
parent 66dd92f0dc
commit 837ba92d7d
3 changed files with 177 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
source/static/CreatePage.css
View File

@@ -10,7 +10,7 @@ body {
}
fieldset {
border: 2px solid rgb(214, 214, 214);
border: 2px solid rgb(214 214 214);
box-sizing: border-box;
display: block;
width: max-content;
@@ -26,7 +26,7 @@ label[for="ingredients"] p {
}
label[for="numRatings"] {
margin: 10px 0 0 0;
margin: 10px 0 0;
}
label[for^="rating"] {
@@ -52,77 +52,32 @@ main {
display: flex;
flex-flow: row wrap;
}
.tag {
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
}
.tag::before {
display: inline-block;
content: 'x';
height: 15px;
width: 15px;
margin-right: 4px;
text-align: center;
color: white;
cursor: pointer;
display: inline-block;
content: "x";
height: 15px;
width: 15px;
margin-right: 4px;
text-align: center;
color: white;
cursor: pointer;
}
.tag:hover::before {
color: red;
color: red;
}
.danger {
background-color: rgb(254, 171, 171);
border-color: red;
background-color: rgb(254 171 171);
border-color: red;
}
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float:right;
/* Hide label text */
width:1em;
overflow:hidden;
white-space:nowrap;
font-size:200%;
line-height:1.2;
color:#b3b3cc;
}
.rating:not(:checked) > label:before {
content:'★';
}
/* Checked star color */
.rating > input:checked ~ label {
color: #FFBF00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: orangered;
}
.rating > label:active {
position:relative;
}