diff --git a/dist/img/noise.png b/dist/img/noise.png new file mode 100644 index 0000000..ec5a828 Binary files /dev/null and b/dist/img/noise.png differ diff --git a/dist/treebird40.css b/dist/treebird40.css index a0f9e98..90b55fa 100644 --- a/dist/treebird40.css +++ b/dist/treebird40.css @@ -51,7 +51,8 @@ ul #main-page { - background-color: #ffffff; + + background-color: rgba(255, 255, 255, 0.9); width: 1000px; margin-left: auto; margin-right: auto; @@ -105,10 +106,10 @@ table.ui-table td { border-top-left-radius: 8px; border-top-right-radius: 8px; - background: rgba(245, 245, 245, 0.8); + background: rgba(250, 250, 250, 0.8); backdrop-filter: blur(12px); width: 1000px; - border-bottom: 2px solid #eaeaea; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05); z-index: 999; position: sticky; top: 0px; @@ -163,11 +164,11 @@ table.ui-table td #main { - width: 608px; - max-width: 608px !important; - min-width: 608px; + background-color: #fff; + width: 610px; + max-width: 610px !important; + min-width: 610px; border-collapse: collapse !important; - background-color: #fafafa; padding: 0; } @@ -179,16 +180,17 @@ table.ui-table td .sidebar { + background: url("/img/noise.png"); + background-attachment: fixed; + backdrop-filter: blur(16px); width: 180px; min-height: 600px; max-width: 180px; min-width: 180px; - background-color: #f6f6f6; } #leftbar { - border-right: 1px solid #cacaca; } #leftbar ul @@ -205,7 +207,6 @@ table.ui-table td #rightbar { - border-left: 1px solid #cacaca; min-width: 210px; max-width: 210px; } @@ -309,19 +310,35 @@ input[type=button], input[type=submit] .sidebarbtn { + position: relative; + top: 0px; display: block; padding: 10px 8px 10px 16px; margin: 4px; border-radius: 8px; - + transition: top .2s, + box-shadow .2s, + background-color .2s; } .sidebarbtn:hover { background-color: #fff; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05); + box-shadow: 0px 2px 0px 0px #f9f9f9, + 0px 2px 5px rgba(0, 0, 0, 0.05); + +; } +.sidebarbtn:active +{ + position: relative; + top: 2px; + background-color: #fff; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.02); +} + + .sidebarbtn.focused {