From c4ef42337b8437e24682abe69e26d1c5ca35579a Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Fri, 20 Oct 2023 11:55:23 -0400 Subject: [PATCH] feat: Improve notification styles (#3913) Co-authored-by: gadenbuie Co-authored-by: Carson Co-authored-by: cpsievert --- NEWS.md | 4 ++-- inst/www/shared/shiny.min.css | 2 +- inst/www/shared/shiny_scss/shiny.scss | 27 +++++++++++++++++---------- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/NEWS.md b/NEWS.md index 13dd2ed223..0c1bc19666 100644 --- a/NEWS.md +++ b/NEWS.md @@ -4,9 +4,9 @@ * Updated `selectizeInput()`'s selectize.js dependency from v0.12.4 to v0.15.2. In addition to many bug fixes and improvements, this update also adds several new [plugin options](https://selectize.dev/docs/demos/plugins). (#3875) -* Shiny's CSS styling for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc., now looks better with `{bslib}`'s upcoming CSS-only dark mode. (#3882) +* Shiny's CSS styling (for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc.), has been updated with `{bslib}`'s upcoming CSS-only dark mode feature in mind. (#3882, #3914) -* Shiny's Sass variables are now set specifically for major versions of Bootstrap. Bootstrap versions 3 and 4 are unaffected by this change, and the Bootstrap 5 variables now target Bootstrap 5.3 to take advantage of Bootstrap's dark mode and client-side theming via CSS variables. (#3914) +* Default styles for `showNotification()` were tweaked slightly to improve accessibility, sizing, and padding. (#3913) ## Bug fixes diff --git a/inst/www/shared/shiny.min.css b/inst/www/shared/shiny.min.css index 4fcce87541..e4a9d88580 100644 --- a/inst/www/shared/shiny.min.css +++ b/inst/www/shared/shiny.min.css @@ -1,2 +1,2 @@ /*! shiny 1.7.5.9000 | (c) 2012-2023 RStudio, PBC. | License: GPL-3 | file LICENSE */ -pre.shiny-text-output:empty:before{content:" "}pre.shiny-text-output.noplaceholder:empty{margin:0;padding:0;border-width:0;height:0}pre.shiny-text-output{word-wrap:normal}.shiny-image-output img.shiny-scalable,.shiny-plot-output img.shiny-scalable{max-width:100%;max-height:100%}#shiny-disconnected-overlay{position:fixed;inset:0;background-color:#999;opacity:.5;overflow:hidden;z-index:99998;pointer-events:none}html.autoreload-enabled #shiny-disconnected-overlay.reloading{opacity:0;animation:fadeIn .25s forwards;animation-delay:1s}@keyframes fadeIn{to{opacity:.1}}.table.shiny-table>thead>tr>th,.table.shiny-table>thead>tr>td,.table.shiny-table>tbody>tr>th,.table.shiny-table>tbody>tr>td,.table.shiny-table>tfoot>tr>th,.table.shiny-table>tfoot>tr>td{padding-right:12px;padding-left:12px}.shiny-table.spacing-xs>thead>tr>th,.shiny-table.spacing-xs>thead>tr>td,.shiny-table.spacing-xs>tbody>tr>th,.shiny-table.spacing-xs>tbody>tr>td,.shiny-table.spacing-xs>tfoot>tr>th,.shiny-table.spacing-xs>tfoot>tr>td{padding-top:3px;padding-bottom:3px}.shiny-table.spacing-s>thead>tr>th,.shiny-table.spacing-s>thead>tr>td,.shiny-table.spacing-s>tbody>tr>th,.shiny-table.spacing-s>tbody>tr>td,.shiny-table.spacing-s>tfoot>tr>th,.shiny-table.spacing-s>tfoot>tr>td{padding-top:5px;padding-bottom:5px}.shiny-table.spacing-m>thead>tr>th,.shiny-table.spacing-m>thead>tr>td,.shiny-table.spacing-m>tbody>tr>th,.shiny-table.spacing-m>tbody>tr>td,.shiny-table.spacing-m>tfoot>tr>th,.shiny-table.spacing-m>tfoot>tr>td{padding-top:8px;padding-bottom:8px}.shiny-table.spacing-l>thead>tr>th,.shiny-table.spacing-l>thead>tr>td,.shiny-table.spacing-l>tbody>tr>th,.shiny-table.spacing-l>tbody>tr>td,.shiny-table.spacing-l>tfoot>tr>th,.shiny-table.spacing-l>tfoot>tr>td{padding-top:10px;padding-bottom:10px}.shiny-table .NA{color:#909090}.shiny-output-error{color:red;white-space:pre-wrap}.shiny-output-error:before{content:"Error: ";font-weight:700}.shiny-output-error-validation{color:#888}.shiny-output-error-validation:before{content:"";font-weight:inherit}@supports (-ms-ime-align:auto){.shiny-bound-output{transition:0}}.recalculating{opacity:.3;transition:opacity .25s ease .5s}.slider-animate-container{text-align:right;margin-top:-9px}.slider-animate-button{position:relative;z-index:1;opacity:.5}.slider-animate-button .pause{display:none}.slider-animate-button.playing .pause,.slider-animate-button .play{display:inline}.slider-animate-button.playing .play{display:none}.progress.shiny-file-input-progress{visibility:hidden}.progress.shiny-file-input-progress .progress-bar.bar-danger{transition:none}.btn-file{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.shiny-input-container input[type=file]{overflow:hidden;max-width:100%}.shiny-progress-container{position:fixed;top:0;width:100%;z-index:2000}.shiny-progress .progress{position:absolute;width:100%;top:0;height:3px;margin:0}.shiny-progress .bar{opacity:.6;transition-duration:.25s}.shiny-progress .progress-text{position:absolute;right:10px;width:240px;background-color:#eef8ff;margin:0;padding:2px 3px;opacity:.85}.shiny-progress .progress-text .progress-message{padding:0 3px;font-weight:700;font-size:90%}.shiny-progress .progress-text .progress-detail{padding:0 3px;font-size:80%}.shiny-progress-notification .progress{margin-bottom:5px;height:10px}.shiny-progress-notification .progress-text .progress-message{font-weight:700;font-size:90%}.shiny-progress-notification .progress-text .progress-detail{font-size:80%}.shiny-label-null{display:none}.crosshair{cursor:crosshair}.grabbable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.grabbing{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.ns-resize{cursor:ns-resize}.ew-resize{cursor:ew-resize}.nesw-resize{cursor:nesw-resize}.nwse-resize{cursor:nwse-resize}.qt pre,.qt code{font-family:monospace!important}.qt5 .radio input[type=radio],.qt5 .checkbox input[type=checkbox]{margin-top:0}.qtmac input[type=radio],.qtmac input[type=checkbox]{zoom:1.0000001}.shiny-frame{border:none}.shiny-flow-layout>div{display:inline-block;vertical-align:top;padding-right:12px;width:220px}.shiny-split-layout{width:100%;white-space:nowrap}.shiny-split-layout>div{display:inline-block;vertical-align:top;box-sizing:border-box;overflow:auto}.shiny-input-panel{padding:6px 8px;margin-top:6px;margin-bottom:6px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:2px}.shiny-input-checkboxgroup label~.shiny-options-group,.shiny-input-radiogroup label~.shiny-options-group{margin-top:-10px}.shiny-input-checkboxgroup.shiny-input-container-inline label~.shiny-options-group,.shiny-input-radiogroup.shiny-input-container-inline label~.shiny-options-group{margin-top:-1px}.shiny-input-container:not(.shiny-input-container-inline){width:300px;max-width:100%}.well .shiny-input-container{width:auto}.shiny-input-container>div>select:not(.selectized){width:100%}#shiny-notification-panel{position:fixed;bottom:0;right:0;background-color:#0000;padding:2px;width:250px;z-index:99999}.shiny-notification{background-color:#e8e8e8;color:#333;border:1px solid #ccc;border-radius:3px;opacity:.85;padding:10px 8px 10px 10px;margin:2px}.shiny-notification-message{color:#31708f;background-color:#d9edf7;border:1px solid #bce8f1}.shiny-notification-warning{color:#8a6d3b;background-color:#fcf8e3;border:1px solid #faebcc}.shiny-notification-error{color:#a94442;background-color:#f2dede;border:1px solid #ebccd1}.shiny-notification-close{float:right;font-weight:700;font-size:18px;bottom:9px;position:relative;padding-left:4px;color:#444;cursor:default}.shiny-notification-close:hover{color:#000}.shiny-notification-content-action a{color:#337ab7;text-decoration:underline;font-weight:700}.shiny-file-input-active{box-shadow:inset 0 1px 1px #00000013,0 0 8px #66afe999}.shiny-file-input-over{box-shadow:inset 0 1px 1px #00000013,0 0 8px #4cae4c99}.datepicker table tbody tr td.disabled,.datepicker table tbody tr td.disabled:hover,.datepicker table tbody tr td span.disabled,.datepicker table tbody tr td span.disabled:hover{color:#aaa;cursor:not-allowed}.nav-hidden{display:none!important} +pre.shiny-text-output:empty:before{content:" "}pre.shiny-text-output.noplaceholder:empty{margin:0;padding:0;border-width:0;height:0}pre.shiny-text-output{word-wrap:normal}.shiny-image-output img.shiny-scalable,.shiny-plot-output img.shiny-scalable{max-width:100%;max-height:100%}#shiny-disconnected-overlay{position:fixed;inset:0;background-color:#999;opacity:.5;overflow:hidden;z-index:99998;pointer-events:none}html.autoreload-enabled #shiny-disconnected-overlay.reloading{opacity:0;animation:fadeIn .25s forwards;animation-delay:1s}@keyframes fadeIn{to{opacity:.1}}.table.shiny-table>thead>tr>th,.table.shiny-table>thead>tr>td,.table.shiny-table>tbody>tr>th,.table.shiny-table>tbody>tr>td,.table.shiny-table>tfoot>tr>th,.table.shiny-table>tfoot>tr>td{padding-right:12px;padding-left:12px}.shiny-table.spacing-xs>thead>tr>th,.shiny-table.spacing-xs>thead>tr>td,.shiny-table.spacing-xs>tbody>tr>th,.shiny-table.spacing-xs>tbody>tr>td,.shiny-table.spacing-xs>tfoot>tr>th,.shiny-table.spacing-xs>tfoot>tr>td{padding-top:3px;padding-bottom:3px}.shiny-table.spacing-s>thead>tr>th,.shiny-table.spacing-s>thead>tr>td,.shiny-table.spacing-s>tbody>tr>th,.shiny-table.spacing-s>tbody>tr>td,.shiny-table.spacing-s>tfoot>tr>th,.shiny-table.spacing-s>tfoot>tr>td{padding-top:5px;padding-bottom:5px}.shiny-table.spacing-m>thead>tr>th,.shiny-table.spacing-m>thead>tr>td,.shiny-table.spacing-m>tbody>tr>th,.shiny-table.spacing-m>tbody>tr>td,.shiny-table.spacing-m>tfoot>tr>th,.shiny-table.spacing-m>tfoot>tr>td{padding-top:8px;padding-bottom:8px}.shiny-table.spacing-l>thead>tr>th,.shiny-table.spacing-l>thead>tr>td,.shiny-table.spacing-l>tbody>tr>th,.shiny-table.spacing-l>tbody>tr>td,.shiny-table.spacing-l>tfoot>tr>th,.shiny-table.spacing-l>tfoot>tr>td{padding-top:10px;padding-bottom:10px}.shiny-table .NA{color:#909090}.shiny-output-error{color:red;white-space:pre-wrap}.shiny-output-error:before{content:"Error: ";font-weight:700}.shiny-output-error-validation{color:#888}.shiny-output-error-validation:before{content:"";font-weight:inherit}@supports (-ms-ime-align:auto){.shiny-bound-output{transition:0}}.recalculating{opacity:.3;transition:opacity .25s ease .5s}.slider-animate-container{text-align:right;margin-top:-9px}.slider-animate-button{position:relative;z-index:1;opacity:.5}.slider-animate-button .pause{display:none}.slider-animate-button.playing .pause,.slider-animate-button .play{display:inline}.slider-animate-button.playing .play{display:none}.progress.shiny-file-input-progress{visibility:hidden}.progress.shiny-file-input-progress .progress-bar.bar-danger{transition:none}.btn-file{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.shiny-input-container input[type=file]{overflow:hidden;max-width:100%}.shiny-progress-container{position:fixed;top:0;width:100%;z-index:2000}.shiny-progress .progress{position:absolute;width:100%;top:0;height:3px;margin:0}.shiny-progress .bar{opacity:.6;transition-duration:.25s}.shiny-progress .progress-text{position:absolute;right:10px;width:240px;background-color:#eef8ff;margin:0;padding:2px 3px;opacity:.85}.shiny-progress .progress-text .progress-message{padding:0 3px;font-weight:700;font-size:90%}.shiny-progress .progress-text .progress-detail{padding:0 3px;font-size:80%}.shiny-progress-notification .progress{margin-bottom:5px;height:10px}.shiny-progress-notification .progress-text .progress-message{font-weight:700;font-size:90%}.shiny-progress-notification .progress-text .progress-detail{font-size:80%}.shiny-label-null{display:none}.crosshair{cursor:crosshair}.grabbable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.grabbing{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.ns-resize{cursor:ns-resize}.ew-resize{cursor:ew-resize}.nesw-resize{cursor:nesw-resize}.nwse-resize{cursor:nwse-resize}.qt pre,.qt code{font-family:monospace!important}.qt5 .radio input[type=radio],.qt5 .checkbox input[type=checkbox]{margin-top:0}.qtmac input[type=radio],.qtmac input[type=checkbox]{zoom:1.0000001}.shiny-frame{border:none}.shiny-flow-layout>div{display:inline-block;vertical-align:top;padding-right:12px;width:220px}.shiny-split-layout{width:100%;white-space:nowrap}.shiny-split-layout>div{display:inline-block;vertical-align:top;box-sizing:border-box;overflow:auto}.shiny-input-panel{padding:6px 8px;margin-top:6px;margin-bottom:6px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:2px}.shiny-input-checkboxgroup label~.shiny-options-group,.shiny-input-radiogroup label~.shiny-options-group{margin-top:-10px}.shiny-input-checkboxgroup.shiny-input-container-inline label~.shiny-options-group,.shiny-input-radiogroup.shiny-input-container-inline label~.shiny-options-group{margin-top:-1px}.shiny-input-container:not(.shiny-input-container-inline){width:300px;max-width:100%}.well .shiny-input-container{width:auto}.shiny-input-container>div>select:not(.selectized){width:100%}#shiny-notification-panel{position:fixed;bottom:0;right:0;background-color:#0000;padding:2px;width:300px;z-index:99999}.shiny-notification{position:relative;background-color:#e8e8e8;color:#333;border:1px solid #ccc;border-radius:3px;opacity:.85;padding:10px 2rem 10px 10px;margin:5px}.shiny-notification-message{color:#31708f;background-color:#d9edf7;border:1px solid #bce8f1}.shiny-notification-warning{color:#8a6d3b;background-color:#fcf8e3;border:1px solid #faebcc}.shiny-notification-error{color:#a94442;background-color:#f2dede;border:1px solid #ebccd1}.shiny-notification-close{position:absolute;width:2rem;height:2rem;top:0;right:0;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:1.125em;padding:.25rem;color:#444;cursor:pointer}.shiny-notification-close:hover{color:#000;font-weight:700}.shiny-notification-content-action a{color:#337ab7;text-decoration:underline;font-weight:700}.shiny-file-input-active{box-shadow:inset 0 1px 1px #00000013,0 0 8px #66afe999}.shiny-file-input-over{box-shadow:inset 0 1px 1px #00000013,0 0 8px #4cae4c99}.datepicker table tbody tr td.disabled,.datepicker table tbody tr td.disabled:hover,.datepicker table tbody tr td span.disabled,.datepicker table tbody tr td span.disabled:hover{color:#aaa;cursor:not-allowed}.nav-hidden{display:none!important} diff --git a/inst/www/shared/shiny_scss/shiny.scss b/inst/www/shared/shiny_scss/shiny.scss index 1eb628bd0d..8957d33189 100644 --- a/inst/www/shared/shiny_scss/shiny.scss +++ b/inst/www/shared/shiny_scss/shiny.scss @@ -13,7 +13,7 @@ $notification-bg-color: #e8e8e8 !default; $notification-color: #333 !default; $notification-border: 1px solid #ccc !default; $notification-border-radius: 3px !default; -$notification-padding: 10px 8px 10px 10px !default; +$notification-padding: 10px 2rem 10px 10px !default; $notification-message-bg: #d9edf7 !default; $notification-message-color: #31708f !default; $notification-message-border: 1px solid #bce8f1 !default; @@ -390,18 +390,19 @@ html.autoreload-enabled #shiny-disconnected-overlay.reloading { right: 0; background-color: rgba(0,0,0,0); padding: 2px; - width: 250px; + width: 300px; z-index: 99999; } .shiny-notification { + position: relative; background-color: $notification-bg-color; color: $notification-color; border: $notification-border; @include border-radius-shim($notification-border-radius); opacity: 0.85; padding: $notification-padding; - margin: 2px; + margin: 5px; &-message { color: $notification-message-color; background-color: $notification-message-bg; @@ -418,17 +419,23 @@ html.autoreload-enabled #shiny-disconnected-overlay.reloading { border: $notification-error-border; } &-close { - float: right; - font-weight: bold; - font-size: 18px; - bottom: 9px; - position: relative; - padding-left: 4px; + position: absolute; + width: 2rem; + height: 2rem; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + font-weight: normal; + font-size: 1.125em; + padding: 0.25rem; color: $notification-close-color; - cursor: default; + cursor: pointer; } &-close:hover { color: $notification-close-hover-color; + font-weight: bold; } &-content-action a { color: $notification-content-action-color;