Style snippets

Bonjourr est personnalisable par le biais de son interface de paramètres, mais vous pouvez faire bien d'autres choses ! Copiez et collez ces extraits de style dans leur section dédiée des paramètres pour débloquer de nouvelles possibilités.

Vous voulez votre propre extrait de style ici ? Contactez nous !

Fond d'écran

J'aime que mes arrière-plans soient rapides.

/* Faster background transition on startup */


#background_overlay {
  transition: transform 0.2s, opacity 0s;
}

L'unicolore est la nouvelle méta

/* Makes background a uniform color. */
/* Replace '#CC7722' with your color of choice. */


#background_overlay {
  background-color: #cc7722;
}


#background,
#background-bis {
  display: none;
}

Horloge

J'aime mes horloges épaisses

/* Change analog clock width */


#interface {
  /* Change size here */
  --anlg-w: 6px;
}


.analog .analog-center {
  width: calc(var(--anlg-w) * 4);
  height: calc(var(--anlg-w) * 4);
}


.analog {
  border-width: calc(var(--anlg-w) * 2);
}


.analog span {
  width: calc(var(--anlg-w) * 2);
  margin-left: calc(var(--anlg-w) * -1);
}


.analog .analog-seconds {
  width: var(--anlg-w);
}

Rolex 😎

/* Rolex 😎 */


.analog-face,
.analog-face:hover {
  border-radius: 100%;
  border-width: 1px;
  background-size: cover;
  background-image: url('https://bonjourr.fr/misc/rolex.png') !important;
}

Bienvenue

Je veux mon propre message d'accueil

/* Sets a custom greeting phrase */


#interface #greetings:before {
  content: 'Your custom greeting';
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: none;
}


#interface #greetings {
  visibility: hidden;
  position: relative;
}

Police de caractères

Mes polices de caractères seront noires (ou une autre couleur 😯)

/* Changes font color. "black" can be any css-safe color code. */


#linkblocks span,
#interface,
#credit,
#credit a {
  color: black;
}

Et mon horloge aussi sera noire

.analog {
  border-color: black;
}


.analog .analog-center,
.analog span {
  background-color: black;
}

Autre

Je me fiche de l'exposition de l'artiste

/* Hides photo author credits. */


#credit {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s, visibility 0.4s;
}


#credit-container:hover #credit {
  visibility: visible;
  opacity: 1;
}

23 quoi, carottes ?

/* Adds a C after the temperature. */


#current::after,
#tempContainer p::after {
  content: 'C';
}

Pas de GPU, seulement le CPU 😠

/* This disables graphics intensive "backdrop-filter" style property on some elements. */


#bookmarks_container,
#bookmarks,
#element-mover,
.move-overlay {
  backdrop-filter: none !important;
}


#editlink,
#bookmarks,
#element-mover {
  background-color: #f2f2f7;
}


body.dark #editlink,
body.dark #bookmarks,
body.dark #element-mover,
body.autodark #editlink,
body.autodark #bookmarks,
body.autodark #element-mover {
  background-color: #222;
}

Pour les ordinateurs qui traînent

/* Disables most settings transitions and animations. */


#settings .as,
#settings,
.move-overlay {
  transition: none;
}


#interface {
  transform: translateX(0) !important;
  transition: none !important;
}