diff --git a/Aaru.Server/Components/Layout/MainLayout.razor b/Aaru.Server/Components/Layout/MainLayout.razor index 75a778c4..69b1a0ff 100644 --- a/Aaru.Server/Components/Layout/MainLayout.razor +++ b/Aaru.Server/Components/Layout/MainLayout.razor @@ -19,4 +19,430 @@ An unhandled error has occurred. Reload 🗙 - \ No newline at end of file + + + \ No newline at end of file diff --git a/Aaru.Server/Components/Layout/MainLayout.razor.css b/Aaru.Server/Components/Layout/MainLayout.razor.css deleted file mode 100644 index bc6c82c2..00000000 --- a/Aaru.Server/Components/Layout/MainLayout.razor.css +++ /dev/null @@ -1,423 +0,0 @@ -.navbar.top-row { - display: flex; - align-items: center; - justify-content: space-between; - height: 3.5rem; - padding: 0 1rem; - position: relative; -} - -.navbar-toggler-label { - display: none; - width: 3.5rem; - height: 2.5rem; - cursor: pointer; - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 4px; - z-index: 1100; - margin: 0; -} - -.navbar.top-row { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - height: 3.5rem; - padding: 0 1rem; -} - -.navbar-toggler-label { - display: none; - position: absolute; - left: 1rem; - top: 0.5rem; - width: 3.5rem; - height: 2.5rem; - cursor: pointer; - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 4px; - z-index: 1100; -} - -.navbar .navbar-brand { - color: #fff; - font-size: 1.3rem; - text-decoration: none; - margin-left: auto; -} - -.navbar-toggler { - display: none; -} - -@media (max-width: 640px) { - .navbar-toggler-label { - display: block; - } - - .sidebar { - display: none; - position: fixed; - top: 0; - left: 0; - width: 80vw; - max-width: 350px; - height: 100vh; - z-index: 1000; - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); - background: #23222a; - transition: transform 0.2s ease; - } - - #layout-navbar-toggler:checked + .navbar-toggler-label + .sidebar { - display: block; - } -} - -@media (min-width: 641px) { - .navbar-toggler-label { - display: none !important; - } - - .sidebar { - display: block; - position: sticky; - top: 0; - width: 350px; - height: 100vh; - z-index: 1; - box-shadow: none; - background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); - } -} - -.navbar.top-row { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - height: 3.5rem; - padding: 0 1rem; -} - -.navbar-toggler-label { - display: none; - width: 3.5rem; - height: 2.5rem; - cursor: pointer; - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 4px; - z-index: 1100; - margin-right: 0.5rem; -} - -.navbar .navbar-brand { - color: #fff; - font-size: 1.3rem; - text-decoration: none; - margin-left: auto; -} - -.navbar-toggler { - display: none; -} - -@media (max-width: 640px) { - .navbar-toggler-label { - display: block; - } - - .navbar .navbar-brand { - margin-left: auto; - } - - .sidebar { - display: none; - position: fixed; - top: 0; - left: 0; - width: 80vw; - max-width: 350px; - height: 100vh; - z-index: 1000; - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); - background: #23222a; - transition: transform 0.2s ease; - } - - .navbar-toggler:checked ~ .nav-scrollable, - .navbar-toggler:checked ~ nav, - .navbar-toggler:checked ~ .sidebar { - display: block; - } -} - -@media (min-width: 641px) { - .navbar-toggler-label { - display: none !important; - } - - .sidebar { - display: block; - position: sticky; - top: 0; - width: 350px; - height: 100vh; - z-index: 1; - box-shadow: none; - background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); - } -} - -/* Hamburger toggler and Aaru title alignment in sidebar top row */ -.navbar.top-row { - display: flex; - flex-direction: row; - align-items: center; - height: 3.5rem; - padding: 0 1rem; -} - -.navbar-toggler-label { - display: none; - position: static; - width: 3.5rem; - height: 2.5rem; - cursor: pointer; - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 4px; - z-index: 1100; -} - -.navbar .navbar-brand { - margin-left: auto; - color: #fff; - font-size: 1.3rem; - text-decoration: none; -} - -.navbar-toggler { - display: none; -} - -@media (max-width: 640px) { - .navbar-toggler-label { - display: block; - } - - .navbar .navbar-brand { - margin-left: auto; - } -} - -} -@media (min-width: 641px) { - .navbar-toggler-label { - display: none !important; - } -} - -/* Remove .aaru-title-bar styles, and ensure .navbar-brand is right-aligned in sidebar */ -.navbar .navbar-brand { - margin-left: auto; - color: #fff; - font-size: 1.3rem; - text-decoration: none; -} - -/* Aaru title bar styles */ -.aaru-title-bar { - position: fixed; - left: 0; - top: 0; - height: 3.5rem; - display: flex; - align-items: center; - z-index: 1050; - width: 100vw; - background: rgba(35, 34, 42, 0.95); - border-bottom: 1px solid #44434a; - padding-left: 4.5rem; -} - -.aaru-title-bar .navbar-brand { - font-size: 1.3rem; - color: #fff; - text-decoration: none; -} - -@media (min-width: 641px) { - .aaru-title-bar { - left: 350px; - width: calc(100vw - 350px); - padding-left: 2rem; - background: transparent; - color: #23222a; - border-bottom: none; - } - - .aaru-title-bar .navbar-brand { - color: #23222a; - } -} - -/* Hamburger menu for mobile */ -.navbar-toggler-label { - display: none; - position: fixed; - left: 1rem; - width: 3.5rem; - height: 2.5rem; - cursor: pointer; - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 4px; - z-index: 1100; -} - -.navbar-toggler { - display: none; -} - -@media (max-width: 640px) { - .navbar-toggler-label { - display: block; - } - - .sidebar { - display: none; - position: fixed; - top: 0; - left: 0; - width: 80vw; - max-width: 350px; - height: 100vh; - z-index: 1000; - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); - background: #23222a; - transition: transform 0.2s ease; - } - - .navbar-toggler:checked ~ .sidebar { - display: block; - } -} - -@media (min-width: 641px) { - .navbar-toggler-label { - display: none; - } - - .sidebar { - display: block; - position: sticky; - top: 0; - width: 350px; - height: 100vh; - z-index: 1; - box-shadow: none; - background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); - } -} - -.page { - position: relative; - display: flex; - flex-direction: column; -} - -main { - flex: 1; -} - -.sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); -} - -.top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; - height: 3.5rem; - display: flex; - align-items: center; -} - -.top-row ::deep a, .top-row ::deep .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - text-decoration: none; -} - -.top-row ::deep a:hover, .top-row ::deep .btn-link:hover { - text-decoration: underline; -} - -.top-row ::deep a:first-child { - overflow: hidden; - text-overflow: ellipsis; -} - -@media (max-width: 640.98px) { - .top-row { - justify-content: space-between; - } - - .top-row ::deep a, .top-row ::deep .btn-link { - margin-left: 0; - } -} - -@media (min-width: 641px) { - .page { - flex-direction: row; - } - - .sidebar { - width: 350px; - height: 100vh; - position: sticky; - top: 0; - } - - .top-row { - position: sticky; - top: 0; - z-index: 1; - } - - .top-row.auth ::deep a:first-child { - flex: 1; - text-align: right; - width: 0; - } - - .top-row, article:not(.content) { - padding-left: 2rem !important; - padding-right: 1.5rem !important; - } -} - -#blazor-error-ui { - background: lightyellow; - bottom: 0; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); - display: none; - left: 0; - padding: 0.6rem 1.25rem 0.7rem 1.25rem; - position: fixed; - width: 100%; - z-index: 1000; -} - -#blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; -}