fix css style issues,

removed css for rating stars

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

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;
-}
-
-
-.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;
+  background-color: rgb(254 171 171);
+  border-color: red;
 }

source/static/ReviewCard.css

@@ -2,43 +2,43 @@
 
 * {
   font-family: sans-serif;
-  }
+}
 
-  body {
+body {
   height: 100%;
   width: 100%;
-  }
+}
 
-  fieldset {
-    border: 2px solid rgb(214, 214, 214);
+fieldset {
+  border: 2px solid rgb(214 214 214);
   box-sizing: border-box;
   display: block;
   width: max-content;
-  }
+}
 
-  form button {
+form button {
   display: block;
   margin-top: 5px;
-  }
+}
 
-  label[for="ingredients"] p {
+label[for="ingredients"] p {
   margin: 0;
-  }
+}
 
-  label[for="numRatings"] {
-    margin: 10px 0 0 0;
-  }
+label[for="numRatings"] {
+  margin: 10px 0 0;
+}
 
-  label[for^="rating"] {
+label[for^="rating"] {
   padding-right: 10px;
-  }
+}
 
-  label:not([for^="rating"]) {
+label:not([for^="rating"]) {
   display: block;
   margin-bottom: 5px;
-  }
+}
 
-  main {
+main {
   column-gap: 10px;
   display: flex;
   flex-wrap: wrap;
@@ -46,13 +46,14 @@
   max-width: 660px;
   row-gap: 10px;
   width: 100%;
-  }
+}
 
-  .tag-container {
+.tag-container {
   display: flex;
   flex-flow: row wrap;
-  }
-  .tag {
+}
+
+.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;
-}

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,23 +126,30 @@ 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%;
 }