alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-28 01:39:09 +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
Show Stats 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 { fieldset {
border: 2px solid rgb(214, 214, 214); border: 2px solid rgb(214 214 214);
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
width: max-content; width: max-content;
@ -26,7 +26,7 @@ label[for="ingredients"] p {
} }
label[for="numRatings"] { label[for="numRatings"] {
margin: 10px 0 0 0; margin: 10px 0 0;
} }
label[for^="rating"] { label[for^="rating"] {
@ -52,77 +52,32 @@ main {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} }
.tag { .tag {
background-color: grey; background-color: grey;
border-radius: 7px; border-radius: 7px;
color: white; color: white;
padding-right: 7px; padding-right: 7px;
padding-left: 7px; padding-left: 7px;
margin: 3px; margin: 3px;
} }
.tag::before { .tag::before {
display: inline-block; display: inline-block;
content: 'x'; content: "x";
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-right: 4px; margin-right: 4px;
text-align: center; text-align: center;
color: white; color: white;
cursor: pointer; cursor: pointer;
} }
.tag:hover::before { .tag:hover::before {
color: red; color: red;
} }
.danger { .danger {
background-color: rgb(254, 171, 171); background-color: rgb(254 171 171);
border-color: red; 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;
} }

97
source/static/ReviewCard.css
View File

@ -2,43 +2,43 @@
* { * {
font-family: sans-serif; font-family: sans-serif;
} }
body { body {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
fieldset { fieldset {
border: 2px solid rgb(214, 214, 214); border: 2px solid rgb(214 214 214);
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
width: max-content; width: max-content;
} }
form button { form button {
display: block; display: block;
margin-top: 5px; margin-top: 5px;
} }
label[for="ingredients"] p { label[for="ingredients"] p {
margin: 0; margin: 0;
} }
label[for="numRatings"] { label[for="numRatings"] {
margin: 10px 0 0 0; margin: 10px 0 0;
} }
label[for^="rating"] { label[for^="rating"] {
padding-right: 10px; padding-right: 10px;
} }
label:not([for^="rating"]) { label:not([for^="rating"]) {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
main { main {
column-gap: 10px; column-gap: 10px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -46,13 +46,14 @@
max-width: 660px; max-width: 660px;
row-gap: 10px; row-gap: 10px;
width: 100%; width: 100%;
} }
.tag-container { .tag-container {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} }
.tag {
.tag {
background-color: grey; background-color: grey;
border-radius: 7px; border-radius: 7px;
color: white; color: white;
@ -63,7 +64,7 @@
.tag::before { .tag::before {
display: inline-block; display: inline-block;
content: 'x'; content: "x";
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-right: 4px; margin-right: 4px;
@ -71,56 +72,12 @@
color: white; color: white;
cursor: pointer; cursor: pointer;
} }
.tag:hover::before { .tag:hover::before {
color: red; color: red;
} }
.danger { .danger {
background-color: rgb(254, 171, 171); background-color: rgb(254 171 171);
border-color: red; 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;
}

122
source/static/reset.css
View File

@ -1,17 +1,74 @@
/* This is a generic CSS file that sets preliminary rules for content that should be the same across pages */ /* This is a generic CSS file that sets preliminary rules for content that should be the same across pages */
html, body, div, span, object, iframe, html,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, body,
abbr, address, cite, code, div,
del, dfn, em, img, ins, kbd, q, samp, span,
small, strong, sub, sup, var, object,
b, i, iframe,
dl, dt, dd, ol, ul, li, h1,
fieldset, form, label, legend, h2,
table, caption, tbody, tfoot, thead, tr, th, td, h3,
article, aside, canvas, details, figcaption, figure, h4,
footer, header, hgroup, menu, nav, section, summary, h5,
time, mark, audio, video { h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -25,8 +82,17 @@ body {
line-height: 1; line-height: 1;
} }
article,aside,details,figcaption,figure, article,
footer,header,hgroup,menu,nav,section { aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block; display: block;
} }
@ -34,13 +100,16 @@ nav ul {
list-style: none; list-style: none;
} }
blockquote, q { blockquote,
q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:after, blockquote::before,
q:before, q:after { blockquote::after,
content: ''; q::before,
q::after {
content: "";
content: none; content: none;
} }
@ -57,23 +126,30 @@ table {
border-spacing: 0; border-spacing: 0;
} }
input, select { input,
select {
vertical-align: middle; vertical-align: middle;
} }
img, fieldset, object { img,
fieldset,
object {
border: none; border: none;
} }
*, *:after, *:before { *,
*::after,
*::before {
box-sizing: border-box; box-sizing: border-box;
} }
button, label { button,
label {
cursor: pointer; cursor: pointer;
} }
html, body { html,
body {
height: 100%; height: 100%;
} }