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

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