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(--textareaBackgroundColor);
18 font-family: monospace;
21 border-bottom-left-radius: unset;
22 border-bottom-right-radius: unset;
32 border-top: 1px dashed $input-border-color;
33 border-left: 1px solid $input-border-color;
34 border-right: 1px solid $input-border-color;
35 border-bottom: 1px solid $input-border-color;
36 border-bottom-right-radius: $input-border-radius;
38 border-bottom-left-radius: $input-border-radius;
41 display: none !important;
45 padding: 0 12px 0 12px;
58 @mixin nav-preview-medium {
61 border-bottom-left-radius: unset;
62 border-bottom-right-radius: unset;
63 border-bottom: 2px solid var(--mainColor);
71 display: flex !important;
73 height: $nav-preview-tab-height !important;
74 padding: 0 15px !important;
75 font-size: 85% !important;
85 @mixin content-preview-base {
88 padding: $base-padding;
91 word-wrap: break-word;
94 @mixin maximized-base {
96 z-index: #{z(header) - 1};
100 max-height: none !important;
101 max-width: none !important;
102 width: calc(100% - #{$menu-width});
103 height: calc(100vh - #{$header-height}) !important;
105 $nav-preview-vertical-padding: 40px;
108 @include nav-preview-medium();
109 padding-top: #{$nav-preview-vertical-padding / 2};
110 padding-bottom: #{$nav-preview-vertical-padding / 2};
114 background-color: var(--mainBackgroundColor);
115 width: 100% !important;
121 margin-right: $not-expanded-horizontal-margins;
125 ::ng-deep .tab-content {
126 @include content-preview-base();
127 background-color: var(--mainBackgroundColor);
128 scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
132 ::ng-deep .tab-content {
133 max-height: none !important;
134 max-width: none !important;
135 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
136 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
137 width: 50% !important;
138 border: none !important;
139 border-radius: unset !important;
142 :host-context(.expanded) {
150 @mixin maximized-in-small-view {
152 @include maximized-base();
158 ::ng-deep .tab-content {
159 width: 100% !important;
164 @mixin maximized-tabs-in-mobile-view {
165 // Ellipsis on tabs for mobile view
168 ::ng-deep .nav-link {
171 display: block !important;
172 max-width: 45% !important;
173 padding: 5px 0 !important;
174 margin-right: 10px !important;
178 max-width: 15% !important;
182 padding: 5px 15px !important;
189 @mixin in-medium-view {
192 @include nav-preview-medium();
195 ::ng-deep .tab-content {
196 @include content-preview-base();
198 border-bottom: 1px solid $input-border-color;
199 border-left: 1px solid $input-border-color;
200 border-right: 1px solid $input-border-color;
201 border-bottom-left-radius: $input-border-radius;
202 border-bottom-right-radius: $input-border-radius;
207 @mixin maximized-in-medium-view {
209 @include maximized-base();
213 padding: $base-padding;
214 border-right: 1px dashed $input-border-color !important;
216 scrollbar-color: var(--actionButtonColor) var(--textareaBackgroundColor);
225 @include in-small-view();
226 @include maximized-in-small-view();
228 @media only screen and (max-width: $mobile-view) {
229 @include maximized-tabs-in-mobile-view();
232 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
233 :host-context(.main-col:not(.expanded)) {
234 @include maximized-tabs-in-mobile-view();
238 @media only screen and (min-width: $small-view) {
239 :host-context(.expanded) {
240 @include in-medium-view();
243 @include maximized-in-medium-view();
246 @media only screen and (min-width: #{$small-view + $menu-width}) {
247 :host-context(.main-col:not(.expanded)) {
248 @include in-medium-view();