X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fbootstrap.scss;h=548e55e1e7d054e9d05e5483bbc88519481ea1ba;hb=8beea2d37d90e9a12d895f4a9eebc1e532313d8c;hp=fca1167014d894322ca76a3cf388d4d2265c78fa;hpb=aa0f19635ae4632e286de1599fc24f95f32a108c;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index fca116701..548e55e1e 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -6,24 +6,80 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d .glyphicon-refresh-animate { - animation: spin .7s infinite linear; + animation: spin 0.7s infinite linear; +} + +.glyphicon-duplicate { + font-size: 70%; +} + +.flex-auto { + flex: auto; +} + +.c-hand { + cursor: pointer; } @keyframes spin { - from { transform: scale(1) rotate(0deg);} - to { transform: scale(1) rotate(360deg);} + from { + transform: scale(1) rotate(0deg); + } + + to { + transform: scale(1) rotate(360deg); + } +} + +/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */ +.dropdown { + 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; +} + +.btn-group > .btn:not(:first-child) { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !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: pvar(--mainBackgroundColor) !important; + background-color: pvar(--mainHoverColor); + opacity: 0.9; + } + &:active { - color: #000 !important; + color: pvar(--mainForegroundColor) !important; + } + + &::after { + display: none; } } @@ -37,22 +93,25 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } +.badge { + line-height: 1.1; +} -@media screen and (min-width: 768px) { - .modal:before { - display: inline-block; +@media screen and (min-width: #{breakpoint(md)}) { + .modal::before { vertical-align: middle; - content: " "; + content: ' '; height: 100%; } .modal-dialog { - display: inline-block; 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; + } } } @@ -60,11 +119,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; text-align: center; .modal-content { - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); + word-break: break-word; } .modal-header { - border-bottom: none; + border-bottom: 0; margin-bottom: 5px; .modal-title { @@ -73,15 +133,21 @@ $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: 0.5; + + &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */ + @include icon(16px); + + top: -3px; + } } } @@ -89,17 +155,39 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; margin-bottom: 0; text-align: right; - .action-button-cancel { - @include peertube-button; - @include grey-button; - - display: inline-block; - margin-right: 10px; + > .peertube-button:not(:first-child) { + margin-left: 10px; } + } +} + - .action-button-submit { - @include peertube-button; - @include orange-button; +// 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: #000; + width: 100vw; + height: 100vh; + opacity: 0.75; + content: ''; + display: block; + position: fixed; + z-index: z('menu') - 1; + } } } } @@ -114,40 +202,51 @@ $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: 0; + 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; } @@ -168,15 +267,128 @@ 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; + } +} + +.callout { + padding: 1.25rem; + border: 1px solid #eee; + border-radius: .25rem; + + > label { + position: relative; + top: -5px; + left: -10px; + color: #6c757d !important; + } + + &:not(.callout-light) { + border-left-width: .25rem; + } + + &.callout-info { + border-color: pvar(--mainColorLightest); + border-left-color: pvar(--mainColor); } }