Posté le 14/05/2020 10:42
Planète Casio v4.3 © créé par Neuronix et Muelsaco 2004 - 2024 | Il y a 91 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements
Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd
Citer : Posté le 14/05/2020 10:44 | # | Fichier joint
Du coup je commence.
J'utilise les variables CSS pour faciliter le changement de thème, en me basant sur les principes de base16.
Vous pouvez commenter/décommenter les blocs pour trouver le style qui vous plait parmi base16-eighties (cf le screen de Breizh ci-dessous) ou Nord :
/* base16-eighties *
--base00: #2d2d2d;
--base01: #393939;
--base02: #515151;
--base03: #747369;
--base04: #a09f93;
--base05: #d3d0c8;
--base06: #e8e6df;
--base07: #f2f0ec;
--base08: #f2777a;
--base09: #f99157;
--base0A: #ffcc66;
--base0B: #99cc99;
--base0C: #66cccc;
--base0D: #6699cc;
--base0E: #cc99cc;
--base0F: #d27b53; /**/
/* Nord */
--nord00: #2e3440;
--nord01: #3b4252;
--nord02: #434c5e;
--nord03: #4c566a;
--nord04: #d8dee9;
--nord05: #e5e9f0;
--nord06: #eceff4;
--nord07: #8fbcbb;
--nord08: #88c0d0;
--nord09: #81a1c1;
--nord10: #5e81ac;
--nord11: #bf616a;
--nord12: #d08770;
--nord13: #ebcb8b;
--nord14: #a3be8c;
--nord15: #b48ead;
--base00: var(--nord00);
--base01: var(--nord01);
--base02: var(--nord02);
--base03: var(--nord04);
--base04: var(--nord09);
--base05: var(--nord05);
--base06: var(--nord06);
--base07: var(--nord07);
--base08: var(--nord11);
--base09: var(--nord09);
--base0A: var(--nord04);
--base0B: var(--nord14);
--base0C: var(--nord12);
--base0D: var(--nord13);
--base0E: var(--nord15);
--base0F: var(--nord08); /**/
}
/*change to "https?.+?planet-casio\\.com.+?shoutbox.+?" if you only want the
* style to be on the main shoutbox page*/
/* CSS : Zezombye, Dark Storm
* Couleurs : base16-eighties
* Adaptation : Breizh_Craft
*/
/*set a background for the shoutbox here*/
#shoutbox {
background-color: var(--base00);
background-size: cover;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-width: 0px;
border-left-width: 0px;
border-left-color: transparent;
}
#shoutbox .messagesContainer {
scrollbar-color: var(--base02) var(--base01);
}
/*normal messages*/
#shoutbox .msg {
background: transparent;
border-bottom-color: transparent;
color: var(--base05);
border-left-style: solid;
border-left-width: 3px;
border-left-color: transparent;
}
#shoutbox .msg:hover {
background-color: var(--base02);
}
/*messages with your username mentioned*/
#shoutbox .msg.ref {
background-color: var(--base01);
border-bottom-color: transparent;
color: var(--base06);
}
#shoutbox .msg.ref:hover {
background-color: var(--base02);
color: var(--base05);
}
/* Align messages and pseudos */
#shoutbox .msg {
display: flex;
}
#shoutbox .msg a.author {
min-width: 7em;
width: auto;
flex-shrink: 0;
text-align: right
}
#shoutbox .msg span.date {
order: 3;
flex-shrink: 0;
}
#shoutbox .msg p.content {
flex-grow: 1;
margin: 0;
}
/*input box*/
#shoutbox input.form-control {
background-color: var(--base01);
color: var(--base04);
border-color: var(--base02);
border-right-width: 2px;
}
#shoutbox input.form-control:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px #e8e6dfbb;
}
/*channel selection*/
#shoutbox-before {
color: var(--base04);
background: var(--base01);
}
#shoutbox-before emph {
color: var(--base0A);
}
/*links*/
#shoutbox a,
#shoutbox-before a {
color: var(--base09);
}
/*group colors; make sure to put !important if not member*/
#shoutbox a.author[title="Membre de CreativeCalc"] {
color: var(--base04) !important;
}
#shoutbox a.author[title="Robot"] {
color: var(--base0E) !important;
}
#shoutbox a.author[title="Partenaire"] {
color: var(--base0C) !important;
}
#shoutbox a.author[title="Administrateur"] {
color: var(--base08) !important;
}
#shoutbox a.author[title="Modérateur"] {
color: var(--base0B) !important;
}
#shoutbox a.author[title="Rédacteur"] {
color: var(--base0D) !important;
}
#shoutbox a.author[title="Gourou"] {
color: var(--base0A) !important;
}
#shoutbox a.author[title="Membre"] {
color: var(--base03) !important;
}
#shoutbox a.author[title="Maître du Puzzle"] {
color: var(--base0E) !important;
}
/*#shoutbox a.author[title="Développeur"] {
color: #66CCCC !important;
}*/
/*set style for a specific username*/
/*#shoutbox
* a.author[title="Membre"][href="/Fr/compte/voir_profil.php?membre=Zezombye"]
* {
color: #00ABAB;
font-style: italic;
}*/
Citer : Posté le 14/05/2020 10:46 | #
Voilà ma version, basée sur base16-eigthies pour les couleurs, avec un CSS rédigé par Zezombye et retouché par Dark Storm. Je sais que plusieurs personnes l'utilisent, plus ou moins modifié
https://fichiers.breizh.pm/Userstyles/PCShoutbox.user.css
Citer : Posté le 14/05/2020 12:43 | # | Fichier joint
Voila ce que j'ai, ça ressemble un peu à celui de DS mais en plus sombre :
/*Fond*/
--mainBg: #1A1E24;
/*Fond scroll bar*/
--scrollbarBg: #22272F;
/*Barre input texte + passage souris dessus messages + Top bar*/
--inputBg: #252A34;
/*Couleur des messages normaux*/
--normalMsg: #CDD3DF;
/*Liens*/
--links: #31c9cc;
/*Texte en haut*/
--topText: #556B81;
/*Scrollbar, mention*/
--mention: #3b4453;
/*Membre lambda*/
--member: #a5b1cb;
/*Membre de creativeCalc*/
--memberCC: #000;
/*Administrateur*/
--administrator: #f2484d;
/*Rédacteur / Partenaire*/
--redactor: #509ceb;
/*Membre d'honneur / Gourou*/
--honorary: #FB924C;
/*Maitre du puzzle*/
--puzzleMaster: #c14ff4;
/*Bots*/
--bot: #e651e3;
/*Modo*/
--moderator: #0cc845;
}
/*change to "https?.+?planet-casio\\.com.+?shoutbox.+?" if you only want the
* style to be on the main shoutbox page*/
/* CSS : Zezombye, Dark Storm
* Adaptation : Tituya
*/
/*set a background for the shoutbox here*/
#shoutbox {
background-color: var(--mainBg);
background-size: cover;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-width: 0px;
border-left-width: 0px;
font-size: 1.1em;
border-left-color: transparent;
}
#shoutbox .messagesContainer {
scrollbar-color: var(--mention) var(--scrollbarBg);
}
/*normal messages*/
#shoutbox .msg {
background: transparent;
border-bottom-color: transparent;
color: var(--normalMsg);
border-left-style: solid;
border-left-width: 3px;
border-left-color: transparent;
font-size: 14.0px;
}
#shoutbox .msg:hover {
background-color: var(--inputBg);
}
/*messages with your username mentioned*/
#shoutbox .msg.ref {
background-color: var(--mention);
border-bottom-color: transparent;
color: var(--normalMsg);
}
#shoutbox .msg.ref:hover {
background-color: var(--inputBg);
color: var(--normalMsg);
}
/* Align messages and pseudos */
#shoutbox .msg {
display: flex;
}
#shoutbox .msg a.author {
min-width: 7em;
width: auto;
flex-shrink: 0;
text-align: right
}
#shoutbox .msg span.date {
order: 3;
flex-shrink: 0;
}
#shoutbox .msg p.content {
flex-grow: 1;
margin: 0;
}
/*input box*/
#shoutbox input.form-control {
background-color: var(--inputBg);
color: var(--normalMsg);
border-color: var(--mention);
border-right-width: 2px;
}
#shoutbox input.form-control:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px var(--mention);
}
/*channel selection*/
#shoutbox-before {
color: var(--topText);
background: var(--inputBg);
}
#shoutbox-before emph {
color: var(--links);
}
/*links*/
#shoutbox a,
#shoutbox-before a {
color: var(--links);
}
/*anti transparent*/
#shoutbox span[style="color: transparent;"] {
color: #9a9696 !important;
background-color: #000
}
/*group colors; make sure to put !important if not member*/
#shoutbox a.author[title="Membre de CreativeCalc"] {
color: var(--ccmember) !important;
}
#shoutbox a.author[title="Membre d'honneur"] {
color: var(--agila11) !important;
}
#shoutbox a.author[title="Robot"] {
font-weight:bold;
font-variant: small-caps;
color: var(--bot) !important;
}
#shoutbox a.author[title="Partenaire"] {
color: var(--redactor) !important;
}
#shoutbox a.author[title="Administrateur"] {
color: var(--administrator) !important;
}
#shoutbox a.author[title="Modérateur"] {
color: var(--moderator) !important;
}
#shoutbox a.author[title="Rédacteur"] {
color: var(--redactor) !important;
}
#shoutbox a.author[title="Gourou"] {
color: var(--puzzleMaster) !important;
}
#shoutbox a.author[title="Membre"] {
color: var(--agila07);
}
#shoutbox a.author[title="Maître du Puzzle"] {
color: var(--puzzleMaster) !important;
}
/*#shoutbox a.author[title="Développeur"] {
color: #66CCCC !important;
}*/
/*set style for a specific username*/
/*#shoutbox a.author[href="/Fr/compte/voir_profil.php?membre=Tituya"]
{
color: #e2a6b9 !important;
font-style: italic;
}
*/
(Et de toute façon, vous pouvez pas dire le contraire)
MultipliCasio
RDM Calculs
Back Mirror
A Switch To The Top C
Citer : Posté le 14/05/2020 13:51 | # | Fichier joint
J'ai essayé de faire comme vous mais sans fond uni:
/* Agila theme
https://github.com/arvi/Agila-Theme/blob/master/README.md
*/
--agila00: #1A1E24;
--agila01: #fdfefd;
--agila02: #f0f1f569;
--agila03: #252A34;
--agila04: #fefeff;
--agila05: #a5b1cb;
--agila06: #000;
--agila07: #ac0409;
--agila08: #af0a0a8f;
--agila09: #de1111bf;
--agila10: #509ceb;
--agila11: #f7f9f9;
--agila12: #FB924C;
--agila13: #c14ff4;
--agila14: #e651e3;
--agila15: #0cc845;
}
/*change to "https?.+?planet-casio\\.com.+?shoutbox.+?" if you only want the
* style to be on the main shoutbox page*/
/* CSS : Zezombye, Dark Storm
* Adaptation : Breizh_Craft
*/
/*set a background for the shoutbox here*/
#shoutbox {
background-image: url("https://66.media.tumblr.com/d40db2412b8e8bc257a6a565d9baf226/tumblr_oyvkoxZwgT1uv8jzvo4_1280.jpg");
background-size: cover;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-width: 0px;
border-left-width: 0px;
border-left-color: transparent;
}
#shoutbox .messagesContainer {
scrollbar-color: var(--agila11) var(--agila01);
}
/*normal messages*/
#shoutbox .msg {
background: transparent;
border-bottom-color: transparent;
color: var(--agila04);
border-left-style: solid;
border-left-width: 3px;
border-left-color: transparent;
}
#shoutbox .msg:hover {
background-color: var(--agila02);
}
/*messages with your username mentioned*/
#shoutbox .msg.ref {
background-color: var(--agila11);
border-bottom-color: transparent;
color: var(--agila04);
}
#shoutbox .msg.ref:hover {
background-color: var(--agilae02);
color: var(--agila04);
}
/* Align messages and pseudos */
#shoutbox .msg {
display: flex;
}
#shoutbox .msg a.author {
min-width: 7em;
width: auto;
flex-shrink: 0;
text-align: right
}
#shoutbox .msg span.date {
order: 3;
flex-shrink: 0;
}
#shoutbox .msg p.content {
flex-grow: 1;
margin: 0;
}
/*input box*/
#shoutbox input.form-control {
background-color: var(--agila02);
color: var(--agila04);
border-color: var(--agila11);
border-right-width: 2px;
}
#shoutbox input.form-control:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px var(--agila11);
}
/*channel selection*/
#shoutbox-before {
color: var(--agila02)
background: var(--agila02);
}
#shoutbox-before emph {
color: var(--agila02);
}
/*links*/
#shoutbox a,
#shoutbox-before a {
color: var(--agila02);
}
/*group colors; make sure to put !important if not member*/
#shoutbox a.author[title="Membre de CreativeCalc"] {
color: var(--agila06) !important;
}
#shoutbox a.author[title="Membre d'honneur"] {
color: var(--agila12) !important;
}
#shoutbox a.author[title="Robot"] {
font-weight: bold;
font-variant: small-caps;
color: var(--agila14) !important;
}
#shoutbox a.author[title="Partenaire"] {
color: var(--agila10) !important;
}
#shoutbox a.author[title="Administrateur"] {
color: var(--agila07) !important;
}
#shoutbox a.author[title="Modérateur"] {
color: var(--agila15) !important;
}
#shoutbox a.author[title="Rédacteur"] {
color: var(--agila10) !important;
}
#shoutbox a.author[title="Gourou"] {
color: var(--agila12) !important;
}
#shoutbox a.author[title="Membre"] {
color: var(--agila05) !important;
}
#shoutbox a.author[title="Maître du Puzzle"] {
color: var(--agila13) !important;
}
/*#shoutbox a.author[title="Développeur"] {
color: #66CCCC !important;
}*/
/*set style for a specific username*/
/*#shoutbox
* a.author[title="Membre"][href="/Fr/compte/voir_profil.php?membre=Zezombye"]
* {
color: #00ABAB;
font-style: italic;
}*/
Citer : Posté le 23/10/2020 14:35 | # | Fichier joint
Ressemble au thème de Bzh, mais avec des couleurs un peu moins pâles, une plus grosse police (180%) et smileys proportionnels :
Ici vous avez le bas de la shout, avec une notif de GLaDOS, et 2 messages pingés (avec le @) en bleu clair (le dernier message est un peu plus gris : y a le pointeur de la souris dessus) :
CODE :
* Couleurs : base16-eighties
* Adapation : Breizh_Craft
* Adaptation de l'adaptation : FlamingKite
*/
/*set a background for the shoutbox here*/
#shoutbox {
background-color: #2d2d2d;
background-size: cover;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-width: 0px;
border-left-width: 0px;
border-left-color: transparent;
font-size: 1.8em;
}
/*normal messages*/
#shoutbox .msg {
background: transparent;
border-bottom-color: transparent;
color: #d3d0c8;
border-left-style: solid;
border-left-width: 3px;
border-left-color: transparent;
}
#shoutbox .msg:hover {
background-color: #515151;
}
#shoutbox .msg p.content {
overflow: hidden;
}
#shoutbox span[style="color: transparent;"] {
color: #9a9696 !important;
background-color: #000
}
/*messages with your username mentioned*/
#shoutbox .msg.ref {
background-color: #60656d; /*# 6f6767 897777*/
border-bottom-color: transparent;
color: #e8e6df;
}
#shoutbox .msg.ref:hover {
background-color: #696b6f; /*#897a7a*/
color: #e8e6df;
}
/*channel selection */
#shoutbox-before {
color: #a09f93;
background: #393939;
border-color: #515151;
}
#shoutbox-before emph {
color: #ffcc66;
}
#shoutbox-before a {
color: #f99157;
}
/* Align messages and pseudos */
#shoutbox .msg {
display: flex;
}
#shoutbox .msg a.author {
min-width: 7em;
width: auto;
flex-shrink: 0;
text-align: right
}
#shoutbox .msg span.date {
order: 3;
flex-shrink: 0;
}
#shoutbox .msg p.content {
flex-grow: 1;
margin: 0;
}
/*input box*/
#shoutbox input.form-control {
background-color: #393939;
color: #d3d0c8;
border-right-width: 2px;
font-size: 1.3em;
height: 53px;
}
/*links*/
#shoutbox a {
color: #f99157;
}
/*group colors; make sure to put !important if not member*/
#shoutbox .msg[data-author="FlamingKite"]
a.author{
color: #a3deed !important;
/*font-style: italic;*/
}
#shoutbox a.author[title="Membre de CreativeCalc"] {
color: #a09f93 !important;
}
#shoutbox a.author[title="Robot"] {
color: #ca68da !important;
}
#shoutbox a.author[title="Partenaire"] {
color: #6699cc !important;
}
#shoutbox a.author[title="Administrateur"] {
color: #f34146 !important;
}
#shoutbox a.author[title="Modérateur"] {
color: #79d879 !important;
}
#shoutbox a.author[title="Rédacteur"] {
color: #2496f7 !important;
}
#shoutbox a.author[title="Gourou"] {
color: #ffcc66 !important;
}
#shoutbox a.author[title="Maître du Puzzle"] {
color: #ae3ede !important;
}
#shoutbox a.author[title="Membre"] {
color: #B2B3A7 !important;
}
#shoutbox a.author[title="Membre d'honneur"] {
color: #e6a422 !important;
}
#shoutbox img {height: 25px; }
/*#shoutbox a.author[title="Développeur"] {
color: #66CCCC !important;
}*/
/*set style for a specific username
#shoutbox .msg[data-author="Gitea"] a.author {
color: #189927 !important;
}
Voire agir sur le message complet
#shoutbox .msg[data-author="Gitea"] {
background: #ccf0c2 !important;
}*/
EDIT :
Petites modifications : quelques ajustements de couleurs, et surtout l'anti message transparent (pour voir plus vite les trolls x)
J'en ai profité pour remontrer chaque point du CSS :
1. Souris qui passe sur un message
2. L'anti message transparent : affiche un fond noir et une couleur de texte un poil différente
3. Couleur du ping
4. Ping ET anti transparent.
J'ai mis à jour le code CSS dans le code au dessus.
PRECISION : Je n'applique ce style uniquement aux URL :
https://www.planet-casio.com/Fr/shoutbox/general
https://www.planet-casio.com/Fr/shoutbox/dev
https://www.planet-casio.com/Fr/shoutbox/discussion
et non pas au site tout entier, pour garder le channel #general des pages de Planète Casio avec sa forme normale (sinon c'est bien trop gros).
Pour choisir cela dans Stylus, il faut mettre en bas du code CSS : "S'applique à", choisir "URL commençant par", et mettre https://www.planet-casio.com/Fr/shoutbox
EDIT 2 :
La partie
overflow: hidden;
}
EDIT 3 :
cf le message juste en dessous
Citer : Posté le 19/05/2021 22:02 | #
Pour ceux comme moi qui aiment modifier le thème au cas-par-cas selon les auteurs, j'ai modifié le front-end de la shoutbox pour ajouter un data-author à chaque div qui représente un message complet (la div.msg qui fait toute la ligne). (Ctrl-R pour bien rafraîchir et avoir le nouveau script.)
Avant, il fallait matcher le lien avec le nom de l'auteur, et compte tenu de la façon dont les sélecteurs CSS sont faits, ça donnait accès à tous les éléments de la ligne (auteur, message, date), mais pas à la ligne complète (qui est leur parent). Maintenant, c'est plus simple.
Du coup avant on faisait des trucs comme ça :
color: #189927 !important;
}
Et maintenant on peut faire ça :
color: #189927 !important;
}
/* Voire agir sur le message complet */
#shoutbox .msg[data-author="Gitea"] {
background: #ccf0c2 !important;
}
Citer : Posté le 19/05/2021 22:18 | #
Mon blog ⋅ Mes autres projets
Citer : Posté le 26/08/2021 21:07 | #
Je met le mien aussi
Alors tenez-vous bien c'est le thème de Breizh, que j'ai repris en augmentant les contrastes, et avec un anti-troll. Vous allez-dire "ça ressemble à celui de FK", mais en fait pas tout à fait non plus…
* style to be on the main shoutbox page*/
/* CSS : Zezombye, Dark Storm
* Couleurs : base16-eighties
* Adapation : Breizh_Craft
*/
/*set a background for the shoutbox here*/
#shoutbox {
background-color: #2d2d2d;
background-size: cover;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-width: 0px;
border-left-width: 0px;
border-left-color: transparent;
font-size: 18px;
}
/*normal messages*/
#shoutbox .msg {
background: transparent;
border-bottom-color: transparent;
color: #d3d0c8;
border-left-style: solid;
border-left-width: 3px;
border-left-color: transparent;
}
#shoutbox .msg:hover {
background-color: #404040;
}
/*anti-troll*/
#shoutbox span[style="color: transparent;"] {
color: #d3d0c8 !important;
}
/*messages with your username mentioned*/
#shoutbox .msg.ref {
background-color: #202020;
border-bottom-color: transparent;
color: #ee5555;
}
#shoutbox .msg.ref:hover {
background-color: #404040;
color: #ee5555;
}
/* Align messages and pseudos */
#shoutbox .msg {
display: flex;
}
#shoutbox .msg a.author {
min-width: 6.5em;
width: auto;
flex-shrink: 0;
text-align: right
}
#shoutbox .msg span.date {
order: 3;
flex-shrink: 0;
}
#shoutbox .msg p.content {
flex-grow: 1;
margin: 0;
}
/*channel selection*/
#shoutbox-before {
color: #a09f93;
background: #393939;
border-color: #515151;
}
#shoutbox-before emph {
color: #ffcc66;
}
#shoutbox-before a {
color: #f99157;
}
/*input box*/
#shoutbox input.form-control {
background-color: #393939;
color: #a09f93;
border-right-width: 2px;
height: 32px;
font-size: 18px;
}
#shoutbox.extern .messagesContainer {
height: calc(100% - 32px);
}
/*links*/
#shoutbox a {
color: #f99157;
}
/*group colors; make sure to put !important if not member*/
#shoutbox a.author[title="Membre de CreativeCalc"] {
color: #a09f93 !important;
}
#shoutbox a.author[title="Robot"] {
color: #ff55ff !important;
}
#shoutbox a.author[title="Partenaire"] {
color: #6699cc !important;
}
#shoutbox a.author[title="Administrateur"] {
color: #ff5555 !important;
}
#shoutbox a.author[title="Modérateur"] {
color: #55ff55 !important;
/*color: #008080 !important;*/
}
#shoutbox a.author[title="Rédacteur"] {
color: #55bbff !important;
}
#shoutbox a.author[title="Gourou"], a.author[title="Maître du Puzzle"], a.author[title="Grand maître des Traits d'Esprit"] {
color: #ffcc66 !important;
}
#shoutbox a.author[title="Membre"] {
color: #808080 !important;
}