aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/app.component.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/app.component.scss')
-rw-r--r--client/src/app/app.component.scss140
1 files changed, 41 insertions, 99 deletions
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index a656d5c29..008c6d1f0 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -2,10 +2,15 @@
2 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin}); 2 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
3} 3}
4 4
5.sub-header-container {
6 margin-top: $header-height;
7}
8
5.title-menu-left { 9.title-menu-left {
6 position: fixed; 10 position: fixed;
7 height: calc(100vh - #{$header-height}); 11 height: calc(100vh - #{$header-height});
8 padding: 0; 12 padding: 0;
13 width: $menu-width;
9 14
10 .title-menu-left-block.menu { 15 .title-menu-left-block.menu {
11 height: 100%; 16 height: 100%;
@@ -14,125 +19,62 @@
14 19
15.header { 20.header {
16 height: $header-height; 21 height: $header-height;
17 22 position: fixed;
18 .fake-title-block { 23 top: 0;
19 display: inline-block; 24 width: 100%;
20 } 25 background-color: #fff;
26 z-index: 1000;
27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
28 display: flex;
21 29
22 .top-left-block { 30 .top-left-block {
23 z-index: 100; 31 width: $menu-width;
24 background-color: #fff; 32 z-index: 1001;
25 border-right: 1px solid $header-border-color;
26 height: $header-height; 33 height: $header-height;
27 line-height: $header-height;
28 margin-top: 0;
29 margin-bottom: 0;
30 display: flex; 34 display: flex;
31 position: fixed; 35 align-items: center;
32 padding: 0;
33 36
34 &.border-bottom { 37 .icon {
35 border-bottom: 1px solid $header-border-color; 38 @include icon(22px);
36 }
37
38 .hamburger-block {
39 margin-right: 15px;
40 margin-left: 15px;
41 39
42 .glyphicon { 40 &.icon-menu {
43 cursor: pointer; 41 background-image: url('../assets/images/header/menu.svg');
44 position: relative; 42 margin: 0 18px 0 24px;
45 top: 4px;
46 } 43 }
47 } 44 }
48 45
49 #peertube-title { 46 #peertube-title {
50 a { 47 font-size: 20px;
51 color: inherit !important; 48 font-weight: $font-bold;
52 display: block; 49 color: inherit !important;
53 background: url('../assets/logo.png') no-repeat; 50 display: flex;
54 background-size: contain; 51 align-items: center;
55 background-position: center; 52
56 height: 100%; 53 @include disable-default-a-behaviour;
57 margin: auto; 54
58 width: 135px; 55 .icon.icon-logo {
59 56 display: inline-block;
60 &:hover { 57 background: url('../assets/images/logo.svg') no-repeat;
61 color: inherit !important; 58 width: 23px;
62 text-decoration: none !important; 59 height: 24px;
63 }
64 } 60 }
65 } 61 }
66 62
67 @media screen and (max-width: 500px) { 63 @media screen and (max-width: 500px) {
64 width: 70px;
65
68 #peertube-title { 66 #peertube-title {
69 display: none; 67 display: none;
70 } 68 }
71
72 .hamburger-block {
73 width: 100%;
74 text-align: center;
75 }
76 }
77
78 @media screen and (min-width: 500px) and (max-width: 600px) {
79 #peertube-title a {
80 width: 80px;
81 }
82 }
83
84 @media screen and (min-width: 600px) and (max-width: 700px) {
85 #peertube-title a {
86 width: 100px;
87 }
88 }
89
90 @media screen and (min-width: 1000px) {
91 #peertube-title a {
92 width: 120px;
93 }
94 }
95
96 @media screen and (min-width: 1000px) {
97 #peertube-title a {
98 width: 120px;
99 }
100 }
101
102 @media screen and (min-width: 1200px) {
103 padding-left: 15px;
104
105 .hamburger-block {
106 margin-right: 15px;
107 }
108
109 #peertube-title a {
110 width: 135px;
111 }
112 }
113
114 @media screen and (min-width: 1600px) {
115 .hamburger-block {
116 margin-right: 20px;
117 }
118
119 #peertube-title a {
120 width: 180px;
121 }
122 } 69 }
123 } 70 }
124 71
125 my-search { 72 .header-right {
126 position: fixed; 73 height: $header-height;
127 z-index: 1000; 74 display: flex;
128 // Fix col-md-* padding 75 align-items: center;
129 padding: 0; 76 flex-grow: 1;
130 } 77 justify-content: flex-end;
131
132 .search-col {
133 height: 100%;
134 margin-left: -15px;
135 padding: 0;
136 } 78 }
137} 79}
138 80