BDX-town / Mangane

Alternative frontend for Akkoma
https://bdx.town
GNU Affero General Public License v3.0
148 stars 26 forks source link

Update UI [CSS] #3

Closed Dehelssey closed 3 years ago

Dehelssey commented 3 years ago

Si besoin voici le CSS que j'applique via Stylus sur BDXtown pour le moment.

J'ai essayé de commenter pour que ce soit assez clair mais n'hésite pas si tu veux des screens avant / après. Je te laisse faire ton marché ;)

/* forcer l'utilisation de la font définie par mon navigateur */
body.system-font {
    font-family: sans-serif
}

/*light mode pink background - j'utilise les variables hsl de la couleur d'accent mais avec une luminosité accrue */
.theme-mode-light {
    --background-color_h: 343.0508474576271;
    --background-color_s: 87.19211822660098%;
    --background-color_l: 99%;
}

/*custom links style */

/* liens externes */
.status__content a:not(.mention):not(.hashtag):not([href*="/tags/"]), 
.reply-indicator__content a:not(.mention):not(.hashtag):not([href*="/tags/"]) {
    color: var(--primary-text-color);
    text-decoration: underline;
    text-decoration-color: var(--brand-color) !important;
    position: relative;
    background: linear-gradient(to top, var(--accent-color--faint) 2px, var(--accent-color--faint) 2px);
    background-size: 0% 100%;
    transition: all .3s ease;
    background-repeat: no-repeat;

}

.status__content a:not(.mention):not([href*="/tags/"]):not(.hashtag):hover, 
.reply-indicator__content a:not(.mention):not([href*="/tags/"]):not(.hashtag):hover {
    background-size: 100% 100%;
}

/* chat */
.pane.pane--open {
    height: 500px;
}

.pane.pane--open:not(.pane--main) {
    width: 400px
}

.chat-box__actions textarea {
    height: 75px;
    overflow: auto;
}

.chat-box__actions textarea::-webkit-scrollbar {
  display: none;
}

/* calage vertical de la bannière au scroll sur la page profil (par défaut il reste genre 5px de la bannière visible */
@media (min-width: 895px) {
    .ui .page__top {
        top: -300px;
    }
}

/* colonnes latérales sticky au scroll */
.columns-area__panels__pane {
    position: sticky;
    top: 50px;
}

/* sur la vue profil */
.page__top + .page__columns .columns-area__panels__pane{
    top: 115px;
}

/* limiter la hauteur max de la bio sur la vue profil pour contrer l'effet de sticky quand on a un petit écran et une grande bio */
/*
.profile-info-panel-content__bio {
    max-height: 400px;
    overflow-y: auto;
}

.profile-info-panel-content__bio::-webkit-scrollbar {
  display: none;
}
*/

/* alignement des labels et infos des champs personnalisables de la vue profil */
dl.profile-info-panel-content__fields__item dt {
    float: left;
    padding-right: 5px;
}

dl.profile-info-panel-content__fields__item dt::after {
    content: ':';
}

/* masquer le dégradé flou pour les images "sensibles" et en fond d'images transparentes */

.media-gallery__preview {
    display: none;
}
Dehelssey commented 3 years ago

je rouvre dans bdx.town