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) {
  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) !important;
  41   border-radius: 3px;
  42   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);
  43   font-size: 15px;
  44
  45   .dropdown-item {
  46     padding: 3px 15px;
  47
  48     &.active {
  49       color: var(--mainBackgroundColor) !important;
  50       background-color: var(--mainHoverColor);
  51       opacity: .9;
  52     }
  53
  54     &::after {
  55       display: none;
  56     }
  57   }
  58
  59   button {
  60     @include disable-default-a-behaviour;
  61   }
  62
  63   a {
  64     @include disable-default-a-behaviour;
  65     color: #000 !important;
  66   }
  67 }
  68
  69
  70 @media screen and (min-width: #{map-get($grid-breakpoints, md)}) {
  71   .modal:before {
  72     vertical-align: middle;
  73     content: " ";
  74     height: 100%;
  75   }
  76
  77   .modal-dialog {
  78     text-align: left;
  79     vertical-align: middle;
  80     min-width: 500px;
  81     width: 40vw;
  82     max-width: 900px;
  83   }
  84 }
  85
  86 .modal {
  87   text-align: center;
  88
  89   .modal-content {
  90     background-color: var(--mainBackgroundColor);
  91   }
  92
  93   .modal-header {
  94     border-bottom: none;
  95     margin-bottom: 5px;
  96
  97     .modal-title {
  98       font-size: 20px;
  99       font-weight: $font-semibold;
 100     }
 101
 102     my-global-icon {
 103       @include icon(22px);
 104
 105       position: relative;
 106       top: 5px;
 107       float: right;
 108
 109       margin: 0;
 110       padding: 0;
 111       opacity: .5;
 112
 113       &[iconName="cross"] {
 114         @include icon(16px);
 115         top: -3px;
 116       }
 117     }
 118   }
 119
 120   .inputs {
 121     margin-bottom: 0;
 122     text-align: right;
 123
 124     .action-button-cancel {
 125       @include peertube-button;
 126       @include tertiary-button;
 127
 128       display: inline-block;
 129       margin-right: 10px;
 130     }
 131
 132     .action-button-submit {
 133       @include peertube-button;
 134       @include orange-button;
 135     }
 136   }
 137 }
 138
 139 // Nav customizations
 140 .nav .nav-link {
 141   display: flex !important;
 142   align-items: center;
 143   height: 30px !important;
 144   padding: 10px 15px !important;
 145 }
 146
 147 .nav.nav-pills {
 148   font-size: 16px !important;
 149
 150   .nav-link.active {
 151     font-weight: $font-semibold !important;
 152   }
 153
 154   a {
 155     @include disable-default-a-behaviour;
 156
 157     color: var(--mainForegroundColor);
 158   }
 159 }
 160
 161 ngb-tabset {
 162
 163   .nav-link {
 164     &, & a {
 165       @include disable-default-a-behaviour;
 166
 167       color: var(--mainForegroundColor) !important;
 168     }
 169   }
 170
 171   .nav-pills .nav-link.active {
 172     color: #000 !important;
 173   }
 174 }
 175
 176 .nav-tabs .nav-link {
 177   &:not(.active) {
 178     border-bottom: 3px solid transparent;
 179   }
 180   &.active {
 181     font-weight: $font-semibold;
 182     background-color: var(--mainBackgroundColor) !important;
 183     border: none;
 184     border-bottom: 2px solid var(--mainColor);
 185   }
 186   &:hover {
 187     border-top-color: transparent;
 188     border-left-color: transparent;
 189     border-right-color: transparent;
 190   }
 191 }
 192
 193 .card {
 194   background-color: var(--mainBackgroundColor);
 195   border-color: #dee2e6;
 196 }
 197
 198 .collapse-transition {
 199   // Animation when we show/hide the filters
 200   transition: max-height 0.3s;
 201   display: block !important;
 202   overflow: hidden !important;
 203   max-height: 0;
 204
 205   &.show {
 206     max-height: 1500px;
 207   }
 208 }
 209
 210 .dropdown-divider {
 211   margin: 0.3rem 0;
 212 }
 213
 214 ngb-modal-backdrop {
 215   z-index: z(modal) - 1 !important;
 216 }
 217
 218 ngb-modal-window {
 219   z-index: z(modal) !important;
 220 }
 221
 222 ngb-popover-window {
 223   z-index: z(popover) !important;
 224 }
 225
 226 ngb-tooltip-window {
 227   z-index: z(tooltip) !important;
 228 }
 229
 230 .btn-outline-tertiary {
 231   color: var(--secondaryColor);
 232   border-color: var(--secondaryColor);
 233
 234   &:hover {
 235     color: var(--mainBackgroundColor);
 236     background-color: var(--secondaryColor);
 237   }
 238 }