fixed current pagination element and input different size than button

rhodecode/public/css/forms.less

@@ -1,320 +1,320 b''
 // forms.less
 // For use in RhodeCode applications;
 // see style guide documentation for guidelines.
 
 form.rcform {
 
     // reset for ie
     // using :not(#ie) prevents older browsers from applying these rules
     input[type="radio"],
     input[type="checkbox"] {
         padding: 0;
         border: none;
     }
     label { display: inline; border:none; padding:0; }
     .label { display: none; }
 
     max-width: 940px;
     line-height: normal;
     white-space: normal;
     font-size: @basefontsize;
     font-family: @text-light;
     color: @form-textcolor;
 
     fieldset,
     .buttons {
         clear: both;
         position: relative;
         display:block;
         width: 100%;
         min-height: 3em;
         margin-bottom: @form-vertical-margin;
         line-height: 1.2em;
 
         &:after { //clearfix
             content: "";
             clear: both;
             width: 100%;
             height: 1em;
         }
 
         .label:not(#ie) {
             display: inline;
             margin: 0 1em 0 .5em;
             line-height: 1em;
         }
     }
 
     legend {
         float: left;
         display: block;
         width: @legend-width;
         margin: 0;
         padding: 0 @padding 0 0;
     }
 
     .fields {
         float: left;
         display: block;
         width: 100%;
         max-width: 500px;
         margin: 0 0 @padding -@legend-width;
         padding: 0 0 0 @legend-width;
 
         .btn {
             display: inline-block;
             margin: 0 1em @padding 0;
         }
     }
 
     input,
     textarea {
         float: left;
         .box-sizing(content-box);
         padding: @input-padding;
         border: @border-thickness-inputs solid @grey4;
     }
 
     input {
         float: left;
         margin: 0 @input-padding 0 0;
         line-height: 1em;
     }
 
     input[type="text"],
     input[type="password"],
     textarea {
         float: left;
         min-width: 200px;
         margin: 0 1em @padding 0;
         color: @form-textcolor;
     }
 
     input[type="text"],
     input[type="password"] {
         height: 1em;
     }
 
     textarea {
         width: 100%;
         margin-top: -1em; //so it lines up with legend
         overflow: auto;
     }
 
     label:not(#ie) {
       cursor: pointer;
       display: inline-block;
       position: relative;
       background: white;
       border-radius: 4px;
       box-shadow: none;
 
       &:hover::after {
         opacity: 0.5;
       }
     }
 
     input[type="radio"]:not(#ie),
     input[type="checkbox"]:not(#ie) {
         // Hide the input, but have it still be clickable
         opacity: 0;
         float: left;
         height: 0;
         width: 0;
         margin: 0;
         padding: 0;
     }
     input[type='radio'] + label:not(#ie),
     input[type='checkbox'] + label:not(#ie) {
         margin: 0;
         clear: none;
     }
 
     input[type='radio'] + label:not(#ie) {
         .circle (@form-radio-width,white);
         float: left;
         display: inline-block;
         height: @form-radio-width;
         width: @form-radio-width;
         margin: 2px 6px 2px 0;
         border: 1px solid @grey4;
         background-color: white;
         box-shadow: none;
         text-indent: -9999px;
         transition: none;
 
         & + .label {
           float: left;
           margin-top: 7px
         }
     }
 
     input[type='radio']:checked + label:not(#ie) {
         margin: 0 4px 0 -2px;
         padding: 3px;
         border-style: double;
         border-color: white;
         border-width: thick;
         background-color: @rcblue;
         box-shadow: none;
     }
 
     input[type='checkbox'] + label:not(#ie) {
         float: left;
         width: @form-check-width;
         height: @form-check-width;
         margin: 0 5px 1em 0;
         border: 1px solid @grey3;
         .border-radius(@border-radius);
         background-color: white;
         box-shadow: none;
         text-indent: -9999px;
         transition: none;
 
         &:after {
             content: '';
             width: 9px;
             height: 5px;
             position: absolute;
             top: 4px;
             left: 4px;
             border: 3px solid @grey3;
             border-top: none;
             border-right: none;
             background: transparent;
             opacity: 0;
             transform: rotate(-45deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
 
             -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */        }
 
         & + .label {
           float: left;
           margin-top: 5px
         }
     }
 
     input[type=checkbox]:not(#ie) {
       visibility: hidden;
       &:checked + label:after {
         opacity: 1;
       }
     }
 
     // center checkbox and label on a drop-down
     .drop-menu + select + input[type='checkbox'] + label:not(#ie) {
       margin-top:10px;
 
       & + .label {
         margin-top: 15px;
       }
     }
 
     .formlist {
         position: relative;
         float: left;
         margin:  0;
         padding: 0;
 
         li {
             list-style-type: none;
 
             &:after {
                 content: "";
                 float: left;
                 display: block;
                 height: @padding;
                 width: 100%;
             }
         }
     }
 
     .drop-menu {
         float: left;
         margin: 0 @input-padding 0 0;
     }
 
     .help-block,
     .error-message {
         display: block;
         clear: both;
         margin: @textmargin 0;
     }
 
     .error-message {
         margin-top: 5px;
     }
 
     input[type=submit] {
         &:extend(.btn-primary);
 
         &:hover {
             &:extend(.btn-primary:hover);
         }
     }
 
     input[type=reset] {
         &:extend(.btn-default);
 
         &:hover {
             &:extend(.btn-default:hover);
         }
     }
 
     select,
     option:checked {
         background-color: @rclightblue;
     }
 
 }
 
 .badged-field {
     .user-badge {
         line-height: 25px;
-        padding: .5em;
+        padding: .4em;
         border-radius: @border-radius;
         border-top: 1px solid @grey4;
         border-left: 1px solid @grey4;
         border-bottom: 1px solid @grey4;
         font-size: 14px;
         font-style: normal;
         color: @text-light;
         background: @grey7;
         display: inline-block;
         vertical-align: top;
         cursor: default;
         margin-right: -2px;
     }
     .badge-input-container {
         display: flex;
         position: relative;
     }
     .user-disabled {
         text-decoration: line-through;
     }
     .badge-input-wrap {
         display: inline-block;
     }
 }
 
 // for situations where we wish to display the form value but not the form input
 input.input-valuedisplay {
     border: none;
 }
 
 // for forms which only display information
 .infoform {
     .fields {
         .field {
             label,
             .label,
             input,
             .input {
                 margin-top: 0;
                 margin-bottom: 0;
                 padding-top: 0;
                 padding-bottom: 0;
             }
         }
     }
 }

rhodecode/public/css/navigation.less

@@ -1,746 +1,752 b''
 // navigation.less
 // For use in RhodeCode applications;
 // see style guide documentation for guidelines.
 
 // TOP MAIN DARK NAVIGATION
 
 .header .main_nav.horizontal-list {
     float: right;
     color: @grey4;
         > li {
             a {
                 color: @grey4;
                 }
             }
 }
 
 // HEADER NAVIGATION
 
 .horizontal-list {
     display: block;
     margin: 0;
     padding: 0;
     -webkit-padding-start: 0;
     text-align: left;
     font-size: @navigation-fontsize;
     color: @grey6;
     z-index:10;
 
     li {
         line-height: 1em;
         list-style-type: none;
         margin: 0 20px 0 0;
 
         a {
             padding: 0 .5em;
 
             &.menu_link_notifications {
                 .pill(7px,@rcblue);
                 display: inline;
                 margin: 0 7px 0 .7em;
                 font-size: @basefontsize;
                 color: white;
 
                 &.empty {
                     background-color: @grey4;
                 }
 
                 &:hover {
                     background-color: @rcdarkblue;
                 }
             }
         }
         .pill_container {
             margin: 1.25em 0px 0px 0px;
             float: right;
         }
 
         &#quick_login_li {
             &:hover {
                 color: @grey5;
             }
 
             a.menu_link_notifications {
                 color: white;
             }
 
             .user {
                 padding-bottom: 10px;
             }
         }
 
         &:before { content: none; }
 
         &:last-child {
             .menulabel {
                 padding-right: 0;
                 border-right: none;
 
                 .show_more {
                     padding-right: 0;
                 }
             }
 
             &> a {
                 border-bottom: none;
             }
         }
 
         &.open {
 
             a {
                 color: white;
             }
         }
 
         &:focus {
             outline: none;
         }
 
         ul li  {
             display: block;
 
             &:last-child> a {
                 border-bottom: none;
             }
 
             ul li:last-child a {
                 /* we don't expect more then 3 levels of submenu and the third
                 level can have different html structure */
                 border-bottom: none;
             }
         }
     }
 
     > li {
         float: left;
         display: block;
         padding: 0;
 
         > a,
         &.has_select2 a {
             display: block;
             padding: 10px 0;
         }
 
         .menulabel {
             line-height: 1em;
             // for this specifically we do not use a variable
         }
 
         .pr_notifications {
             padding-left: .5em;
         }
 
         .pr_notifications + .menulabel {
             display:inline;
             padding-left: 0;
         }
 
         &:hover,
         &.open,
         &.active {
             a {
                 color: @rcblue;
             }
         }
     }
 
     pre {
         margin: 0;
         padding: 0;
     }
 
     .select2-container,
     .menulink.childs {
         position: relative;
     }
 
     #quick_login {
 
         li a {
             padding: .5em 0;
             border-bottom: none;
             color: @grey2;
 
             &:hover { color: @grey1; }
         }
     }
 
     #quick_login_link {
         display: inline-block;
 
         .gravatar {
             border: 1px solid @grey5;
         }
 
         .gravatar-login {
             height: 20px;
             width: 20px;
             margin: -8px 0;
             padding: 0;
         }
 
         &:hover .user {
             color: @grey6;
         }
     }
 }
 .header .horizontal-list {
 
     li {
 
         &#quick_login_li {
             padding-left: .5em;
 
             &:hover #quick_login_link {
                 color: inherit;
             }
 
             .menu_link_user {
                 padding: 0 2px;
             }
         }
         list-style-type: none;
     }
 
     > li {
 
         a {
             padding: 18px 0 12px 0;
             color: @nav-grey;
 
             &.menu_link_notifications {
                 padding: 1px 8px;
             }
         }
 
         &:hover,
         &.open,
         &.active {
             .pill_container a {
                 // don't select text for the pill container, it has it' own
                 // hover behaviour
                 color: @nav-grey;
             }
         }
 
         &:hover,
         &.open,
         &.active {
             a {
                 color: @grey6;
             }
         }
 
         .select2-dropdown-open a {
             color: @grey6;
         }
 
         .repo-switcher {
             padding-left: 0;
 
             .menulabel {
                 padding-left: 0;
             }
         }
     }
 
     li ul li  {
         background-color:@grey2;
 
         a {
             padding: .5em 0;
             border-bottom: @border-thickness solid @border-default-color;
             color: @grey6;
         }
 
          &:last-child a, &.last a{
             border-bottom: none;
         }
 
         &:hover {
             background-color: @grey3;
         }
     }
 
     .submenu {
         margin-top: 5px;
     }
 }
 
 // SUBMENUS
 .navigation .submenu {
     display: none;
 }
 
 .navigation li.open {
     .submenu {
         display: block;
     }
 }
 
 .navigation li:last-child .submenu {
     right: -20px;
     left: auto;
 }
 
 .submenu {
     position: absolute;
     top: 100%;
     left: 0;
     min-width: 150px;
     margin: 6px 0 0;
     padding: 0;
     text-align: left;
     font-family: @text-light;
     border-radius: @border-radius;
     z-index: 20;
 
     li {
         display: block;
         margin: 0;
         padding: 0 .5em;
         line-height: 1em;
         color: @grey3;
         background-color: @grey6;
         list-style-type: none;
 
         a {
             display: block;
             width: 100%;
             padding: .5em 0;
             border-right: none;
             border-bottom: @border-thickness solid white;
             color: @grey3;
         }
 
         ul {
             display: none;
             position: absolute;
             top: 0;
             right: 100%;
             padding: 0;
             z-index: 30;
         }
         &:hover {
             background-color: @grey5;
             -webkit-transition: background .3s;
                -moz-transition: background .3s;
                  -o-transition: background .3s;
                     transition: background .3s;
 
             ul {
                 display: block;
             }
         }
     }
 
 }
 
 
 
 
 // repo dropdown
 .quick_repo_menu {
     width: 15px;
     text-align: center;
     position: relative;
     cursor: pointer;
 
     div {
         overflow: visible !important;
     }
 
     &.sorting {
         cursor: auto;
     }
 
     &:hover {
         .menu_items_container {
             position: absolute;
             display: block;
         }
         .menu_items {
             display: block;
         }
     }
 
     i {
         margin: 0;
         color: @grey4;
     }
 
     .menu_items_container {
         position: absolute;
         top: 0;
         left: 100%;
         margin: 0;
         padding: 0;
         list-style: none;
         background-color: @grey6;
         z-index: 999;
         text-align: left;
 
         a {
             color: @grey2;
         }
 
         ul.menu_items {
             margin: 0;
             padding: 0;
         }
 
         li {
             margin: 0;
             padding: 0;
             line-height: 1em;
             list-style-type: none;
 
             a {
                 display: block;
                 height: 16px;
                 padding: 8px; //must add up to td height (28px)
                 width: 120px; // set width
 
                 &:hover {
                     background-color: @grey5;
                     -webkit-transition: background .3s;
                        -moz-transition: background .3s;
                          -o-transition: background .3s;
                             transition: background .3s;
                 }
             }
         }
     }
 }
 
 // Header Repository Switcher
 // Select2 Dropdown
 #select2-drop.select2-drop.repo-switcher-dropdown  {
     width: auto !important;
     margin-top: 5px;
     padding: 1em 0;
     text-align: left;
     .border-radius-bottom(@border-radius);
     border-color: transparent;
     color: @grey6;
     background-color: @grey2;
 
     input {
         min-width: 90%;
     }
 
     ul.select2-result-sub {
 
         li {
             line-height: 1em;
 
             &:hover,
             &.select2-highlighted {
                 background-color: @grey3;
             }
         }
 
         &:before { content: none; }
     }
 
     ul.select2-results {
         min-width: 200px;
         margin: 0;
         padding: 0;
         list-style-type: none;
         overflow-x: visible;
         overflow-y: scroll;
 
         li {
             padding: 0 8px;
             line-height: 1em;
             color: @grey6;
 
             &>.select2-result-label {
                 padding: 8px 0;
                 border-bottom: @border-thickness solid @grey3;
                 white-space: nowrap;
                 color: @grey5;
                 cursor: pointer;
             }
 
             &.select2-result-with-children {
                 margin: 0;
                 padding: 0;
             }
 
             &.select2-result-unselectable > .select2-result-label {
                 margin: 0 8px;
             }
 
         }
     }
 
     ul.select2-result-sub {
         margin: 0;
         padding: 0;
 
         li {
             display: block;
             margin: 0;
             border-right: none;
             line-height: 1em;
             font-family: @text-light;
             color: @grey2;
             list-style-type: none;
 
             &:hover {
                 background-color: @grey3;
             }
         }
     }
 }
 
 
 #context-bar {
     display: block;
     margin: 0 auto 20px 0;
     padding: 0 @header-padding;
     background-color: @grey7;
 
     .clear {
         clear: both;
     }
 }
 
 ul#context-pages {
     li {
         list-style-type: none;
 
         a {
             color: @grey3;
 
             &:hover {
                 color: @grey2;
             }
         }
 
         &.active {
             // special case, non-variable color
             border-bottom: 2px solid @rcblue;
 
             a {
                 color: @rcblue;
             }
         }
     }
 }
 
 // PAGINATION
 
 .pagination {
     border: @border-thickness solid @grey5;
     color: @grey2;
     box-shadow: @button-shadow;
 
     .current {
         color: @grey4;
     }
 }
 
 .dataTables_processing {
     text-align: center;
     font-size: 1.1em;
     position: relative;
     top: 95px;
 }
 
 .dataTables_paginate, .pagination-wh {
     text-align: left;
     display: inline-block;
     border-left: 1px solid @grey5;
     float: none;
     overflow: hidden;
     box-shadow: @button-shadow;
 
     .paginate_button, .pager_curpage,
     .pager_link, .pg-previous, .pg-next, .pager_dotdot {
         display: inline-block;
         padding: @menupadding/4 @menupadding;
         border: 1px solid @grey5;
         border-left: 0;
         color: @grey2;
         cursor: pointer;
         float: left;
 
         &:hover {
             color: @rcdarkblue;
         }
     }
 
-    .pager_curpage, .pager_dotdot,
-    .paginate_button.current, .paginate_button.disabled,
+    .paginate_button.disabled,
     .disabled {
         color: @grey3;
         cursor: default;
+        opacity: 0.5;
+    }
+
+    .paginate_button.current, .pager_curpage {
+        background: @rcblue;
+        border-color: @rcblue;
+        color: @white;
     }
 
     .ellipsis {
         display: inline-block;
         text-align: left;
         padding: @menupadding/4 @menupadding;
         border: 1px solid @grey5;
         border-left: 0;
         float: left;
     }
 }
 
 // SIDEBAR
 
 .sidebar {
     .block-left;
     clear: left;
     max-width: @sidebar-width;
     margin-right: @sidebarpadding;
     padding-right: @sidebarpadding;
     font-family: @text-regular;
     color: @grey1;
 
     &#graph_nodes {
         clear:both;
         width: auto;
         margin-left: -100px;
         padding: 0;
         border: none;
     }
 
     .nav-pills {
         margin: 0;
     }
 
     .nav {
         list-style: none;
         padding: 0;
 
         li {
             padding-bottom: @menupadding;
             line-height: 1em;
             color: @grey4;
             list-style-type: none;
 
             &.active a {
                 color: @grey2;
             }
 
             a {
                 color: @grey4;
             }
         }
 
     }
 }
 
 .main_filter_help_box {
     padding: 7px 7px;
     display: inline-block;
     vertical-align: top;
     background: inherit;
     position: absolute;
     right: 0;
     top: 9px;
 }
 
 .main_filter_input_box {
     display: inline-block;
 
     .searchItems {
         display:flex;
         background: @black;
         padding: 0px;
         border-radius: 3px;
         border: 1px solid @black;
 
         a {
             border: none !important;
         }
     }
 
     .searchTag {
         line-height: 28px;
         padding: 0 5px;
 
         .tag {
             color: @grey5;
             border-color: @grey2;
             background: @grey1;
         }
     }
 
     .searchTagFilter {
         background-color: @black !important;
         margin-right: 0;
     }
 
     .searchTagHelp {
         background-color: @grey1 !important;
         margin: 0;
     }
     .searchTagHelp:hover {
         background-color: @grey1 !important;
     }
     .searchTagInput {
         background-color: @grey1 !important;
         margin-right: 0;
     }
 }
 
 .main_filter_box {
     margin: 9px 0 0 0;
 }
 
 #main_filter_help {
     background: @grey3;
     border: 1px solid black;
     position: absolute;
     white-space: pre;
     z-index: 9999;
     color: @nav-grey;
     margin: 1px 7px;
     padding: 0 10px;
 }
 
 input {
 
     &.main_filter_input {
         padding: 5px 10px;
         min-width: 260px;
         color: @grey7;
         background: @black;
         min-height: 18px;
         border: 0;
 
         &:active {
           color: @grey2 !important;
           background: white !important;
         }
         &:focus {
           color: @grey2 !important;
           background: white !important;
         }
     }
 }
 
 
 
 .main_filter_input::placeholder {
     color: @nav-grey;
     opacity: 1;
 }
 
 .notice-box {
     display:block !important;
     padding: 9px 0 !important;
 }
 
 .menulabel-notice {
     border: 1px solid @color5;
     padding:7px 10px;
     color: @color5;
 }

rhodecode/public/css/type.less

@@ -1,566 +1,566 b''
 //
 // Typography
 // modified from Bootstrap
 // --------------------------------------------------
 
 // Base
 body {
     font-size: @basefontsize;
     font-family: @text-light;
     letter-spacing: .02em;
     color: @grey2;
 }
 
 #content, label{
   font-size: @basefontsize;
 }
 
 label {
   color: @grey2;
 }
 
 ::selection { background: @rchighlightblue; }
 
 // Headings
 // -------------------------
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   margin: 0 0 @textmargin 0;
   padding: 0;
   line-height: 1.8em;
   color: @text-color;
   a {
     color: @rcblue;
   }
 }
 
 h1, .h1 { font-size: 1.54em; font-weight: @text-bold-weight;     font-family: @text-bold; }
 h2, .h2 { font-size: 1.23em; font-weight: @text-semibold-weight; font-family: @text-semibold;  }
 h3, .h3 { font-size: 1.23em;                                     font-family: @text-regular; }
 h4, .h4 { font-size: 1em;    font-weight: @text-bold-weight;     font-family: @text-bold; }
 h5, .h5 { font-size: 1em;    font-weight: @text-bold-weight;     font-family: @text-bold; }
 h6, .h6 { font-size: 1em;    font-weight: @text-bold-weight;     font-family: @text-bold; }
 
 // Breadcrumbs
 .breadcrumbs {
     font-size: @repo-title-fontsize;
     margin: 0;
 }
 
 .breadcrumbs_light {
   float:left;
   font-size: 1.3em;
   line-height: 38px;
 }
 
 // Body text
 // -------------------------
 
 p {
     margin: 0 0 @textmargin 0;
     padding: 0;
     line-height: 2em;
 }
 
 .lead {
   margin-bottom: @textmargin;
   font-weight: 300;
   line-height: 1.4;
 
   @media (min-width: @screen-sm-min) {
     font-size: (@basefontsize * 1.5);
   }
 }
 
 a,
 .link {
     color: @rcblue;
     text-decoration: none;
     outline: none;
     cursor: pointer;
 
     &:focus {
         outline: none;
     }
 
     &:hover {
         color: @rcdarkblue;
     }
 }
 
 img {
     border: none;
     outline: none;
 }
 
 strong {
   font-weight: @text-bold-weight;
   font-family: @text-bold;
 }
 
 em {
   font-family: @text-italic;
   font-style: italic;
 }
 
 strong em,
 em strong {
   font-style: italic;
   font-weight: @text-bold-italic-weight;
   font-family: @text-bold-italic;
 }
 
 //TODO: lisa: b and i are depreciated, but we are still using them in places.
 //            Should probably make some decision whether to keep or lose these.
 b {
 
 }
 
 i {
     font-style: normal;
 }
 
 label {
     color: @text-color;
 
     input[type="checkbox"] {
         margin-right: 1em;
     }
     input[type="radio"] {
         margin-right: 1em;
     }
 }
 
 code,
 .code {
   font-size: .95em;
   font-family: @text-code;
   color: @grey3;
 
   a {
       color: lighten(@rcblue,10%)
   }
 }
 
 pre {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-size: @basefontsize*.95;
     line-height: 1.4em;
     font-family: @text-code;
     color: @grey3;
 }
 
 // Emphasis & misc
 // -------------------------
 .discreet {
   color: @grey4;
   font-size: 85%;
   font-weight: normal;
 
   a {
     color: @grey4;
 
     &:hover {
       color: @rcdarkblue;
     }
   }
 }
 
 small,
 .small {
   font-size: 75%;
   font-weight: normal;
   line-height: 1em;
 }
 
 mark,
 .mark {
   padding: .2em;
 }
 
 // Alignment
 .text-left           { text-align: left; }
 .text-right          { text-align: right; }
 .text-center         { text-align: center; }
 .text-justify        { text-align: justify; }
 .text-nowrap         { white-space: nowrap; }
 
 // Transformation
 .text-lowercase      { text-transform: lowercase; }
 .text-uppercase      { text-transform: uppercase; }
 .text-capitalize     { text-transform: capitalize; }
 
 // Contextual colors
 .text-muted {
   color: @grey4;
 }
 .text-primary {
   color: @rcblue;
 }
 .text-success {
   color: @alert1;
 }
 .text-info {
   color: @alert4;
 }
 .text-warning {
   color: @alert3;
 }
 .text-danger {
   color: @alert2;
 }
 
 // Contextual backgrounds
 .bg-primary {
   background-color: white;
 }
 .bg-success {
   background-color: @alert1;
 }
 .bg-info {
   background-color: @alert4;
 }
 .bg-warning {
   background-color: @alert3;
 }
 .bg-danger {
   background-color: @alert2;
 }
 
 
 // Page header
 // -------------------------
 
 .page-header {
   margin: @pagepadding 0 @textmargin;
   border-bottom: @border-thickness solid @grey5;
 }
 
 .title {
     clear: both;
     float: left;
     width: 100%;
-    margin: @pagepadding/2 0 0;
+    margin: @pagepadding/2 0 @pagepadding/4;
     min-height: 25px;
 
     .breadcrumbs {
         float: left;
         clear: both;
         width: 700px;
         margin: 0;
 
         .q_filter_box {
           margin-right: @padding;
         }
     }
 
     h1 a {
         color: @rcblue;
     }
 
     input{
         margin-right: @padding;
     }
 
     h5, .h5 {
         color: @grey1;
         margin-bottom: @space;
 
         span {
             display: inline-block;
         }
     }
 
     p {
       margin-bottom: 0;
     }
 
     .links {
         float: right;
         display: inline;
         margin: 0;
         padding-left: 0;
         list-style: none;
         text-align: right;
 
         li {
           float: right;
           list-style-type: none;
         }
 
         a {
             display: inline-block;
             margin-left: @textmargin/2;
         }
     }
 
     .title-content {
       float: left;
       margin: 0;
       padding: 0;
 
       & + .breadcrumbs {
         margin-top: @padding;
       }
 
       & + .links {
         margin-top: -@button-padding;
 
         & + .breadcrumbs {
           margin-top: @padding;
         }
       }
 
       .repo-group-desc {
         padding: 8px 0px 0px 0px;
       }
     }
 
     .title-main {
       font-size: @repo-title-fontsize;
     }
 
     .title-description {
       margin-top: .5em;
     }
 
     .q_filter_box {
       width: 200px;
     }
 
 }
 
 #readme .title {
   text-transform: none;
 }
 
 // Lists
 // -------------------------
 
 // Unordered and Ordered lists
 ul,
 ol {
   margin-top: 0;
   margin-bottom: @textmargin;
   ul,
   ol {
     margin-bottom: 0;
   }
 }
 
 li {
   line-height: 2em;
 }
 
 ul li {
   position: relative;
   list-style-type: disc;
 
   p:first-child {
     display:inline;
   }
 }
 
 // List options
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
 .list-unstyled {
   padding-left: 0;
   list-style: none;
   li:before { content: none; }
 }
 
 // Inline turns list items into inline-block
 .list-inline {
   .list-unstyled();
   margin-left: -5px;
 
   > li {
     display: inline-block;
     padding-left: 5px;
     padding-right: 5px;
   }
 }
 
 // Description Lists
 
 dl {
   margin-top: 0; // Remove browser default
   margin-bottom: @textmargin;
 }
 
 dt,
 dd {
   line-height: 1.4em;
 }
 
 dt {
   margin: @textmargin 0 0 0;
   font-weight: @text-bold-weight;
   font-family: @text-bold;
 }
 
 dd {
   margin-left: 0; // Undo browser default
 }
 
 // Horizontal description lists
 // Defaults to being stacked without any of the below styles applied, until the
 // grid breakpoint is reached (default of ~768px).
 // These are used in forms as well; see style guide.
 // TODO: lisa: These should really not be used in forms.
 
 .dl-horizontal {
 
     overflow: hidden;
     margin-bottom: @space;
 
     dt, dd {
       float: left;
       margin: 5px 0 5px 0;
     }
 
     dt {
         clear: left;
         width: @label-width - @form-vertical-margin;
     }
 
     dd {
         &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is  present
         margin-left: @form-vertical-margin;
         max-width: @form-max-width - (@label-width - @form-vertical-margin) - @form-vertical-margin;
     }
 
     pre {
         margin: 0;
     }
 
     &.settings {
       dt {
         text-align: left;
       }
     }
 
     @media (min-width: 768px) {
       dt {
         float: left;
         width: 185px;
         clear: left;
         text-align: right;
       }
       dd {
         margin-left: 20px;
       }
     }
 }
 
 
 // Misc
 // -------------------------
 
 // Abbreviations and acronyms
 abbr[title],
 abbr[data-original-title] {
   cursor: help;
   border-bottom: @border-thickness dotted @grey4;
 }
 .initialism {
   font-size: 90%;
   text-transform: uppercase;
 }
 
 // Blockquotes
 blockquote {
   padding: 1em 2em;
   margin: 0 0 2em;
   font-size: @basefontsize;
   border-left: 2px solid @grey6;
 
   p,
   ul,
   ol {
     &:last-child {
       margin-bottom: 0;
     }
   }
 
   footer,
   small,
   .small {
     display: block;
     font-size: 80%;
 
     &:before {
       content: '\2014 \00A0'; // em dash, nbsp
     }
   }
 }
 
 // Opposite alignment of blockquote
 //
 .blockquote-reverse,
 blockquote.pull-right {
   padding-right: 15px;
   padding-left: 0;
   border-right: 5px solid @grey6;
   border-left: 0;
   text-align: right;
 
   // Account for citation
   footer,
   small,
   .small {
     &:before { content: ''; }
     &:after {
       content: '\00A0 \2014'; // nbsp, em dash
     }
   }
 }
 
 // Addresses
 address {
   margin-bottom: 2em;
   font-style: normal;
   line-height: 1.8em;
 }
 
 .error-message {
     display: block;
     margin: @padding/3 0;
     color: @alert2;
 }
 
 .issue-tracker-link {
     color: @rcblue;
 }
 
 .info_text{
   font-size: @basefontsize;
   color: @grey4;
   font-family: @text-regular;
 }
 
 .help-block-inline {
   margin: 0;
 }
 
 // help block text
 .help-block {
   display: block;
   margin: 0 0 @padding;
   color: @grey4;
   font-family: @text-light;
   &.pre-formatting {
       white-space: pre-wrap;
   }
 }
 
 .error-message {
   display: block;
   margin: @padding/3 0;
   color: @alert2;
 }

rhodecode/public/css/variables.less

@@ -1,152 +1,152 b''
 // variables for use in all RhodeCode products
 
 // FONTS
 //Primary Colors (brand)
 @rcblue: #427cc9;		//RhodeCode blue
 @rcdarkblue: #305b91;	//RhodeCode dark blue
 @rclightblue: lighten(@rcblue, 30%);
 @rchighlightblue: lighten(@rcblue, 35%);
 
 // Secondary Colors (greyscale)
 @black: #000;
 @white: #fff;
 @grey1: #2B2B2D;		//midnight
 @grey2: #5C5C5C;		//charcoal
 @grey3: #7E7F7F;		//tungsten
 @grey4: #949494;		//light grey
 @grey5: #dbd9da;		//greyish
 @grey6: #eeeeee;		//silver
 @grey7: #F5F5F5;		//light silver
 
 // special for navigation
 @nav-grey: #CDCCCD;
 
 @grey5-alpha: rgba(219, 217, 218, 0.3);
 
 // Tertiary Colors
 @color1: #879938;		//olive green
 @color2: #fcc93a;		//bright yellow
 @color3: #ff9e07;		//orange-yellow
 @color4: #fc663a;		//bright orange
 @color5: #d63d44;		//signal red
 @color6: #99287c;		//violet
 @color7: #682668;		//dark purple
 @color8: #194f8e;		//dark blue
 
 // Alert Colors (bright)
 @alert1: #0ac878;		//bright green
 @alert2: #e85e4d;		//soft red
 @alert3: #ffc854;		//corn yellow
 @alert4: #84a5d2;		//light blue
 
 // Alert Inner Colors
 @alert1-inner: #daf7eb;		//bright green
 @alert2-inner: #fbdfdb;		//soft red
 @alert3-inner: #fff4dd;		//corn yellow
 @alert4-inner: #e6edf6;		//light blue
 
 // Highlight color for lines and colors
 @comment-highlight-color: #ffd887;
 
 // FONTS
 @basefontsize: 13px;
 @navigation-fontsize: 14px;
 @journal-fontsize: @basefontsize+7px;
 @text-color: @grey2;
 @repo-title-fontsize: 18px;
 
 @text-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
 
 @text-italic: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 @text-bold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-bold-weight: 600;
 
 @text-semibold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-semibold-weight: 500;
 
 @text-bold-italic: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-bold-italic-weight: 600;
 
 @text-code: @text-monospace;
 @text-light: @text-regular;
 
 
 // Used for .close buttons
 @text-bootstrap: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 @panel-title: @basefontsize;
 @panel-footer: @basefontsize;
 
 // BORDERS
 @border-thickness: 1px;
 @border-thickness-buttons: 1px;
 @border-thickness-tags: 1px;
 @border-radius: 2px;
 @border-default-color: @grey5;
 @border-highlight-color: @grey4;
 
 // SPACING
 @contentpadding: 15px;  //padding on left and right of pages
 @pagepadding: 40px;		//padding on top and bottom of pages
 @menupadding: 12px;		//padding for sidebar and content
 @sidebarpadding: 15px;	//spacing between sections
 @space: 40px;			//spacing between sections
 @padding: 15px;			//padding inside modules
 @textmargin: 20px;		//spacing below headers
 @header-padding: 20px;
 @panel-padding: @padding;
 @gravatar-size: 16px;   // height/width of gravatar w/o border
 
 // ADMIN
 @form-max-width: 750px;
 
 // FORMS (new)
 @border-thickness-inputs: 1px;
-@input-padding: @button-padding; //needs to match button padding
+@input-padding: .6em; //needs to match button padding
 // TODO: johbo: Needed for working computation of paddings around labels etc.
 // Expected to be replaced once we are done with the form refactoring.
 @input-padding-px: 12px;
 @legend-width: 220px;
 @form-vertical-margin: 20px;
 @form-check-width: 20px;
 @form-radio-width: 10px;
 @form-textcolor: @grey3;
 
 // FORMS
 @label-width: 220px;
 //TODO: lisa: Eventually we don't need both of these; remove
 //            label-width when legend-width is no longer used
 
 @input-border-thickness: @border-thickness;
 @medium-inline-input-width: 115px;
 @input-description-minwidth: 300px;
 @label2-width: 200px;
 @checkboxes-width: 420px;
 @label-summary-minwidth: 80px;
 @search-form-width: 400px;
 @fields-input-m: 400px;
 @fields-input-l: 720px;
 
 // BUTTONS
 @button-padding: .7em;
 @button-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
 
 
 // DEFAULT WIDTHS
 @wrapper-maxwidth: 1600px;
 @sidebar-width: 145px;
 @sidebar-all-width: @sidebar-width + 2 * @sidebarpadding;
 @sidebar-small-width: 100px;
 @sidebar-small-all-width: @sidebar-small-width + 2 * @sidebarpadding;
 @texteditor-width: 660px;
 @maincontent-maxwidth: 940px;
 @pullrequest-width: 1025px;
 @summary-menu-stats-width: 200px;
 
 // SCREEN WIDTHS
 @screen-sm-min: 320px;
 
 // For Bootstrap
 @panel-border-radius: @border-radius;