BDX-town / Akkoma

Code source de l'instance Pleroma a portée locale https://bdx.town
Other
8 stars 2 forks source link

Pimper le CSS ? #7

Closed Dehelssey closed 2 years ago

Dehelssey commented 3 years ago

Histoire de personnaliser encore un peu plus l'instance. Ou ne serait-ce que pour différencier visuellement les liens externes des hashtags et des mentions (j'ai déjà le code^^)

Dehelssey commented 3 years ago

je ferme ici et j'ouvre dans bdx.town-fe

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 2 years ago

Je sais pas pourquoi j'ai rouvert ici plutot que dans mangane-UI...

C'est borderline obsolète avec la dernière màj qui plus est