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;
105 word-wrap: break-word;
108 @mixin maximized-base {
109 $nav-preview-vertical-padding: 40px;
112 z-index: #{z(header) - 1};
116 max-height: none !important;
117 max-width: none !important;
118 width: calc(100% - #{$menu-width});
119 height: calc(100vh - #{$header-height}) !important;
122 @include nav-preview-medium();
123 @include padding-right(0);
124 @include padding-left(0);
126 padding-top: math.div($nav-preview-vertical-padding, 2);
127 padding-bottom: math.div($nav-preview-vertical-padding, 2);
129 background-color: pvar(--mainBackgroundColor);
130 width: 100% !important;
136 @include margin-right(pvar(--horizontalMarginContent));
140 ::ng-deep .tab-content {
141 @include content-preview-base();
142 background-color: pvar(--mainBackgroundColor);
143 scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
147 ::ng-deep .tab-content {
148 max-height: none !important;
149 max-width: none !important;
150 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
151 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
152 width: 50% !important;
153 border: 0 !important;
154 border-radius: unset !important;
157 :host-context(.expanded) {
165 @mixin maximized-in-small-view {
167 @include maximized-base();
173 ::ng-deep .tab-content {
174 width: 100% !important;
179 @mixin maximized-tabs-in-mobile-view {
180 // Ellipsis on tabs for mobile view
183 ::ng-deep .nav-link {
185 @include margin-right(10px !important);
187 display: block !important;
188 max-width: 45% !important;
189 padding: 5px 0 !important;
193 max-width: 15% !important;
197 padding: 5px 15px !important;
204 @mixin in-medium-view {
207 @include nav-preview-medium();
210 ::ng-deep .tab-content {
211 @include content-preview-base();
213 border-bottom: 1px solid $input-border-color;
214 border-left: 1px solid $input-border-color;
215 border-right: 1px solid $input-border-color;
216 border-bottom-left-radius: $input-border-radius;
217 border-bottom-right-radius: $input-border-radius;
222 @mixin maximized-in-medium-view {
224 @include maximized-base();
228 padding: $base-padding;
229 border-right: 1px dashed $input-border-color !important;
231 scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
240 @include in-small-view();
241 @include maximized-in-small-view();
243 @media only screen and (max-width: $mobile-view) {
244 @include maximized-tabs-in-mobile-view();
247 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
248 :host-context(.main-col:not(.expanded)) {
249 @include maximized-tabs-in-mobile-view();
253 @media only screen and (min-width: $small-view) {
254 @include maximized-in-medium-view();
256 :host-context(.expanded) {
257 @include in-medium-view();
261 @media only screen and (min-width: #{$small-view + $menu-width}) {
262 :host-context(.main-col:not(.expanded)) {
263 @include in-medium-view();