2 @use '_variables' as *;
5 $nav-preview-tab-height: 30px;
7 $input-border-radius: 3px;
12 flex-direction: column;
15 @include peertube-textarea(100%, 150px);
17 background-color: pvar(--markdownTextareaBackgroundColor);
19 font-family: monospace;
22 border-bottom-left-radius: unset;
23 border-bottom-right-radius: unset;
27 @include padding-left(10px);
28 @include padding-right(10px);
34 border-top: 1px dashed $input-border-color;
35 border-left: 1px solid $input-border-color;
36 border-right: 1px solid $input-border-color;
37 border-bottom: 1px solid $input-border-color;
38 border-bottom-right-radius: $input-border-radius;
40 border-bottom-left-radius: $input-border-radius;
43 display: none !important;
51 stroke: var(--mainForegroundColor);
73 @mixin nav-preview-medium {
76 border-bottom-left-radius: unset;
77 border-bottom-right-radius: unset;
78 border-bottom: 2px solid pvar(--mainColor);
81 @include margin-left(auto);
86 display: flex !important;
88 height: $nav-preview-tab-height !important;
89 padding: 0 15px !important;
90 font-size: 85% !important;
95 @include margin-left(5px);
100 @mixin content-preview-base {
103 padding: $base-padding;
106 word-wrap: break-word;
109 @mixin maximized-base {
110 $nav-preview-vertical-padding: 40px;
113 z-index: #{z(header) - 1};
117 max-height: none !important;
118 max-width: none !important;
119 width: calc(100% - #{$menu-width});
120 height: calc(100vh - #{$header-height}) !important;
123 @include nav-preview-medium();
124 @include padding-right(0);
125 @include padding-left(0);
127 padding-top: math.div($nav-preview-vertical-padding, 2);
128 padding-bottom: math.div($nav-preview-vertical-padding, 2);
130 background-color: pvar(--mainBackgroundColor);
131 width: 100% !important;
137 @include margin-right(pvar(--horizontalMarginContent));
141 ::ng-deep .tab-content {
142 @include content-preview-base();
143 background-color: pvar(--mainBackgroundColor);
144 scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
148 ::ng-deep .tab-content {
149 max-height: none !important;
150 max-width: none !important;
151 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
152 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
153 width: 50% !important;
154 border: 0 !important;
155 border-radius: unset !important;
158 :host-context(.expanded) {
166 @mixin maximized-in-small-view {
168 @include maximized-base();
174 ::ng-deep .tab-content {
175 width: 100% !important;
180 @mixin maximized-tabs-in-mobile-view {
181 // Ellipsis on tabs for mobile view
184 ::ng-deep .nav-link {
186 @include margin-right(10px !important);
188 display: block !important;
189 max-width: 45% !important;
190 padding: 5px 0 !important;
194 max-width: 15% !important;
198 padding: 5px 15px !important;
205 @mixin in-medium-view {
208 @include nav-preview-medium();
211 ::ng-deep .tab-content {
212 @include content-preview-base();
214 border-bottom: 1px solid $input-border-color;
215 border-left: 1px solid $input-border-color;
216 border-right: 1px solid $input-border-color;
217 border-bottom-left-radius: $input-border-radius;
218 border-bottom-right-radius: $input-border-radius;
223 @mixin maximized-in-medium-view {
225 @include maximized-base();
229 padding: $base-padding;
230 border-right: 1px dashed $input-border-color !important;
232 scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
241 @include in-small-view();
242 @include maximized-in-small-view();
244 @media only screen and (max-width: $mobile-view) {
245 @include maximized-tabs-in-mobile-view();
248 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
249 :host-context(.main-col:not(.expanded)) {
250 @include maximized-tabs-in-mobile-view();
254 @media only screen and (min-width: $small-view) {
255 @include maximized-in-medium-view();
257 :host-context(.expanded) {
258 @include in-medium-view();
262 @media only screen and (min-width: #{$small-view + $menu-width}) {
263 :host-context(.main-col:not(.expanded)) {
264 @include in-medium-view();