template update for nominate

playlist/static/style.css

@@ -6,7 +6,7 @@ body {
 	margin: 0;
 }
 
-.window:not([role="tabpanel"]) {
+#main-window {
 	position: fixed;
 	z-index:99;
 	min-height: 520px;
@@ -17,6 +17,53 @@ body {
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: space-between;
+	margin: 10px;
+}
+@media (max-width: 600px) {
+	#main-window {
+		margin: 0;
+		transform: none !important;
+	}
+}
+
+.hide {
+	display: none;
+}
+
+.window.popup {
+	position: fixed;
+	z-index: 100;
+	top: calc(50% - 75px);
+	left: calc(50% - 150px);
+	min-width: 300px;
+}
+
+.window.popup .window-body {
+	display: flex;
+	flex-flow: row nowrap;
+}
+.window.popup .window-body .text {
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: space-between;
+}
+
+.window.popup .window-body .icon {
+	width: 32px;
+	height: 32px;
+	padding: 16px;
+	background-position: center center;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-image: url('img/check.png');
+}
+
+.window.popup .window-body .icon.error {
+	background-image: url('img/error.png');
+}
+
+.window.popup .window-body .icon.warning {
+	background-image: url('img/warning.png');
 }
 
 @media (max-width: 600px) {
@@ -29,6 +76,7 @@ body {
 .window {
 	flex-grow: 1;
 	flex-shrink: 0;
+	max-width:calc(100% - 5px);
 }
 
 .window.hide {