X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fbootstrap.scss;h=b90bffbfc7ce7912e75e05b1f746f193b9b18bf7;hb=832a12b0e80b3488fcf80a8a5bceb6ba3afa1f65;hp=035270e89f08f08a340bbbafde03e876e43f9803;hpb=24e7916c6897bbb38e057cdf1a102286006be964;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 035270e89..b90bffbfc 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -9,6 +9,14 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; animation: spin .7s infinite linear; } +.flex-auto { + flex: auto; +} + +.c-hand { + cursor: pointer; +} + @keyframes spin { from { transform: scale(1) rotate(0deg); @@ -18,23 +26,51 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } +/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */ .dropdown { - z-index: 10001 !important; + z-index: z(dropdown) !important; +} + +.list-overflow-menu, +.parent-entry { + z-index: z(header) - 1 !important; +} + +.btn-group, +.dropdown-root, +.action-dropdown, +.input-group-prepend, +.column-toggle { + z-index: inherit !important; } .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; + .dropdown-header { + padding-left: 1rem; + } + .dropdown-item { padding: 3px 15px; &.active { - color: var(--mainBackgroundColor) !important; - background-color: var(--mainHoverColor); + color: pvar(--mainBackgroundColor) !important; + background-color: pvar(--mainHoverColor); opacity: .9; } + + &:active { + color: pvar(--mainForegroundColor) !important; + } + + &::after { + display: none; + } } button { @@ -48,7 +84,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } -@media screen and (min-width: 768px) { +@media screen and (min-width: #{breakpoint(md)}) { .modal:before { vertical-align: middle; content: " "; @@ -57,10 +93,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .modal-dialog { text-align: left; - vertical-align: middle; - min-width: 500px; - width: 40vw; - max-width: 900px; + + &:not(.modal-lg):not(.modal-xl) { + min-width: 500px; + width: 40vw; + max-width: 900px; + } } } @@ -68,7 +106,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; text-align: center; .modal-content { - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); } .modal-header { @@ -81,15 +119,20 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } my-global-icon { - @include icon(24px); + @include icon(22px); position: relative; - top: 3px; + top: 5px; float: right; margin: 0; padding: 0; - opacity: 1; + opacity: .5; + + &[iconName="cross"] { + @include icon(16px); + top: -3px; + } } } @@ -99,7 +142,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .action-button-cancel { @include peertube-button; - @include grey-button; + @include tertiary-button; display: inline-block; margin-right: 10px; @@ -112,6 +155,36 @@ $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 + width: 100vw; // Make sure the content fits all the available width +} + +// 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: black; + width: 100vw; + height: 100vh; + opacity: 0.75; + content: ''; + display: block; + position: fixed; + z-index: z('menu') - 1; + } + } + } +} + // Nav customizations .nav .nav-link { display: flex !important; @@ -122,40 +195,45 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .nav.nav-pills { font-size: 16px !important; + font-weight: $font-semibold !important; + + .nav-link { + opacity: 0.6 !important; - .nav-link.active { - font-weight: $font-semibold !important; + &.active, &:hover, &:active, &:focus { + opacity: 1 !important; + } } a { @include disable-default-a-behaviour; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } } -ngb-tabset.bootstrap { +.nav-tabs .nav-link { + @include disable-default-a-behaviour; - .nav-link { - &, & a { - @include disable-default-a-behaviour; + color: pvar(--mainForegroundColor); + font-weight: $font-semibold; + border: none; + border-bottom: 2px solid transparent; + opacity: 0.6; - color: var(--mainForegroundColor) !important; - } + &.active { + color: pvar(--mainForegroundColor); + background-color: pvar(--mainBackgroundColor) !important; + border-bottom-color: pvar(--mainColor); } - .nav-pills .nav-link.active { - color: #000 !important; + &.active, &:hover, &:active, &:focus { + opacity: 1; } } -.nav-tabs .nav-link.active { - background-color: var(--mainBackgroundColor) !important; - border-bottom: none; -} - .card { - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); border-color: #dee2e6; } @@ -176,15 +254,105 @@ ngb-tabset.bootstrap { } ngb-modal-backdrop { - z-index: 10000 !important; + 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; +} + +.btn-outline-secondary { + border-color: $input-border-color; + + &:focus-within, + &:focus, + &:hover { + color: #fff; + background-color: #6c757d; + } } .btn-outline-tertiary { - color: var(--secondaryColor); - border-color: var(--secondaryColor); + color: pvar(--secondaryColor); + border-color: pvar(--secondaryColor); + &:focus-within, + &:focus, &:hover { - color: var(--mainBackgroundColor); - background-color: var(--secondaryColor); + color: pvar(--mainBackgroundColor); + background-color: pvar(--secondaryColor); + } +} + +// input box-shadow on focus +.form-control { + font-size: 15px; + color: pvar(--mainForegroundColor); + background-color: pvar(--inputBackgroundColor); + outline: none; + + &:focus-within, + &:focus { + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); + + &.input-error { + box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)}; + } + } +} + +.input-group { + & > .form-control { + flex: initial; + } + input.form-control { + width: unset !important; + flex-grow: 1; + } + + .input-group-prepend + input { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } +} + +.has-feedback.has-clear { + position: relative; + + input { + 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); + cursor: pointer; + } + } + + input:placeholder-shown + .form-control-clear { + display: none; } }