SPR-869: QC Plugin icon qs

css/area_nav-page-attributes.less

@@ -1,6 +1,10 @@
 /**
  * Page Attribute Icons in the breadcrumb bar
  */
+
+
+/* + + + + +  icons in breadcrumb area  + + + + + */
+
 .page-attributes {
     list-style: none;
     float: right;
@@ -8,17 +12,11 @@
     max-width: 30%;
     margin: -.45em 0 0;
     padding: 0;
+
     @media @screen_max-xs {
         max-width: 90%;
     }
 
-    li.plugin_qc .qc_icon svg {
-        margin-left: 0;
-        margin-top: 0.2em;
-        width: 1.5em;
-        height: 1.5em;
-    }
-
     > li {
         .btn-usertools-wrapper(); // uniform li
         .btn-usertools-num();
@@ -28,26 +26,34 @@
         display: block;
         width: auto;
         min-height: @toggle-size;
-        border: 1px solid @wikiicons-border;
-        border-radius: @ini_default_border_radius;
         text-align: center;
         margin: 0 .25rem;
 
+        strong {
+            display: block;
+            min-height: 1.64rem;
+            border: 1px solid @wikiicons-border;
+            border-radius: @ini_default_border_radius;
+        }
+
         a {
             display: block;
             width: auto;
-            min-height: 26px;
-            &:hover, &:focus, &:active {
+            min-height: 1.64rem;
+            border: 1px solid @wikiicons-border;
+            border-radius: @ini_default_border_radius;
+
+            &:hover,
+            &:focus,
+            &:active {
                 background-color: @ini_nav_menu_hover_color;
                 border-color: @ini_nav_menu_hover_color;
                 color: @ini_nav_menu_hover_bg;
-                span.qc_icon {
-                    &.qc_bad, &.qc_meh, &.qc_good {
-                        fill: @ini_nav_menu_hover_bg;
-                        color: @ini_nav_menu_hover_bg;
-                    }
-                }
 
+                span {
+                    fill: @ini_nav_menu_hover_bg;
+                    color: @ini_nav_menu_hover_bg;
+                }
             }
         }
 
@@ -59,6 +65,5 @@
             font-size: 1.2rem;
             line-height: 1;
         }
-
     }
 }

css/base_mixins.less

@@ -200,7 +200,7 @@
     font-size: @font-size-default;
 
     @media @screen_min-xxlg {
-        margin-top: .25rem;
+        margin-top: .22rem;
     }
 
     @media @screen_max-xxlg {
@@ -208,7 +208,7 @@
     }
 
     @media @screen_max-md {
-        margin-top: .25rem;
+        margin-top: .2rem;
     }
 }
 

css/plugins/qc.less

@@ -2,23 +2,25 @@
  * Styles for the QC plugin
  */
 
-// icon in page attributes
+
+/* + + + + +  icon in page attributes3  + + + + + */
+
 .page-attributes .plugin_qc {
     .qc_icon {
         margin: 0;
 
         svg {
-            margin-top: 0.1em;
-            margin-left: 0.1em;
+            margin-top: .1em;
             width: 1.6em;
             height: 1.6em;
+            font-size: (@font-size-small - .06);
         }
     }
 }
 
+
 // output
 .qc-output {
     font-size: 90%;
     border-bottom: 1px solid @ini_border;
 }
-