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);
71 @mixin nav-preview-medium {
74 border-bottom-left-radius: unset;
75 border-bottom-right-radius: unset;
76 border-bottom: 2px solid pvar(--mainColor);
84 display: flex !important;
86 height: $nav-preview-tab-height !important;
87 padding: 0 15px !important;
88 font-size: 85% !important;
98 @mixin content-preview-base {
101 padding: $base-padding;
104 word-wrap: break-word;
107 @mixin maximized-base {
109 z-index: #{z(header) - 1};
113 max-height: none !important;
114 max-width: none !important;
115 width: calc(100% - #{$menu-width});
116 height: calc(100vh - #{$header-height}) !important;
118 $nav-preview-vertical-padding: 40px;
121 @include nav-preview-medium();
122 padding-top: #{$nav-preview-vertical-padding / 2};
123 padding-bottom: #{$nav-preview-vertical-padding / 2};
127 background-color: pvar(--mainBackgroundColor);
128 width: 100% !important;
134 margin-right: $not-expanded-horizontal-margins;
138 ::ng-deep .tab-content {
139 @include content-preview-base();
140 background-color: pvar(--mainBackgroundColor);
141 scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
145 ::ng-deep .tab-content {
146 max-height: none !important;
147 max-width: none !important;
148 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
149 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
150 width: 50% !important;
151 border: none !important;
152 border-radius: unset !important;
155 :host-context(.expanded) {
163 @mixin maximized-in-small-view {
165 @include maximized-base();
171 ::ng-deep .tab-content {
172 width: 100% !important;
177 @mixin maximized-tabs-in-mobile-view {
178 // Ellipsis on tabs for mobile view
181 ::ng-deep .nav-link {
184 display: block !important;
185 max-width: 45% !important;
186 padding: 5px 0 !important;
187 margin-right: 10px !important;
191 max-width: 15% !important;
195 padding: 5px 15px !important;
202 @mixin in-medium-view {
205 @include nav-preview-medium();
208 ::ng-deep .tab-content {
209 @include content-preview-base();
211 border-bottom: 1px solid $input-border-color;
212 border-left: 1px solid $input-border-color;
213 border-right: 1px solid $input-border-color;
214 border-bottom-left-radius: $input-border-radius;
215 border-bottom-right-radius: $input-border-radius;
220 @mixin maximized-in-medium-view {
222 @include maximized-base();
226 padding: $base-padding;
227 border-right: 1px dashed $input-border-color !important;
229 scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
238 @include in-small-view();
239 @include maximized-in-small-view();
241 @media only screen and (max-width: $mobile-view) {
242 @include maximized-tabs-in-mobile-view();
245 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
246 :host-context(.main-col:not(.expanded)) {
247 @include maximized-tabs-in-mobile-view();
251 @media only screen and (min-width: $small-view) {
252 :host-context(.expanded) {
253 @include in-medium-view();
256 @include maximized-in-medium-view();
259 @media only screen and (min-width: #{$small-view + $menu-width}) {
260 :host-context(.main-col:not(.expanded)) {
261 @include in-medium-view();