aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/app.component.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-14 16:39:37 +0200
committerChocobozzz <me@florianbigard.com>2021-04-14 16:39:37 +0200
commit266947e5efc7ff30b0020beb5a74e4d4fc696fa5 (patch)
tree66c2e0f463e373d971d290d9ff3b07b9528ebf27 /client/src/app/app.component.scss
parent251a82ffbb62c575d7aeb260dff22409dae39d73 (diff)
downloadPeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.tar.gz
PeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.tar.zst
PeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.zip
Refactor modal buttons style
Diffstat (limited to 'client/src/app/app.component.scss')
-rw-r--r--client/src/app/app.component.scss108
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;