Cleaned admin tables css a little

misago/static/misago/admin/css/misago/tables.less

@@ -3,6 +3,9 @@
 // --------------------------------------------------
 
 
+//== Table actions
+//
+//**
 .table-actions {
   margin-bottom: @line-height-computed;
   height: 36px;
@@ -17,22 +20,44 @@
   }
 }
 
+
+//== Table panel
+//
+//**
 .table-panel {
   border: 1px solid @table-panel-border;
   border-radius: @border-radius-base;
   box-shadow: 0px 0px 0px 3px @table-panel-shadow;
   margin-bottom: @line-height-computed;
+}
+
+
+//== Panel header
+//
+//**
+.table-panel {
+  .panel-header {
+
+  }
+}
 
+
+//== Panel table
+//
+//**
+.table-panel {
   table.table {
     margin: 0px;
+  }
+}
 
-    tr {
-      &.active {
-        td {
-          background-color: fadeOut(@brand-warning, 95%);
-        }
-      }
 
+//== Table row
+//
+//**
+.table-panel {
+  table.table {
+    tr {
       &.message-row {
         td {
           padding: @line-height-computed;
@@ -45,6 +70,26 @@
         }
       }
 
+      th {
+        background: @table-header-bg;
+        border: none;
+        padding: @table-condensed-cell-padding @table-cell-padding;
+
+        color: @table-header-color;
+        font-size: @font-size-small;
+      }
+
+      td {
+        background-color: #fff;
+        vertical-align: middle;
+
+        img {
+          border-radius: @border-radius-base;
+          max-width: 30px;
+          max-height: 30px;
+        }
+      }
+
       &:first-child {
         &>:first-child {
           border-top-left-radius: (@border-radius-base - 1);
@@ -64,100 +109,154 @@
           border-bottom-right-radius: (@border-radius-base - 1);
         }
       }
+    }
+  }
+}
 
-      th {
-        background: @table-header-bg;
-        border: none;
-        padding: @table-condensed-cell-padding @table-cell-padding;
-
-        color: @table-header-color;
-        font-size: @font-size-small;
-      }
 
-      td {
-        background-color: #fff;
+//== Row action
+//
+//**
+.table-panel {
+  table.table {
+    tr {
+      td.row-action {
         vertical-align: middle;
+        width: 1%;
+
+        .btn, &>form .btn, .dropdown-toggle {
+          background: none;
+          border-color: transparent;
+          .box-shadow(none);
+          padding: 0px 4px;
+          position: relative;
+          top: 0px;
+          bottom: 0px;
+
+          color: @gray-light;
+          font-size: @font-size-base * 1.6;
+
+          &:hover {
+            top: 0px;
+            bottom: 0px;
+
+            &.btn-default {
+              color: @gray;
+            }
 
-        img {
-          border-radius: @border-radius-base;
-          max-width: 30px;
-          max-height: 30px;
-        }
+            &.btn-primary {
+              color: @brand-secondary;
+            }
 
-        &.row-action {
-          width: 1%;
+            &.btn-danger {
+              color: @brand-danger;
+            }
 
-          .btn, &>form .btn, .dropdown-toggle {
-            padding: 0px;
-            width: 30px;
-            height: 30px;
+            &.btn-warning {
+              color: @brand-warning;
+            }
 
-            font-size: @font-size-large;
-            text-align: center;
+            &.btn-success {
+              color: @brand-success;
+            }
+          }
+
+          &:active {
+            top: 0px;
+            bottom: 0px;
 
-            &>span {
-              position: relative;
-              bottom: -1px;
+            &.btn-default {
+              color: @gray-dark;
+            }
+
+            &.btn-primary {
+              color: darken(@brand-secondary, 20%);
+            }
 
-              &.fa-times {
-                bottom: 1px;
-              }
+            &.btn-danger {
+              color: darken(@brand-danger, 20%);
+            }
 
-              &.fa-pencil {
-                bottom: -2px;
-              }
+            &.btn-warning {
+              color: darken(@brand-warning, 20%);
+            }
+
+            &.btn-success {
+              color: darken(@brand-success, 20%);
             }
           }
         }
+      }
+    }
+  }
+}
 
-        &.row-select {
-          width: 1%;
 
-          label {
-            padding: 0px;
-            width: 24px;
-            height: 24px;
+//== Row select
+//
+//**
+.table-panel {
+  table.table {
+    tr {
+      &.active {
+        td {
+          background-color: fadeOut(@brand-warning, 95%);
+        }
+      }
 
-            text-align: center;
+      td.row-select {
+        width: 1%;
 
-            input {
-              width: 12px;
-              height: 12px;
-            }
+        label {
+          padding: 0px;
+          width: 24px;
+          height: 24px;
 
-            &.ninja-label {
-                border: 0;
-                clip: rect(0 0 0 0);
-                height: 1px;
-                margin: -1px;
-                overflow: hidden;
-                padding: 0;
-                position: absolute;
-                width: 1px;
-            }
+          text-align: center;
+
+          input {
+            width: 12px;
+            height: 12px;
           }
 
-          a {
-            display: block;
-            width: 24px;
-            height: 24px;
+          &.ninja-label {
+              border: 0;
+              clip: rect(0 0 0 0);
+              height: 1px;
+              margin: -1px;
+              overflow: hidden;
+              padding: 0;
+              position: absolute;
+              width: 1px;
+          }
+        }
 
-            span {
-              color: lighten(@gray-light, 5%);
-              font-size: 24px;
-            }
+        a {
+          display: block;
+          width: 24px;
+          height: 24px;
+
+          span {
+            color: lighten(@gray-light, 5%);
+            font-size: 24px;
+          }
 
-            &.active {
-              span {
-                color: @brand-success;
-              }
+          &.active {
+            span {
+              color: @brand-success;
             }
           }
         }
       }
     }
   }
+}
+
 
+//== Table footer
+//
+//**
+.table-panel {
   .table-footer {
     background-color: @form-panel-footer-bg;
     border-radius: 0px 0px (@border-radius-large - 1px) (@border-radius-large - 1px);
@@ -173,3 +272,4 @@
     }
   }
 }
+

misago/static/misago/admin/css/style.css

@@ -6180,9 +6180,6 @@ body {
 .table-panel table.table {
   margin: 0px;
 }
-.table-panel table.table tr.active td {
-  background-color: rgba(240, 173, 78, 0.05);
-}
 .table-panel table.table tr.message-row td {
   padding: 20px;
 }
@@ -6190,18 +6187,6 @@ body {
   margin: 0px;
   font-size: 18px;
 }
-.table-panel table.table tr:first-child > :first-child {
-  border-top-left-radius: 3px;
-}
-.table-panel table.table tr:first-child > :last-child {
-  border-top-right-radius: 3px;
-}
-.table-panel table.table tr:last-child > :first-child {
-  border-bottom-left-radius: 3px;
-}
-.table-panel table.table tr:last-child > :last-child {
-  border-bottom-right-radius: 3px;
-}
 .table-panel table.table tr th {
   background: #ededed;
   border: none;
@@ -6218,33 +6203,100 @@ body {
   max-width: 30px;
   max-height: 30px;
 }
+.table-panel table.table tr:first-child > :first-child {
+  border-top-left-radius: 3px;
+}
+.table-panel table.table tr:first-child > :last-child {
+  border-top-right-radius: 3px;
+}
+.table-panel table.table tr:last-child > :first-child {
+  border-bottom-left-radius: 3px;
+}
+.table-panel table.table tr:last-child > :last-child {
+  border-bottom-right-radius: 3px;
+}
 .table-panel table.table tr td.row-action {
+  vertical-align: middle;
   width: 1%;
 }
 .table-panel table.table tr td.row-action .btn,
 .table-panel table.table tr td.row-action > form .btn,
 .table-panel table.table tr td.row-action .dropdown-toggle {
-  padding: 0px;
-  width: 30px;
-  height: 30px;
-  font-size: 18px;
-  text-align: center;
-}
-.table-panel table.table tr td.row-action .btn > span,
-.table-panel table.table tr td.row-action > form .btn > span,
-.table-panel table.table tr td.row-action .dropdown-toggle > span {
+  background: none;
+  border-color: transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  padding: 0px 4px;
   position: relative;
-  bottom: -1px;
+  top: 0px;
+  bottom: 0px;
+  color: #999999;
+  font-size: 22.4px;
 }
-.table-panel table.table tr td.row-action .btn > span.fa-times,
-.table-panel table.table tr td.row-action > form .btn > span.fa-times,
-.table-panel table.table tr td.row-action .dropdown-toggle > span.fa-times {
-  bottom: 1px;
+.table-panel table.table tr td.row-action .btn:hover,
+.table-panel table.table tr td.row-action > form .btn:hover,
+.table-panel table.table tr td.row-action .dropdown-toggle:hover {
+  top: 0px;
+  bottom: 0px;
 }
-.table-panel table.table tr td.row-action .btn > span.fa-pencil,
-.table-panel table.table tr td.row-action > form .btn > span.fa-pencil,
-.table-panel table.table tr td.row-action .dropdown-toggle > span.fa-pencil {
-  bottom: -2px;
+.table-panel table.table tr td.row-action .btn:hover.btn-default,
+.table-panel table.table tr td.row-action > form .btn:hover.btn-default,
+.table-panel table.table tr td.row-action .dropdown-toggle:hover.btn-default {
+  color: #555555;
+}
+.table-panel table.table tr td.row-action .btn:hover.btn-primary,
+.table-panel table.table tr td.row-action > form .btn:hover.btn-primary,
+.table-panel table.table tr td.row-action .dropdown-toggle:hover.btn-primary {
+  color: #3498db;
+}
+.table-panel table.table tr td.row-action .btn:hover.btn-danger,
+.table-panel table.table tr td.row-action > form .btn:hover.btn-danger,
+.table-panel table.table tr td.row-action .dropdown-toggle:hover.btn-danger {
+  color: #e74c3c;
+}
+.table-panel table.table tr td.row-action .btn:hover.btn-warning,
+.table-panel table.table tr td.row-action > form .btn:hover.btn-warning,
+.table-panel table.table tr td.row-action .dropdown-toggle:hover.btn-warning {
+  color: #f0ad4e;
+}
+.table-panel table.table tr td.row-action .btn:hover.btn-success,
+.table-panel table.table tr td.row-action > form .btn:hover.btn-success,
+.table-panel table.table tr td.row-action .dropdown-toggle:hover.btn-success {
+  color: #2ecc71;
+}
+.table-panel table.table tr td.row-action .btn:active,
+.table-panel table.table tr td.row-action > form .btn:active,
+.table-panel table.table tr td.row-action .dropdown-toggle:active {
+  top: 0px;
+  bottom: 0px;
+}
+.table-panel table.table tr td.row-action .btn:active.btn-default,
+.table-panel table.table tr td.row-action > form .btn:active.btn-default,
+.table-panel table.table tr td.row-action .dropdown-toggle:active.btn-default {
+  color: #333333;
+}
+.table-panel table.table tr td.row-action .btn:active.btn-primary,
+.table-panel table.table tr td.row-action > form .btn:active.btn-primary,
+.table-panel table.table tr td.row-action .dropdown-toggle:active.btn-primary {
+  color: #196090;
+}
+.table-panel table.table tr td.row-action .btn:active.btn-danger,
+.table-panel table.table tr td.row-action > form .btn:active.btn-danger,
+.table-panel table.table tr td.row-action .dropdown-toggle:active.btn-danger {
+  color: #a82315;
+}
+.table-panel table.table tr td.row-action .btn:active.btn-warning,
+.table-panel table.table tr td.row-action > form .btn:active.btn-warning,
+.table-panel table.table tr td.row-action .dropdown-toggle:active.btn-warning {
+  color: #c77c11;
+}
+.table-panel table.table tr td.row-action .btn:active.btn-success,
+.table-panel table.table tr td.row-action > form .btn:active.btn-success,
+.table-panel table.table tr td.row-action .dropdown-toggle:active.btn-success {
+  color: #1b7943;
+}
+.table-panel table.table tr.active td {
+  background-color: rgba(240, 173, 78, 0.05);
 }
 .table-panel table.table tr td.row-select {
   width: 1%;