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