MainLayout.razor.css (1462B)
1 .page { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 } 6 7 main { 8 flex: 1; 9 } 10 11 .sidebar { 12 background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 13 } 14 15 .top-row { 16 background-color: #f7f7f7; 17 border-bottom: 1px solid #d6d5d5; 18 justify-content: flex-end; 19 height: 3.5rem; 20 display: flex; 21 align-items: center; 22 } 23 24 .top-row ::deep a, .top-row ::deep .btn-link { 25 white-space: nowrap; 26 margin-left: 1.5rem; 27 text-decoration: none; 28 } 29 30 .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { 31 text-decoration: underline; 32 } 33 34 .top-row ::deep a:first-child { 35 overflow: hidden; 36 text-overflow: ellipsis; 37 } 38 39 @media (max-width: 640.98px) { 40 .top-row:not(.auth) { 41 display: none; 42 } 43 44 .top-row.auth { 45 justify-content: space-between; 46 } 47 48 .top-row ::deep a, .top-row ::deep .btn-link { 49 margin-left: 0; 50 } 51 } 52 53 @media (min-width: 641px) { 54 .page { 55 flex-direction: row; 56 } 57 58 .sidebar { 59 width: 250px; 60 height: 100vh; 61 position: sticky; 62 top: 0; 63 } 64 65 .top-row { 66 position: sticky; 67 top: 0; 68 z-index: 1; 69 } 70 71 .top-row.auth ::deep a:first-child { 72 flex: 1; 73 text-align: right; 74 width: 0; 75 } 76 77 .top-row, article { 78 padding-left: 2rem !important; 79 padding-right: 1.5rem !important; 80 } 81 }