Search and login

couchpotato/static/style/login.scss

@@ -0,0 +1,59 @@
+@import "mixins";
+
+/*** Login ***/
+.page.login {
+	display: block;
+	background: $primary_color;
+
+	h1 {
+		padding: 0 0 10px;
+		font-size: 60px;
+		font-family: Lobster;
+		font-weight: normal;
+		color: #FFF;
+		text-align: center;
+	}
+
+	form {
+		padding: 0;
+		height: 300px;
+		width: 400px;
+		position: fixed;
+		left: 50%;
+		top: 50%;
+		margin: -200px 0 0 -200px;
+	}
+
+	.ctrlHolder {
+		padding: 0;
+		margin: 0 0 20px;
+
+		&:hover {
+			background: none;
+		}
+	}
+
+	input[type=text],
+	input[type=password] {
+		width: 100% !important;
+		font-size: 25px;
+		padding: 14px !important;
+	}
+
+	.remember_me {
+		font-size: 15px;
+		float: left;
+		width: 150px;
+		padding: 20px 0;
+
+		.check {
+			margin: 5px 5px 0 0;
+		}
+	}
+
+	.button {
+		font-size: 25px;
+		padding: 20px;
+		float: right;
+	}
+}

couchpotato/static/style/main.scss

@@ -44,9 +44,10 @@ input, textarea, select {
     .navigation {
 
         .logo {
-            background: $couch_color;
+            background: $primary_color;
             display: block;
             text-align: center;
+            position: relative;
 
             font-family: Lobster, serif;
             color: #FFF;
@@ -54,12 +55,30 @@ input, textarea, select {
             line-height: $header_height;
             height: $header_height;
 
-            span:nth-child(odd){
+            span {
+                position: absolute;
                 display: block;
-            }
-            span:nth-child(even){
-                display: none;
+                height: 100%;
+                left: 50%;
+                @include transition(all 200ms $cubic);
+                @include translateX(-50%);
 
+                &:nth-child(even){
+                    @include translateX(45%);
+                    opacity: 0;
+                }
+            }
+
+            &:hover {
+                span{
+                    @include translateX(-153%);
+                    opacity: 0;
+
+                    &:nth-child(even){
+                        @include translateX(-50%);
+                        opacity: 1;
+                    }
+                }
             }
         }
 
@@ -101,6 +120,10 @@ input, textarea, select {
             top: -2px;
         }
 
+        .wrapper {
+			width: 320px;
+        }
+
         ul {
             min-height: 60px;
             max-height: 300px;
@@ -148,6 +171,7 @@ input, textarea, select {
             bottom: 0;
             left: 44px;
             right: auto;
+            padding-left: 4px;
         }
 
     }
@@ -158,7 +182,7 @@ input, textarea, select {
     @include flex(1 auto);
 
     background: $background_color;
-    border-radius: 3px 0 0 3px;
+    border-radius: $border_radius 0 0 $border_radius;
     overflow: hidden;
 
     h1, h2, h3 {
@@ -204,7 +228,7 @@ input, textarea, select {
         left: $header_width;
         right: 0;
         background: $background_color;
-        border-radius: 3px 0 0 3px;
+        border-radius: $border_radius 0 0 0;
         z-index: 100;
 
         ul {
@@ -257,30 +281,36 @@ input, textarea, select {
     .wrapper {
         display: none;
         position: absolute;
-        width: 320px;
         right: 0;
-        background: $background_color;
+        background: $primary_color;
         z-index: 5000;
-        box-shadow: 0 0 4px rgba(0,0,0,.1);
+        box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
+        border-radius: $border_radius 0 0 $border_radius;
 
         &:before {
             @include transform(rotate(45deg) translateY(-60%));
             content: '';
             display: block;
             position: absolute;
-            height: 20px;
-            width: 20px;
-            background: $background_color;
-            left: -10px;
-            bottom: 2px;
+            background: $primary_color;
+            height: 10px;
+            width: 10px;
+            left: -9px;
+            bottom: 11px;
             z-index: 1;
             opacity: 0;
+            border-radius: 2px;
+//            border: 8px solid $primary_color;
+//            border-color: transparent $primary_color transparent transparent;
         }
 
         ul {
+            @include transform(translateZ(0));
+            background: $background_color;
             position: relative;
             z-index: 2;
             overflow: hidden;
+            border-radius: $border_radius 0 0 $border_radius;
         }
 
         ul li {
@@ -293,6 +323,7 @@ input, textarea, select {
                 padding: $padding/4 $padding/2;
                 font-size: 1em;
                 line-height: 22px;
+                white-space: nowrap;
             }
 
             &:first-child a {

couchpotato/static/style/mixins.scss

@@ -1,4 +1,5 @@
-$couch_color: #ac0000;
+$primary_color: #ac0000;
+$secondary_color: #00d2c2;
 $background_color: #FFF;
 $menu_color: #111;
 $theme_off: #eaeaea;
@@ -7,6 +8,9 @@ $text_color: #000;
 $header_height: 80px;
 $header_width: 132px;
 $padding: 20px;
+$border_radius: 3px;
+
+$cubic: cubic-bezier(0.9,0,0.1,1);
 
 @import "susy";
 @import "compass/css3/transition";

couchpotato/static/style/settings.scss

@@ -262,7 +262,6 @@
 		padding: 5px 3px;
 		margin: 0;
 		width: 30%;
-		border-radius: 3px;
 	}
 		.page .input.xsmall { width: 5% }
 		.page .input.small { width: 10% }