4 $nav-preview-tab-height: 30px;
6 $input-border-color: #C6C6C6;
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;
33 border-top: 1px dashed $input-border-color;
34 border-left: 1px solid $input-border-color;
35 border-right: 1px solid $input-border-color;
36 border-bottom: 1px solid $input-border-color;
37 border-bottom-right-radius: $input-border-radius;
39 border-bottom-left-radius: $input-border-radius;
42 display: none !important;
50 stroke: var(--mainForegroundColor);
72 @mixin nav-preview-medium {
75 border-bottom-left-radius: unset;
76 border-bottom-right-radius: unset;
77 border-bottom: 2px solid pvar(--mainColor);
85 display: flex !important;
87 height: $nav-preview-tab-height !important;
88 padding: 0 15px !important;
89 font-size: 85% !important;
99 @mixin content-preview-base {
102 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 padding-top: #{$nav-preview-vertical-padding / 2};
124 padding-bottom: #{$nav-preview-vertical-padding / 2};
128 background-color: pvar(--mainBackgroundColor);
129 width: 100% !important;
135 margin-right: pvar(--horizontalMarginContent);
139 ::ng-deep .tab-content {
140 @include content-preview-base();
141 background-color: pvar(--mainBackgroundColor);
142 scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
146 ::ng-deep .tab-content {
147 max-height: none !important;
148 max-width: none !important;
149 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
150 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
151 width: 50% !important;
152 border: 0 !important;
153 border-radius: unset !important;
156 :host-context(.expanded) {
164 @mixin maximized-in-small-view {
166 @include maximized-base();
172 ::ng-deep .tab-content {
173 width: 100% !important;
178 @mixin maximized-tabs-in-mobile-view {
179 // Ellipsis on tabs for mobile view
182 ::ng-deep .nav-link {
185 display: block !important;
186 max-width: 45% !important;
187 padding: 5px 0 !important;
188 margin-right: 10px !important;
192 max-width: 15% !important;
196 padding: 5px 15px !important;
203 @mixin in-medium-view {
206 @include nav-preview-medium();
209 ::ng-deep .tab-content {
210 @include content-preview-base();
212 border-bottom: 1px solid $input-border-color;
213 border-left: 1px solid $input-border-color;
214 border-right: 1px solid $input-border-color;
215 border-bottom-left-radius: $input-border-radius;
216 border-bottom-right-radius: $input-border-radius;
221 @mixin maximized-in-medium-view {
223 @include maximized-base();
227 padding: $base-padding;
228 border-right: 1px dashed $input-border-color !important;
230 scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
239 @include in-small-view();
240 @include maximized-in-small-view();
242 @media only screen and (max-width: $mobile-view) {
243 @include maximized-tabs-in-mobile-view();
246 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
247 :host-context(.main-col:not(.expanded)) {
248 @include maximized-tabs-in-mobile-view();
252 @media only screen and (min-width: $small-view) {
253 @include maximized-in-medium-view();
255 :host-context(.expanded) {
256 @include in-medium-view();
260 @media only screen and (min-width: #{$small-view + $menu-width}) {
261 :host-context(.main-col:not(.expanded)) {
262 @include in-medium-view();