Minor changes to style.css

Author: gcshearman

_site/styles.css

@@ -6,21 +6,14 @@
   width: auto !important;     /* preserves aspect ratio */
 }
 
-
-body {
-  background-color: lightyellow !important;
-}
-
-
-
 /* add tools-tabset css for the setup instructions */ 
 
 .panel-tabset[data-group="tools-tabset"] .choose-your-tool {
   max-width: 90px;
   margin-right: 25px;
   margin-top: 30px;
-  font-weight: 300;
-  font-size: 1.3rem;
+  font-weight: 600;
+  font-size: 1.0rem;
   text-align: left;
   vertical-align: center;
 }
@@ -44,25 +37,33 @@ body {
   font-size: 0.8em;
 }
 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link, 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
-  border: 1px solid  rgb(222, 226, 230);
+
+/* Inactive tabs */
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
+  border: 1.5px solid black;   /* Thinner border */
   border-radius: 10px;
 }
+
+/* Active tab */
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active,
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
+  border: 3px solid black;   /* Thicker border for active */
+}
+
+
 .panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link:hover {
-   border-color: rgb(80,146,221);
-   border-width: 1px;
+   border-color: black;
+   border-width: 5px;
 } 
 
 .panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
 .panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
-  border-color: rgb(80,146,221);
-  border-width: 2px;
+  border-color: black;
+  border-width: 3px;
 }
 
 .panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
-  height: 50%;
+  height: 80%;
   display: block;
   margin-bottom: 2px;
 }

styles.css

@@ -6,21 +6,14 @@
   width: auto !important;     /* preserves aspect ratio */
 }
 
-
-body {
-  background-color: lightyellow !important;
-}
-
-
-
 /* add tools-tabset css for the setup instructions */ 
 
 .panel-tabset[data-group="tools-tabset"] .choose-your-tool {
   max-width: 90px;
   margin-right: 25px;
   margin-top: 30px;
-  font-weight: 300;
-  font-size: 1.3rem;
+  font-weight: 600;
+  font-size: 1.0rem;
   text-align: left;
   vertical-align: center;
 }
@@ -44,25 +37,33 @@ body {
   font-size: 0.8em;
 }
 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link, 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
-.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
-  border: 1px solid  rgb(222, 226, 230);
+
+/* Inactive tabs */
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
+  border: 1.5px solid black;   /* Thinner border */
   border-radius: 10px;
 }
+
+/* Active tab */
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active,
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
+  border: 3px solid black;   /* Thicker border for active */
+}
+
+
 .panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link:hover {
-   border-color: rgb(80,146,221);
-   border-width: 1px;
+   border-color: black;
+   border-width: 5px;
 } 
 
 .panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
 .panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
-  border-color: rgb(80,146,221);
-  border-width: 2px;
+  border-color: black;
+  border-width: 3px;
 }
 
 .panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
-  height: 50%;
+  height: 80%;
   display: block;
   margin-bottom: 2px;
 }