]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/app.component.scss
e7d05369baf611c23dbe69a6b5194d9c9dd6bdcc
[github/Chocobozzz/PeerTube.git] / client / src / app / app.component.scss
1 @import '_variables';
2 @import '_mixins';
3 @import '~bootstrap/scss/functions';
4 @import '~bootstrap/scss/variables';
5
6 .peertube-container {
7 padding-bottom: 20px;
8 }
9
10 .main-row {
11 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
12 }
13
14 .sub-header-container {
15 margin-top: $header-height;
16 background-color: pvar(--mainBackgroundColor);
17 width: 100%;
18 }
19
20 .header {
21 height: $header-height;
22 position: fixed;
23 top: 0;
24 width: 100%;
25 background-color: pvar(--mainBackgroundColor);
26 z-index: z(header);
27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
28 display: flex;
29 }
30
31 .top-left-block {
32 z-index: 1;
33 height: $header-height;
34 display: flex;
35 align-items: center;
36 min-width: 0;
37
38 .icon {
39 @include icon(24px);
40 }
41
42 .icon-menu {
43 background-color: pvar(--mainForegroundColor);
44 mask-image: url('../assets/images/misc/menu.svg');
45 margin: 0 18px 0 20px;
46
47 @media screen and (max-width: $mobile-view) {
48 margin: 0 10px;
49 }
50 }
51 }
52
53 .header-right {
54 height: $header-height;
55 display: flex;
56 align-items: center;
57 justify-content: flex-end;
58 white-space: nowrap;
59 flex: 1;
60 }
61
62 .peertube-title {
63 @include disable-default-a-behaviour;
64
65 font-size: 20px;
66 font-weight: $font-bold;
67 color: inherit !important;
68 display: flex;
69 align-items: center;
70 overflow: hidden;
71
72 .instance-name {
73 @include ellipsis;
74
75 width: 100%;
76 }
77
78 .icon.icon-logo {
79 display: inline-block;
80 width: 23px;
81 height: 24px;
82 margin-right: .5rem;
83 }
84
85 @media screen and (max-width: $mobile-view) {
86 display: none;
87 }
88 }
89
90 .broadcast-message {
91 min-height: 50px;
92 text-align: center;
93 margin-bottom: 0;
94 border-radius: 0;
95 display: grid;
96 grid-template-columns: 1fr 30px;
97 column-gap: 10px;
98
99 my-global-icon {
100 justify-self: center;
101 align-self: center;
102 cursor: pointer;
103 width: 20px;
104 }
105
106 ::ng-deep {
107 p {
108 font-size: 16px;
109 }
110
111 p:last-child {
112 margin-bottom: 0;
113 }
114 }
115 }