diff options
Diffstat (limited to 'client/src/app/app.component.scss')
-rw-r--r-- | client/src/app/app.component.scss | 108 |
1 files changed, 48 insertions, 60 deletions
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 7e9e4a216..e7d05369b 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss | |||
@@ -26,67 +26,64 @@ | |||
26 | z-index: z(header); | 26 | z-index: z(header); |
27 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); | 27 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); |
28 | display: flex; | 28 | display: flex; |
29 | } | ||
29 | 30 | ||
30 | .top-left-block { | 31 | .top-left-block { |
31 | z-index: 1; | 32 | z-index: 1; |
32 | height: $header-height; | 33 | height: $header-height; |
33 | display: flex; | 34 | display: flex; |
34 | align-items: center; | 35 | align-items: center; |
35 | min-width: 0; | 36 | min-width: 0; |
36 | |||
37 | .icon { | ||
38 | @include icon(24px); | ||
39 | |||
40 | &.icon-menu { | ||
41 | background-color: pvar(--mainForegroundColor); | ||
42 | mask-image: url('../assets/images/misc/menu.svg'); | ||
43 | margin: 0 18px 0 20px; | ||
44 | |||
45 | @media screen and (max-width: $mobile-view) { | ||
46 | margin: 0 10px; | ||
47 | } | ||
48 | } | ||
49 | } | ||
50 | 37 | ||
51 | .peertube-title { | 38 | .icon { |
52 | @include disable-default-a-behaviour; | 39 | @include icon(24px); |
40 | } | ||
53 | 41 | ||
54 | font-size: 20px; | 42 | .icon-menu { |
55 | font-weight: $font-bold; | 43 | background-color: pvar(--mainForegroundColor); |
56 | color: inherit !important; | 44 | mask-image: url('../assets/images/misc/menu.svg'); |
57 | display: flex; | 45 | margin: 0 18px 0 20px; |
58 | align-items: center; | ||
59 | overflow: hidden; | ||
60 | 46 | ||
61 | .instance-name { | 47 | @media screen and (max-width: $mobile-view) { |
62 | @include ellipsis; | 48 | margin: 0 10px; |
49 | } | ||
50 | } | ||
51 | } | ||
63 | 52 | ||
64 | width: 100%; | 53 | .header-right { |
65 | } | 54 | height: $header-height; |
55 | display: flex; | ||
56 | align-items: center; | ||
57 | justify-content: flex-end; | ||
58 | white-space: nowrap; | ||
59 | flex: 1; | ||
60 | } | ||
66 | 61 | ||
67 | .icon.icon-logo { | 62 | .peertube-title { |
68 | display: inline-block; | 63 | @include disable-default-a-behaviour; |
69 | width: 23px; | ||
70 | height: 24px; | ||
71 | margin-right: .5rem; | ||
72 | } | ||
73 | } | ||
74 | 64 | ||
75 | @media screen and (max-width: $mobile-view) { | 65 | font-size: 20px; |
66 | font-weight: $font-bold; | ||
67 | color: inherit !important; | ||
68 | display: flex; | ||
69 | align-items: center; | ||
70 | overflow: hidden; | ||
76 | 71 | ||
77 | .peertube-title { | 72 | .instance-name { |
78 | display: none; | 73 | @include ellipsis; |
79 | } | 74 | |
80 | } | 75 | width: 100%; |
81 | } | 76 | } |
82 | 77 | ||
83 | .header-right { | 78 | .icon.icon-logo { |
84 | height: $header-height; | 79 | display: inline-block; |
85 | display: flex; | 80 | width: 23px; |
86 | align-items: center; | 81 | height: 24px; |
87 | justify-content: flex-end; | 82 | margin-right: .5rem; |
88 | white-space: nowrap; | 83 | } |
89 | flex: 1; | 84 | |
85 | @media screen and (max-width: $mobile-view) { | ||
86 | display: none; | ||
90 | } | 87 | } |
91 | } | 88 | } |
92 | 89 | ||
@@ -103,18 +100,9 @@ | |||
103 | justify-self: center; | 100 | justify-self: center; |
104 | align-self: center; | 101 | align-self: center; |
105 | cursor: pointer; | 102 | cursor: pointer; |
106 | |||
107 | width: 20px; | 103 | width: 20px; |
108 | } | 104 | } |
109 | 105 | ||
110 | @each $color, $value in $theme-colors { | ||
111 | &.alert-#{$color} { | ||
112 | my-global-icon { | ||
113 | @include apply-svg-color(theme-color-level($color, $alert-color-level)); | ||
114 | } | ||
115 | } | ||
116 | } | ||
117 | |||
118 | ::ng-deep { | 106 | ::ng-deep { |
119 | p { | 107 | p { |
120 | font-size: 16px; | 108 | font-size: 16px; |