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