cse110-fa22-group29/source/static/Form.css

.journal-form > h1 {
	font-family: 'testFont';
	text-align: center;
}

.journal-form {
	font-size: 120%;
	font-family: 'Century Gothic';
	width: 50%;
	margin: auto;
	color: #516754;
	border: 2px solid rgb(31, 41, 32);
	border-radius: 8px;
	background-color: #f7dfd5;
}

fieldset {
	border: none;
}

input[type=text] {
	width: 100%;
	box-sizing: border-box;
	background-color: #f7dfd5;
	border: none;
	border-bottom: 1px solid rgb(0, 0, 0);
}

input[type=text]:focus {
	outline: none;
	border-bottom: 1px solid rgb(0, 0, 0);
}

.rating {
	display: flex; flex-wrap: nowrap; flex-direction: row-reverse;
}

.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;

	/* Star default color and size */
	font-size: 200%;
	line-height: 1.2;
	color: #b3b3cc;
}

.rating > label:active {
	position: relative;
}

.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,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
	color: orangered;
}

.tag-container {
	display: flex;
	flex-flow: row wrap;
}
  
.tag {
	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;
}
  
.tag:hover::before {
	color: red;
}

#tag-add-btn {
	background-color: #94da97; /* Green */
	border: round;
	color: rgb(206, 83, 179);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	cursor: pointer;
	border-radius: 10%;
	margin-top: 5px;
}

#tag-add-btn:hover {
	background-color: rgb(206, 83, 179); /* Green */
	border: round;
	color: #94da97;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	cursor: pointer;
	border-radius: 10%;
	margin-top: 5px;
}

.hidden {
	display: none;
}