Merge pull request #261 from brianpm/css_update

updated CSS to be a little fancier
NCAR · Jan 30, 2024 · 9a1f903 · 9a1f903
2 parents 5888958 + 4fcc2ea
commit 9a1f903
Showing 1 changed file with 120 additions and 42 deletions.
diff --git a/lib/website_templates/adf_diag.css b/lib/website_templates/adf_diag.css
@@ -5,75 +5,97 @@ nav.primary-navigation {
   text-align: center;
   font-size: 16px;
 }
-nav.primary-navigation ul li {
+
+nav.primary-navigation ul{
   list-style: none;
-  margin: 0 auto;
-  border-left: 2px solid #3ca0e7;
-  border-right: 2px solid #3ca0e7;
+  margin: 0;
+  padding: 0;
+  background: none;
   display: inline-block;
-  padding: 0 30px;
-  position: relative;
-  text-decoration: none;
-  text-align: center;
-  font-family: arvo;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 100%;
 }
-nav.primary-navigation li a {
+
+nav.primary-navigation li {
+  display: inline-flex;
+  font-family: arvo, Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 16pt;
+  text-align: center;
+  text-transform: none;
+  position: relative;
   color: black;
+  min-width:max-content;
 }
-nav.primary-navigation li a:hover {
-  color: #3ca0e7;
-}
+
 nav.primary-navigation li:hover {
   cursor: pointer;
 }
+
 nav.primary-navigation ul li ul {
   visibility: hidden;
   opacity: 0;
   position: absolute;
-  padding-left: 0;
   left: 0;
-  display: none;
+  margin-top: 1rem;
+  transition: all 0.25s ease;
   background: white;
+  display: inline-block;
+  min-width:max-content;
 }
+
 nav.primary-navigation ul li:hover > ul, nav.primary-navigation ul li ul:hover {
   visibility: visible;
   opacity: 1;
   display: block;
-  min-width: 250px;
+  width: auto;
   text-align: left;
-  padding-top: 20px;
-  box-shadow: 0px 3px 5px -1px #ccc;
+  margin-top: 2rem;
+  background: white;
 }
+
 nav.primary-navigation ul li ul li {
   clear: both;
-  width: 100%;
   text-align: left;
-  margin-bottom: 20px;
+  margin-bottom:0px;
   border-style: none;
+  background: white;
+  display: block;
+}
+
+nav.primary-navigation li a {
+  color: #174ea6;
+  display: block;
+  padding: 8px;
+}
+nav.primary-navigation li a:hover {
+  color: #3ca0e7;
 }
+
 nav.primary-navigation ul li ul li a:hover {
   padding-left: 10px;
   border-left: 2px solid #3ca0e7;
   transition: all 0.3s ease;
+  display: block;
 }
 
+
 .center {
   text-align: center;
 }
 
 a {
   text-decoration: none;
-  color: navy;
 }
 a-blocked {
   text-decoration: none;
   color: black;
 }
 a:visited {
-  color: rgb(77, 6, 18);
+  color: #1A658F;
 }
 a:hover {
-  color: #3ca0e7;
+  color: #00C1D5;
 }
 
 body {
@@ -83,10 +105,12 @@ body {
 ul li ul li a {
   transition: all 0.5s ease;
 }
+
 h1 {
   color: rgb(67, 67, 67);
   font-family: Tahoma, Geneva, Verdana, sans-serif;
 }
+
 h2 {
   color: gray;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
@@ -99,56 +123,109 @@ h3 {
 }
 
 img {
-  max-width:75%;
-  height:auto;
+  max-width: 75%;
+  height: auto;
+}
+
+table.big-table{
+  border-collapse: collapse;
+  border-radius: 10px;
+  background-color: #012169;
 }
 
 table.big-table ul,ol,dl,p,th {
   font-size: 1.0rem;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
-  color: rgb(67, 67, 67);
+  color: #D9D9D6;
   text-align: left;
 }
 table.big-table td {
   font-family: Tahoma, Geneva, Verdana, sans-serif;
-  padding-left: 10px;
+  color: #D9D9D6;
+  font-weight: bold;
+  padding: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #ccc;
 }
 
-table.dataframe ul,ol,dl,p,th {
+table.big-table td a {
+  color: #D9D9D6;
+}
+
+table.big-table td a:hover {
+  color: #00C1D5;
+}
+
+
+table.dataframe {
   font-size: 1.0rem;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
-  color: rgb(67, 67, 67);
   text-align: left;
-}
-table.dataframe td {
+  border-collapse: collapse;
+  width: 100%;
+  color: #53565A;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  margin: auto;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+table.dataframe tr:nth-child(even) td {
   font-family: Tahoma, Geneva, Verdana, sans-serif;
   padding-left: 10px;
+  background-color: #DBE2E9;
+  border: none;
+}
+table.dataframe tr:hover td {
+  background-color: #BBBCBC;
+  color: #53565A;
+  border: none;
+}
+table.dataframe td {
+  background-color: #fff;
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  border: none;
 }
+table.dataframe thead th{
+  background-color: #C3D7EE;
+  color: #1A658F;
+  font-weight: bold;
+  padding: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: none;
+}
+
 
-.fixedDiv
-{
-  position:fixed;
-  top:300px;
-  right:150px;
+.fixedDiv {
+  position: fixed;
+  top: 300px;
+  right: 150px;
 }
 
 #footer {
   width: 100%;
-  height: auto;	
+  height: auto;
   text-align: center;
   -webkit-flex: 0 0 64px;
   flex: 0 0 64px;
 }
 
-.header{
+.header {
   width: auto;
   height: 100%;
 }
 
 .grid-item {
   background-color: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(0, 0, 0, 0.8);
-  padding: 10px;
+  font-family: Tahoma, Geneva, Verdana, sans-serif;
+  border-collapse: collapse;
+  border-radius: 15px;  padding: 10px;
   font-size: 16px;
   text-align: center;
 }
@@ -222,7 +299,8 @@ table.dataframe td {
   border: none;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
   color: rgb(67, 67, 67);
-  background-color: rgba(206, 206, 206, 0.776);;
+  background-color: rgba(206, 206, 206, 0.776);
+  ;
   font-size: 16px;
   cursor: pointer;
   text-align: center;
@@ -237,4 +315,4 @@ table.dataframe td {
   width: 50%;
   float: left;
   padding: 20px;
-} 
+}