2 @use '_variables' as *;
5 $nav-preview-tab-height: 30px;
7 $input-border-color: #C6C6C6;
8 $input-border-radius: 3px;
10 @mixin in-small-view {
13 flex-direction: column;
16 @include peertube-textarea(100%, 150px);
18 background-color: pvar(--markdownTextareaBackgroundColor);
20 font-family: monospace;
23 border-bottom-left-radius: unset;
24 border-bottom-right-radius: unset;
28 @include padding-left(10px);
29 @include padding-right(10px);
35 border-top: 1px dashed $input-border-color;
36 border-left: 1px solid $input-border-color;
37 border-right: 1px solid $input-border-color;
38 border-bottom: 1px solid $input-border-color;
39 border-bottom-right-radius: $input-border-radius;
41 border-bottom-left-radius: $input-border-radius;
44 display: none !important;
52 stroke: var(--mainForegroundColor);
74 @mixin nav-preview-medium {
77 border-bottom-left-radius: unset;
78 border-bottom-right-radius: unset;
79 border-bottom: 2px solid pvar(--mainColor);
82 @include margin-left(auto);
87 display: flex !important;
89 height: $nav-preview-tab-height !important;
90 padding: 0 15px !important;
91 font-size: 85% !important;
96 @include margin-left(5px);
101 @mixin content-preview-base {
104 padding: $base-padding;
107 word-wrap: break-word;
110 @mixin maximized-base {
111 $nav-preview-vertical-padding: 40px;
114 z-index: #{z(header) - 1};
118 max-height: none !important;
119 max-width: none !important;
120 width: calc(100% - #{$menu-width});
121 height: calc(100vh - #{$header-height}) !important;
124 @include nav-preview-medium();
125 @include padding-right(0);
126 @include padding-left(0);
128 padding-top: math.div($nav-preview-vertical-padding, 2);
129 padding-bottom: math.div($nav-preview-vertical-padding, 2);
131 background-color: pvar(--mainBackgroundColor);
132 width: 100% !important;
138 @include margin-right(pvar(--horizontalMarginContent));
142 ::ng-deep .tab-content {
143 @include content-preview-base();
144 background-color: pvar(--mainBackgroundColor);
145 scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
149 ::ng-deep .tab-content {
150 max-height: none !important;
151 max-width: none !important;
152 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
153 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
154 width: 50% !important;
155 border: 0 !important;
156 border-radius: unset !important;
159 :host-context(.expanded) {
167 @mixin maximized-in-small-view {
169 @include maximized-base();
175 ::ng-deep .tab-content {
176 width: 100% !important;
181 @mixin maximized-tabs-in-mobile-view {
182 // Ellipsis on tabs for mobile view
185 ::ng-deep .nav-link {
187 @include margin-right(10px !important);
189 display: block !important;
190 max-width: 45% !important;
191 padding: 5px 0 !important;
195 max-width: 15% !important;
199 padding: 5px 15px !important;
206 @mixin in-medium-view {
209 @include nav-preview-medium();
212 ::ng-deep .tab-content {
213 @include content-preview-base();
215 border-bottom: 1px solid $input-border-color;
216 border-left: 1px solid $input-border-color;
217 border-right: 1px solid $input-border-color;
218 border-bottom-left-radius: $input-border-radius;
219 border-bottom-right-radius: $input-border-radius;
224 @mixin maximized-in-medium-view {
226 @include maximized-base();
230 padding: $base-padding;
231 border-right: 1px dashed $input-border-color !important;
233 scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
242 @include in-small-view();
243 @include maximized-in-small-view();
245 @media only screen and (max-width: $mobile-view) {
246 @include maximized-tabs-in-mobile-view();
249 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
250 :host-context(.main-col:not(.expanded)) {
251 @include maximized-tabs-in-mobile-view();
255 @media only screen and (min-width: $small-view) {
256 @include maximized-in-medium-view();
258 :host-context(.expanded) {
259 @include in-medium-view();
263 @media only screen and (min-width: #{$small-view + $menu-width}) {
264 :host-context(.main-col:not(.expanded)) {
265 @include in-medium-view();