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: 14px;
  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   font-size: 15px;
 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 3px;
 204   width: 13px;
 205   vertical-align: text-bottom;
 206   color: pvar(--inputPlaceholderColor);
 207 }
 208
 209 @media screen and (max-width: #{breakpoint(xxl)}) {
 210   .main-col {
 211     --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
 212     --videosHorizontalMarginContent: 30px;
 213
 214     &.expanded {
 215       --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 2)};
 216     }
 217   }
 218 }
 219
 220 @media screen and (max-width: #{breakpoint(lg)}) {
 221   .main-col {
 222     --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
 223   }
 224
 225   /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
 226   .main-col,
 227   .main-col.expanded {
 228     --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)};
 229
 230     .sub-menu {
 231       padding: 0 50px;
 232
 233       .title-page {
 234         font-size: 17px;
 235       }
 236     }
 237   }
 238 }
 239
 240 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 241   .main-col {
 242     width: 100%;
 243   }
 244 }
 245
 246 @media screen and (max-width: $small-view) {
 247   .main-col,
 248   .main-col.expanded {
 249     --horizontalMarginContent: 15px;
 250
 251     @include margin-left(0);
 252
 253     .sub-menu {
 254       width: 100vw;
 255       padding: 0 15px;
 256       margin-bottom: $sub-menu-margin-bottom-small-view;
 257       overflow-x: auto;
 258     }
 259
 260     // Use an appropriate offset top when sub-menu fixed
 261     .margin-content.offset-content {
 262       padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
 263     }
 264
 265     my-markdown-textarea {
 266       .root {
 267         max-width: 100% !important;
 268       }
 269     }
 270
 271     input[type=text],
 272     input[type=password],
 273     input[type=email],
 274     textarea,
 275     .peertube-select-container {
 276       flex-grow: 1;
 277     }
 278
 279     .caption input[type=text] {
 280       width: unset !important;
 281       flex-grow: 1;
 282     }
 283   }
 284 }