881f3ff318fa4f3e8ab94930ec313f3adf7fe3bb
[oweals/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     flex: 1;
29     min-width: 0;
30
31     .icon {
32       @include icon(24px);
33
34       &.icon-menu {
35         background-color: var(--mainForegroundColor);
36         mask-image: url('../assets/images/header/menu.svg');
37         margin: 0 18px 0 20px;
38       }
39     }
40
41     #peertube-title {
42       @include disable-default-a-behaviour;
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         overflow: hidden;
52         text-overflow: ellipsis;
53         white-space: nowrap;
54         width: 100%;
55       }
56
57       .icon.icon-logo {
58         display: inline-block;
59         background: url('../assets/images/logo.svg') no-repeat;
60         width: 23px;
61         height: 24px;
62       }
63     }
64
65     @media screen and (max-width: 500px) {
66       width: 70px;
67
68       #peertube-title {
69         display: none;
70       }
71     }
72
73     @media screen and (max-width: 350px) {
74       flex: auto;
75     }
76   }
77
78   .header-right {
79     height: $header-height;
80     display: flex;
81     align-items: center;
82     justify-content: flex-end;
83     white-space: nowrap;
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 }