tweaking of CSS for login in nin theme, tweaking a bit CSS of all themes

miguelfreitas · Mar 12, 2015 · 7b851f4 · 7b851f4
1 parent bded307
commit 7b851f4
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 20 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1175,14 +1175,14 @@ ol.toptrends-list {
     border: solid 1px rgba( 69, 71, 77, .05 );
     padding: 10px;
 }
-.singleBlock h2
+.singleBlock h2, .header-bold
 {
     font-weight: bold;
     line-height: 40px;
     color: rgba( 255, 255, 255, 1 );
     font-variant: small-caps;
     border-bottom: solid 1px rgba( 69, 71, 77, .1 );
-    margin: 15px 0 0 0;
+    margin: 0px 0px 12px 0px;
     padding-left: 5px;
     background: #e34f42;
 }
@@ -1255,11 +1255,18 @@ ol.toptrends-list {
 ************* LOGIN PAGE *************
 **************************************/
 
+.login .header-bold {
+    display: block;
+    width: 720px;
+    margin: 0px auto 12px auto;
+}
+
 .login .module {
     display: block;
     width: 720px;
     padding: 32px 40px;
     margin: 8px auto;
+    background: #fff;
 }
 
 .login .module p {
@@ -1729,8 +1736,9 @@ ol.toptrends-list {
 }
 
 /*************************************
-****************** LOADER ************
+**************** LOADER **************
 **************************************/
+
 .postboard-loading
 {
     text-align: right;
@@ -1847,18 +1855,21 @@ ol.toptrends-list {
 }
 
 /*************************************
-****************** OPTIONS ***********
+**************** OPTIONS *************
 **************************************/
 
 .options .module
 {
-    margin: 5px;
-    padding: 15px;
+    display: block;
+    width: 720px;
+    padding: 32px 40px;
+    margin: 8px auto;
+    background: #fff;
 }
 
 .options .container
 {
-    margin: 5px 0px 5px 10px;
+    margin: 8px 0px 8px 16px;
 }
 
 .options .label-h {
@@ -1886,7 +1897,20 @@ ol.toptrends-list {
     -ms-transition: height 1s linear;
 }
 
-/* Following page */
+/*************************************
+*********** FOLLOWING PAGE ***********
+**************************************/
+
+.following .postboard-loading
+{
+    text-align: center;
+}
+
+.following .header-bold {
+    display: block;
+    width: 100%;
+    margin: 0px auto 12px auto;
+}
 
 .following-list
 {

diff --git a/following.html b/following.html
@@ -146,7 +146,7 @@
 
   <!-- LADO ESQUERDO DE MÓDULOS INIT --> 
     <div class="following">
-      <h2><span>Following</span></h2>
+      <h2 class="header-bold"> Following </h2>
 
       <div class="postboard-loading" style="display: none;">
             <div></div>

diff --git a/login.html b/login.html
@@ -53,7 +53,7 @@
 
   <!-- LADO ESQUERDO DE MÓDULOS INIT --> 
     <div class="login">
-      <h2> twister login </h2>
+      <h2 class="header-bold"> twister login </h2>
 
       <div class="module">
         <p> <span>Existing local users</span> </p>

diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css
@@ -1534,14 +1534,14 @@ textarea.splited-post {
     padding: 10px;
     border-radius: 6px;
 }
-.singleBlock h2
+.singleBlock h2, .header-bold
 {
     font-weight: bold;
     line-height: 40px;
     color: rgba( 255, 255, 255, 1 );
     font-variant: small-caps;
     border-bottom: solid 1px rgba( 69, 71, 77, .1 );
-    margin: 15px 0 0 0;
+    margin: 0;
     padding-left: 5px;
     background: #768fce;
     border-radius: 2px;
@@ -1611,8 +1611,15 @@ textarea.splited-post {
 }
 
 /*************************************
-**************************** LOGIN PAGE
+************* LOGIN PAGE *************
 **************************************/
+
+.login .header-bold {
+    display: block;
+    width: 720px;
+    margin: 0px auto 12px auto;
+}
+
 .login .module, .optionsPage .module {
     padding: 20px;
     width: 500px;
@@ -2145,9 +2152,11 @@ textarea.splited-post {
     font-size: 12px;
     color: rgba( 0, 0, 0, .6 );
 }
+
 /*************************************
-****************** LOADER ************
+**************** LOADER **************
 **************************************/
+
 .postboard-loading
 {
     text-align: right;
@@ -2264,18 +2273,21 @@ textarea.splited-post {
 }
 
 /*************************************
-****************** OPTIONS ***********
+**************** OPTIONS *************
 **************************************/
 
 .options .module
 {
-    margin: 5px;
-    padding: 15px;
+    display: block;
+    width: 720px;
+    padding: 32px 40px;
+    margin: 8px auto;
+    background: #fff;
 }
 
 .options .container
 {
-    margin: 5px 0px 5px 10px;
+    margin: 8px 0px 8px 16px;
 }
 
 .options .label-h {
@@ -2303,7 +2315,21 @@ textarea.splited-post {
     -ms-transition: height 1s linear;
 }
 
-/* Following page */
+/*************************************
+*********** FOLLOWING PAGE ***********
+**************************************/
+
+.following .postboard-loading
+{
+    text-align: center;
+}
+
+.following .header-bold {
+    display: block;
+    width: 100%;
+    margin: 0px auto 12px auto;
+}
+
 .following ol.following-list > li{
     display: inline-block;
     width: 280px;
@@ -2317,13 +2343,18 @@ textarea.splited-post {
 .following ol.following-list li .swarm-status {
     font: 11px "Open Sans", sans-serif;
     color: #343434;
-    margin-left: 10px;
+    display: block;
+    position: absolute;
+    top: 94px;
+    right: 8px;
 }
 .following ol.following-list li span.mini-profile-name:hover {
     color: #5e8da4;
 }
 .following ol.following-list li span.mini-screen-name {
     color: #5e8da4;
+    position: absolute;
+    top: 32px;
 }
 .following ol.following-list li span.mini-screen-name:hover {
     color: #76b2ce;
@@ -2342,6 +2373,14 @@ textarea.splited-post {
     vertical-align: middle;
 }
 
+.following-list .following-config
+{
+    width: 100%;
+    position: absolute;
+    top: 60px;
+    text-align: center;
+}
+
 /* Autocomplite*/
 .textcomplete-wrapper textarea {
     display: inline;

diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css
@@ -1611,6 +1611,75 @@ h3 .isFollowing:after {
   display: none;
 }
 
+/*************************************
+************* LOGIN PAGE *************
+**************************************/
+
+.login .header-bold {
+    display: block;
+    width: 720px;
+    margin: 0px auto 12px auto;
+}
+
+.login .module {
+    display: block;
+    width: 720px;
+    padding: 32px 40px;
+    margin: 8px auto;
+    background: #fff;
+}
+
+.login .module p {
+    margin-bottom: 5px;
+}
+
+.login .module input {
+    padding: 5px 10px;
+    background: #f3f3f3;
+    border: solid 1px #dcdcdc;
+    transition: box-shadow 0.3s, border 0.3s;
+    font-size: 14px;
+}
+
+.login .module input:focus, .login .module select:focus {
+    background: #fff;
+    transition: background-color 100ms linear;
+    border-bottom: solid 2px #B4C669;
+}
+
+.login .module select {
+    height: 30px;
+    padding: 3px 30px 3px 10px;
+    margin: 0;
+    border: 1px solid #ccc;
+    font-size: 14px;
+}
+
+.login .module span.availability {
+    margin-left: 10px;
+    color: #45474d;
+}
+
+.with-nickname, .import-secret-key, .create-user {
+    margin-top: 10px;
+}
+
+.login .module:nth-child(2) div ,
+.login .module:nth-child(3) div:nth-child(2),
+.login .secret-key-import,
+.login .username-import {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-left: 16px;
+}
+
+.login .create-user,
+.login .import-secret-key {
+    display: block;
+    margin-left: auto;
+    margin-right: 16px;
+}
+
 /************** BUTTONS *********** */
 /* line 65, ../sass/_commons.sass */
 button, .mini-profile-actions span, a.button {
@@ -2121,6 +2190,10 @@ ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-prof
   margin: 5px 0;
 }
 
+.post-area-new textarea:focus {
+  border-bottom: solid 2px #B4C669;
+}
+
 /* line 334, ../sass/style.sass */
 #postboard-top {
   clear: both;

diff --git a/theme_nin/sass/_login.sass b/theme_nin/sass/_login.sass
@@ -0,0 +1,55 @@
+.login .header-bold
+  display: block
+  width: 720px
+  margin: 0px auto 12px auto
+
+.login .module
+  display: block
+  width: 720px
+  padding: 32px 40px
+  margin: 8px auto
+  background: white
+
+.login .module p
+  margin-bottom: 5px
+
+.login .module input
+  padding: 5px 10px
+  background: #f3f3f3
+  border: solid 1px #dcdcdc
+  transition: box-shadow 0.3s, border 0.3s
+  font-size: 14px
+
+.login .module input:focus,
+.login .module select:focus
+  background: white
+  transition: background-color 100ms linear
+  border-bottom: solid 2px $color-green
+
+.login .module select
+  height: 30px
+  padding: 3px 30px 3px 10px
+  margin: 0
+  border: 1px solid #ccc
+  font-size: 14px
+
+.login .module span.availability
+  margin-left: 10px
+  color: #45474d
+
+.with-nickname, .import-secret-key, .create-user
+  margin-top: 10px
+
+.login .module:nth-child(2) div,
+.login .module:nth-child(3) div:nth-child(2),
+.login .secret-key-import,
+.login .username-import
+  margin-top: 20px
+  margin-bottom: 20px
+  margin-left: 16px
+
+.login .create-user,
+.login .import-secret-key
+  display: block
+  margin-left: auto
+  margin-right: 16px