client/src/sass/bootstrap.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2 @import '_bootstrap';
   3
   4 @import '_variables';
   5 @import '_mixins';
   6
   7 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
   8 .glyphicon-refresh-animate {
   9   animation: spin .7s infinite linear;
  10 }
  11
  12 .flex-auto {
  13   flex: auto;
  14 }
  15
  16 .c-hand {
  17   cursor: pointer;
  18 }
  19
  20 @keyframes spin {
  21   from {
  22     transform: scale(1) rotate(0deg);
  23   }
  24   to {
  25     transform: scale(1) rotate(360deg);
  26   }
  27 }
  28
  29 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
  30 .dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown):not(.input-group-prepend) {
  31   z-index: z(dropdown) !important;
  32
  33   &.list-overflow-menu,
  34   &.parent-entry {
  35     z-index: z(header) - 1 !important;
  36   }
  37 }
  38
  39 .dropdown-menu {
  40   z-index: z(dropdown) + 1 !important;
  41
  42   border-radius: 3px;
  43   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  44   font-size: 15px;
  45
  46   .dropdown-header {
  47     padding-left: 1rem;
  48   }
  49
  50   .dropdown-item {
  51     padding: 3px 15px;
  52
  53     &.active {
  54       color: pvar(--mainBackgroundColor) !important;
  55       background-color: pvar(--mainHoverColor);
  56       opacity: .9;
  57     }
  58
  59     &::after {
  60       display: none;
  61     }
  62   }
  63
  64   button {
  65     @include disable-default-a-behaviour;
  66   }
  67
  68   a {
  69     @include disable-default-a-behaviour;
  70     color: #000 !important;
  71   }
  72 }
  73
  74
  75 @media screen and (min-width: #{breakpoint(md)}) {
  76   .modal:before {
  77     vertical-align: middle;
  78     content: " ";
  79     height: 100%;
  80   }
  81
  82   .modal-dialog {
  83     text-align: left;
  84
  85     &:not(.modal-lg):not(.modal-xl) {
  86       min-width: 500px;
  87       width: 40vw;
  88       max-width: 900px;
  89     }
  90   }
  91 }
  92
  93 .modal {
  94   text-align: center;
  95
  96   .modal-content {
  97     background-color: pvar(--mainBackgroundColor);
  98   }
  99
 100   .modal-header {
 101     border-bottom: none;
 102     margin-bottom: 5px;
 103
 104     .modal-title {
 105       font-size: 20px;
 106       font-weight: $font-semibold;
 107     }
 108
 109     my-global-icon {
 110       @include icon(22px);
 111
 112       position: relative;
 113       top: 5px;
 114       float: right;
 115
 116       margin: 0;
 117       padding: 0;
 118       opacity: .5;
 119
 120       &[iconName="cross"] {
 121         @include icon(16px);
 122         top: -3px;
 123       }
 124     }
 125   }
 126
 127   .inputs {
 128     margin-bottom: 0;
 129     text-align: right;
 130
 131     .action-button-cancel {
 132       @include peertube-button;
 133       @include tertiary-button;
 134
 135       display: inline-block;
 136       margin-right: 10px;
 137     }
 138
 139     .action-button-submit {
 140       @include peertube-button;
 141       @include orange-button;
 142     }
 143   }
 144 }
 145
 146
 147 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 148 .modal-open {
 149   overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
 150   position: fixed; // Fix the body position to disable any scroll content
 151   width: 100vw; // Make sure the content fits all the available width when position: fixed
 152 }
 153
 154 // Nav customizations
 155 .nav .nav-link {
 156   display: flex !important;
 157   align-items: center;
 158   height: 30px !important;
 159   padding: 10px 15px !important;
 160 }
 161
 162 .nav.nav-pills {
 163   font-size: 16px !important;
 164   font-weight: $font-semibold !important;
 165
 166   .nav-link {
 167     opacity: 0.6 !important;
 168
 169     &.active, &:hover, &:active, &:focus {
 170       opacity: 1 !important;
 171     }
 172   }
 173
 174   a {
 175     @include disable-default-a-behaviour;
 176
 177     color: pvar(--mainForegroundColor);
 178   }
 179 }
 180
 181 .nav-tabs .nav-link {
 182   @include disable-default-a-behaviour;
 183
 184   color: pvar(--mainForegroundColor);
 185   font-weight: $font-semibold;
 186   border: none;
 187   border-bottom: 2px solid transparent;
 188   opacity: 0.6;
 189
 190   &.active {
 191     color: pvar(--mainForegroundColor);
 192     background-color: pvar(--mainBackgroundColor) !important;
 193     border-bottom-color: pvar(--mainColor);
 194   }
 195
 196   &.active, &:hover, &:active, &:focus {
 197     opacity: 1;
 198   }
 199 }
 200
 201 .card {
 202   background-color: pvar(--mainBackgroundColor);
 203   border-color: #dee2e6;
 204 }
 205
 206 .collapse-transition {
 207   // Animation when we show/hide the filters
 208   transition: max-height 0.3s;
 209   display: block !important;
 210   overflow: hidden !important;
 211   max-height: 0;
 212
 213   &.show {
 214     max-height: 1500px;
 215   }
 216 }
 217
 218 .dropdown-divider {
 219   margin: 0.3rem 0;
 220 }
 221
 222 ngb-modal-backdrop {
 223   z-index: z(modal) - 1 !important;
 224 }
 225
 226 ngb-modal-window {
 227   z-index: z(modal) !important;
 228 }
 229
 230 ngb-popover-window {
 231   z-index: z(popover) !important;
 232 }
 233
 234 ngb-tooltip-window {
 235   z-index: z(tooltip) !important;
 236 }
 237
 238 .btn-outline-secondary {
 239   border-color: $input-border-color;
 240
 241   &:focus-within,
 242   &:focus,
 243   &:hover {
 244     color: #fff;
 245     background-color: #6c757d;
 246   }
 247 }
 248
 249 .btn-outline-tertiary {
 250   color: pvar(--secondaryColor);
 251   border-color: pvar(--secondaryColor);
 252
 253   &:focus-within,
 254   &:focus,
 255   &:hover {
 256     color: pvar(--mainBackgroundColor);
 257     background-color: pvar(--secondaryColor);
 258   }
 259 }
 260
 261 // input box-shadow on focus
 262 .form-control {
 263   font-size: 15px;
 264   color: pvar(--mainForegroundColor);
 265   background-color: pvar(--inputBackgroundColor);
 266   outline: none;
 267
 268   &:focus-within,
 269   &:focus {
 270     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 271
 272     &.input-error {
 273       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
 274     }
 275   }
 276 }
 277
 278 .input-group {
 279   & > .form-control {
 280     flex: initial;
 281   }
 282   input.form-control {
 283     width: unset !important;
 284     flex-grow: 1;
 285   }
 286
 287   .input-group-prepend + input {
 288     border-top-left-radius: 0 !important;
 289     border-bottom-left-radius: 0 !important;
 290   }
 291 }
 292
 293 .has-feedback.has-clear {
 294   position: relative;
 295
 296   input {
 297     padding-right: 1.5rem !important;
 298   }
 299
 300   .form-control-clear {
 301     color: rgba(0, 0, 0, 0.4);
 302     /*
 303      * Enable pointer events as they have been disabled since Bootstrap 3.3
 304      * See https://github.com/twbs/bootstrap/pull/14104
 305      */
 306     pointer-events: all;
 307     display: flex;
 308     justify-content: center;
 309     align-items: center;
 310     position: absolute;
 311     right: .5rem;
 312     height: 95%;
 313
 314     &:hover {
 315       color: rgba(0, 0, 0, 0.7);
 316       cursor: pointer;
 317     }
 318   }
 319
 320   input:placeholder-shown + .form-control-clear {
 321     display: none;
 322   }
 323 }