2021-05-27 16:25:00 +00:00
|
|
|
@use '_variables' as *;
|
|
|
|
@use '_mixins' as *;
|
|
|
|
|
|
|
|
@import './_bootstrap-variables';
|
|
|
|
|
2022-10-07 13:29:53 +00:00
|
|
|
@import 'bootstrap/scss/functions';
|
|
|
|
@import 'bootstrap/scss/variables';
|
|
|
|
@import 'bootstrap/scss/maps';
|
|
|
|
@import 'bootstrap/scss/mixins';
|
|
|
|
@import 'bootstrap/scss/utilities';
|
|
|
|
|
|
|
|
@import 'bootstrap/scss/root';
|
|
|
|
@import 'bootstrap/scss/reboot';
|
|
|
|
@import 'bootstrap/scss/type';
|
|
|
|
@import 'bootstrap/scss/grid';
|
|
|
|
@import 'bootstrap/scss/forms';
|
|
|
|
@import 'bootstrap/scss/buttons';
|
|
|
|
@import 'bootstrap/scss/dropdown';
|
|
|
|
@import 'bootstrap/scss/button-group';
|
|
|
|
@import 'bootstrap/scss/nav';
|
|
|
|
@import 'bootstrap/scss/card';
|
|
|
|
@import 'bootstrap/scss/accordion';
|
|
|
|
@import 'bootstrap/scss/alert';
|
|
|
|
@import 'bootstrap/scss/close';
|
|
|
|
@import 'bootstrap/scss/modal';
|
|
|
|
@import 'bootstrap/scss/tooltip';
|
|
|
|
@import 'bootstrap/scss/popover';
|
|
|
|
@import 'bootstrap/scss/spinners';
|
|
|
|
|
|
|
|
@import 'bootstrap/scss/helpers';
|
|
|
|
@import 'bootstrap/scss/utilities/api';
|
2021-05-27 16:25:00 +00:00
|
|
|
|
2022-07-27 13:03:09 +00:00
|
|
|
.accordion {
|
|
|
|
--bs-accordion-color: #{pvar(--mainForegroundColor)};
|
|
|
|
--bs-accordion-bg: #{pvar(--mainBackgroundColor)};
|
|
|
|
}
|
|
|
|
|
2020-01-20 14:12:51 +00:00
|
|
|
.flex-auto {
|
|
|
|
flex: auto;
|
|
|
|
}
|
|
|
|
|
2020-02-28 12:52:21 +00:00
|
|
|
.c-hand {
|
2022-06-08 14:14:24 +00:00
|
|
|
cursor: pointer !important;
|
2020-02-28 12:52:21 +00:00
|
|
|
}
|
|
|
|
|
2022-06-10 12:39:31 +00:00
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
// Dropdown
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
|
2019-06-12 10:40:24 +00:00
|
|
|
.dropdown-menu {
|
2020-05-02 20:38:18 +00:00
|
|
|
.dropdown-header {
|
2021-06-07 15:38:31 +00:00
|
|
|
@include padding-left(1rem);
|
2020-05-02 20:38:18 +00:00
|
|
|
}
|
|
|
|
|
2019-06-12 10:40:24 +00:00
|
|
|
.dropdown-item {
|
2022-06-28 09:29:54 +00:00
|
|
|
color: pvar(--mainForegroundColor);
|
2019-06-12 10:40:24 +00:00
|
|
|
padding: 3px 15px;
|
|
|
|
|
2020-02-05 19:54:37 +00:00
|
|
|
&.active {
|
2020-06-09 07:33:28 +00:00
|
|
|
color: pvar(--mainBackgroundColor) !important;
|
|
|
|
background-color: pvar(--mainHoverColor);
|
2021-04-28 14:41:07 +00:00
|
|
|
opacity: 0.9;
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
2020-04-01 14:52:59 +00:00
|
|
|
|
2020-02-28 12:52:21 +00:00
|
|
|
&::after {
|
|
|
|
display: none;
|
|
|
|
}
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
@include disable-default-a-behaviour;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-10 12:39:31 +00:00
|
|
|
.dropdown-divider {
|
|
|
|
margin: 0.3rem 0;
|
|
|
|
}
|
|
|
|
|
2022-06-15 12:59:25 +00:00
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
// Alert
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
|
|
|
|
.alert {
|
|
|
|
p:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-10 12:39:31 +00:00
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
// Modal
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
|
2020-05-01 08:45:07 +00:00
|
|
|
@media screen and (min-width: #{breakpoint(md)}) {
|
2021-04-28 14:41:07 +00:00
|
|
|
.modal::before {
|
2019-12-20 19:14:58 +00:00
|
|
|
vertical-align: middle;
|
2021-04-28 14:41:07 +00:00
|
|
|
content: ' ';
|
2019-12-20 19:14:58 +00:00
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal-dialog {
|
2021-06-07 15:38:31 +00:00
|
|
|
text-align: start;
|
2020-04-13 15:03:01 +00:00
|
|
|
|
|
|
|
&:not(.modal-lg):not(.modal-xl) {
|
|
|
|
min-width: 500px;
|
|
|
|
width: 40vw;
|
|
|
|
max-width: 900px;
|
|
|
|
}
|
2019-12-20 19:14:58 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-06-12 10:40:24 +00:00
|
|
|
.modal {
|
2019-12-20 19:14:58 +00:00
|
|
|
text-align: center;
|
|
|
|
|
2019-06-12 10:40:24 +00:00
|
|
|
.modal-content {
|
2020-06-09 07:33:28 +00:00
|
|
|
background-color: pvar(--mainBackgroundColor);
|
2021-04-26 12:44:15 +00:00
|
|
|
word-break: break-word;
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.modal-header {
|
2021-04-28 14:41:07 +00:00
|
|
|
border-bottom: 0;
|
2019-06-12 10:40:24 +00:00
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
|
|
.modal-title {
|
|
|
|
font-size: 20px;
|
|
|
|
font-weight: $font-semibold;
|
|
|
|
}
|
|
|
|
|
|
|
|
my-global-icon {
|
2020-03-06 15:58:55 +00:00
|
|
|
@include icon(22px);
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2021-04-28 14:41:07 +00:00
|
|
|
opacity: 0.5;
|
2020-03-10 13:39:40 +00:00
|
|
|
|
2022-06-15 12:59:25 +00:00
|
|
|
&:hover {
|
|
|
|
opacity: 0.8;
|
2020-03-10 13:39:40 +00:00
|
|
|
}
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.inputs {
|
|
|
|
margin-bottom: 0;
|
2021-06-07 15:38:31 +00:00
|
|
|
text-align: end;
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2022-04-20 08:05:21 +00:00
|
|
|
> *:not(:first-child) {
|
2021-06-07 15:38:31 +00:00
|
|
|
@include margin-left(10px);
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-13 21:51:46 +00:00
|
|
|
|
|
|
|
// On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
|
|
|
|
.modal-open {
|
|
|
|
overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
|
2020-08-07 21:44:26 +00:00
|
|
|
width: 100vw; // Make sure the content fits all the available width
|
2020-07-13 21:51:46 +00:00
|
|
|
}
|
|
|
|
|
2020-08-17 08:17:54 +00:00
|
|
|
// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
|
|
|
|
@media (hover: none) and (pointer: coarse) {
|
2021-04-28 14:41:07 +00:00
|
|
|
.modal-open,
|
|
|
|
.menu-open {
|
2020-08-17 08:17:54 +00:00
|
|
|
overflow: hidden !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
// On touchscreen devices display content overlay when opened menu
|
|
|
|
.menu-open {
|
|
|
|
.main-col {
|
|
|
|
&::before {
|
2021-04-28 14:41:07 +00:00
|
|
|
background-color: #000;
|
2020-08-17 08:17:54 +00:00
|
|
|
width: 100vw;
|
|
|
|
height: 100vh;
|
|
|
|
opacity: 0.75;
|
|
|
|
content: '';
|
|
|
|
display: block;
|
2023-02-16 14:54:19 +00:00
|
|
|
position: fixed;
|
|
|
|
z-index: z(overlay);
|
2020-08-17 08:17:54 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-10 12:39:31 +00:00
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
// Nav
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
|
2019-06-12 10:40:24 +00:00
|
|
|
.nav .nav-link {
|
|
|
|
display: flex !important;
|
|
|
|
align-items: center;
|
|
|
|
height: 30px !important;
|
|
|
|
padding: 10px 15px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav.nav-pills {
|
|
|
|
font-size: 16px !important;
|
2020-07-23 13:09:15 +00:00
|
|
|
font-weight: $font-semibold !important;
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-07-23 13:09:15 +00:00
|
|
|
.nav-link {
|
2022-06-16 13:09:47 +00:00
|
|
|
opacity: 0.7 !important;
|
2020-07-23 13:09:15 +00:00
|
|
|
|
2021-04-28 14:41:07 +00:00
|
|
|
&.active,
|
|
|
|
&:hover,
|
|
|
|
&:active,
|
|
|
|
&:focus {
|
2020-07-23 13:09:15 +00:00
|
|
|
opacity: 1 !important;
|
|
|
|
}
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
@include disable-default-a-behaviour;
|
|
|
|
|
2020-06-09 07:33:28 +00:00
|
|
|
color: pvar(--mainForegroundColor);
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-23 13:09:15 +00:00
|
|
|
.nav-tabs .nav-link {
|
|
|
|
@include disable-default-a-behaviour;
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-07-23 13:09:15 +00:00
|
|
|
color: pvar(--mainForegroundColor);
|
|
|
|
font-weight: $font-semibold;
|
2021-04-28 14:41:07 +00:00
|
|
|
border: 0;
|
2020-07-23 13:09:15 +00:00
|
|
|
border-bottom: 2px solid transparent;
|
2022-06-16 13:09:47 +00:00
|
|
|
opacity: 0.7;
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-03-06 23:15:49 +00:00
|
|
|
&.active {
|
2020-07-23 13:09:15 +00:00
|
|
|
color: pvar(--mainForegroundColor);
|
2020-06-09 07:33:28 +00:00
|
|
|
background-color: pvar(--mainBackgroundColor) !important;
|
2020-07-23 13:09:15 +00:00
|
|
|
border-bottom-color: pvar(--mainColor);
|
2020-03-06 23:15:49 +00:00
|
|
|
}
|
2020-07-23 13:09:15 +00:00
|
|
|
|
2021-04-28 14:41:07 +00:00
|
|
|
&.active,
|
|
|
|
&:hover,
|
|
|
|
&:active,
|
|
|
|
&:focus {
|
2020-07-23 13:09:15 +00:00
|
|
|
opacity: 1;
|
2020-03-06 23:15:49 +00:00
|
|
|
}
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
|
|
|
|
2022-06-10 12:39:31 +00:00
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
// Card, collapse and accordion
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
|
2019-11-08 17:46:19 +00:00
|
|
|
.card {
|
2020-06-09 07:33:28 +00:00
|
|
|
background-color: pvar(--mainBackgroundColor);
|
2019-11-08 17:46:19 +00:00
|
|
|
border-color: #dee2e6;
|
|
|
|
}
|
|
|
|
|
2019-06-12 10:40:24 +00:00
|
|
|
.collapse-transition {
|
|
|
|
// Animation when we show/hide the filters
|
|
|
|
transition: max-height 0.3s;
|
|
|
|
display: block !important;
|
|
|
|
overflow: hidden !important;
|
|
|
|
max-height: 0;
|
|
|
|
|
|
|
|
&.show {
|
|
|
|
max-height: 1500px;
|
2021-08-19 07:24:29 +00:00
|
|
|
overflow: inherit !important;
|
2019-06-12 10:40:24 +00:00
|
|
|
}
|
|
|
|
}
|
2019-12-26 18:46:59 +00:00
|
|
|
|
2022-06-28 08:27:01 +00:00
|
|
|
.accordion-button {
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
&:not(.collapsed) {
|
|
|
|
font-weight: $font-bold;
|
|
|
|
|
|
|
|
my-global-icon {
|
|
|
|
color: pvar(--mainColorLighter);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-10 12:39:31 +00:00
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
// Buttons & form controls
|
|
|
|
// ---------------------------------------------------------------------------
|
2020-01-10 13:01:13 +00:00
|
|
|
|
2022-06-15 12:59:25 +00:00
|
|
|
.btn:not(.btn-sm) {
|
|
|
|
font-size: $button-font-size;
|
|
|
|
line-height: 1.2;
|
|
|
|
}
|
|
|
|
|
2020-04-03 12:13:24 +00:00
|
|
|
.btn-outline-secondary {
|
2022-06-28 09:29:54 +00:00
|
|
|
border-color: pvar(--inputBorderColor);
|
2020-04-03 12:13:24 +00:00
|
|
|
|
|
|
|
&:focus-within,
|
|
|
|
&:focus,
|
|
|
|
&:hover {
|
|
|
|
color: #fff;
|
|
|
|
background-color: #6c757d;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-03 14:17:17 +00:00
|
|
|
.btn-group.select-button {
|
2021-12-29 11:14:06 +00:00
|
|
|
font-weight: $font-semibold;
|
|
|
|
|
|
|
|
.active {
|
|
|
|
@include orange-button;
|
|
|
|
}
|
|
|
|
|
|
|
|
:not(.active) {
|
|
|
|
@include grey-button;
|
|
|
|
}
|
|
|
|
|
|
|
|
> * {
|
|
|
|
@include peertube-button-link;
|
|
|
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
|
|
&:not(:first-child) {
|
|
|
|
border-top-left-radius: 0 !important;
|
|
|
|
border-bottom-left-radius: 0 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
border-top-right-radius: 0 !important;
|
|
|
|
border-bottom-right-radius: 0 !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-02 09:39:14 +00:00
|
|
|
.form-control {
|
2020-06-09 07:33:28 +00:00
|
|
|
color: pvar(--mainForegroundColor);
|
|
|
|
background-color: pvar(--inputBackgroundColor);
|
2020-04-02 09:39:14 +00:00
|
|
|
outline: none;
|
|
|
|
}
|
2020-04-03 12:13:24 +00:00
|
|
|
|
2020-05-02 20:38:18 +00:00
|
|
|
.input-group {
|
2022-06-08 14:14:24 +00:00
|
|
|
> .btn,
|
|
|
|
> .input-group-text {
|
|
|
|
height: $button-height;
|
2020-05-02 20:38:18 +00:00
|
|
|
}
|
2021-04-28 14:41:07 +00:00
|
|
|
|
2022-06-08 14:14:24 +00:00
|
|
|
> .input-group-text {
|
|
|
|
line-height: normal;
|
|
|
|
opacity: 0.9;
|
2020-05-02 20:38:18 +00:00
|
|
|
}
|
|
|
|
|
2022-06-08 14:14:24 +00:00
|
|
|
.input-group-text > .dropdown-toggle {
|
|
|
|
display: flex;
|
|
|
|
}
|
2022-09-28 14:18:08 +00:00
|
|
|
}
|
2022-06-08 14:14:24 +00:00
|
|
|
|
2022-09-28 14:18:08 +00:00
|
|
|
.input-group,
|
|
|
|
.btn-group {
|
2022-06-08 14:14:24 +00:00
|
|
|
.last-in-group {
|
|
|
|
border-top-right-radius: 3px !important;
|
|
|
|
border-bottom-right-radius: 3px !important;
|
2020-05-02 20:38:18 +00:00
|
|
|
}
|
2020-04-03 12:13:24 +00:00
|
|
|
}
|
2020-05-03 21:01:57 +00:00
|
|
|
|
2022-06-08 14:14:24 +00:00
|
|
|
.has-clear {
|
2020-05-03 21:01:57 +00:00
|
|
|
input {
|
2021-06-07 15:38:31 +00:00
|
|
|
@include padding-right(1.5rem !important);
|
2020-05-03 21:01:57 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.form-control-clear {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
height: 95%;
|
2020-07-23 19:30:04 +00:00
|
|
|
font-size: 14px;
|
2022-06-15 12:59:25 +00:00
|
|
|
position: absolute;
|
|
|
|
right: .5rem;
|
2022-06-28 09:29:54 +00:00
|
|
|
opacity: 0.4;
|
2020-05-03 21:01:57 +00:00
|
|
|
|
|
|
|
&:hover {
|
2022-06-28 09:29:54 +00:00
|
|
|
opacity: 0.7;
|
2020-05-03 21:01:57 +00:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
input:placeholder-shown + .form-control-clear {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|