-@import '_variables';
-@import '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
$nav-preview-tab-height: 30px;
$base-padding: 15px;
-$input-border-color: #C6C6C6;
$input-border-radius: 3px;
-@mixin in-small-view {
- .root {
- display: flex;
- flex-direction: column;
+.root {
+ display: flex;
+ flex-direction: column;
- textarea {
- @include peertube-textarea(100%, 150px);
+ textarea {
+ @include peertube-textarea(100%, 150px);
- background-color: pvar(--markdownTextareaBackgroundColor);
+ background-color: pvar(--markdownTextareaBackgroundColor);
- font-family: monospace;
- font-size: 13px;
- border-bottom: 0;
- border-bottom-left-radius: unset;
- border-bottom-right-radius: unset;
- }
+ font-family: monospace;
+ font-size: 13px;
+ border-bottom: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
- .nav-preview {
- display: block;
- text-align: right;
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- padding-right: 10px;
- border-top: 1px dashed $input-border-color;
- border-left: 1px solid $input-border-color;
- border-right: 1px solid $input-border-color;
- border-bottom: 1px solid $input-border-color;
- border-bottom-right-radius: $input-border-radius;
-
- border-bottom-left-radius: $input-border-radius;
- ::ng-deep {
- .nav-link {
- display: none !important;
- }
+ .nav-preview {
+ padding: 10px;
- .maximize-button {
- padding: 0 7px;
- cursor: pointer;
-
- svg {
- stroke: var(--mainForegroundColor);
- opacity: 0.6;
- }
-
- &:hover,
- &:active {
- svg {
- opacity: 1;
- }
- }
- }
- }
- }
+ border: 1px solid $input-border-color;
+ border-top: 1px dashed $input-border-color;
- ::ng-deep {
- .tab-content {
- display: none;
- }
- }
- }
-}
+ border-bottom-right-radius: $input-border-radius;
+ border-bottom-left-radius: $input-border-radius;
-@mixin nav-preview-medium {
- display: flex;
- flex-grow: 1;
- border-bottom-left-radius: unset;
- border-bottom-right-radius: unset;
- border-bottom: 2px solid pvar(--mainColor);
+ display: flex;
+ flex-grow: 1;
+ border-bottom-left-radius: unset;
+ border-bottom-right-radius: unset;
+ border-bottom: 2px solid pvar(--mainColor);
- :first-child {
- margin-left: auto;
- }
+ .maximize-button {
+ @include margin-left(15px);
- ::ng-deep {
- .nav-link {
- display: flex !important;
- align-items: center;
- height: $nav-preview-tab-height !important;
- padding: 0 15px !important;
- font-size: 85% !important;
- opacity: .7;
- }
+ opacity: 0.6;
+ cursor: default;
- .maximize-button {
- margin-left: 5px;
+ &:not(.disabled) {
+ cursor: pointer;
+
+ &:hover,
+ &:active {
+ opacity: 1;
+ }
+ }
}
}
-}
-@mixin content-preview-base {
- display: block;
- min-height: 75px;
- padding: $base-padding;
- overflow-y: auto;
- font-size: 15px;
- word-wrap: break-word;
-}
+ .nav-pills {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
-@mixin maximized-base {
- $nav-preview-vertical-padding: 40px;
+ > * {
+ font-size: 0.9em !important;
+ }
+ }
- flex-direction: row;
- z-index: #{z(header) - 1};
- position: fixed;
- top: $header-height;
- left: $menu-width;
- max-height: none !important;
- max-width: none !important;
- width: calc(100% - #{$menu-width});
- height: calc(100vh - #{$header-height}) !important;
+ .tab-content {
+ min-height: 75px;
+ max-height: 210px;
+ padding: $base-padding;
- .nav-preview {
- @include nav-preview-medium();
- padding-top: #{$nav-preview-vertical-padding / 2};
- padding-bottom: #{$nav-preview-vertical-padding / 2};
- padding-left: 0;
- padding-right: 0;
- position: absolute;
- background-color: pvar(--mainBackgroundColor);
- width: 100% !important;
+ overflow-y: auto;
+ word-wrap: break-word;
+
+ border: 1px solid $input-border-color;
border-top: 0;
- border-left: 0;
- border-right: 0;
- :last-child {
- margin-right: pvar(--horizontalMarginContent);
- }
+ border-bottom-left-radius: $input-border-radius;
+ border-bottom-right-radius: $input-border-radius;
}
- ::ng-deep .tab-content {
- @include content-preview-base();
- background-color: pvar(--mainBackgroundColor);
- scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
- }
+ &.maximized {
+ z-index: #{z(header) - 1};
+ position: fixed;
+ top: $header-height;
+ left: $menu-width;
- textarea,
- ::ng-deep .tab-content {
max-height: none !important;
max-width: none !important;
- margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
- height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
- width: 50% !important;
- border: 0 !important;
- border-radius: unset !important;
- }
+ width: calc(100% - #{$menu-width});
+ height: calc(100vh - #{$header-height});
- :host-context(.expanded) {
- .root.maximized {
- left: 0;
- width: 100%;
- }
- }
-}
-
-@mixin maximized-in-small-view {
- .root.maximized {
- @include maximized-base();
+ display: grid;
+ grid-template-rows: auto 1fr;
+ grid-template-columns: 1fr 1fr;
- textarea {
- display: none;
- }
-
- ::ng-deep .tab-content {
- width: 100% !important;
- }
- }
-}
+ background-color: pvar(--mainBackgroundColor);
-@mixin maximized-tabs-in-mobile-view {
- // Ellipsis on tabs for mobile view
- .root.maximized {
.nav-preview {
- ::ng-deep .nav-link {
- @include ellipsis();
+ grid-row: 1;
+ grid-column: 1 / 3;
- display: block !important;
- max-width: 45% !important;
- padding: 5px 0 !important;
- margin-right: 10px !important;
- text-align: center;
+ border: 0;
+ border-bottom: 2px solid pvar(--mainColor);
- &:not(.active) {
- max-width: 15% !important;
- }
+ padding: 20px 0;
+ width: 100% !important;
- &.active {
- padding: 5px 15px !important;
- }
+ .maximize-button {
+ @include margin-right(15px);
}
}
- }
-}
-@mixin in-medium-view {
- .root {
- .nav-preview {
- @include nav-preview-medium();
+ textarea {
+ grid-column: 1;
+
+ border: 0;
+ border-right: 1px dashed $input-border-color;
+
+ resize: none;
}
::ng-deep .tab-content {
- @include content-preview-base();
- max-height: 210px;
- border-bottom: 1px solid $input-border-color;
- border-left: 1px solid $input-border-color;
- border-right: 1px solid $input-border-color;
- border-bottom-left-radius: $input-border-radius;
- border-bottom-right-radius: $input-border-radius;
- }
- }
-}
+ grid-column: 2;
-@mixin maximized-in-medium-view {
- .root.maximized {
- @include maximized-base();
+ border: 0;
- textarea {
display: block;
- padding: $base-padding;
- border-right: 1px dashed $input-border-color !important;
- resize: none;
- scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
+ overflow-y: auto;
+ word-wrap: break-word;
- &:focus {
- box-shadow: none;
- }
+ scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
}
- }
-}
-@include in-small-view();
-@include maximized-in-small-view();
+ textarea,
+ ::ng-deep .tab-content {
+ grid-row: 2;
-@media only screen and (max-width: $mobile-view) {
- @include maximized-tabs-in-mobile-view();
-}
+ height: 100% !important;
+ max-height: none !important;
+ border-radius: 0;
-@media only screen and (max-width: #{$mobile-view + $menu-width}) {
- :host-context(.main-col:not(.expanded)) {
- @include maximized-tabs-in-mobile-view();
- }
-}
+ padding: 15px;
+ }
+
+ @media screen and (max-width: $mobile-view) {
+ grid-template-rows: auto 45% 1fr;
+ grid-template-columns: 1fr;
+
+ .nav-preview {
+ grid-column: 1;
+ }
-@media only screen and (min-width: $small-view) {
- @include maximized-in-medium-view();
+ textarea {
+ grid-row: 2;
+ grid-column: 1;
+ border: 0;
+ border-bottom: 1px dashed $input-border-color;;
+ }
- :host-context(.expanded) {
- @include in-medium-view();
+ ::ng-deep .tab-content {
+ grid-column: 1;
+ grid-row: 3;
+ }
+ }
}
}
-@media only screen and (min-width: #{$small-view + $menu-width}) {
- :host-context(.main-col:not(.expanded)) {
- @include in-medium-view();
+:host-context(.main-col.expanded) {
+ .root.maximized {
+ left: 0;
+ width: 100%;
}
}
projects / github / Chocobozzz / PeerTube.git / blobdiff