X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.scss;h=4a32ad2d7ab83492532204ed64ac5ff1171dfe0b;hb=8cbc40b2fe9d36ef0505b9441276ca561342e9e9;hp=95f306d759cd3d46975098378edc719668ecf809;hpb=602eb142bebb62f1774d6e17c211eef99ace584b;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 95f306d75..4a32ad2d7 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -1,19 +1,117 @@ -#peertube-title a { - color: inherit !important; +@use '_variables' as *; +@use '_mixins' as *; + +.peertube-container { + padding-bottom: 20px; +} + +.main-row { + min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin}); +} + +.sub-header-container { + margin-top: $header-height; + background-color: pvar(--mainBackgroundColor); + width: 100%; +} - &:hover { - color: inherit !important; - text-decoration: none !important; +.header { + height: $header-height; + position: fixed; + top: 0; + width: 100%; + background-color: pvar(--mainBackgroundColor); + z-index: z(header); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); + display: flex; +} + +.top-left-block { + z-index: 1; + height: $header-height; + display: flex; + align-items: center; + min-width: 0; + + .icon { + @include icon(24px); + } + + .icon-menu { + mask-image: url('../assets/images/misc/menu.svg'); + -webkit-mask-image: url('../assets/images/misc/menu.svg'); + + background-color: pvar(--mainForegroundColor); + margin: 0 18px 0 20px; + + @media screen and (max-width: $mobile-view) { + margin: 0 10px; + } } } -header div { - line-height: 25px; - margin-bottom: 30px; +.header-right { + height: $header-height; + display: flex; + align-items: center; + justify-content: flex-end; + white-space: nowrap; + flex: 1; } -.router-outlet-container { - @media screen and (max-width: 400px) { - padding: 0 3px 0 3px; +.peertube-title { + @include disable-default-a-behaviour; + + font-size: 20px; + font-weight: $font-bold; + color: inherit !important; + display: flex; + align-items: center; + overflow: hidden; + padding: 0 0 0 10px; + + .instance-name { + @include ellipsis; + + width: 100%; + + @media screen and (max-width: $mobile-view) { + display: none; + } + } + + .icon.icon-logo { + @include margin-right(0.5rem); + + display: inline-block; + width: 23px; + height: 24px; + } +} + +.broadcast-message { + min-height: 50px; + text-align: center; + margin-bottom: 0; + border-radius: 0; + display: grid; + grid-template-columns: 1fr 30px; + column-gap: 10px; + + my-global-icon { + justify-self: center; + align-self: center; + cursor: pointer; + width: 20px; + } + + ::ng-deep { + p { + font-size: 16px; + } + + p:last-child { + margin-bottom: 0; + } } }