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: var(--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;
46 padding: 0 12px 0 12px;
59 @mixin nav-preview-medium {
62 border-bottom-left-radius: unset;
63 border-bottom-right-radius: unset;
64 border-bottom: 2px solid var(--mainColor);
72 display: flex !important;
74 height: $nav-preview-tab-height !important;
75 padding: 0 15px !important;
76 font-size: 85% !important;
86 @mixin content-preview-base {
89 padding: $base-padding;
92 word-wrap: break-word;
95 @mixin maximized-base {
97 z-index: #{z(header) - 1};
101 max-height: none !important;
102 max-width: none !important;
103 width: calc(100% - #{$menu-width});
104 height: calc(100vh - #{$header-height}) !important;
106 $nav-preview-vertical-padding: 40px;
109 @include nav-preview-medium();
110 padding-top: #{$nav-preview-vertical-padding / 2};
111 padding-bottom: #{$nav-preview-vertical-padding / 2};
115 background-color: var(--mainBackgroundColor);
116 width: 100% !important;
122 margin-right: $not-expanded-horizontal-margins;
126 ::ng-deep .tab-content {
127 @include content-preview-base();
128 background-color: var(--mainBackgroundColor);
129 scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
133 ::ng-deep .tab-content {
134 max-height: none !important;
135 max-width: none !important;
136 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
137 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
138 width: 50% !important;
139 border: none !important;
140 border-radius: unset !important;
143 :host-context(.expanded) {
151 @mixin maximized-in-small-view {
153 @include maximized-base();
159 ::ng-deep .tab-content {
160 width: 100% !important;
165 @mixin maximized-tabs-in-mobile-view {
166 // Ellipsis on tabs for mobile view
169 ::ng-deep .nav-link {
172 display: block !important;
173 max-width: 45% !important;
174 padding: 5px 0 !important;
175 margin-right: 10px !important;
179 max-width: 15% !important;
183 padding: 5px 15px !important;
190 @mixin in-medium-view {
193 @include nav-preview-medium();
196 ::ng-deep .tab-content {
197 @include content-preview-base();
199 border-bottom: 1px solid $input-border-color;
200 border-left: 1px solid $input-border-color;
201 border-right: 1px solid $input-border-color;
202 border-bottom-left-radius: $input-border-radius;
203 border-bottom-right-radius: $input-border-radius;
208 @mixin maximized-in-medium-view {
210 @include maximized-base();
214 padding: $base-padding;
215 border-right: 1px dashed $input-border-color !important;
217 scrollbar-color: var(--actionButtonColor) var(--markdownTextareaBackgroundColor);
226 @include in-small-view();
227 @include maximized-in-small-view();
229 @media only screen and (max-width: $mobile-view) {
230 @include maximized-tabs-in-mobile-view();
233 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
234 :host-context(.main-col:not(.expanded)) {
235 @include maximized-tabs-in-mobile-view();
239 @media only screen and (min-width: $small-view) {
240 :host-context(.expanded) {
241 @include in-medium-view();
244 @include maximized-in-medium-view();
247 @media only screen and (min-width: #{$small-view + $menu-width}) {
248 :host-context(.main-col:not(.expanded)) {
249 @include in-medium-view();