client/src/sass/application.scss

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