summaryrefslogtreecommitdiff
path: root/public/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/main.css')
-rw-r--r--public/main.css918
1 files changed, 918 insertions, 0 deletions
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..334e06b
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,918 @@
+body {
+ margin: 0 0rem;
+ font-family: Helvetica, sans-serif;
+ background: #ffd7ef; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to left, #fcffca, #ffd7ef); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to left, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background: -moz-linear-gradient(to left, #fcffca, #ffd7ef);
+}
+
+a:any-link {
+ color: blueviolet;
+}
+
+.nav {
+ background-color: blueviolet; /* fallback for old browsers */
+ display: flex;
+ align-items: center;
+ margin: 0 0 0 0;
+ color: white;
+}
+.nav h4 {
+ margin: .5rem 0;
+}
+.nav a {
+ text-decoration: none;
+ color: white;
+ padding: .5rem .5rem;
+}
+
+.content {
+ display: flex;
+}
+
+.cats {
+ border-right: 1px dotted #aaaaaa;
+ background: #ffd7ef; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to bottom, #fcffca, #ffd7ef); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to bottom, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background: -moz-linear-gradient(to bottom, #fcffca, #ffd7ef);
+}
+.cats ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ min-width: 12rem;
+ max-width: 15rem;
+}
+.cats ul li {
+ padding: .5rem .5rem;
+}
+.cats ul li:hover {
+ background-color: rgba(238, 238, 238, .4);
+}
+.cats ul a:any-link {
+ text-decoration: none;
+ margin: 0;
+}
+
+.sets {
+ border-right: 1px dotted #aaaaaa;
+ background: #ffd7ef; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to bottom, #fcffca, #ffd7ef); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to bottom, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background: -moz-linear-gradient(to bottom, #fcffca, #ffd7ef);
+}
+.sets h4 {
+ background-color: blueviolet;
+ text-align: center;
+ margin: 0;
+ padding: .25rem 0;
+ color: white;
+}
+.sets ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ width: 12rem;
+}
+.sets ul li {
+ padding: .5rem .5rem;
+}
+.sets ul li:hover {
+ background-color: rgba(238, 238, 238, .4);
+}
+.sets ul a:any-link {
+ text-decoration: none;
+ margin: 0;
+}
+.sets ul li form button:hover {
+ cursor: pointer;
+}
+
+
+.main {
+ display: flex;
+ flex-direction: column;
+ width:100%;
+}
+
+.recIngImg {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: flex-start;
+}
+@media screen and ( max-width: 1080px ) {
+ .recIngImg {
+ flex-direction: column-reverse;
+ align-items: center;
+ }
+}
+
+@media screen and ( max-width: 450px ) {
+ .savImg img {
+ width: 15rem;
+ }
+}
+
+.savImg {
+ padding: 0;
+}
+.savImg img {
+ margin: 0;
+}
+.savImg form {
+ opacity: 0;
+ transition: .3s linear;
+}
+.savImg:hover form {
+ opacity: 1.0;
+}
+
+.saveRecForm {
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+}
+#saveBtn {
+ background-color: blueviolet;
+ color: #fcffca;
+ border: none;
+ padding: .25rem;
+ margin:0;
+}
+#saveBtn:hover {
+ background-color: #fcffca;
+ color: blueviolet;
+ cursor: pointer;
+}
+
+.Ing {
+ border: 1px solid #aaaaaa;
+ margin-bottom: 1rem;
+}
+.Ing h5 {
+ background-color: blueviolet;
+ text-align: center;
+ margin: 0;
+ padding: .25rem 0;
+ color: white;
+}
+.Ing ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ width: 15rem;
+}
+.Ing li {
+ padding: .25rem;
+}
+.Ing li:nth-child(even) {
+ background-color: #eeeeee;
+}
+.Ing li:nth-child(odd) {
+ background-color: white;
+}
+
+.category {
+ display: flex;
+ justify-content: flex-end;
+ margin-right: 3rem;
+}
+.category span {
+ width: 5rem;
+ background-color: #eeeeee;
+ padding: .25rem;
+ text-align: center;
+}
+
+.steps {
+ display:flex;
+ flex-direction: column;
+ margin: 0 3rem;
+ border: 1px dotted #aaaaaa;
+ margin-bottom: 2.25rem;
+}
+@media screen and ( max-width: 420px ) {
+ .steps {
+ margin: 0 1rem 3rem 1rem;
+ }
+}
+.steps h4 {
+ background-color: blueviolet;
+ color: white;
+ margin: 0;
+ padding: .25rem 0;
+ text-align: center;
+}
+.steps div {
+ margin: 0;
+ padding: 0 1.5rem;
+}
+.steps h5 {
+ margin: 1rem 0;
+}
+.steps div p {
+ line-height: 1.75rem;
+}
+.steps div:nth-child(even) {
+ background-color: #eeeeee;
+}
+.steps div:nth-child(odd) {
+ background-color: white;
+}
+
+.pops {
+ border-left: 1px dotted #aaaaaa;
+ background: #ffd7ef; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to top, #fcffca, #ffd7ef); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to top, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background: -moz-linear-gradient(to top, #fcffca, #ffd7ef);
+}
+.pops h4,
+.cats h4 {
+ background-color: blueviolet;
+ text-align: center;
+ margin: 0;
+ padding: .25rem 0;
+ color: white;
+}
+.popCard {
+ margin: 1rem;
+}
+.popular {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border: 1px dotted #aaaaaa;
+ border-radius: 2%;
+ margin: .5rem 0;
+ background-color: white;
+ min-width: 10rem;
+}
+.popular h5 {
+ text-align: center;
+ margin: .5rem 0;
+}
+.popular form {
+ display: flex;
+ flex-direction: column;
+ width: 6rem;
+ margin: .25rem 0;
+}
+.popular form button {
+ background-color: #ffd7ef;
+ color: blueviolet;
+ border: none;
+ border-radius: 3%;
+ padding: .25rem .15rem .25rem .15rem;
+}
+.popular form button:hover {
+ background-color: #fcffca;
+ cursor: pointer;
+}
+
+.bioDisplay {
+ color: blueviolet;
+}
+.bioDisplay ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ min-width: 12rem;
+ max-width: 15rem;
+}
+.bioDisplay ul li {
+ padding: .5rem .5rem;
+}
+.bioDisplay ul li p {
+ margin: 0;
+}
+.bioDisplay ul li:nth-child(odd) {
+ background-color: rgba(238, 238, 238, .4);
+}
+.bioDisplay ul li:nth-child(even) {
+ background-color: rgba(255, 255, 255, .4);
+}
+
+
+.logCard {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ width: 32rem;
+ align-self: center;
+ margin-top: 2rem;
+ border: 1px dotted #aaaaaa;
+ border-radius: 1%;
+}
+.logCard h4 {
+ background-color: blueviolet;
+ color: white;
+ margin: 0;
+ padding: .25rem .25rem;
+}
+
+.fff {
+ display: flex;
+ flex-direction: column;
+}
+
+/* Login and register form */
+#logform {
+ display: flex;
+ flex-direction: column;
+ width: 30rem;
+ align-self: center;
+ margin: 1rem;
+}
+#logform label {
+ padding-bottom: .5rem;
+}
+#logform input {
+ padding: .25rem .15rem .25rem .15rem;
+ margin-bottom: .5rem;
+}
+#logform button {
+ padding: .25rem 0;
+ margin: .5rem 0;
+ background-color: #ffd7ef;
+ border: none;
+ border-radius: 1%;
+ color: blueviolet;
+}
+#logform button:hover {
+ background-color: #fcffca;
+ cursor: pointer;
+}
+
+@media screen and (max-width: 550px) {
+ .logCard{
+ width: 25rem;
+ }
+ #logform {
+ width: 23rem;
+ }
+}
+
+@media screen and ( max-width: 420px ) {
+ .logCard{
+ width: 20rem;
+ }
+ #logform {
+ width: 18rem;
+ }
+}
+.searchbox {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: url('./searchBurger.jpg');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 100%;
+ height: 10rem;
+ color: white;
+}
+.searchbox h2 {
+ color: #ffd7ef;
+}
+
+#searchForm {
+ margin-bottom: 2rem;
+}
+#searchForm input {
+ padding: .25rem .15rem .25rem .15rem;
+}
+#searchForm button {
+ background-color: #ffd7ef;
+ color: blueviolet;
+ border: none;
+ border-radius: 3%;
+ padding: .35rem .4rem;
+}
+#searchForm button:hover {
+ background-color: #fcffca;
+ cursor: pointer;
+}
+
+/* Create a recipe form */
+.createCard {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ width: 50rem;
+ align-self: center;
+ margin-top: 2rem;
+ margin-bottom: 2.5rem;
+ border: 1px dotted #aaaaaa;
+ border-radius: 1%;
+}
+.createCard h4 {
+ background-color: blueviolet;
+ color: white;
+ margin: 0;
+ padding: .25rem .25rem;
+}
+
+#createForm {
+ display: flex;
+ flex-direction: column;
+ width: 48rem;
+ align-self: center;
+ margin-top: 1rem;
+}
+#createForm label {
+ padding-bottom: .5rem;
+}
+#createForm input {
+ padding-bottom: .5rem;
+ margin-bottom: .5rem;
+}
+#createForm select {
+ margin: .25rem 0 .25rem 0;
+ padding: .25rem .25rem;
+}
+#createForm textarea {
+ height: 10rem;
+}
+#createForm button {
+ padding: .25rem 0;
+ margin: .5rem 0;
+ background-color: #ffd7ef;
+ color: blueviolet;
+ border: none;
+ border-radius: 3%;
+}
+#createForm button:hover {
+ background-color: #fcffca;
+ cursor: pointer;
+}
+.adds {
+ display: flex;
+ flex-direction: column;
+ margin: .5rem 0 .5rem 0;
+ padding: 1rem 1rem;
+ border: 1px dotted #aaaaaa;
+ border-radius: 1%;
+}
+.adds textarea {
+ height: 10rem;
+}
+
+#createForm .adds:nth-child(even) {
+ background-color: #eeeeee;
+}
+
+#createForm #addStep {
+ margin-bottom: 2.5rem;
+}
+
+@media screen and (max-width: 820px) {
+ .createCard {
+ width: 32rem;
+ }
+ #createForm {
+ width: 30rem;
+ }
+}
+@media screen and (max-width: 550px) {
+ .createCard {
+ width: 25rem;
+ }
+ #createForm {
+ width: 23rem;
+ }
+}
+@media screen and (max-width: 420px) {
+ .createCard {
+ width: 20rem;
+ }
+ #createForm {
+ width: 18rem;
+ }
+}
+
+.editCard {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ width: 50rem;
+ align-self: center;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ border: 1px dotted #aaaaaa;
+ border-radius: 1%;
+}
+.editCard h4 {
+ background-color: blueviolet;
+ color: white;
+ margin: 0;
+ padding: .25rem .25rem;
+}
+
+.stepControl {
+ display:flex;
+}
+.stepControl input {
+ width: 80%;
+}
+.stepBtns {
+ display: flex;
+ width: 20%;
+ justify-content: flex-end;
+}
+.stepBtns #plus,
+.stepBtns #minus {
+ width: 100%;
+ margin: 0 0 .5rem .5rem;
+ padding: 0 .7rem;
+}
+.stepBtns #plus:hover,
+.stepBtns #minus:hover {
+ cursor: pointer;
+}
+
+@media screen and ( max-width: 820px ) {
+ .editCard {
+ width: 32rem;
+ }
+}
+@media screen and ( max-width: 550px ) {
+ .editCard {
+ width: 25rem;
+ }
+}
+@media screen and ( max-width: 420px ) {
+ .editCard {
+ width: 20rem;
+ }
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.recList {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+}
+
+.recCard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border: 1px solid gray;
+ border-radius: 1.5%;
+ margin: 2rem;
+ background-color: white;
+}
+.recCard img {
+ width: 15rem;
+ height: 15rem;
+ object-fit: cover;
+}
+.recCard a:any-link {
+ text-decoration: none;
+ margin: .5rem 0 .5rem 0;
+}
+.recControl {
+ display: flex;
+ width: 100%;
+ justify-content: space-evenly;
+}
+.recCard form {
+ width: 100%;
+ display: flex;
+ margin: .5rem;
+}
+.recCard form {
+ display: inline-block;
+ transition: .3s linear;
+ width: 0;
+ opacity: 0;
+}
+.recCard:hover form {
+ width: 6.5rem;
+ opacity: 1.0;
+}
+
+.recCard button {
+ width: 6.5rem;
+}
+
+.recCard button:hover {
+ cursor: pointer;
+ background-color: #fcffca;
+}
+
+.acRecBtns {
+ background-color: #ffd7ef;
+ border: none;
+ border-radius: 5%;
+ color: blueviolet;
+ margin: 0;
+ padding: .25rem .25rem;
+ width: 2rem;
+ height: 2rem;
+}
+
+.editSteps {
+ display: flex;
+ flex-direction: column;
+ width: 50rem;
+ align-self: center;
+}
+
+.editSteps input {
+ padding: .25rem 0 .25rem 0;
+}
+
+#delStep {
+ display: flex;
+ justify-content: center;
+}
+#delStep button {
+ width: 50rem;
+ margin: .25rem 0;
+ padding: .25rem 0;
+}
+#deleteStep {
+ display: flex;
+ flex-direction: column;
+}
+
+.stepBtns2 {
+ display: flex;
+ justify-content: space-evenly;
+}
+.stepBtns2 button {
+ width: 22.5rem;
+ margin: .5rem 0;
+ padding: .25rem 0;
+}
+
+form .steps {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ width: 100%;
+ align-self: center;
+}
+
+.stepsToEd {
+ display:flex;
+ flex-direction: column;
+ margin: 0;
+ border: 1px dotted #aaaaaa;
+ margin-bottom: .5rem;
+ width: 50rem;
+ align-self: center;
+}
+.stepsToEd h4 {
+ background-color: blueviolet;
+ color: white;
+ margin: 0;
+ padding: .25rem 0;
+ text-align: center;
+}
+.stepsToEd div {
+ margin: 0;
+ padding: 0 1.5rem;
+}
+.stepsToEd h5 {
+ margin: 1rem 0;
+}
+.stepsToEd div p {
+ line-height: 1.75rem;
+}
+.stepsToEd .stepToEd:nth-child(even) {
+ background-color: #eeeeee;
+}
+.stepsToEd .stepToEd:nth-child(odd) {
+ background-color: white;
+}
+
+.edtr {
+ opacity: 0;
+ transition: .3s linear;
+ width: fit-content;
+}
+.stepToEd:hover .edtr{
+ opacity: 1.0;
+ width: fit-content;
+}
+
+@media screen and ( max-width: 820px ) {
+ .stepsToEd {
+ width: 32rem;
+ }
+}
+@media screen and ( max-width: 550px ) {
+ .stepsToEd {
+ width: 25rem;
+ }
+}
+@media screen and ( max-width: 420px ) {
+ .stepsToEd {
+ width: 20rem;
+ }
+}
+
+.editStpBtns {
+ background-color: #ffd7ef;
+ border: none;
+ border-radius: 5%;
+ color: blueviolet;
+ margin: 0;
+ padding: .25rem .25rem;
+ width: 2.25rem;
+ height: 6rem;
+}
+.editStpBtns:hover {
+ cursor: pointer;
+ background-color: #fcffca;
+}
+
+.welcome {
+ margin: 1rem 3rem 1rem 3rem;
+}
+.welcome h4 {
+ text-align: center;
+ color: blueviolet;
+}
+
+.flashCardError {
+ background-color: indianred;
+ color: #fcffca;
+ padding: .2rem;
+}
+.flashCardSuccess {
+ background-color: rgb(104, 212, 176);
+ color: #fcffca;
+ padding: .2rem;
+}
+
+.bottomNav {
+ display: flex;
+ justify-content: space-between;
+ position: fixed;
+ top: 95%;
+ background-color: blueviolet;
+ height: 5%;
+ width: 100%;
+}
+.bottomNav button {
+ background-color: blueviolet;
+ color: white;
+ border: none;
+}
+.bottomNav button:hover {
+ background-color: crimson;
+ cursor: pointer;
+}
+
+.magicCats {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ top: 0%;
+ height: 95%;
+ width: 100%;
+ background: #ffd7ef; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to left, #fcffca, #ffd7ef); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to left, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background: -moz-linear-gradient(to left, #fcffca, #ffd7ef);
+}
+.magicCats h4 {
+ background-color: blueviolet;
+ text-align: center;
+ color: white;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: .25rem .25rem;
+}
+.magicCats ul {
+ list-style-type: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 0;
+ padding: 0;
+}
+.magicCats li {
+ width: 100%;
+ text-align: center;
+ line-height: 2rem;
+}
+.magicCats li:hover {
+ background-color: rgba(238, 238, 238, .4);
+}
+.magicCats a:any-link {
+ text-decoration: none;
+}
+
+.magicPops {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ top: 0%;
+ height: 95%;
+ width: 100%;
+ background: #ffd7ef; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to left, #fcffca, #ffd7ef); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to left, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background: -moz-linear-gradient(to left, #fcffca, #ffd7ef);
+ overflow-x: hidden;
+ overflow-y: auto;
+ transition: height .2s linear;
+}
+.magicPops h4 {
+ background-color: blueviolet;
+ text-align: center;
+ color: white;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: .25rem .25rem;
+}
+.magicPops .popCard {
+ margin: 1rem 10rem;
+ align-self: center;
+}
+
+.magicSets {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ top: 0%;
+ height: 95%;
+ width: 100%;
+ background: #ffd7ef; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to left, #fcffca, #ffd7ef); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to left, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background: -moz-linear-gradient(to left, #fcffca, #ffd7ef);
+}
+.magicSets h4 {
+ background-color: blueviolet;
+ text-align: center;
+ color: white;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: .25rem .25rem;
+}
+.magicSets ul {
+ list-style-type: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 0;
+ padding: 0;
+}
+.magicSets li {
+ width: 100%;
+ text-align: center;
+ line-height: 2rem;
+}
+.magicSets li:hover {
+ background-color: rgba(238, 238, 238, .4);
+}
+.magicSets a:any-link {
+ text-decoration: none;
+}
+
+.magicbioDisplay {
+ color: blueviolet;
+}
+.magicbioDisplay ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+.magicbioDisplay ul li {
+ padding: .5rem .5rem;
+}
+.magicbioDisplay ul li p {
+ margin: 0;
+}
+.magicbioDisplay ul li:nth-child(odd) {
+ background-color: rgba(238, 238, 238, .4);
+}
+.magicbioDisplay ul li:nth-child(even) {
+ background-color: rgba(255, 255, 255, .4);
+}
+
+.invis {
+ width: 0;
+ opacity: 0;
+ visibility: hidden;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-16 21:59:40 +0000