From 837ba92d7d8d3ff8e9ea69cf210b5da0c1717f33 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Tue, 15 Nov 2022 01:08:32 +0000 Subject: [PATCH] fix css style issues, removed css for rating stars Signed-off-by: Arthur Lu --- source/static/CreatePage.css | 87 +++++--------------- source/static/ReviewCard.css | 155 +++++++++++++---------------------- source/static/reset.css | 124 ++++++++++++++++++++++------ 3 files changed, 177 insertions(+), 189 deletions(-) diff --git a/source/static/CreatePage.css b/source/static/CreatePage.css index fae6888..c347a04 100644 --- a/source/static/CreatePage.css +++ b/source/static/CreatePage.css @@ -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; -} \ No newline at end of file diff --git a/source/static/ReviewCard.css b/source/static/ReviewCard.css index 50ec840..2c69f0b 100644 --- a/source/static/ReviewCard.css +++ b/source/static/ReviewCard.css @@ -1,58 +1,59 @@ /* main.css */ * { - font-family: sans-serif; - } - - body { - height: 100%; - width: 100%; - } - - fieldset { - border: 2px solid rgb(214, 214, 214); - box-sizing: border-box; - display: block; - width: max-content; - } - - form button { - display: block; - margin-top: 5px; - } - - label[for="ingredients"] p { - margin: 0; - } - - label[for="numRatings"] { - margin: 10px 0 0 0; - } - - label[for^="rating"] { - padding-right: 10px; - } - - label:not([for^="rating"]) { - display: block; - margin-bottom: 5px; - } - - main { - column-gap: 10px; - display: flex; - flex-wrap: wrap; - height: auto; - max-width: 660px; - row-gap: 10px; - width: 100%; - } + font-family: sans-serif; +} - .tag-container { - display: flex; - flex-flow: row wrap; - } - .tag { +body { + height: 100%; + width: 100%; +} + +fieldset { + border: 2px solid rgb(214 214 214); + box-sizing: border-box; + display: block; + width: max-content; +} + +form button { + display: block; + margin-top: 5px; +} + +label[for="ingredients"] p { + margin: 0; +} + +label[for="numRatings"] { + margin: 10px 0 0; +} + +label[for^="rating"] { + padding-right: 10px; +} + +label:not([for^="rating"]) { + display: block; + margin-bottom: 5px; +} + +main { + column-gap: 10px; + display: flex; + flex-wrap: wrap; + height: auto; + max-width: 660px; + row-gap: 10px; + width: 100%; +} + +.tag-container { + display: flex; + flex-flow: row wrap; +} + +.tag { background-color: grey; border-radius: 7px; color: white; @@ -63,7 +64,7 @@ .tag::before { display: inline-block; - content: 'x'; + content: "x"; height: 15px; width: 15px; margin-right: 4px; @@ -71,56 +72,12 @@ color: white; cursor: pointer; } + .tag:hover::before { color: red; } + .danger { - background-color: rgb(254, 171, 171); + 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; -} diff --git a/source/static/reset.css b/source/static/reset.css index a34cda6..6677f89 100644 --- a/source/static/reset.css +++ b/source/static/reset.css @@ -1,17 +1,74 @@ /* 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, -h1, h2, h3, h4, h5, 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 { +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +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; padding: 0; border: 0; @@ -25,8 +82,17 @@ body { line-height: 1; } -article,aside,details,figcaption,figure, -footer,header,hgroup,menu,nav,section { +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { display: block; } @@ -34,13 +100,16 @@ nav ul { list-style: none; } -blockquote, q { +blockquote, +q { quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ""; content: none; } @@ -57,26 +126,33 @@ table { border-spacing: 0; } -input, select { +input, +select { vertical-align: middle; } -img, fieldset, object { +img, +fieldset, +object { border: none; } -*, *:after, *:before { +*, +*::after, +*::before { box-sizing: border-box; } -button, label { +button, +label { cursor: pointer; } -html, body { +html, +body { height: 100%; } form { border: solid; -} \ No newline at end of file +}