client/src/sass/application.scss

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