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

   1 @use '_variables';
   2 @use '_mixins';
   3
   4 $nav-preview-tab-height: 30px;
   5 $base-padding: 15px;
   6 $input-border-color: #C6C6C6;
   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.6;
  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   font-size: 15px;
 106   word-wrap: break-word;
 107 }
 108
 109 @mixin maximized-base {
 110   $nav-preview-vertical-padding: 40px;
 111
 112   flex-direction: row;
 113   z-index: #{z(header) - 1};
 114   position: fixed;
 115   top: $header-height;
 116   left: $menu-width;
 117   max-height: none !important;
 118   max-width: none !important;
 119   width: calc(100% - #{$menu-width});
 120   height: calc(100vh - #{$header-height}) !important;
 121
 122   .nav-preview {
 123     @include nav-preview-medium();
 124     @include padding-right(0);
 125     @include padding-left(0);
 126
 127     padding-top: #{$nav-preview-vertical-padding / 2};
 128     padding-bottom: #{$nav-preview-vertical-padding / 2};
 129     position: absolute;
 130     background-color: pvar(--mainBackgroundColor);
 131     width: 100% !important;
 132     border-top: 0;
 133     border-left: 0;
 134     border-right: 0;
 135
 136     :last-child {
 137       @include margin-right(pvar(--horizontalMarginContent));
 138     }
 139   }
 140
 141   ::ng-deep .tab-content {
 142     @include content-preview-base();
 143     background-color: pvar(--mainBackgroundColor);
 144     scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
 145   }
 146
 147   textarea,
 148   ::ng-deep .tab-content {
 149     max-height: none !important;
 150     max-width: none !important;
 151     margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
 152     height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
 153     width: 50% !important;
 154     border: 0 !important;
 155     border-radius: unset !important;
 156   }
 157
 158   :host-context(.expanded) {
 159     .root.maximized {
 160       left: 0;
 161       width: 100%;
 162     }
 163   }
 164 }
 165
 166 @mixin maximized-in-small-view {
 167   .root.maximized {
 168     @include maximized-base();
 169
 170     textarea {
 171       display: none;
 172     }
 173
 174     ::ng-deep .tab-content {
 175       width: 100% !important;
 176     }
 177   }
 178 }
 179
 180 @mixin maximized-tabs-in-mobile-view {
 181   // Ellipsis on tabs for mobile view
 182   .root.maximized {
 183     .nav-preview {
 184       ::ng-deep .nav-link {
 185         @include ellipsis();
 186         @include margin-right(10px !important);
 187
 188         display: block !important;
 189         max-width: 45% !important;
 190         padding: 5px 0 !important;
 191         text-align: center;
 192
 193         &:not(.active) {
 194           max-width: 15% !important;
 195         }
 196
 197         &.active {
 198           padding: 5px 15px !important;
 199         }
 200       }
 201     }
 202   }
 203 }
 204
 205 @mixin in-medium-view {
 206   .root {
 207     .nav-preview {
 208       @include nav-preview-medium();
 209     }
 210
 211     ::ng-deep .tab-content {
 212       @include content-preview-base();
 213       max-height: 210px;
 214       border-bottom: 1px solid $input-border-color;
 215       border-left: 1px solid $input-border-color;
 216       border-right: 1px solid $input-border-color;
 217       border-bottom-left-radius: $input-border-radius;
 218       border-bottom-right-radius: $input-border-radius;
 219     }
 220   }
 221 }
 222
 223 @mixin maximized-in-medium-view {
 224   .root.maximized {
 225     @include maximized-base();
 226
 227     textarea {
 228       display: block;
 229       padding: $base-padding;
 230       border-right: 1px dashed $input-border-color !important;
 231       resize: none;
 232       scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
 233
 234       &:focus {
 235         box-shadow: none;
 236       }
 237     }
 238   }
 239 }
 240
 241 @include in-small-view();
 242 @include maximized-in-small-view();
 243
 244 @media only screen and (max-width: $mobile-view) {
 245   @include maximized-tabs-in-mobile-view();
 246 }
 247
 248 @media only screen and (max-width: #{$mobile-view + $menu-width}) {
 249   :host-context(.main-col:not(.expanded)) {
 250     @include maximized-tabs-in-mobile-view();
 251   }
 252 }
 253
 254 @media only screen and (min-width: $small-view) {
 255   @include maximized-in-medium-view();
 256
 257   :host-context(.expanded) {
 258     @include in-medium-view();
 259   }
 260 }
 261
 262 @media only screen and (min-width: #{$small-view + $menu-width}) {
 263   :host-context(.main-col:not(.expanded)) {
 264     @include in-medium-view();
 265   }
 266 }