Party mode

frontend/static/styles/common.scss

@@ -304,14 +304,16 @@ body {
 
 	transition: margin 0.1s ease-out;
 }
-.calendar_day {
+
+
+.pref_line {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin-top: .3em;
 }
 
-.calendar_time_input {
+.pref_input {
 	background: #453f4b;
 	border: solid 0.35em #5b3f63;
 	border-radius: .3em;
@@ -323,17 +325,49 @@ body {
 	margin-left: .5em;
 }
 
-.calendar_box {
+.pref_button {}
+.pref_button,  .pref_button_enabled {
+	position: relative;
+	width: 100%;
+	
+	font-size: large;
+	font-weight: bold;
+	color: white;
+	text-shadow: 0.1rem 0.1rem 0.3rem black;
+
+	padding: 1rem;
+	border: solid 0.35em #5b3f63;
+	border-radius: 0.3em;
+	background: transparent;
+	overflow: hidden;
+}
+.pref_button_enabled::before {
+	content: "";
+	z-index: -1;
+	width: 20rem;
+	height: 20rem;
+	background-size: 100% 100%;
+	background-image: url(/images/hsb.png);
+	position: absolute;
+	transform: translate(-8.5rem, -2.5rem);
+	animation: infinite linear 3s button_rainbow;
+}
+@keyframes button_rainbow {
+	from { transform: translate(-8.5rem, -2.5rem) rotate(  0deg); }
+	to   { transform: translate(-8.5rem, -2.5rem) rotate(360deg); }
+}
+
+.prefs_box {
 	display: flex;
 	justify-content: center;
 }
 
-.calendar_box > h2 {
+.prefs_box > h2 {
 	writing-mode: sideways-lr;
 	margin-top: auto;
 	margin-bottom: auto;
 }
-.calendar_box > * {
+.prefs_box > * {
 	flex-shrink: 1;
 }