client/src/app/shared/shared-forms/markdown-textarea.component.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4
   5 $nav-preview-tab-height: 30px;
   6 $base-padding: 15px;
   7 $input-border-radius: 3px;
   8
   9 @mixin in-small-view {
  10   .root {
  11     display: flex;
  12     flex-direction: column;
  13
  14     textarea {
  15       @include peertube-textarea(100%, 150px);
  16
  17       background-color: pvar(--markdownTextareaBackgroundColor);
  18
  19       font-family: monospace;
  20       font-size: 13px;
  21       border-bottom: 0;
  22       border-bottom-left-radius: unset;
  23       border-bottom-right-radius: unset;
  24     }
  25
  26     .nav-preview {
  27       @include padding-left(10px);
  28       @include padding-right(10px);
  29
  30       display: block;
  31       text-align: end;
  32       padding-top: 10px;
  33       padding-bottom: 10px;
  34       border-top: 1px dashed $input-border-color;
  35       border-left: 1px solid $input-border-color;
  36       border-right: 1px solid $input-border-color;
  37       border-bottom: 1px solid $input-border-color;
  38       border-bottom-right-radius: $input-border-radius;
  39
  40       border-bottom-left-radius: $input-border-radius;
  41       ::ng-deep {
  42         .nav-link {
  43           display: none !important;
  44         }
  45
  46         .maximize-button {
  47           padding: 0 7px;
  48           cursor: pointer;
  49
  50           svg {
  51             stroke: var(--mainForegroundColor);
  52             opacity: 0.7;
  53           }
  54
  55           &:hover,
  56           &:active {
  57             svg {
  58               opacity: 1;
  59             }
  60           }
  61         }
  62       }
  63     }
  64
  65     ::ng-deep {
  66       .tab-content {
  67         display: none;
  68       }
  69     }
  70   }
  71 }
  72
  73 @mixin nav-preview-medium {
  74   display: flex;
  75   flex-grow: 1;
  76   border-bottom-left-radius: unset;
  77   border-bottom-right-radius: unset;
  78   border-bottom: 2px solid pvar(--mainColor);
  79
  80   :first-child {
  81     @include margin-left(auto);
  82   }
  83
  84   ::ng-deep {
  85     .nav-link {
  86       display: flex !important;
  87       align-items: center;
  88       height: $nav-preview-tab-height !important;
  89       padding: 0 15px !important;
  90       font-size: 85% !important;
  91       opacity: .7;
  92     }
  93
  94     .maximize-button {
  95       @include margin-left(5px);
  96     }
  97   }
  98 }
  99
 100 @mixin content-preview-base {
 101   display: block;
 102   min-height: 75px;
 103   padding: $base-padding;
 104   overflow-y: auto;
 105   word-wrap: break-word;
 106 }
 107
 108 @mixin maximized-base {
 109   $nav-preview-vertical-padding: 40px;
 110
 111   flex-direction: row;
 112   z-index: #{z(header) - 1};
 113   position: fixed;
 114   top: $header-height;
 115   left: $menu-width;
 116   max-height: none !important;
 117   max-width: none !important;
 118   width: calc(100% - #{$menu-width});
 119   height: calc(100vh - #{$header-height}) !important;
 120
 121   .nav-preview {
 122     @include nav-preview-medium();
 123     @include padding-right(0);
 124     @include padding-left(0);
 125
 126     padding-top: math.div($nav-preview-vertical-padding, 2);
 127     padding-bottom: math.div($nav-preview-vertical-padding, 2);
 128     position: absolute;
 129     background-color: pvar(--mainBackgroundColor);
 130     width: 100% !important;
 131     border-top: 0;
 132     border-left: 0;
 133     border-right: 0;
 134
 135     :last-child {
 136       @include margin-right(pvar(--horizontalMarginContent));
 137     }
 138   }
 139
 140   ::ng-deep .tab-content {
 141     @include content-preview-base();
 142     background-color: pvar(--mainBackgroundColor);
 143     scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
 144   }
 145
 146   textarea,
 147   ::ng-deep .tab-content {
 148     max-height: none !important;
 149     max-width: none !important;
 150     margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
 151     height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
 152     width: 50% !important;
 153     border: 0 !important;
 154     border-radius: unset !important;
 155   }
 156
 157   :host-context(.expanded) {
 158     .root.maximized {
 159       left: 0;
 160       width: 100%;
 161     }
 162   }
 163 }
 164
 165 @mixin maximized-in-small-view {
 166   .root.maximized {
 167     @include maximized-base();
 168
 169     textarea {
 170       display: none;
 171     }
 172
 173     ::ng-deep .tab-content {
 174       width: 100% !important;
 175     }
 176   }
 177 }
 178
 179 @mixin maximized-tabs-in-mobile-view {
 180   // Ellipsis on tabs for mobile view
 181   .root.maximized {
 182     .nav-preview {
 183       ::ng-deep .nav-link {
 184         @include ellipsis();
 185         @include margin-right(10px !important);
 186
 187         display: block !important;
 188         max-width: 45% !important;
 189         padding: 5px 0 !important;
 190         text-align: center;
 191
 192         &:not(.active) {
 193           max-width: 15% !important;
 194         }
 195
 196         &.active {
 197           padding: 5px 15px !important;
 198         }
 199       }
 200     }
 201   }
 202 }
 203
 204 @mixin in-medium-view {
 205   .root {
 206     .nav-preview {
 207       @include nav-preview-medium();
 208     }
 209
 210     ::ng-deep .tab-content {
 211       @include content-preview-base();
 212       max-height: 210px;
 213       border-bottom: 1px solid $input-border-color;
 214       border-left: 1px solid $input-border-color;
 215       border-right: 1px solid $input-border-color;
 216       border-bottom-left-radius: $input-border-radius;
 217       border-bottom-right-radius: $input-border-radius;
 218     }
 219   }
 220 }
 221
 222 @mixin maximized-in-medium-view {
 223   .root.maximized {
 224     @include maximized-base();
 225
 226     textarea {
 227       display: block;
 228       padding: $base-padding;
 229       border-right: 1px dashed $input-border-color !important;
 230       resize: none;
 231       scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
 232
 233       &:focus {
 234         box-shadow: none;
 235       }
 236     }
 237   }
 238 }
 239
 240 @include in-small-view();
 241 @include maximized-in-small-view();
 242
 243 @media only screen and (max-width: $mobile-view) {
 244   @include maximized-tabs-in-mobile-view();
 245 }
 246
 247 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
 248   :host-context(.main-col:not(.expanded)) {
 249     @include maximized-tabs-in-mobile-view();
 250   }
 251 }
 252
 253 @media only screen and (min-width: $small-view) {
 254   @include maximized-in-medium-view();
 255
 256   :host-context(.expanded) {
 257     @include in-medium-view();
 258   }
 259 }
 260
 261 @media only screen and (min-width: #{$small-view + $menu-width}) {
 262   :host-context(.main-col:not(.expanded)) {
 263     @include in-medium-view();
 264   }
 265 }