Releases

couchpotato/static/style/main.scss

@@ -356,11 +356,76 @@ input, textarea, select {
     }
 }
 
+/* Messages */
 
+.messages {
+	position: fixed;
+	right: 0;
+	bottom: 0;
+	width: 320px;
+	z-index: 20;
+	overflow: hidden;
+	font-size: 14px;
+	font-weight: bold;
+    padding: 5px;
+
+	.message {
+		overflow: hidden;
+		transition: all .6s cubic-bezier(0.9,0,0.1,1);
+		width: 100%;
+		position: relative;
+		max-height: 0;
+		font-size: 1.1em;
+		font-weight: normal;
+		transform: scale(0);
+        background: $primary_color;
+        margin-bottom: 4px;
+        border-radius: $border_radius;
+        box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
+
+        .inner {
+			padding: 15px 30px 15px 20px;
+            background: $background_color;
+            margin-bottom: 4px;
+            border-radius: $border_radius;
+        }
+
+		&.sticky {
+			background-color: $primary_color;
+		}
+
+		&.show {
+			max-height: 100px;
+			transform: scale(1);
+		}
+
+		&.hide {
+			max-height: 0;
+			padding: 0 20px;
+			margin: 0;
+			transform: scale(0);
+		}
+	}
+
+    .close {
+        position: absolute;
+        padding: 10px 8px;
+        top: 0;
+        right: 0;
+        color: #FFF;
+    }
+}
+
+/* Mask */
 .mask{
-	background: rgba(0,0,0, 0.9);
+	background: rgba(0,0,0, .8);
 	z-index: 100;
 	text-align: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 
     $spinner_size: 22px;
 
@@ -375,24 +440,51 @@ input, textarea, select {
         margin-top: -($spinner_size/2);
         margin-left: -($spinner_size/2);
         outline: 1px solid transparent;
-        border: 1px solid #FFF;
 
-        @include animation(rotating 4.4s $cubic infinite normal);
+        @include animation(rotating 2.5s $cubic infinite normal);
     }
 }
 
 @keyframes rotating {
     0% {
-        @include transform(rotate(0deg) scale(1.4));
-        border-radius: 2px;
+        @include transform(rotate(0deg) scale(1.6));
+        border-radius: 1px;
     }
-    45% {
+    48% {
         @include transform(rotate(360deg) scale(1));
         border-radius: 50%;
     }
-    55% {}
+    52% {}
     100% {
-        @include transform(rotate(720deg) scale(1.4));
-        border-radius: 2px;
+        @include transform(rotate(720deg) scale(1.6));
+        border-radius: 1px;
+    }
+}
+
+.table {
+
+    .head {
+        font-weight: bold;
+    }
+
+    .item {
+        @include flexbox();
+        border-bottom: 1px solid rgba(0,0,0,.2);
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        span {
+            padding: 1px 2px;
+
+            &:first-child {
+                padding-left: 0;
+            }
+
+            &:last-child {
+                padding-right: 0;
+            }
+        }
     }
 }