Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
09/16/2019 08:38:34 PM (7 years ago)
Author:
imath
Message:

Hello BuddyPress Modal for BuddyPress 5.0.0

Use the WordPress modal used to display plugin details to display information about new BuddyPress major release.

Props johnjamesjacoby, dcavins, boonebgorges

Fixes #8132

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-core/admin/css/hello.css

    r12297 r12458  
    10102.0 - Dashicons
    11113.0 - Elements
    12     3.1 - Backdrop and container
    13     3.2 - Modal footer
    14     3.3 - Modal header
    15     3.4 - Modal content
     12    3.1 - Modal footer
     13    3.2 - Modal content
    16144.0 - Content styles
    17     4.1 - Backdrop and container
    18     4.2 - Footer content
    19     4.3 - Header content
    20     4.4 - Content content
     15    4.1 - Footer content
     16    4.2 - Header content
     17    4.3 - Content content
    21185.0 - Media
    22196.0 - Media Queries
    … …  
    3330}
    3431
    35 #bp-hello-container a {
    36     color: var(--bp-hello-color-primary);
    37 }
    38 
    39 #bp-hello-container a:hover {
    40     transition: all 0.1s ease-in-out;
    41     color: black;
    42 }
    43 
    44 #bp-hello-container .bp-hello-header h1 {
    45     line-height: 1.7;
    46     font-size: 21px;
    47     font-weight: 400;
    48 }
    49 
    5032.bp-hello-content p {
    5133    font-size: 16px;
    5234}
    5335
     36.bp-hello-content ul,
     37.bp-hello-content ol {
     38    list-style: inherit;
     39}
     40
     41.bp-hello-content h3 {
     42    font-size: 1.1em;
     43    font-weight: 500;
     44}
     45
    5446/*------------------------------------------------------------------------------
    5547 * 2.0 - Dashicons
    5648 *----------------------------------------------------------------------------*/
    57 .bp-hello-close .button {
    58     padding: 5px !important;
    59 }
    60 
    61 .bp-hello-close .close-modal:before {
    62     content: "\f158";
    63     color: #23282d;
    64     /* wp toolbar */
    65     font: 400 1.5em/1 dashicons;
    66     speak: none;
    67     -webkit-font-smoothing: antialiased;
    68     -moz-osx-font-smoothing: grayscale;
    69     background-image: none !important;
    70 }
    71 
    72 .bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
    73     transition: all 0.1s ease-in-out;
    74     color: var(--bp-hello-color-primary);
    75 }
    76 
    7749.bp-hello-social li a:before {
    7850    color: #23282d;
    … …  
    9870}
    9971
     72div.dashicons {
     73    width: -webkit-fit-content;
     74    width: fit-content;
     75}
     76
     77div.dashicons.big {
     78    font-size: 128px;
     79    display: block;
     80    color: var(--bp-hello-color-primary);
     81    height: 128px;
     82    width: 128px;
     83}
     84
    10085/*------------------------------------------------------------------------------
    10186 * 3.0 - Elements
    10287 *----------------------------------------------------------------------------*/
    10388/*
    104  * 3.1 - Backdrop and container
    105  */
    106 #bp-hello-backdrop {
    107     position: fixed;
    108     top: 0;
    109     left: 0;
    110     right: 0;
    111     bottom: 0;
    112     z-index: 9998;
    113     display: none;
    114 }
    115 
    116 #bp-hello-container {
    117     position: fixed;
    118     top: 0;
    119     bottom: 80px;
    120     z-index: 99999;
    121 }
    122 
    123 .bp-disable-scroll {
    124     overflow: hidden;
    125 }
    126 
    127 /*
    128  * 3.2 - Modal footer
    129  */
    130 .bp-hello-footer {
     89 * 3.1 - Modal footer
     90 */
     91#plugin-information-footer {
    13192    display: flex;
    13293    flex-wrap: wrap;
    133     height: 58px;
    134     max-height: 58px;
     94    padding: 0 16px;
     95    height: auto;
     96}
     97
     98#plugin-information-footer .dashicons-heart {
     99    color: #be3631;
    135100}
    136101
    … …  
    157122
    158123/*
    159  * 3.3 - Modal header
    160  */
    161 .bp-hello-header {
    162     height: 58px;
    163     max-height: 58px;
    164 }
    165 
    166 /*
    167  * 3.4 - Modal content
    168  */
     124 * 3.2 - Modal content
     125 */
     126#bp-hello-container {
     127    display: none;
     128}
     129
    169130.bp-hello-content {
    170131    padding: 0 25px;
    171     height: calc(100% - 58px);
    172     overflow-y: auto;
    173     -webkit-overflow-scrolling: touch;
     132    padding-bottom: 20px;
     133}
     134
     135#dynamic-content {
     136    padding-bottom: 40px;
     137    display: none;
     138}
     139
     140#dynamic-content.show {
     141    display: block;
     142}
     143
     144.plugin-details-modal #TB_title {
     145    /* stylelint-disable-line */
     146    height: 0;
     147    background: none;
     148    border: none;
     149}
     150
     151#TB_window.plugin-details-modal.thickbox-loading:before {
     152    /* stylelint-disable-line */
     153    z-index: 10;
     154    margin-top: 40px;
     155    background-color: none;
     156}
     157
     158.bp-hello-aligncenter * {
     159    margin: 10px auto;
     160}
     161
     162.bp-hello-alignleft {
     163    float: left;
     164}
     165
     166.bp-hello-alignleft:after {
     167    content: "";
     168    clear: left;
     169}
     170
     171.bp-hello-alignright {
     172    float: right;
     173}
     174
     175.bp-hello-alignright:after {
     176    content: "";
     177    clear: right;
     178}
     179
     180.bp-hello-divider {
     181    clear: both;
     182    border: none;
     183    margin-bottom: 20px;
    174184}
    175185
    … …  
    178188 *----------------------------------------------------------------------------*/
    179189/*
    180  * 4.1 - Backdrop and container
    181  */
    182 #bp-hello-backdrop {
    183     background-color: rgba(0, 0, 0, 0.8);
    184     transition: opacity 0.15s ease-out;
    185 }
    186 
    187 #bp-hello-container {
    188     background-color: white;
    189 }
    190 
    191 /*
    192  * 4.2 - Footer content
    193  */
    194 .bp-hello-footer {
    195     border-radius: 0 0 3px 3px;
    196     background-color: white;
    197     border-top: 1px solid var(--bp-hello-color-secondary);
    198     padding: 6px 25px;
    199 }
    200 
    201 .bp-hello-footer p {
    202     font-size: 15px;
    203 }
    204 
     190 * 4.1 - Footer content
     191 */
    205192.bp-hello-social-cta {
    206193    text-align: left;
    … …  
    216203
    217204/*
    218  * 4.3 - Header content
    219  */
    220 .bp-hello-header {
    221     padding: 6px 25px;
    222 }
    223 
    224 .bp-hello-header h1 {
    225     width: calc(100% - 51px);
    226 }
    227 
    228 #bp-hello-container .bp-hello-header {
    229     border-bottom: 1px solid var(--bp-hello-color-secondary);
    230 }
    231 
    232 .bp-hello-title {
    233     text-align: left;
    234 }
    235 
    236 .bp-hello-close {
    237     position: absolute;
    238     top: 20px;
    239     right: 25px;
    240     text-align: right;
    241 }
    242 
    243 /*
    244  * 4.4 - Content content
     205 * 4.2 - Header content
     206 */
     207#plugin-information-title.with-banner {
     208    background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
     209}
     210
     211/*
     212 * 4.3 - Content content
    245213 */
    246214.bp-hello-content {
    … …  
    260228}
    261229
     230.bp-hello-content .bp-hello-alignleft img,
     231.bp-hello-content .bp-hello-alignright img {
     232    max-width: 200px;
     233}
     234
    262235/*------------------------------------------------------------------------------
    263236 * 6.0 - Media Queries
    … …  
    267240 */
    268241@media only screen and (min-width: 1024px) {
    269     #bp-hello-backdrop {
    270         display: block;
    271     }
    272     #bp-hello-container {
    273         position: fixed;
    274         top: 60px;
    275         left: var(--bp-hello-container-size);
    276         right: var(--bp-hello-container-size);
    277         bottom: 30px;
    278         z-index: 9999;
    279         border-radius: 3px;
    280     }
    281     #bp-hello-container .bp-hello-header h1 {
    282         line-height: inherit;
    283     }
    284     .bp-hello-header {
    285         height: auto;
    286         max-height: inherit;
    287         padding: 6px 30px;
    288     }
    289     .bp-hello-close {
    290         right: 30px;
    291     }
    292     .bp-hello-close .close-modal:before {
    293         line-height: 0.7;
    294     }
    295     .bp-hello-footer {
    296         position: fixed;
    297         left: var(--bp-hello-container-size);
    298         right: var(--bp-hello-container-size);
    299         bottom: 30px;
    300         z-index: 10000;
    301         height: auto;
    302         max-height: inherit;
    303         padding: 6px 30px;
    304     }
    305242    .bp-hello-content {
    306         height: calc(100% - 90px);
    307         padding: 0 30px;
     243        padding: 0 30px 20px;
    308244    }
    309245    .bp-hello-content p {
    … …  
    315251 * 6.2 - Desktop Large
    316252 */
    317 @media screen and (min-width: 1280px) {
    318     #bp-hello-container,
    319     .bp-hello-footer {
    320         left: calc((100% - 896px) / 2);
    321         right: calc((100% - 896px) / 2);
     253@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     254    #plugin-information-title.with-banner {
     255        background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
    322256    }
    323257}
Note: See TracChangeset for help on using the changeset viewer.