client/src/sass/application.scss

   1 @use 'sass:math';
   2
   3 @use '_variables' as *;
   4 @use '_mixins' as *;
   5 @use '_icons' as *;
   6
   7 @use '_fonts';
   8
   9 @use './custom-markup';
  10 @use './ng-select';
  11
  12 @use './bootstrap';
  13 @use './primeng-custom';
  14
  15 @use './z-index';
  16
  17 @use './class-helpers/index.scss';
  18
  19 body {
  20   /*** theme ***/
  21   // now beware sass requires interpolation
  22   // for css custom properties #{$var}
  23   --mainColor: #{$main-color};
  24   --mainColorLighter: #{$main-color-lighter};
  25   --mainColorLightest: #{$main-color-lightest};
  26   --mainColorVeryLight: #{$main-color-very-light};
  27
  28   --mainHoverColor: #{$main-hover-color};
  29   --mainBackgroundHoverColor: #{$main-background-hover-color};
  30
  31   --mainBackgroundColor: #{$bg-color};
  32   --mainForegroundColor: #{$fg-color};
  33
  34   --greyForegroundColor: #{$grey-foreground-color};
  35   --greyBackgroundColor: #{$grey-background-color};
  36   --greySecondaryBackgroundColor: #{$grey-background-hover-color};
  37
  38   --menuBackgroundColor: #{$menu-background};
  39   --menuForegroundColor: #{$menu-color};
  40
  41   --submenuBackgroundColor: #{$sub-menu-background-color};
  42   --channelBackgroundColor: #{$channel-background-color};
  43
  44   --inputForegroundColor: #{$input-foreground-color};
  45   --inputBackgroundColor: #{$input-background-color};
  46   --inputPlaceholderColor: #{$input-placeholder-color};
  47   --inputBorderColor: #{$input-border-color};
  48
  49   --textareaForegroundColor: #{$textarea-foreground-color};
  50   --textareaBackgroundColor: #{$textarea-background-color};
  51   --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
  52
  53   --actionButtonColor: #{$grey-foreground-color};
  54
  55   --supportButtonBackgroundColor: #{transparent};
  56   --supportButtonColor: #{pvar(--actionButtonColor)};
  57   --supportButtonHeartColor: #{$support-button-heart};
  58
  59   --activatedActionButtonColor: #{$activated-action-button-color};
  60
  61   --horizontalMarginContent: #{$not-expanded-horizontal-margins};
  62   --videosHorizontalMarginContent: 6vw;
  63   --mainColWidth: calc(100vw - #{$menu-width});
  64
  65   font-family: $main-fonts;
  66   font-weight: $font-regular;
  67   color: pvar(--mainForegroundColor);
  68   background-color: pvar(--mainBackgroundColor);
  69   font-size: 1rem;
  70   // On desktop browsers, make sure vertical scroll bar is always visible
  71   // Allow to disable the scrollbar instead of hide it when the content fit the body
  72   // And not move the content and header horizontally sticked to right when the content is updating
  73   overflow-y: scroll;
  74
  75   // Fix "reboot" style that set text-align: left
  76   text-align: start;
  77 }
  78
  79 ::selection {
  80   color: pvar(--mainBackgroundColor);
  81   background-color: pvar(--mainHoverColor);
  82 }
  83
  84 noscript,
  85 #incompatible-browser {
  86   display: block;
  87   font-size: 1.2rem;
  88   max-width: 600px;
  89   margin: 1rem auto;
  90 }
  91
  92 a {
  93   text-decoration: none;
  94 }
  95
  96 strong {
  97   font-weight: $font-semibold;
  98 }
  99
 100 input[readonly] {
 101   /* Force blank on readonly inputs */
 102   background-color: pvar(--inputBackgroundColor) !important;
 103 }
 104
 105 input,
 106 textarea {
 107   outline: none;
 108   color: pvar(--inputForegroundColor);
 109 }
 110
 111 button {
 112   @include disable-outline;
 113
 114   background: unset;
 115   color: pvar(--mainForegroundColor);
 116 }
 117
 118 label {
 119   font-weight: $font-bold;
 120   margin-bottom: 0.5rem;
 121 }
 122
 123 code {
 124   background-color: pvar(--greyBackgroundColor);
 125   color: pvar(--greyForegroundColor);
 126   border-radius: 3px;
 127   padding: .2em .4em;
 128   margin: auto .4em;
 129   font-size: 75%;
 130   display: inline-block;
 131   vertical-align: middle;
 132 }
 133
 134 .main-col {
 135   @include margin-left($menu-width);
 136
 137   width: calc(100% - #{$menu-width});
 138   outline: none;
 139
 140   .margin-content {
 141     margin: 0 pvar(--horizontalMarginContent);
 142     flex-grow: 1;
 143   }
 144
 145   .sub-menu {
 146     background-color: pvar(--submenuBackgroundColor);
 147     width: 100%;
 148     display: flex;
 149     align-items: center;
 150     padding: 0 pvar(--horizontalMarginContent);
 151     height: $sub-menu-height;
 152     margin-bottom: $sub-menu-margin-bottom;
 153     overflow-x: auto;
 154
 155     &.sub-menu-fixed {
 156       position: fixed;
 157       z-index: #{z('sub-menu') - 1};
 158       max-width: pvar(--mainColWidth);
 159     }
 160   }
 161
 162   // Use an appropriate offset top when sub-menu fixed
 163   .margin-content.offset-content {
 164     padding-top: $sub-menu-height + $sub-menu-margin-bottom;
 165   }
 166
 167   // Override some properties if the main content is expanded (no menu on the left)
 168   &.expanded {
 169     --horizontalMarginContent: #{$expanded-horizontal-margins};
 170     --mainColWidth: 100vw;
 171
 172     @include margin-left(0);
 173     width: 100%;
 174   }
 175
 176   &.lock-scroll .main-row > router-outlet + * {  /* stylelint-disable-line selector-max-compound-selectors */
 177     // Lock and hide body scrollbars
 178     position: fixed;
 179
 180     // Lock and hide sub-menu scrollbars
 181     .sub-menu { /* stylelint-disable-line */
 182       overflow-x: hidden;
 183     }
 184   }
 185 }
 186
 187 // In tables, don't have a hover different background
 188 table {
 189   my-edit-button,
 190   my-delete-button {
 191     .action-button {
 192       &:hover,
 193       &:active,
 194       &:focus,
 195       &[disabled],
 196       &.disabled {
 197         background-color: pvar(--greyBackgroundColor) !important;
 198         opacity: 0.8;
 199       }
 200     }
 201   }
 202 }
 203
 204 my-global-icon[iconName=external-link] {
 205   margin: 0 0.3em;
 206   width: 0.9em;
 207   height: 0.9em;
 208   display: inline-block;
 209   color: pvar(--inputPlaceholderColor);
 210   position: relative;
 211   top: -0.1em;
 212 }
 213
 214 @media screen and (max-width: #{breakpoint(xxl)}) {
 215   .main-col {
 216     --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
 217     --videosHorizontalMarginContent: 30px;
 218
 219     &.expanded {
 220       --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 2)};
 221     }
 222   }
 223 }
 224
 225 @media screen and (max-width: #{breakpoint(lg)}) {
 226   .main-col {
 227     --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
 228   }
 229
 230   /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
 231   .main-col,
 232   .main-col.expanded {
 233     --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)};
 234
 235     .sub-menu {
 236       padding: 0 50px;
 237
 238       .title-page {
 239         font-size: 17px;
 240       }
 241     }
 242   }
 243 }
 244
 245 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 246   .main-col {
 247     width: 100%;
 248   }
 249 }
 250
 251 @media screen and (max-width: $small-view) {
 252   .main-col,
 253   .main-col.expanded {
 254     --horizontalMarginContent: 15px;
 255
 256     @include margin-left(0);
 257
 258     .sub-menu {
 259       width: 100vw;
 260       padding: 0 15px;
 261       margin-bottom: $sub-menu-margin-bottom-small-view;
 262       overflow-x: auto;
 263     }
 264
 265     // Use an appropriate offset top when sub-menu fixed
 266     .margin-content.offset-content {
 267       padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
 268     }
 269
 270     my-markdown-textarea {
 271       .root {
 272         max-width: 100% !important;
 273       }
 274     }
 275
 276     input[type=text],
 277     input[type=password],
 278     input[type=email],
 279     textarea,
 280     .peertube-select-container {
 281       flex-grow: 1;
 282     }
 283
 284     .caption input[type=text] {
 285       width: unset !important;
 286       flex-grow: 1;
 287     }
 288   }
 289 }