X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fbootstrap.scss;h=03b2e8b157489ad498d35bfdd3bb4c26e54d6d68;hb=a14c176472614874586cbc64cf25e82bbdc52868;hp=dd5824b7a77915e2654c36b12de16e7ab757b78b;hpb=8110705d020a0025ce307a9c8ee5ba9bfe8e9323;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index dd5824b7a..03b2e8b15 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -1,50 +1,57 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; -@import '_bootstrap'; -@import '_variables'; -@import '_mixins'; - -// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d -.glyphicon-refresh-animate { - animation: spin .7s infinite linear; -} +@use '_variables' as *; +@use '_mixins' as *; + +@import './_bootstrap-variables'; + +@import '~bootstrap/scss/functions'; +@import '~bootstrap/scss/variables'; +@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'; + +@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; .flex-auto { flex: auto; } .c-hand { - cursor: pointer; -} - -@keyframes spin { - from { - transform: scale(1) rotate(0deg); - } - to { - transform: scale(1) rotate(360deg); - } + cursor: pointer !important; } -/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */ -.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown):not(.input-group-prepend) { - z-index: z(dropdown) !important; - - &.list-overflow-menu, - &.parent-entry { - z-index: z(header) - 1 !important; - } -} +// --------------------------------------------------------------------------- +// Dropdown +// --------------------------------------------------------------------------- .dropdown-menu { - z-index: z(dropdown) + 1 !important; - - border-radius: 3px; - 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); font-size: 15px; + color: pvar(--mainForegroundColor); + background-color: pvar(--mainBackgroundColor); .dropdown-header { - padding-left: 1rem; + @include padding-left(1rem); } .dropdown-item { @@ -53,7 +60,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; &.active { color: pvar(--mainBackgroundColor) !important; background-color: pvar(--mainHoverColor); - opacity: .9; + opacity: 0.9; } &::after { @@ -61,26 +68,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } - button { - @include disable-default-a-behaviour; - } - a { @include disable-default-a-behaviour; - color: #000 !important; } } +.dropdown-divider { + margin: 0.3rem 0; +} + +// --------------------------------------------------------------------------- +// Modal +// --------------------------------------------------------------------------- @media screen and (min-width: #{breakpoint(md)}) { - .modal:before { + .modal::before { vertical-align: middle; - content: " "; + content: ' '; height: 100%; } .modal-dialog { - text-align: left; + text-align: start; &:not(.modal-lg):not(.modal-xl) { min-width: 500px; @@ -95,10 +104,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .modal-content { background-color: pvar(--mainBackgroundColor); + word-break: break-word; } .modal-header { - border-bottom: none; + border-bottom: 0; margin-bottom: 5px; .modal-title { @@ -115,10 +125,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; margin: 0; padding: 0; - opacity: .5; + opacity: 0.5; - &[iconName="cross"] { + &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */ @include icon(16px); + top: -3px; } } @@ -126,19 +137,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .inputs { margin-bottom: 0; - text-align: right; - - .action-button-cancel { - @include peertube-button; - @include tertiary-button; + text-align: end; - display: inline-block; - margin-right: 10px; - } - - .action-button-submit { - @include peertube-button; - @include orange-button; + > *:not(:first-child) { + @include margin-left(10px); } } } @@ -147,11 +149,37 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; // 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 - position: fixed; // Fix the body position to disable any scroll content - width: 100vw; // Make sure the content fits all the available width when position: fixed + width: 100vw; // Make sure the content fits all the available width } -// Nav customizations +// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll +@media (hover: none) and (pointer: coarse) { + .modal-open, + .menu-open { + overflow: hidden !important; + } + + // On touchscreen devices display content overlay when opened menu + .menu-open { + .main-col { + &::before { + background-color: #000; + width: 100vw; + height: 100vh; + opacity: 0.75; + content: ''; + display: block; + position: fixed; + z-index: z(overlay); + } + } + } +} + +// --------------------------------------------------------------------------- +// Nav +// --------------------------------------------------------------------------- + .nav .nav-link { display: flex !important; align-items: center; @@ -161,9 +189,17 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .nav.nav-pills { font-size: 16px !important; + font-weight: $font-semibold !important; - .nav-link.active { - font-weight: $font-semibold !important; + .nav-link { + opacity: 0.6 !important; + + &.active, + &:hover, + &:active, + &:focus { + opacity: 1 !important; + } } a { @@ -173,32 +209,33 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } -.nav-tabs { - - .nav-link { - @include disable-default-a-behaviour; +.nav-tabs .nav-link { + @include disable-default-a-behaviour; - color: pvar(--mainForegroundColor) !important; - } -} + color: pvar(--mainForegroundColor); + font-weight: $font-semibold; + border: 0; + border-bottom: 2px solid transparent; + opacity: 0.6; -.nav-tabs .nav-link { - &:not(.active) { - border-bottom: 3px solid transparent; - } &.active { - font-weight: $font-semibold; + color: pvar(--mainForegroundColor); background-color: pvar(--mainBackgroundColor) !important; - border: none; - border-bottom: 2px solid pvar(--mainColor); + border-bottom-color: pvar(--mainColor); } - &:hover { - border-top-color: transparent; - border-left-color: transparent; - border-right-color: transparent; + + &.active, + &:hover, + &:active, + &:focus { + opacity: 1; } } +// --------------------------------------------------------------------------- +// Card, collapse and accordion +// --------------------------------------------------------------------------- + .card { background-color: pvar(--mainBackgroundColor); border-color: #dee2e6; @@ -213,28 +250,13 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; &.show { max-height: 1500px; + overflow: inherit !important; } } -.dropdown-divider { - margin: 0.3rem 0; -} - -ngb-modal-backdrop { - z-index: z(modal) - 1 !important; -} - -ngb-modal-window { - z-index: z(modal) !important; -} - -ngb-popover-window { - z-index: z(popover) !important; -} - -ngb-tooltip-window { - z-index: z(tooltip) !important; -} +// --------------------------------------------------------------------------- +// Buttons & form controls +// --------------------------------------------------------------------------- .btn-outline-secondary { border-color: $input-border-color; @@ -247,25 +269,41 @@ ngb-tooltip-window { } } -.btn-outline-tertiary { - color: pvar(--secondaryColor); - border-color: pvar(--secondaryColor); +.btn-group.select-button { + font-weight: $font-semibold; - &:focus-within, - &:focus, - &:hover { - color: pvar(--mainBackgroundColor); - background-color: pvar(--secondaryColor); + .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; + } } } -// input box-shadow on focus .form-control { font-size: 15px; color: pvar(--mainForegroundColor); background-color: pvar(--inputBackgroundColor); outline: none; + // Input box-shadow on focus &:focus-within, &:focus { box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); @@ -277,40 +315,43 @@ ngb-tooltip-window { } .input-group { - & > .form-control { - flex: initial; + > .btn, + > .input-group-text { + height: $button-height; } - input.form-control { - width: unset !important; - flex-grow: 1; + + > .input-group-text { + font-size: 15px; + line-height: normal; + opacity: 0.9; + } + + .input-group-text > .dropdown-toggle { + display: flex; } - .input-group-prepend + input { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; + .last-in-group { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } } -.has-feedback.has-clear { +.has-clear { position: relative; input { - padding-right: 1.5rem !important; + @include padding-right(1.5rem !important); } .form-control-clear { color: rgba(0, 0, 0, 0.4); - /* - * Enable pointer events as they have been disabled since Bootstrap 3.3 - * See https://github.com/twbs/bootstrap/pull/14104 - */ - pointer-events: all; display: flex; justify-content: center; align-items: center; position: absolute; right: .5rem; height: 95%; + font-size: 14px; &:hover { color: rgba(0, 0, 0, 0.7);