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