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.scss101
1 files changed, 28 insertions, 73 deletions
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 28e86097c..f245d0563 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -28,8 +28,10 @@
28.header { 28.header {
29 height: $header-height; 29 height: $header-height;
30 position: fixed; 30 position: fixed;
31 top: 0;
31 width: 100%; 32 width: 100%;
32 background-color: #fff; 33 background-color: #fff;
34 z-index: 1000;
33 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); 35 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
34 display: flex; 36 display: flex;
35 37
@@ -37,33 +39,36 @@
37 width: $menu-width; 39 width: $menu-width;
38 z-index: 1001; 40 z-index: 1001;
39 height: $header-height; 41 height: $header-height;
40 line-height: $header-height;
41 margin-top: 0;
42 margin-bottom: 0;
43 display: flex; 42 display: flex;
44 padding: 0; 43 align-items: center;
45 44
46 .hamburger-block { 45 .icon {
47 margin-right: 10px; 46 cursor: pointer;
48 margin-left: 25px; 47 width: 22px;
49 48 height: 22px;
50 .glyphicon { 49 display: inline-block;
51 cursor: pointer; 50 background-size: contain;
51
52 &.icon-menu {
53 background-image: url('../assets/header/menu.svg');
54 margin: 0 18px 0 24px;
52 } 55 }
53 } 56 }
54 57
55 #peertube-title { 58 #peertube-title {
56 a { 59 font-size: 20px;
57 color: inherit !important; 60 font-weight: $font-bold;
58 display: block; 61 color: inherit !important;
62 display: flex;
63 align-items: center;
64
65 @include disable-default-a-behaviour;
66
67 .icon.icon-logo {
68 display: inline-block;
59 background: url('../assets/logo.svg') no-repeat; 69 background: url('../assets/logo.svg') no-repeat;
60 width: 24px; 70 width: 20px;
61 height: 24px; 71 height: 24px;
62
63 &:hover {
64 color: inherit !important;
65 text-decoration: none !important;
66 }
67 } 72 }
68 } 73 }
69 74
@@ -71,65 +76,15 @@
71 #peertube-title { 76 #peertube-title {
72 display: none; 77 display: none;
73 } 78 }
74
75 .hamburger-block {
76 width: 100%;
77 text-align: center;
78 }
79 }
80
81 @media screen and (min-width: 500px) and (max-width: 600px) {
82 #peertube-title a {
83 width: 80px;
84 }
85 }
86
87 @media screen and (min-width: 600px) and (max-width: 700px) {
88 #peertube-title a {
89 width: 100px;
90 }
91 }
92
93 @media screen and (min-width: 1000px) {
94 #peertube-title a {
95 width: 120px;
96 }
97 }
98
99 @media screen and (min-width: 1000px) {
100 #peertube-title a {
101 width: 120px;
102 }
103 }
104
105 @media screen and (min-width: 1200px) {
106 padding-left: 15px;
107
108 .hamburger-block {
109 margin-right: 15px;
110 }
111
112 #peertube-title a {
113 width: 135px;
114 }
115 }
116
117 @media screen and (min-width: 1600px) {
118 .hamburger-block {
119 margin-right: 20px;
120 }
121
122 #peertube-title a {
123 width: 180px;
124 }
125 } 79 }
126 } 80 }
127 81
128 .header-right { 82 .header-right {
129 text-align: right;
130 height: $header-height; 83 height: $header-height;
131 margin-left: $menu-width; 84 display: flex;
85 align-items: center;
132 flex-grow: 1; 86 flex-grow: 1;
87 justify-content: flex-end;
133 } 88 }
134} 89}
135 90