chore(css): polishing css styles

Author: sipayRT

lib/static/components/controls/controls.less

@@ -36,7 +36,7 @@
     }
 
     .control-label {
-        border-radius: 2px;
+        border-radius: var(--button-border-radius);
         height: 25px;
     }
 }
@@ -67,11 +67,11 @@
     }
 
     &.control-group__item:first-child {
-        border-radius: 2px 0 0 2px;
+        border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
     }
 
     &.control-group__item:last-child {
-        border-radius: 0 2px 2px 0;
+        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
     }
 
     &.control-group__item:not(:last-child) {
@@ -90,11 +90,11 @@
     }
 
     &.control-group__item:first-child:after {
-        border-radius: 2px 0 0 2px;
+        border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
     }
 
     &.control-group__item:last-child:after {
-        border-radius: 0 2px 2px 0;
+        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
     }
 
     &.control-group__item:hover:after {

lib/static/components/controls/run-button/index.styl

@@ -6,15 +6,16 @@
     font-size: 11px;
     line-height: 11px;
     border: 1px solid #ccc;
-    border-radius: 2px;
-    background-color: #ffeba0;
+    border-radius: var(--button-border-radius);
+    background-color: var(--button-action-color);
 
     .btn {
         flex-grow: 1;
         height: 100%;
-        background-color: #ffeba0;
+        background-color: var(--button-action-color);
         cursor: pointer;
         border: none;
+        border-radius: var(--button-border-radius);
     }
 
     .run-button__dropdown {

lib/static/components/controls/selects/index.styl

@@ -4,11 +4,12 @@
 
     .select__label
         font-size: 11px
+        color: var(--text-color)
         margin: 0
-        padding: 0 5px
+        padding: 0 8px
         line-height: 25px
         background-color: #e7e7e7
-        border-radius: 2px
+        border-radius: var(--button-border-radius)
         border-top-right-radius: 0
         border-bottom-right-radius: 0
 
@@ -17,20 +18,23 @@
         min-width: 70px
         font-size: 11px
         line-height: 13px
-        padding: 5px
+        padding: 5px 8px
         padding-right: 25px
         border: 1px solid #ccc
-        border-radius: 2px
+        border-radius: var(--button-border-radius)
         border-top-left-radius: 0
         border-bottom-left-radius: 0
 
         &:hover
-            border: 1px solid #555;
+            border: 1px solid var(--button-hover-color);
 
         &.active
+            .menu
+                border-radius: 0 0 var(--button-border-radius) var(--button-border-radius)
             &:hover
+                border-radius: 0 var(--button-border-radius) 0 0
             .menu
-                border-color: #ffd947
+                border-color: var(--button-hover-color)
 
         .icon.dropdown
             padding: 0

lib/static/components/suites.jsx

@@ -20,7 +20,7 @@ class Suites extends Component {
 
     _suitesMeasurementCache = new CellMeasurerCache({
         fixedWidth: true,
-        defaultHeight: 40
+        defaultHeight: 30
     });
 
     _renderRow = ({index, key, style, parent}) => {

lib/static/containers/array/array.styl

@@ -3,11 +3,11 @@
     height 25px
     font-size 11px
     border 1px solid #ccc
-    border-radius 2px
+    border-radius var(--button-border-radius)
     user-select none
 
     &:hover 
-        border-color #555
+        border-color var(--button-hover-color)
 
     .array__container 
         display inherit
@@ -21,10 +21,10 @@
 
     .array__item 
         flex-shrink 0
-        background #ffeb9f
+        background var(--button-action-color)
         border 1px solid #cebe7d
-        border-radius 3px
-        padding 4px
+        border-radius 5px
+        padding 4px 5px
         margin 1px
         line-height 11px
 

lib/static/gui.css

@@ -105,8 +105,8 @@
 }
 
 .button_type_suite-controls {
-    padding: 2px 10px;
-    border-radius: 5px;
+    padding: 2px 8px;
+    border-radius: var(--button-border-radius);
     font-size: 13px;
     line-height: 18px;
     margin-right: 10px;
@@ -139,7 +139,7 @@
 }
 
 .ui.buttons {
-    border-radius: 4px;
+    border-radius: var(--button-border-radius);
 }
 
 .ui.buttons:after {

lib/static/styles.css

@@ -77,7 +77,7 @@ main.container {
 
 .ui.dropdown .menu>.item,
 .ui.selection.dropdown .menu>.item {
-    padding: 8px 5px !important;
+    padding: 8px 8px !important;
     font-size: 11px;
 }
 
@@ -125,17 +125,17 @@ main.container {
     cursor: pointer;
     background: #fff;
     border: 1px solid #ccc;
-    border-radius: 2px;
+    border-radius: var(--button-border-radius);
     line-height: 11px;
     height: 23px;
-    padding: 0 5px;
+    padding: 0 8px;
     outline: 0;
     box-sizing: content-box;
     transition: border-color 200ms, background-color 200ms;
 }
 
 .button:hover {
-    border-color: #4b4c5a;
+    border-color: var(--button-hover-color);
 }
 
 .button:disabled {
@@ -284,12 +284,16 @@ main.container {
     line-height: 24px;
     font-weight: bold;
     cursor: pointer;
-    color: #000;
+    color: var(--text-color);
     margin-bottom: 5px;
 
     user-select: none;
 }
 
+.section__title:hover {
+    opacity: 0.7;
+}
+
 .ui.checkbox.indeterminate label:after {
     margin-top: 0.5px;
 }
@@ -298,11 +302,23 @@ main.container {
 .tests-group__title .ui.checkbox {
     vertical-align: bottom;
     margin-right: 5px;
-
+    bottom: 2px;
     width: 18px;
     height: 18px;
 }
 
+.tests-group__title .ui.checkbox {
+    bottom: -2px;
+}
+
+.section__body .ui.checkbox {
+    bottom: 1px;
+}
+
+.section__title_type_browser .ui.checkbox {
+    bottom: 0;
+}
+
 .section__title .ui.checkbox label:before,
 .tests-group__title .ui.checkbox label:before {
     width: 14px;
@@ -442,12 +458,6 @@ details[open] > .details__summary:before {
     border-color: var(--report-color-success) !important;
 }
 
-.section_status_success > .section__title:hover,
-.state-title_success:hover,
-.state-title_updated:hover {
-    color: #5ed15e;
-}
-
 .section_status_fail > .section__title,
 .section_status_error > .section__title,
 .state-title_fail,
@@ -463,13 +473,6 @@ details[open] > .details__summary:before {
     border-color: var(--report-color-fail) !important;
 }
 
-.section_status_fail > .section__title:hover,
-.section_status_error > .section__title:hover,
-.state-title_fail:hover,
-.state-title_error:hover {
-    color: #e66767;
-}
-
 .section__body,
 .tests-group__body {
     padding-left: 10px;
@@ -775,9 +778,9 @@ a:active {
     line-height: 25px;
     font-family: inherit;
     outline: 0;
-    padding: 3px 5px;
+    padding: 3px 8px;
     border: 1px solid #ccc;
-    border-radius: 2px;
+    border-radius: var(--button-border-radius);
     height: 25px;
 }
 

lib/static/variables.css

@@ -2,4 +2,10 @@
     --report-color-fail: #d00;
     --report-color-skip: #8c8c8c;
     --report-color-success: #169737;
+    
+    --button-border-radius: 6px;
+    --button-action-color: #ffeba0;
+    --button-hover-color: #9a9999;
+
+    --text-color: rgba(0, 0, 0, .65)
 }