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