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 }
 116
 117 label {
 118   font-weight: $font-bold;
 119   margin-bottom: 0.5rem;
 120 }
 121
 122 code {
 123   background-color: pvar(--greyBackgroundColor);
 124   color: pvar(--greyForegroundColor);
 125   border-radius: 3px;
 126   padding: .2em .4em;
 127   margin: auto .4em;
 128   font-size: 75%;
 129   display: inline-block;
 130   vertical-align: middle;
 131 }
 132
 133 .main-col {
 134   @include margin-left($menu-width);
 135
 136   width: calc(100% - #{$menu-width});
 137   outline: none;
 138
 139   .margin-content {
 140     margin: 0 pvar(--horizontalMarginContent);
 141     flex-grow: 1;
 142   }
 143
 144   .sub-menu {
 145     background-color: pvar(--submenuBackgroundColor);
 146     width: 100%;
 147     display: flex;
 148     align-items: center;
 149     padding: 0 pvar(--horizontalMarginContent);
 150     height: $sub-menu-height;
 151     margin-bottom: $sub-menu-margin-bottom;
 152     overflow-x: auto;
 153
 154     &.sub-menu-fixed {
 155       position: fixed;
 156       z-index: #{z('sub-menu') - 1};
 157       max-width: pvar(--mainColWidth);
 158     }
 159   }
 160
 161   // Use an appropriate offset top when sub-menu fixed
 162   .margin-content.offset-content {
 163     padding-top: $sub-menu-height + $sub-menu-margin-bottom;
 164   }
 165
 166   // Override some properties if the main content is expanded (no menu on the left)
 167   &.expanded {
 168     --horizontalMarginContent: #{$expanded-horizontal-margins};
 169     --mainColWidth: 100vw;
 170
 171     @include margin-left(0);
 172     width: 100%;
 173   }
 174
 175   &.lock-scroll .main-row > router-outlet + * {  /* stylelint-disable-line selector-max-compound-selectors */
 176     // Lock and hide body scrollbars
 177     position: fixed;
 178
 179     // Lock and hide sub-menu scrollbars
 180     .sub-menu { /* stylelint-disable-line */
 181       overflow-x: hidden;
 182     }
 183   }
 184 }
 185
 186 // In tables, don't have a hover different background
 187 table {
 188   my-edit-button,
 189   my-delete-button {
 190     .action-button {
 191       &:hover,
 192       &:active,
 193       &:focus,
 194       &[disabled],
 195       &.disabled {
 196         background-color: pvar(--greyBackgroundColor) !important;
 197         opacity: 0.8;
 198       }
 199     }
 200   }
 201 }
 202
 203 my-global-icon[iconName=external-link] {
 204   margin: 0 0.3em;
 205   width: 0.9em;
 206   height: 0.9em;
 207   display: inline-block;
 208   color: pvar(--inputPlaceholderColor);
 209   position: relative;
 210   top: -0.1em;
 211 }
 212
 213 @media screen and (max-width: #{breakpoint(xxl)}) {
 214   .main-col {
 215     --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
 216     --videosHorizontalMarginContent: 30px;
 217
 218     &.expanded {
 219       --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 2)};
 220     }
 221   }
 222 }
 223
 224 @media screen and (max-width: #{breakpoint(lg)}) {
 225   .main-col {
 226     --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
 227   }
 228
 229   /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
 230   .main-col,
 231   .main-col.expanded {
 232     --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)};
 233
 234     .sub-menu {
 235       padding: 0 50px;
 236
 237       .title-page {
 238         font-size: 17px;
 239       }
 240     }
 241   }
 242 }
 243
 244 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 245   .main-col {
 246     width: 100%;
 247   }
 248 }
 249
 250 @media screen and (max-width: $small-view) {
 251   .main-col,
 252   .main-col.expanded {
 253     --horizontalMarginContent: 15px;
 254
 255     @include margin-left(0);
 256
 257     .sub-menu {
 258       width: 100vw;
 259       padding: 0 15px;
 260       margin-bottom: $sub-menu-margin-bottom-small-view;
 261       overflow-x: auto;
 262     }
 263
 264     // Use an appropriate offset top when sub-menu fixed
 265     .margin-content.offset-content {
 266       padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
 267     }
 268
 269     my-markdown-textarea {
 270       .root {
 271         max-width: 100% !important;
 272       }
 273     }
 274
 275     input[type=text],
 276     input[type=password],
 277     input[type=email],
 278     textarea,
 279     .peertube-select-container {
 280       flex-grow: 1;
 281     }
 282
 283     .caption input[type=text] {
 284       width: unset !important;
 285       flex-grow: 1;
 286     }
 287   }
 288 }