Skip to:
Content

BuddyPress.org

Changeset 12845


Ignore:
Timestamp:
02/13/2021 11:47:41 AM (4 years ago)
Author:
imath
Message:

Nouveau: improve Twenty Twenty-One Profile/Group Avatar UI

Update the twentytwentyone.scss file gathering all Avatar UI styles into the "Item Body: Global" subsection.

Fixes #8434 (branch 7.0)

Location:
branches/7.0/src/bp-templates/bp-nouveau
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • branches/7.0/src/bp-templates/bp-nouveau/css/twentytwentyone-rtl.css

    r12843 r12845  
    446446*----------------------------------------------------------
    447447*/
    448 #buddypress.twentytwentyone #group-create-body #avatar-crop-pane {
    449     margin-bottom: 1em;
    450 }
    451 
    452448#buddypress.twentytwentyone #group-create-body nav.group-create-links:not(.tabbed-links) {
    453449    background: transparent;
    … …  
    531527    font-size: var(--heading--font-size-h4);
    532528    letter-spacing: var(--heading--letter-spacing-h4);
     529}
     530
     531#buddypress.twentytwentyone .item-body .bp-avatar #avatar-crop-pane {
     532    margin-bottom: 1em;
     533}
     534
     535#buddypress.twentytwentyone .item-body .bp-avatar-nav ul.avatar-nav-items {
     536    border-bottom: 1px solid var(--global--color-primary);
     537}
     538
     539#buddypress.twentytwentyone .item-body .bp-avatar-nav ul.avatar-nav-items li.current {
     540    border: 1px solid var(--global--color-primary);
     541    border-bottom: 1px solid var(--global--color-background);
     542}
     543
     544#buddypress.twentytwentyone .item-body #drag-drop-area {
     545    border: 4px dashed var(--global--color-secondary);
     546}
     547
     548#buddypress.twentytwentyone .item-body #drag-drop-area .drag-drop-info {
     549    color: var(--global--color-secondary);
     550}
     551
     552#buddypress.twentytwentyone .item-body #drag-drop-area #bp-browse-button {
     553    margin: 50px auto 0;
     554}
     555
     556#buddypress.twentytwentyone .item-body .bp-avatar-status .warning,
     557#buddypress.twentytwentyone .item-body .bp-avatar-status .success,
     558#buddypress.twentytwentyone .item-body .bp-cover-image-status .warning,
     559#buddypress.twentytwentyone .item-body .bp-cover-image-status .success {
     560    background-color: var(--global--color-light-gray);
     561    border: none;
     562    border-right-width: 4px;
     563    border-right-style: solid;
     564    color: var(--global--color-dark-gray);
     565}
     566
     567#buddypress.twentytwentyone .item-body .bp-avatar-status .warning,
     568#buddypress.twentytwentyone .item-body .bp-cover-image-status .warning {
     569    border-right-color: var(--global--color-orange);
     570}
     571
     572#buddypress.twentytwentyone .item-body .bp-avatar-status .success,
     573#buddypress.twentytwentyone .item-body .bp-cover-image-status .success {
     574    border-right-color: var(--global--color-green);
     575}
     576
     577#buddypress.twentytwentyone .item-body .bp-avatar-status .error,
     578#buddypress.twentytwentyone .item-body .bp-cover-image-status .error {
     579    border-right-color: var(--global--color-red);
    533580}
    534581
    … …  
    735782#buddypress.twentytwentyone .field-visibility-settings-header {
    736783    color: var(--global--color-secondary);
    737 }
    738 
    739 #buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items {
    740     border-bottom: 1px solid var(--global--color-primary);
    741 }
    742 
    743 #buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items li.current {
    744     border: 1px solid var(--global--color-primary);
    745     border-bottom: 1px solid var(--global--color-background);
    746 }
    747 
    748 #buddypress.twentytwentyone #drag-drop-area {
    749     border: 4px dashed var(--global--color-secondary);
    750 }
    751 
    752 #buddypress.twentytwentyone #drag-drop-area .drag-drop-info {
    753     color: var(--global--color-secondary);
    754 }
    755 
    756 #buddypress.twentytwentyone #drag-drop-area #bp-browse-button {
    757     margin: 50px auto 0;
    758 }
    759 
    760 #buddypress.twentytwentyone .bp-avatar-status .warning,
    761 #buddypress.twentytwentyone .bp-avatar-status .success,
    762 #buddypress.twentytwentyone .bp-cover-image-status .warning,
    763 #buddypress.twentytwentyone .bp-cover-image-status .success {
    764     background-color: var(--global--color-light-gray);
    765     border: none;
    766     border-right-width: 4px;
    767     border-right-style: solid;
    768     color: var(--global--color-dark-gray);
    769 }
    770 
    771 #buddypress.twentytwentyone .bp-avatar-status .warning,
    772 #buddypress.twentytwentyone .bp-cover-image-status .warning {
    773     border-right-color: var(--global--color-orange);
    774 }
    775 
    776 #buddypress.twentytwentyone .bp-avatar-status .success,
    777 #buddypress.twentytwentyone .bp-cover-image-status .success {
    778     border-right-color: var(--global--color-green);
    779 }
    780 
    781 #buddypress.twentytwentyone .bp-avatar-status .error,
    782 #buddypress.twentytwentyone .bp-cover-image-status .error {
    783     border-right-color: var(--global--color-red);
    784784}
    785785

  • branches/7.0/src/bp-templates/bp-nouveau/css/twentytwentyone.css

    r12843 r12845  
    446446*----------------------------------------------------------
    447447*/
    448 #buddypress.twentytwentyone #group-create-body #avatar-crop-pane {
    449     margin-bottom: 1em;
    450 }
    451 
    452448#buddypress.twentytwentyone #group-create-body nav.group-create-links:not(.tabbed-links) {
    453449    background: transparent;
    … …  
    531527    font-size: var(--heading--font-size-h4);
    532528    letter-spacing: var(--heading--letter-spacing-h4);
     529}
     530
     531#buddypress.twentytwentyone .item-body .bp-avatar #avatar-crop-pane {
     532    margin-bottom: 1em;
     533}
     534
     535#buddypress.twentytwentyone .item-body .bp-avatar-nav ul.avatar-nav-items {
     536    border-bottom: 1px solid var(--global--color-primary);
     537}
     538
     539#buddypress.twentytwentyone .item-body .bp-avatar-nav ul.avatar-nav-items li.current {
     540    border: 1px solid var(--global--color-primary);
     541    border-bottom: 1px solid var(--global--color-background);
     542}
     543
     544#buddypress.twentytwentyone .item-body #drag-drop-area {
     545    border: 4px dashed var(--global--color-secondary);
     546}
     547
     548#buddypress.twentytwentyone .item-body #drag-drop-area .drag-drop-info {
     549    color: var(--global--color-secondary);
     550}
     551
     552#buddypress.twentytwentyone .item-body #drag-drop-area #bp-browse-button {
     553    margin: 50px auto 0;
     554}
     555
     556#buddypress.twentytwentyone .item-body .bp-avatar-status .warning,
     557#buddypress.twentytwentyone .item-body .bp-avatar-status .success,
     558#buddypress.twentytwentyone .item-body .bp-cover-image-status .warning,
     559#buddypress.twentytwentyone .item-body .bp-cover-image-status .success {
     560    background-color: var(--global--color-light-gray);
     561    border: none;
     562    border-left-width: 4px;
     563    border-left-style: solid;
     564    color: var(--global--color-dark-gray);
     565}
     566
     567#buddypress.twentytwentyone .item-body .bp-avatar-status .warning,
     568#buddypress.twentytwentyone .item-body .bp-cover-image-status .warning {
     569    border-left-color: var(--global--color-orange);
     570}
     571
     572#buddypress.twentytwentyone .item-body .bp-avatar-status .success,
     573#buddypress.twentytwentyone .item-body .bp-cover-image-status .success {
     574    border-left-color: var(--global--color-green);
     575}
     576
     577#buddypress.twentytwentyone .item-body .bp-avatar-status .error,
     578#buddypress.twentytwentyone .item-body .bp-cover-image-status .error {
     579    border-left-color: var(--global--color-red);
    533580}
    534581
    … …  
    735782#buddypress.twentytwentyone .field-visibility-settings-header {
    736783    color: var(--global--color-secondary);
    737 }
    738 
    739 #buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items {
    740     border-bottom: 1px solid var(--global--color-primary);
    741 }
    742 
    743 #buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items li.current {
    744     border: 1px solid var(--global--color-primary);
    745     border-bottom: 1px solid var(--global--color-background);
    746 }
    747 
    748 #buddypress.twentytwentyone #drag-drop-area {
    749     border: 4px dashed var(--global--color-secondary);
    750 }
    751 
    752 #buddypress.twentytwentyone #drag-drop-area .drag-drop-info {
    753     color: var(--global--color-secondary);
    754 }
    755 
    756 #buddypress.twentytwentyone #drag-drop-area #bp-browse-button {
    757     margin: 50px auto 0;
    758 }
    759 
    760 #buddypress.twentytwentyone .bp-avatar-status .warning,
    761 #buddypress.twentytwentyone .bp-avatar-status .success,
    762 #buddypress.twentytwentyone .bp-cover-image-status .warning,
    763 #buddypress.twentytwentyone .bp-cover-image-status .success {
    764     background-color: var(--global--color-light-gray);
    765     border: none;
    766     border-left-width: 4px;
    767     border-left-style: solid;
    768     color: var(--global--color-dark-gray);
    769 }
    770 
    771 #buddypress.twentytwentyone .bp-avatar-status .warning,
    772 #buddypress.twentytwentyone .bp-cover-image-status .warning {
    773     border-left-color: var(--global--color-orange);
    774 }
    775 
    776 #buddypress.twentytwentyone .bp-avatar-status .success,
    777 #buddypress.twentytwentyone .bp-cover-image-status .success {
    778     border-left-color: var(--global--color-green);
    779 }
    780 
    781 #buddypress.twentytwentyone .bp-avatar-status .error,
    782 #buddypress.twentytwentyone .bp-cover-image-status .error {
    783     border-left-color: var(--global--color-red);
    784784}
    785785

  • branches/7.0/src/bp-templates/bp-nouveau/sass/twentytwentyone.scss

    r12843 r12845  
    620620    #group-create-body {
    621621
    622         #avatar-crop-pane {
    623             margin-bottom: 1em;
    624         }
    625 
    626622        nav.group-create-links {
    627623
    … …  
    736732            font-size: var(--heading--font-size-h4);
    737733            letter-spacing: var(--heading--letter-spacing-h4);
     734        }
     735
     736        .bp-avatar {
     737
     738            #avatar-crop-pane {
     739                margin-bottom: 1em;
     740            }
     741        }
     742
     743        .bp-avatar-nav {
     744
     745            ul.avatar-nav-items {
     746                border-bottom: 1px solid var(--global--color-primary);
     747
     748                li {
     749
     750                    &.current {
     751                        border: 1px solid var(--global--color-primary);
     752                        border-bottom: 1px solid var(--global--color-background);
     753                    }
     754                }
     755            }
     756        }
     757
     758        #drag-drop-area {
     759            border: 4px dashed var(--global--color-secondary);
     760
     761            .drag-drop-info {
     762                color: var(--global--color-secondary);
     763            }
     764
     765            #bp-browse-button {
     766                margin: 50px auto 0;
     767            }
     768        }
     769
     770        .bp-avatar-status,
     771        .bp-cover-image-status {
     772
     773            .warning,
     774            .success {
     775                background-color: var(--global--color-light-gray);
     776                border: none;
     777                border-left-width: 4px;
     778                border-left-style: solid;
     779                color: var(--global--color-dark-gray);
     780            }
     781
     782            .warning {
     783                border-left-color: var(--global--color-orange);
     784            }
     785
     786            .success {
     787                border-left-color: var(--global--color-green);
     788            }
     789
     790            .error {
     791                border-left-color: var(--global--color-red);
     792            }
    738793        }
    739794    }
    … …  
    10051060    .field-visibility-settings-header {
    10061061        color: var(--global--color-secondary);
    1007     }
    1008 
    1009     .bp-avatar-nav {
    1010 
    1011         ul.avatar-nav-items {
    1012             border-bottom: 1px solid var(--global--color-primary);
    1013 
    1014             li {
    1015 
    1016                 &.current {
    1017                     border: 1px solid var(--global--color-primary);
    1018                     border-bottom: 1px solid var(--global--color-background);
    1019                 }
    1020             }
    1021         }
    1022     }
    1023 
    1024     #drag-drop-area {
    1025         border: 4px dashed var(--global--color-secondary);
    1026 
    1027         .drag-drop-info {
    1028             color: var(--global--color-secondary);
    1029         }
    1030 
    1031         #bp-browse-button {
    1032             margin: 50px auto 0;
    1033         }
    1034     }
    1035 
    1036     .bp-avatar-status,
    1037     .bp-cover-image-status {
    1038 
    1039         .warning,
    1040         .success {
    1041             background-color: var(--global--color-light-gray);
    1042             border: none;
    1043             border-left-width: 4px;
    1044             border-left-style: solid;
    1045             color: var(--global--color-dark-gray);
    1046         }
    1047 
    1048         .warning {
    1049             border-left-color: var(--global--color-orange);
    1050         }
    1051 
    1052         .success {
    1053             border-left-color: var(--global--color-green);
    1054         }
    1055 
    1056         .error {
    1057             border-left-color: var(--global--color-red);
    1058         }
    10591062    }
    10601063}
Note: See TracChangeset for help on using the changeset viewer.