diff options
Diffstat (limited to 'client/src/app/shared/forms/markdown-textarea.component.scss')
-rw-r--r-- | client/src/app/shared/forms/markdown-textarea.component.scss | 246 |
1 files changed, 231 insertions, 15 deletions
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss index eacaf36a2..8e5739e45 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.scss +++ b/client/src/app/shared/forms/markdown-textarea.component.scss | |||
@@ -1,34 +1,250 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | .root { | 4 | $nav-preview-tab-height: 30px; |
5 | display: flex; | 5 | $base-padding: 15px; |
6 | $input-border-color: #C6C6C6; | ||
7 | $input-border-radius: 3px; | ||
8 | |||
9 | @mixin in-small-view { | ||
10 | .root { | ||
11 | display: flex; | ||
12 | flex-direction: column; | ||
13 | |||
14 | textarea { | ||
15 | @include peertube-textarea(100%, 150px); | ||
16 | |||
17 | background-color: var(--textareaBackgroundColor); | ||
18 | font-family: monospace; | ||
19 | font-size: 13px; | ||
20 | border-bottom: none; | ||
21 | border-bottom-left-radius: unset; | ||
22 | border-bottom-right-radius: unset; | ||
23 | } | ||
6 | 24 | ||
7 | textarea { | 25 | .nav-preview { |
8 | @include peertube-textarea(100%, 150px); | 26 | display: block; |
27 | text-align: right; | ||
28 | padding-top: 10px; | ||
29 | padding-bottom: 10px; | ||
30 | padding-left: 10px; | ||
31 | padding-right: 10px; | ||
32 | border-top: 1px dashed $input-border-color; | ||
33 | border-left: 1px solid $input-border-color; | ||
34 | border-right: 1px solid $input-border-color; | ||
35 | border-bottom: 1px solid $input-border-color; | ||
36 | border-bottom-right-radius: $input-border-radius; | ||
9 | 37 | ||
10 | margin-bottom: 15px; | 38 | border-bottom-left-radius: $input-border-radius; |
39 | ::ng-deep { | ||
40 | .nav-link { | ||
41 | display: none !important; | ||
42 | } | ||
43 | |||
44 | .grey-button { | ||
45 | padding: 0 12px 0 12px; | ||
46 | } | ||
47 | } | ||
48 | } | ||
49 | |||
50 | ::ng-deep { | ||
51 | .tab-content { | ||
52 | display: none; | ||
53 | } | ||
54 | } | ||
11 | } | 55 | } |
56 | } | ||
57 | |||
58 | @mixin nav-preview-medium { | ||
59 | display: flex; | ||
60 | flex-grow: 1; | ||
61 | border-bottom-left-radius: unset; | ||
62 | border-bottom-right-radius: unset; | ||
63 | border-bottom: 2px solid var(--mainColor); | ||
12 | 64 | ||
13 | .previews { | 65 | :first-child { |
14 | max-height: 150px; | 66 | margin-left: auto; |
15 | overflow-y: auto; | ||
16 | flex-grow: 1; | ||
17 | } | 67 | } |
18 | 68 | ||
19 | ::ng-deep { | 69 | ::ng-deep { |
20 | .nav-link { | 70 | .nav-link { |
21 | display: flex !important; | 71 | display: flex !important; |
22 | align-items: center; | 72 | align-items: center; |
23 | height: 30px !important; | 73 | height: $nav-preview-tab-height !important; |
24 | padding: 0 15px !important; | 74 | padding: 0 15px !important; |
75 | font-size: 85% !important; | ||
76 | opacity: .7; | ||
77 | } | ||
78 | |||
79 | .grey-button { | ||
80 | margin-left: 5px; | ||
81 | } | ||
82 | } | ||
83 | } | ||
84 | |||
85 | @mixin content-preview-base { | ||
86 | display: block; | ||
87 | min-height: 75px; | ||
88 | padding: $base-padding; | ||
89 | overflow-y: auto; | ||
90 | font-size: 15px; | ||
91 | word-wrap: break-word; | ||
92 | } | ||
93 | |||
94 | @mixin maximized-base { | ||
95 | flex-direction: row; | ||
96 | z-index: #{z(header) - 1}; | ||
97 | position: fixed; | ||
98 | top: $header-height; | ||
99 | left: $menu-width; | ||
100 | max-height: none !important; | ||
101 | max-width: none !important; | ||
102 | width: calc(100% - #{$menu-width}); | ||
103 | height: calc(100vh - #{$header-height}) !important; | ||
104 | |||
105 | $nav-preview-vertical-padding: 40px; | ||
106 | |||
107 | .nav-preview { | ||
108 | @include nav-preview-medium(); | ||
109 | padding-top: #{$nav-preview-vertical-padding / 2}; | ||
110 | padding-bottom: #{$nav-preview-vertical-padding / 2}; | ||
111 | padding-left: 0px; | ||
112 | padding-right: 0px; | ||
113 | position: absolute; | ||
114 | background-color: var(--mainBackgroundColor); | ||
115 | width: 100% !important; | ||
116 | border-top: none; | ||
117 | border-left: none; | ||
118 | border-right: none; | ||
119 | |||
120 | :last-child { | ||
121 | margin-right: $not-expanded-horizontal-margins; | ||
25 | } | 122 | } |
123 | } | ||
124 | |||
125 | ::ng-deep .tab-content { | ||
126 | @include content-preview-base(); | ||
127 | background-color: var(--mainBackgroundColor); | ||
128 | scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor); | ||
129 | } | ||
26 | 130 | ||
27 | .tab-content { | 131 | textarea, |
28 | min-height: 75px; | 132 | ::ng-deep .tab-content { |
29 | padding: 15px; | 133 | max-height: none !important; |
30 | font-size: 15px; | 134 | max-width: none !important; |
31 | word-wrap: break-word; | 135 | margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important; |
136 | height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important; | ||
137 | width: 50% !important; | ||
138 | border: none !important; | ||
139 | border-radius: unset !important; | ||
140 | } | ||
141 | |||
142 | :host-context(.expanded) { | ||
143 | .root.maximized { | ||
144 | left: 0; | ||
145 | width: 100%; | ||
146 | } | ||
147 | } | ||
148 | } | ||
149 | |||
150 | @mixin maximized-in-small-view { | ||
151 | .root.maximized { | ||
152 | @include maximized-base(); | ||
153 | |||
154 | textarea { | ||
155 | display: none; | ||
32 | } | 156 | } |
157 | |||
158 | ::ng-deep .tab-content { | ||
159 | width: 100% !important; | ||
160 | } | ||
161 | } | ||
162 | } | ||
163 | |||
164 | @mixin maximized-tabs-in-mobile-view { | ||
165 | // Ellipsis on tabs for mobile view | ||
166 | .root.maximized { | ||
167 | .nav-preview { | ||
168 | ::ng-deep .nav-link { | ||
169 | @include ellipsis(); | ||
170 | |||
171 | display: block !important; | ||
172 | max-width: 45% !important; | ||
173 | padding: 5px 0 !important; | ||
174 | margin-right: 10px !important; | ||
175 | text-align: center; | ||
176 | |||
177 | &:not(.active) { | ||
178 | max-width: 15% !important; | ||
179 | } | ||
180 | |||
181 | &.active { | ||
182 | padding: 5px 15px !important; | ||
183 | } | ||
184 | } | ||
185 | } | ||
186 | } | ||
187 | } | ||
188 | |||
189 | @mixin in-medium-view { | ||
190 | .root { | ||
191 | .nav-preview { | ||
192 | @include nav-preview-medium(); | ||
193 | } | ||
194 | |||
195 | ::ng-deep .tab-content { | ||
196 | @include content-preview-base(); | ||
197 | max-height: 210px; | ||
198 | border-bottom: 1px solid $input-border-color; | ||
199 | border-left: 1px solid $input-border-color; | ||
200 | border-right: 1px solid $input-border-color; | ||
201 | border-bottom-left-radius: $input-border-radius; | ||
202 | border-bottom-right-radius: $input-border-radius; | ||
203 | } | ||
204 | } | ||
205 | } | ||
206 | |||
207 | @mixin maximized-in-medium-view { | ||
208 | .root.maximized { | ||
209 | @include maximized-base(); | ||
210 | |||
211 | textarea { | ||
212 | display: block; | ||
213 | padding: $base-padding; | ||
214 | border-right: 1px dashed $input-border-color !important; | ||
215 | resize: none; | ||
216 | scrollbar-color: var(--actionButtonColor) var(--textareaBackgroundColor); | ||
217 | |||
218 | &:focus { | ||
219 | box-shadow: none; | ||
220 | } | ||
221 | } | ||
222 | } | ||
223 | } | ||
224 | |||
225 | @include in-small-view(); | ||
226 | @include maximized-in-small-view(); | ||
227 | |||
228 | @media only screen and (max-width: $mobile-view) { | ||
229 | @include maximized-tabs-in-mobile-view(); | ||
230 | } | ||
231 | |||
232 | @media only screen and (max-width: #{$mobile-view + $menu-width}) { | ||
233 | :host-context(.main-col:not(.expanded)) { | ||
234 | @include maximized-tabs-in-mobile-view(); | ||
235 | } | ||
236 | } | ||
237 | |||
238 | @media only screen and (min-width: $small-view) { | ||
239 | :host-context(.expanded) { | ||
240 | @include in-medium-view(); | ||
241 | } | ||
242 | |||
243 | @include maximized-in-medium-view(); | ||
244 | } | ||
245 | |||
246 | @media only screen and (min-width: #{$small-view + $menu-width}) { | ||
247 | :host-context(.main-col:not(.expanded)) { | ||
248 | @include in-medium-view(); | ||
33 | } | 249 | } |
34 | } | 250 | } |