CSS tweaking of a options page, of modal buttons and width of login page header for original and calm themes

css/style.css

@@ -1377,7 +1377,7 @@ ol.toptrends-list {
     position: absolute;
     right: 0;
     top: 0;
-    padding: 3px 10px;
+    padding: 1px 10px;
     cursor: pointer;
     color: rgba( 255, 255, 255, .7 );
     font-weight: bold;
@@ -1394,7 +1394,7 @@ ol.toptrends-list {
     position: absolute;
     right: 30px;
     top: 0;
-    padding: 3px 10px;
+    padding: 1px 10px;
     cursor: pointer;
     color: rgba( 255, 255, 255, .7 );
     font-weight: bold;
@@ -1872,12 +1872,30 @@ ol.toptrends-list {
     margin: 8px 0px 8px 16px;
 }
 
+.options .label {
+    font-size: 13px;
+}
+
 .options .label-h {
-  font-weight: 700;
+    font-weight: bold;
+    font-size: 14px;
 }
 
-.options .module label {
+.options button, .options input, .options select {
-    font: 12px "Open Sans", sans-serif;
+    font-size: 13px;
+}
+
+.options .module input, .options .module select {
+    background: #f3f3f3;
+    border: solid 1px #ccc;
+    transition: box-shadow 0.3s, border 0.3s;
+}
+
+.options .module input:focus, .options .module select:focus {
+    background: #fff;
+    transition: background-color 100ms linear;
+    border: solid 1px rgba( 227, 79, 66, .5 );
+    box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
 }
 
 .volValue {

options.html

@@ -102,7 +102,7 @@
                   <option value="nin">Nin</option>
                 </select>
               </form>
-              <span class="selectable_theme theme_calm">
+              <span class="label selectable_theme theme_calm">
                 For new features check <a href="https://github.com/iHedgehog/twister-calm">twister-calm repository</a>!
               </span>
             </div>

theme_calm/css/style.css

@@ -1616,18 +1616,18 @@ textarea.splited-post {
 
 .login .header-bold {
     display: block;
-    width: 720px;
+    width: 500px;
     margin: 0px auto 12px auto;
 }
 
-.login .module, .optionsPage .module {
+.login .module {
     padding: 20px;
     width: 500px;
     margin: 10px auto;
     border: 3px solid #c7cdda;
     border-radius: 6px;
 }
-.login .module p, .optionsPage .module p{
+.login .module p {
     font: 14px "Open Sans", sans-serif;
     margin-bottom: 5px;
 
@@ -1644,7 +1644,7 @@ textarea.splited-post {
     background: #fff;
     transition: background-color 100ms linear;
 }
-.login .module select, .optionsPage select{
+.login .module select {
     height: 30px;
     font: 13px/24px "Open sans";
     text-align: center;
@@ -1752,7 +1752,7 @@ textarea.splited-post {
     position: absolute;
     right: 0;
     top: 0;
-    padding: 3px 10px;
+    padding: 1px 10px;
     cursor: pointer;
     color: rgba( 255, 255, 255, .7 );
     font-weight: bold;
@@ -1769,7 +1769,7 @@ textarea.splited-post {
     position: absolute;
     right: 30px;
     top: 0;
-    padding: 3px 10px;
+    padding: 1px 10px;
     cursor: pointer;
     color: rgba( 255, 255, 255, .7 );
     font-weight: bold;
@@ -2283,6 +2283,8 @@ textarea.splited-post {
     padding: 32px 40px;
     margin: 8px auto;
     background: #fff;
+    border: 3px solid #c7cdda;
+    border-radius: 6px;
 }
 
 .options .container
@@ -2290,12 +2292,55 @@ textarea.splited-post {
     margin: 8px 0px 8px 16px;
 }
 
+.options .label {
+    font-size: 13px;
+}
+
 .options .label-h {
-  font-weight: 700;
+    font-weight: bold;
+    font-size: 14px;
 }
 
-.options .module label {
+.options button, .options input, .options select {
-    font: 12px "Open Sans", sans-serif;
+    font: 13px/24px "Open sans";
+}
+
+.options .module input, .options .module select {
+    background: #f3f3f3;
+    border: solid 1px #ccc;
+    transition: box-shadow 0.3s, border 0.3s;
+}
+
+.options .module input:focus, .options .module select:focus {
+    background: #fff;
+    transition: background-color 100ms linear;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
+}
+
+.options .module input {
+    padding: 0px 10px;
+    text-align: right;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.options .module select {
+    padding: 0px 30px 0px 10px;
+    text-align: center;
+    background: #fff url(../img/form-arrow-down-black.png) no-repeat right center;
+    border: 1px solid #ccc;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+
+/* hide default apperance select element and arrow in firefox */
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    appearance:none;
+    text-indent: 0.01px;
+    text-overflow: '';
+/* end */
 }
 
 .volValue {