Suivi — Feuilles de style (CSS) Quelques corrections pour nightgrey

#767 Posté par  . État de l’entrée : corrigée. Assigné à Bruno Michel.
Étiquettes : aucune
0
29
déc.
2011

Je suis en train de passer à un style sombre sur mon bureau, du coup j'ai changé de CSS ici et j'ai mis nightgrey. Comme elle a quelques petits défaut, j'ai fais quelques corrections que je propose ci-dessous. (comme je ne sais pas ce qu'est le .scss, je préfère ne pas proposer un patch qui casse tout et je me suis basé sur la css envoyée par le site et remise en forme par firebug).

J'espère que je ne n'ai rien cassé.

Retrait des sections :
```css
body ul, body ol {
margin 0 1.5em…
}

/* Retrait car elle décalait vers le bas les commentaire d'un nouveau thread qui suivaient un thread avec enfants */
body blockquote > p.firstchild {
…
}
```

Ajouts:

.thread li { 
    margin-top:10px
}

#send-comment , #follow-feed  {
        text-align:center;
}
#send-comment a, #follow-feed a {
    text-align:center;
    font-size:medium;
    background-color:#D0C4C0;
    color:black;
    font-weight:bold;
    border:solid 3px; 
    padding: 2px; 
    border-radius: 5px; 

}

/*body ul {
        padding-left: 0px;
}*/

.threads ul { 
        padding-left:0;
}

ul.threads {
        padding-left:0;
}

.comment li { 
        padding-left: 10px;
        margin-left: 3.3em;
}

.result {
        font-size: x-small;
        margin-left: 10em;
}

#sidebar .box p {
        margin-top: 0;
        padding: 0;
        text-align: left;
        margin-bottom: 0;
        border-bottom:0;
}

#my_comments, #my_posts, #my_trackers, #news ul{
        background-color: #D0C4C0;
}

#tracker {
        background-color: #D0C4C0;
}

body.notice {
        color:#FFD324;

Je ne suis pas du tout expert en css, je n'ai donc peut-être pas fait ça dans les règles de l'art (c'est le moins qu'on puisse dire). Si ça peut aider, ma CSS est disponible sur http://www.claudex.be/nightgrey.css

  • # Dynamicité

    Posté par  . Évalué à 3 (+0/-0).

    Tant que j'y suis. Si je pouvais avoir une indication pour rendre les boutons « modifier » de l'espace de rédaction dynamique (comme dans la css par défaut), ça serait pratique. De même que la classe utilisée pour le survol des norloge dans les tribunes.

    « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

    • [^] # Re: Dynamicité

      Posté par  . Évalué à 2 (+0/-0).

      Pour les tribunes, j'ai trouvé, c'est highlighted tout simplement.

      « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

    • [^] # Re: Dynamicité

      Posté par  (site web personnel) . Évalué à 2 (+0/-0).

      Voilà les règles sass pour ces boutons :

      #redaction .edition_in_place, #redaction .paragraph, #redaction .link {
  padding-left: 30px;
  position: relative;
  .edit { background: url("/images/icones/pen.png") no-repeat 2px 2px $C_CLAIR; }
  .actions {
    position: absolute;
    top: 0;
    left: 0;
    button {
      visibility: hidden;
      height: 22px;
      width: 22px;
      text-indent: -9999em;
    }
  }
  &:hover {
    .actions button {
      visibility: visible;
      &:hover { background-color: $C_FONCE; }
    }
  }
}

      • [^] # Re: Dynamicité

        Posté par  (site web personnel) . Évalué à 2 (+0/-0).

        Et la CSS générée à partir de ces règles :

        #redaction .edition_in_place, #redaction .paragraph, #redaction .link {
  padding-left: 30px;
  position: relative; }
  #redaction .edition_in_place .edit, #redaction .paragraph .edit, #redaction .link .edit {
    background: url("/images/icones/pen.png") no-repeat 2px 2px #e9e6e4; }
  #redaction .edition_in_place .actions, #redaction .paragraph .actions, #redaction .link .actions {
    position: absolute;
    top: 0;
    left: 0; }
    #redaction .edition_in_place .actions button, #redaction .paragraph .actions button, #redaction .link .actions button {
      visibility: hidden;
      height: 22px;
      width: 22px;
      text-indent: -9999em; }
  #redaction .edition_in_place:hover .actions button, #redaction .paragraph:hover .actions button, #redaction .link:hover .actions button {
    visibility: visible; }
    #redaction .edition_in_place:hover .actions button:hover, #redaction .paragraph:hover .actions button:hover, #redaction .link:hover .actions button:hover {
      background-color: #93877b; }

        • [^] # Re: Dynamicité

          Posté par  . Évalué à 2 (+0/-0).

          Merci. Sinon, comment marche cet outils, je pourrais l'utiliser, ce serait peut-être plus simple. Surtout que j'ai fait d'autres modifications depuis.

          « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

  • # Changements pris en compte

    Posté par  (site web personnel) . Évalué à 3 (+0/-0).

    Cf https://github.com/nono/linuxfr.org/commit/5388fb626c1c5f2c488bfa3f0c4b856edf6eb3dd

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.