]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/app.component.scss
Merge branch 'release/2.1.0' into develop
[github/Chocobozzz/PeerTube.git] / client / src / app / app.component.scss
CommitLineData
63c4db6d
C
1@import '_variables';
2@import '_mixins';
3
67167390
C
4.main-row {
5 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
6}
7
b33f657c
C
8.sub-header-container {
9 margin-top: $header-height;
9a0fc840 10 background-color: var(--mainBackgroundColor);
b33f657c
C
11}
12
67167390
C
13.header {
14 height: $header-height;
b33f657c 15 position: fixed;
26c6ee80 16 top: 0;
b33f657c 17 width: 100%;
9a0fc840 18 background-color: var(--mainBackgroundColor);
36f2981f 19 z-index: z(header);
b33f657c
C
20 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
21 display: flex;
ea9f487b 22
67167390 23 .top-left-block {
36f2981f 24 z-index: z(headerLeft);
0d7d2ad9 25 height: $header-height;
d7c152a4 26 display: flex;
26c6ee80 27 align-items: center;
8a44f835 28 min-width: 0;
26c6ee80
C
29
30 .icon {
7797350a 31 @include icon(24px);
26c6ee80
C
32
33 &.icon-menu {
9a0fc840
RK
34 background-color: var(--mainForegroundColor);
35 mask-image: url('../assets/images/header/menu.svg');
1f788f20 36 margin: 0 18px 0 20px;
67167390
C
37 }
38 }
39
f0c5e8b6 40 .peertube-title {
8a44f835 41 @include disable-default-a-behaviour;
f0c5e8b6 42
26c6ee80
C
43 font-size: 20px;
44 font-weight: $font-bold;
45 color: inherit !important;
46 display: flex;
47 align-items: center;
8a44f835 48 overflow: hidden;
26c6ee80 49
8a44f835 50 .instance-name {
ef80c66c
C
51 @include ellipsis;
52
8a44f835
C
53 width: 100%;
54 }
26c6ee80
C
55
56 .icon.icon-logo {
57 display: inline-block;
d2cc03aa 58 background: url('../assets/images/logo.svg') no-repeat;
0727cab0 59 width: 23px;
b33f657c 60 height: 24px;
ea9f487b
C
61 }
62 }
3eeeb87f 63
ece3029b 64 @media screen and (max-width: $mobile-view) {
3daf4002
C
65 width: 70px;
66
f0c5e8b6 67 .peertube-title {
3eeeb87f
C
68 display: none;
69 }
3eeeb87f 70 }
07fa4c97
C
71
72 @media screen and (max-width: 350px) {
73 flex: auto;
74 }
ea9f487b 75 }
ea9f487b 76
b33f657c 77 .header-right {
b33f657c 78 height: $header-height;
26c6ee80
C
79 display: flex;
80 align-items: center;
26c6ee80 81 justify-content: flex-end;
8a44f835 82 white-space: nowrap;
5dfb7c1d 83 flex: 1;
67167390 84 }
897ec54d
C
85}
86
ea9f487b 87footer {
897ec54d 88 padding: 10px 0;
897ec54d 89 font-size: 11px;
efbf0ed7
C
90 margin-top: $footer-margin;
91 height: $footer-height;
b34a444e 92 justify-content: center;
ea9f487b 93}