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 [hidden] {
  19   display: none !important;
  20 }
  21
  22 body {
  23   /*** theme ***/
  24   // now beware sass requires interpolation
  25   // for css custom properties #{$var}
  26   --mainColor: #{$main-color};
  27   --mainColorLighter: #{$main-color-lighter};
  28   --mainColorLightest: #{$main-color-lightest};
  29   --mainColorVeryLight: #{$main-color-very-light};
  30
  31   --mainHoverColor: #{$main-hover-color};
  32   --mainBackgroundHoverColor: #{$main-background-hover-color};
  33
  34   --mainBackgroundColor: #{$bg-color};
  35   --mainForegroundColor: #{$fg-color};
  36
  37   --greyForegroundColor: #{$grey-foreground-color};
  38   --greyBackgroundColor: #{$grey-background-color};
  39   --greySecondaryBackgroundColor: #{$grey-background-hover-color};
  40
  41   --menuBackgroundColor: #{$menu-background};
  42   --menuForegroundColor: #{$menu-color};
  43
  44   --submenuBackgroundColor: #{$sub-menu-background-color};
  45   --channelBackgroundColor: #{$channel-background-color};
  46
  47   --inputForegroundColor: #{$input-foreground-color};
  48   --inputBackgroundColor: #{$input-background-color};
  49   --inputPlaceholderColor: #{$input-placeholder-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: 14px;
  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 }
 118
 119 label {
 120   font-weight: $font-bold;
 121   font-size: 15px;
 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 3px;
 208   width: 13px;
 209   vertical-align: text-bottom;
 210   color: pvar(--inputPlaceholderColor);
 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 }