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