From 3cbfdba6f344f2cb76302e4c4a7321dbc79c7e78 Mon Sep 17 00:00:00 2001 From: Brian Medeiros Date: Tue, 26 Sep 2023 18:46:34 -0600 Subject: [PATCH 1/2] updated CSS to be a little fancier --- lib/website_templates/adf_diag.css | 164 +++++++++++++++++++++-------- 1 file changed, 122 insertions(+), 42 deletions(-) diff --git a/lib/website_templates/adf_diag.css b/lib/website_templates/adf_diag.css index eb2b98641..20db337de 100644 --- a/lib/website_templates/adf_diag.css +++ b/lib/website_templates/adf_diag.css @@ -5,71 +5,94 @@ 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; + /* color: navy; */ } a:visited { - color: rgb(77, 6, 18); + color: #1A658F; } a:hover { - color: #3ca0e7; + color: #00C1D5; } body { @@ -79,10 +102,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; @@ -95,56 +120,110 @@ 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; + /* background-color: #012169; */ + color: #D9D9D6; + font-weight: bold; + padding: 10px; + text-transform: uppercase; + letter-spacing: 1px; + border-top: 1px solid #fff; + border-bottom: 1px solid #ccc; +} + +table.big-table td a { + color: #D9D9D6; +} + +table.big-table td a:hover { + color: #00C1D5; } -table.dataframe ul,ol,dl,p,th { + +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; } @@ -210,7 +289,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; @@ -225,4 +305,4 @@ table.dataframe td { width: 50%; float: left; padding: 20px; -} \ No newline at end of file +} \ No newline at end of file From 4fcc2ea89f15220ea85d70fa93e236e38571bb80 Mon Sep 17 00:00:00 2001 From: Brian Medeiros Date: Mon, 8 Jan 2024 09:46:42 -0700 Subject: [PATCH 2/2] Update adf_diag.css removed commented lines per code review comments. --- lib/website_templates/adf_diag.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/website_templates/adf_diag.css b/lib/website_templates/adf_diag.css index 20db337de..c9270bb9f 100644 --- a/lib/website_templates/adf_diag.css +++ b/lib/website_templates/adf_diag.css @@ -86,7 +86,6 @@ nav.primary-navigation ul li ul li a:hover { a { text-decoration: none; - /* color: navy; */ } a:visited { color: #1A658F; @@ -138,7 +137,6 @@ table.big-table ul,ol,dl,p,th { } table.big-table td { font-family: Tahoma, Geneva, Verdana, sans-serif; - /* background-color: #012169; */ color: #D9D9D6; font-weight: bold; padding: 10px; @@ -305,4 +303,4 @@ table.dataframe thead th{ width: 50%; float: left; padding: 20px; -} \ No newline at end of file +}