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 @keyframes spin {
  13   from { transform: scale(1) rotate(0deg);}
  14   to { transform: scale(1) rotate(360deg);}
  15 }
  16
  17 .dropdown-menu {
  18   border-radius: 3px;
  19   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);
  20   font-size: 15px;
  21
  22   .dropdown-item {
  23     padding: 3px 15px;
  24
  25     &:active {
  26       color: #000 !important;
  27     }
  28   }
  29
  30   button {
  31     @include disable-default-a-behaviour;
  32   }
  33
  34   a {
  35     @include disable-default-a-behaviour;
  36     color: #000 !important;
  37   }
  38 }
  39
  40
  41 @media screen and (min-width: 768px) {
  42   .modal:before {
  43     display: inline-block;
  44     vertical-align: middle;
  45     content: " ";
  46     height: 100%;
  47   }
  48
  49   .modal-dialog {
  50     display: inline-block;
  51     text-align: left;
  52     vertical-align: middle;
  53     min-width: 500px;
  54     width: 40vw;
  55     max-width: 900px;
  56   }
  57 }
  58
  59 .modal {
  60   text-align: center;
  61
  62   .modal-content {
  63     background-color: var(--mainBackgroundColor);
  64   }
  65
  66   .modal-header {
  67     border-bottom: none;
  68     margin-bottom: 5px;
  69
  70     .modal-title {
  71       font-size: 20px;
  72       font-weight: $font-semibold;
  73     }
  74
  75     my-global-icon {
  76       @include icon(24px);
  77
  78       position: relative;
  79       top: 3px;
  80       float: right;
  81
  82       margin: 0;
  83       padding: 0;
  84       opacity: 1;
  85     }
  86   }
  87
  88   .inputs {
  89     margin-bottom: 0;
  90     text-align: right;
  91
  92     .action-button-cancel {
  93       @include peertube-button;
  94       @include grey-button;
  95
  96       display: inline-block;
  97       margin-right: 10px;
  98     }
  99
 100     .action-button-submit {
 101       @include peertube-button;
 102       @include orange-button;
 103     }
 104   }
 105 }
 106
 107 // Nav customizations
 108 .nav .nav-link {
 109   display: flex !important;
 110   align-items: center;
 111   height: 30px !important;
 112   padding: 10px 15px !important;
 113 }
 114
 115 .nav.nav-pills {
 116   font-size: 16px !important;
 117
 118   .nav-link.active {
 119     font-weight: $font-semibold !important;
 120   }
 121
 122   a {
 123     @include disable-default-a-behaviour;
 124
 125     color: var(--mainForegroundColor);
 126   }
 127 }
 128
 129 ngb-tabset.bootstrap {
 130
 131   .nav-link {
 132     &, & a {
 133       @include disable-default-a-behaviour;
 134
 135       color: var(--mainForegroundColor) !important;
 136     }
 137   }
 138
 139   .nav-pills .nav-link.active {
 140     color: #000 !important;
 141   }
 142 }
 143
 144 .nav-tabs .nav-link.active {
 145   background-color: var(--mainBackgroundColor) !important;
 146   border-bottom: none;
 147 }
 148
 149 .card {
 150   background-color: var(--mainBackgroundColor);
 151   border-color: #dee2e6;
 152 }
 153
 154 .collapse-transition {
 155   // Animation when we show/hide the filters
 156   transition: max-height 0.3s;
 157   display: block !important;
 158   overflow: hidden !important;
 159   max-height: 0;
 160
 161   &.show {
 162     max-height: 1500px;
 163   }
 164 }
 165
 166 .dropdown-divider {
 167   margin: 0.3rem 0;
 168 }