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