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
  30   --mainHoverColor: #{$main-hover-color};
  31   --mainBackgroundHoverColor: #{$main-background-hover-color};
  32
  33   --mainBackgroundColor: #{$bg-color};
  34   --mainForegroundColor: #{$fg-color};
  35
  36   --greyForegroundColor: #{$grey-foreground-color};
  37   --greyBackgroundColor: #{$grey-background-color};
  38   --greySecondaryBackgroundColor: #{$grey-background-hover-color};
  39
  40   --menuBackgroundColor: #{$menu-background};
  41   --menuForegroundColor: #{$menu-color};
  42
  43   --submenuBackgroundColor: #{$sub-menu-background-color};
  44   --channelBackgroundColor: #{$channel-background-color};
  45
  46   --inputForegroundColor: #{$input-foreground-color};
  47   --inputBackgroundColor: #{$input-background-color};
  48   --inputPlaceholderColor: #{$input-placeholder-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: 14px;
  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 }
 117
 118 label {
 119   font-weight: $font-bold;
 120   font-size: 15px;
 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 3px;
 207   width: 13px;
 208   vertical-align: text-bottom;
 209   color: pvar(--inputPlaceholderColor);
 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 }