system-info: fix styling for elements

rhodecode/public/css/type.less

@@ -1,578 +1,614 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;
     width: ~"calc(100% - 180px)";
     float: left;
 
     h4 {
         font-size: @basefontsize;
         margin-bottom: 15px;
     }
 }
 
 .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 @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 {
 
       &.repo-title {
         float: none
       }
 
       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;
       }
     }
+
+    &.dt-300 {
+      dt {
+        width: 300px;
+      }
+    }
+
+    &.dt-400 {
+      dt {
+        width: 400px;
+      }
+    }
+
+    &.dt-500 {
+      dt {
+        width: 500px;
+      }
+    }
+
+    &.dt-600 {
+      dt {
+        width: 600px;
+      }
+    }
+
+    &.dt-700 {
+      dt {
+        width: 700px;
+      }
+    }
+
+    &.dt-800 {
+      dt {
+        width: 800px;
+      }
+    }
 }
 
 
 // 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/templates/admin/settings/settings_system.mako

@@ -1,71 +1,63 b''
 
 <div id="update_notice" style="display: none; margin: -40px 0px 20px 0px">
     <div>${_('Checking for updates...')}</div>
 </div>
 
 
 <div class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">${_('System Info')}</h3>
         % if c.allowed_to_snapshot:
             <a href="${h.route_path('admin_settings_system', _query={'snapshot':1})}" class="panel-edit">${_('create summary snapshot')}</a>
         % endif
     </div>
     <div class="panel-body">
-        <dl class="dl-horizontal settings">
+        <dl class="dl-horizontal settings dt-400">
         % for dt, dd, warn in c.data_items:
           <dt>${dt}${':' if dt else '---'}</dt>
           <dd>${dd}${'' if dt else '---'}
               % if warn and warn['message']:
                   <div class="alert-${warn['type']}">
                     <strong>${warn['message']}</strong>
                   </div>
               % endif
           </dd>
         % endfor
         </dl>
     </div>
 </div>
 
 <div class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">${_('VCS Server')}</h3>
     </div>
     <div class="panel-body">
-        <dl class="dl-horizontal settings">
+        <dl class="dl-horizontal settings dt-400">
         % for dt, dd in c.vcsserver_data_items:
           <dt>${dt}${':' if dt else '---'}</dt>
           <dd>${dd}${'' if dt else '---'}</dd>
         % endfor
         </dl>
     </div>
 </div>
 
 <div class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">${_('Python Packages')}</h3>
     </div>
     <div class="panel-body">
-        <table class="table">
-          <colgroup>
-              <col class='label'>
-              <col class='content'>
-          </colgroup>
-          <tbody>
-              % for key, value in c.py_modules['human_value']:
-                  <tr>
-                      <td>${key}</td>
-                      <td>${value}</td>
-                  </tr>
+        <dl class="dl-horizontal settings dt-400">
+        % for dt, dd in c.py_modules['human_value']:
+          <dt>${dt}${':' if dt else '---'}</dt>
+          <dd>${dd}${'' if dt else '---'}</dd>
               % endfor
-          </tbody>
-        </table>
+        </dl>
     </div>
 </div>
 
 <script>
     $('#check_for_update').click(function(e){
         $('#update_notice').show();
         $('#update_notice').load("${h.route_path('admin_settings_system_update')}");
     })
 </script>