J'ai pas fini avec mais pour les impatients voila déjà de quoi faire mumuse avec votre nouveau thème.
Les mises à jours du thème viendront au fil du temps. Je ne poste pas d'images tant qu'il n'est pas finalisé.
Etat actuel: beta
Thème actuel: Gold
Code:
/*
* par WarLocG(c) pour kali-linux.fr
* dernière révision: juin 2019
*
* thème dark : code actuel: Gold (inclus les progress bar et codes couleurs des autres thèmes)
*/
@namespace url(http://www.w3.org/1999/xhtml);
/* format valide ... mais ca prend pas. Je le commente */
/*@document url(https://www.kali-linux.fr/forum/) {*/
/* format hack CSS */
@-moz-document url-prefix("https://www.kali-linux.fr/forum/"){
/* carte couleur par thème (en cours...)
Note: #aabbcc peut s'écrire #abc
------------------------------------------------------------------------------------------------
| variable | magma | aqua | silver | gold | dusk | dawn |
================================================================================================
| bg-01 | #------ | #4ca68a | #d2d2d2 | #ecd17f | #------ | #------ |
| bg-01-font | #------ | #2f1e1e | #353535 | #2c2c2c | #------ | #------ |
| bg-02 | #------ | #4c8f87 | #c5c5c5 | #ebc75e | #------ | #------ |
| default-font | #------ | #6fce9c | #c3c3c3 | #e6c355 | #------ | #------ |
| alt-default-font | #------ | #2c4a43 | #666666 | #6e5946 | #------ | #------ |
| default-link | #------ | #4cc473 | #999999 | #8e735b | #------ | #------ |
| default-link-hover | #------ | #abebc9 | #b0b0b0 | #fae6aa | #------ | #------ |
| thread-user-link | #------ | #4c9382 | #9a9a9a | #9b7250 | #------ | #------ |
| bg-03 | #------ | #2f1e1e | #353535 | #2c2c2c | #------ | #------ |
| bg-04 | #------ | #3e2d2d | #3f3f3f | #453135 | #------ | #------ |
| button-active | #------ | #66c451 | #d2d2d2 | #906e6b | #------ | #------ |
| button-active-font | #------ | #553322 | #222222 | #553333 | #------ | #------ |
| button-standard | #------ | #72c96b | #969696 | #b58a4a | #------ | #------ |
| button-standard-font | #------ | #553322 | #222222 | #553333 | #------ | #------ |
| button-hover | #------ | #92dead | #bcbcbc | #d9a64f | #------ | #------ |
| button-hover-font | #------ | #553322 | #222222 | #553333 | #------ | #------ |
| bg-05 | #------ | #44302c | #434343 | #483236 | #------ | #------ |
| bg-06 | #------ | #3d2825 | #3c3c3c | #3d2f32 | #------ | #------ |
| bg-07 | #------ | #539cab | #9c9c9c | #f8ac3c | #------ | #------ |
| bg-07-font | #------ | #ffffff | #ffffff | #ffffff | #------ | #------ |
| highlight | #------ | #ddeeff | #ffffff | #ffff88 | #------ | #------ |
------------------------------------------------------------------------------------------------
*/
/* Variables couleurs (pour plus de facilité, juste modifier ici) */
:root{
--bg-01: #ecd17f; /* début du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
--bg-01-font: #2c2c2c; /* police des catégories */
--bg-02: #ebc75e; /* fin du dégradé en fond (un peu plus foncé) + bouton submit */
--default-font: #e6c355; /* police par défaut */
--alt-default-font: #6e5946; /* police par défault 2 - liens + pied de page */
--default-link: #8e735b; /* liens par défaut */
--default-link-hover: #fae6aa; /* liens lors d'un passage de la souris */
--thread-user-link: #9b7250; /* liens des rubriques et des utilisateurs */
--bg-03: #2c2c2c; /* fond du forum - le gros morceau (partie sombre) */
--bg-04: #453135; /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
--button-active: #906e6b; /* boutons capsules - lorsqu'actif */
--button-active-font: #533; /* police des boutons capsules - lorsqu'actif */
--button-standard: #b58a4a; /* boutons capsules affichés - ni actif ni en hover */
--button-standard-font: #533; /* police des boutons capsules - ni actif ni en hover */
--button-hover: #d9a64f; /* boutons capsules - lorsqu'on passe la souris au dessus */
--button-hover-font: #533; /* police des boutons capsules - lorsqu'on passe la souris au dessus */
--bg-05: #483236; /* les rubriques - intervalles claires ('windowbg') */
--bg-06: #3d2f32; /* les rubriques - intervalles moyennes ('windowbg2') */
--bg-07: #f8ac3c; /* rubriques dans le centre de statistiques */
--bg-07-font: #fff; /* font des rubriques du cantre de statistiques */
--highlight: #ff8; /* les emphases dans la recherche */
/* barres de progression par style */
/*
* Synthaxe:
* linear-gradient (direction, couleur [pourcent%],couleur [pourcent%] ... ); gradient linéaire
* repeating-linear-gradient (direction, couleur [pourcent%], couleur [poucent%] ... ); gradient linéaire se répétant
* radial-gradient (couleur [pourcent%], couleur [pourcent%] ... ); gradient circulaire
*/
/* magma */
--magma: linear-gradient(to bottom, hsl(50,100%,80%), hsl(20,100%,55%) 30%, hsl(20,100%,55%) 50%, hsl(20,100%,55%), hsl(50,100%,80%));
/* aqua */
--aqua: linear-gradient(to bottom, rgba(100,255,180,0.2), rgba(100,255,180,0.4) 30%, rgba(100,255,180,0.4) 50%, rgba(100,255,180,0.4), rgba(100,255,180,0.2));
/* silver */
--silver: repeating-linear-gradient(to bottom, #c6c6c6,#e6e6e6 60%);
/* gold */
--gold: repeating-linear-gradient(to bottom, #d0d040,#fff0b0 80%);
/* dusk */
--dusk: linear-gradient(to bottom, hsla(250,100%,80%,0.9), hsl(40,100%,50%) 55%, hsl(40,100%,80%), hsla(0,50%,20%,0.8));
/* dawn */
--dawn: linear-gradient(to bottom,hsla(340,50%,40%,0.9),hsla(10,50%,60%,0.9) 60%, hsla(10,50%,80%,0.9));
/* Style des progress bar - changer ici */
--progress-visual-style: var(--gold); /* <- exemple var(--silver), changez juste le nom après les -- */
/* Le dropmenu (comme ca pas de difficiles :p)*/
/* light == 0% -> noir, light == 100% -> blanc */
--light: 90; /* <- selectionnez 0 ou 100 selon que vous voulez fond sombre ou clair, le % ne se met pas ici */
--max: 100; /* ne pas modifier */
/* style 1 */
--style-1: linear-gradient(to right, hsla(0,0%,var(--light)%, 0.8), transparent);
/* style 2 */
--style-2: linear-gradient(to bottom, hsla(0,0%,100%,0.8), hsla(0,0%,0%,0.6));
/* style 3 et 4 */
--style-3-4: linear-gradient(to bottom, hsla(0,0%,var(--light)%,0.7), hsla(0,0%,var(--light)%,0.2));
--dropmenu-hi-text: hsla(0, 0%, calc((var(--max) - var(--light)) *1%), 1);
/* style de la dropmenu - changer ici */
--dropmenu-hi-style: var(--style-3-4); /* <- exemple var(--style-3-4), choix entre style-1, style-2 et style-3-4 */
/* La fucking image nouveau */
/* aqua -> rotate-hue(170deg) */
/* silver -> grayscale(100%) */
/* gold -> invert(100%) hue-rotate(205deg) contrast(180%) brightness(2.2) grayscale(50%) */
/* autres couleurs -> hue-rotate(valeur en deg) */
--img-filter: invert(100%) hue-rotate(205deg) contrast(180%) brightness(2.2) grayscale(50%);
}
/********************************************************************************************************************************************************
Partie Métier
********************************************************************************************************************************************************/
/* liens */
a:link, a:visited{
color: var(--default-link);
}
a:hover{
color: var(--default-link-hover);
text-decoration: none;
}
/* bouton capsule dans le dropmenu */
.dropmenu li a.active{background: none;}
.dropmenu li a.active span.firstlevel{
color: var(--button-active-font);
background: var(--button-active);
padding: 0px 2px;
border-radius: 5px;
}
/* menu */
.dropmenu li
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel{
color: var(--button-hover-font);
background: var(--button-hover);
padding: 0px 2px;
border-radius: 5px;
}
/* sous-menu - fond */
.dropmenu li:hover a.firstlevel{background-image: none;}
.dropmenu li ul{background-image: none;}
.dropmenu li ul li a{color: var(--button-hover-font);}
.dropmenu + li{padding-bottom: 10px;}
.dropmenu li:hover ul
{
opacity: 0.3;
transition: opacity .1s ease;
margin-top: 10px;
margin-left: -30px;
padding: 5px;
border-radius: 1em;
background: var(--button-standard);
}
.dropmenu li:hover ul:hover, .dropmenu li ul:hover
{
opacity: 1;
transition-delay: 0s;
border: 1px solid rgba(255,255,255,0.4);
}
/* fleche tooltip */
.dropmenu li:hover ul::after
{
content: " ";
position: absolute;
margin-left: -8px;
border-width: 8px;
bottom: 100%;
left: 18%;
border-style: solid;
border-color: transparent transparent var(--button-standard) transparent;
}
.dropmenu li:hover ul li{color: var(--button-hover-font); border:none;}
/* menu - selection */
.dropmenu li ul li a:hover{
color: var(--dropmenu-hi-text);
background: var(--dropmenu-hi-style);
border-radius: 5px;
}
/* buttonlist - */
.buttonlist ul li a.active{background: none;}
.buttonlist ul li a.active span{
background: var(--button-active);
color: var(--button-active-font);
padding:8px;
border-radius: 1em;
}
.buttonlist ul li a{background: none;}
.buttonlist ul li a span{
background: var(--button-standard);
color: var(--button-standard-font);
padding: 8px;
border-radius: 1em;
}
.buttonlist ul li a:hover{background: none;}
.buttonlist ul li a:hover span{
background: var(--button-hover);
color: var(--button-hover-font);
padding: 8px;
border-radius: 1em;
}
/* liens dans les rubriques et threads + utilisateurs */
.poster h4,
.poster h4 a,
.table_list tbody.content td.info a.subject{color: var(--thread-user-link);}
/* liens du footer (vers credits, SMF, etc..) */
a.new_win:link, a.new_win:visited, span.smalltext{
color: var(--alt-default-font);
text-decoration: none;
}
/* liens dans les signatures */
a.bbc_link:link, a.bbc_link:visited{
text-decoration: none;
border: none;
}
/* quote et code */
div.quoteheader div.topslice_quote,
div.quoteheader div a,
div.codeheader{
color: var(--default-font);
text-decoration: none;
}
blockquote.bbc_standard_quote,
blockquote.bbc_alternate_quote
{
background-color: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
color: var(--default-font);
}
pre code.bbc_code{
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.5);
font-size: 1em;
color: var(--default-font);
text-shadow: 0px 0px 1px #aaa;
}
/*
** sections et elements du forum **
*/
div#header{
padding-left: 20px;
background: var(--bg-04);
border-radius: 1em;
}
div#header div.frame{
background: var(--bg-04);
border-radius: 1em;
}
div.navigate_section, div.navigate_section ul{
height: auto;
}
div#content_section{
padding-left: 20px;
background: var(--bg-03);
border-radius: 1em;
}
div#content_section div.frame{
background: var(--bg-03);
border-radius: 1em;
padding-bottom: 5px;
margin: 5px 0px 5px 0px;
}
div#footer_section,
div#footer_section div.frame{
background: none;
padding: 0px 0px 0px;
}
body{
color: var(--default-font);
background-image: repeating-linear-gradient(var(--bg-01), var(--bg-02) 30%, var(--bg-02));
background-repeat: repeat-x;
}
/* si vous preferez garder les petites bordures blanches entre les sections, commentez le border-collapse */
table {
border: none;
/* border-collapse: collapse; */
}
/* intitules de sections */
div.cat_bar{
border: 1px solid var(--bg-03);
}
div.cat_bar,
h3.catbg,
h4.catbg,
tr.catbg th
{
color: var(--bg-01-font);
background: var(--bg-01) !important;
border-bottom: 1px solid var(--bg-03);
}
.table_list tbody.header td a,
h3.catbg .floatleft a,
.modblock_left h3.catbg a,
.modblock_right h3.catbg a,
h4.catbg .floatright a,
tr.catbg th a{color: var(--bg-01-font) !important;}
.table_list tbody.header td a:hover,
h3.catbg .floatleft a:hover,
.modblock_left h3.catbg a:hover,
.modblock_right h3.catbg a:hover,
h4.catbg .floatright a:hover,
tr.catbg th a:hover{color: var(--alt-defaut-font);}
/* contenus */
table.table_grid td {border: 1px solid var(--bg-03);}
.windowbg span.topslice,
.windowbg span.topslice span,
.windowbg span.botslice span,
.windowbg2 span.topslice,
.windowbg2 span.topslice span,
.windowbg2 span.botslice span{
display: none;
}
.windowbg,
.windowbg2,
#preview_body,
tr.windowbg2.whos_viewing td{
background-color: var(--bg-03);
margin-bottom: 1px;
}
/* couleurs des rubriques et threads normales */
.windowbg .post_wrapper,
tr.windowbg td,
tr.windowbg2 td.icon.windowbg,
tr.windowbg2 td.stats.windowbg,
tr td.icon1.windowbg,
tr td.icon2.windowbg,
tr td.stats.windowbg,
tr td.windowbg
{
color: var(--default-font);
background-color: var(--bg-05);
padding: 10px 0px 5px 5px;
border-radius: 1em;
}
.windowbg2 .post_wrapper,
tr.windowbg2 td,
tr td.subject.windowbg2,
tr td.lastpost.windowbg2,
tr td.windowbg2
{
color: var(--default-font);
background-color: var(--bg-06);
padding: 10px 0px 5px 5px;
border-radius: 1em;
}
/* couleurs des rubriques épinglées */
tr td.icon1.stickybg,
tr td.icon2.stickybg,
tr td.stats.stickybg
{
color: var(--default-font);
background-color: var(--bg-05);
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.3));
border-radius: 1em;
}
tr td.subject.stickybg2,
tr td.subject.stickybg.locked_sticky2,
tr td.lastpost.stickybg2,
tr td.lastpost.stickybg.locked_sticky2
{
color: var(--default-font);
background-color: var(--bg-06);
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.3));
border-radius: 1em;
}
.stickybg2 div{
background-image: url(../Themes/default/images/icons/quick_sticky.gif);
background-repeat: no-repeat;
background-position: 98% 4px;
}
.locked_sticky2 div{
background-image: url(../Themes/default/images/icons/quick_sticky_lock.gif);
background-repeat: no-repeat;
background-position: 98% 4px;
}
/* couleurs des rubriques verrouillées */
tr td.icon1.lockedbg,
tr td.icon2.lockedbg,
tr td.stats.lockedbg
{
color: var(--default-font);
background-color: var(--bg-05);
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
border-radius: 1em;
}
tr td.subject.lockedbg2,
tr td.lastpost.lockedbg2
{
color: var(--default-font);
background-color: var(--bg-06);
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
border-radius: 1em;
}
.lockedbg2 div{
background-image: url(../Themes/default/images/icons/quick_lock.gif);
background-repeat: no-repeat;
background-position: 98% 4px;
}
.content, tr.windowbg, tr.windowbg2 td{
border: none !important;
padding: 0px 5px;
}
.subject div a img,
.stickybg2 div a img,
.lockedbg2 div a img{filter: var(--img-filter);}
/* entête */
span.upperframe,
span.upperframe span,
span.lowerframe,
span.lowerframe span{background: none;}
.roundframe {
background-color: var(--bg-04);
padding: 10px;
border-radius: 1em;
border: none;
}
/* contrôles et boutons */
.button_submit, .button_reset{
padding: 6px;
color: var(--default-font);
background-image: none;
background-color: var(--button-active-font) !important;
border: 1px solid var(--bg-02) !important;
}
.button_submit:hover, .button_reset:hover{
padding: 6px;
color: var(--bg-01-font);
background-image: none;
background-color: var(--bg-02) !important;
border: 1px solid var(--bg-03) !important;
}
/* contenus speciaux (centre information + statistiques), sondages inclus */
div.title_bar, div.title_barIC{
padding-left: 9px;
background: var(--bg-07);
}
#stats_left .windowbg2,
#stats_right .windowbg2,
#top_posters .windowbg2,
#top_boards .windowbg2,
#top_topics_replies .windowbg2,
#top_topics_views .windowbg2,
#top_topics_starter .windowbg2,
#most_online .windowbg2
{
padding-top: 4px;
}
/* description */
#topic_icons{margin: 1em 0px;}
.description, .plainbox{
background: var(--bg-04);
padding: 7px;
border: none;
border-radius: 1em;
}
/* progressbar des statistiques */
.statsbar div.bar {background: none;}
.statsbar div.bar div {background-image: var(--progress-visual-style); border-radius: 3px;}
/* de nombreux éléments utilisants la couleur par défaut */
div.news.normaltext h2,
.list_posts.smalltext, h5,
.signature, .username h4,
.poster ul li, .post .inner,
div#poll_options.content h4,
div#poll_options.content dt,
div#poll_options.content p,
.padding, .content.modbox ul li,
ul li label,
.content label,
.content dl dd,
.content dl dt,
dd.statsbar span,
.table_grid tr.windowbg2 th{color: var(--default-font);}
p.windowbg.description{color: var(--default-font); margin: 10px 0px;}
h4.titlebg, tr.titlebg th,
h3.titlebg
{
background: var(--bg-07) !important;
color: var(--bg-07-font) ;
border-bottom: 1px solid var(--bg-03);
}
/* page d'aide */
#helpmain p, #helpmain li {color: var(--default-font);}
/* recherche */
.list_posts.double_height{color: var(--default-font);}
.highlight{color: var(--highlight) !important;}
}
Le gros est fait. Les mises à jours continuent d'arriver.
J'ai placé un système de variables css var() dans le code donc les futurs thèmes en découlant seront plus faciles à gérer.
Afin de ne pas perdre les codes couleurs (sont dans la carte couleur de toute façon) mais pour les remettre plus rapidement je place les config couleurs par thème:
Aqua:
--bg-01: #4ca68a; /* début du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
--bg-01-font: #2f1e1e; /* police des catégories */
--bg-02: #4c8f87; /* fin du dégradé en fond (un peu plus foncé) + bouton submit */
--default-font: #6fce9c; /* police par défaut */
--alt-default-font: #2c4a43; /* police par défault 2 - liens + pied de page */
--default-link: #4cc473; /* liens par défaut */
--default-link-hover: #abebc9; /* liens lors d'un passage de la souris */
--thread-user-link: #4c9382; /* liens des rubriques et des utilisateurs */
--bg-03: #2f1e1e; /* fond du forum - le gros morceau (partie sombre) */
--bg-04: #3e2d2d; /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
--button-active: #66c451; /* boutons capsules - lorsqu'actif */
--button-active-font: #532; /* police des boutons capsules - lorsqu'actif */
--button-standard: #75c28a; /* boutons capsules affichés - ni actif ni en hover */
--button-standard-font: #532; /* police des boutons capsules - ni actif ni en hover */
--button-hover: #92dead; /* boutons capsules - lorsqu'on passe la souris au dessus */
--button-hover-font: #532; /* police des boutons capsules - lorsqu'on passe la souris au dessus */
--bg-05: #44302c; /* les rubriques - intervalles claires ('windowbg') */
--bg-06: #3d2825; /* les rubriques - intervalles moyennes ('windowbg2') */
--bg-07: #539cab; /* rubriques dans le centre de statistiques */
--bg-07-font: #fff; /* font des rubriques du cantre de statistiques */
--highlight: #def; /* les emphases dans la recherche */
Silver:
--bg-01: #d2d2d2; /* début du dégradé en fond */
--bg-02: #c5c5c5; /* fin du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
--bg-02-font: #353535; /* police des catégories */
--default-font: #c3c3c3; /* police par défaut */
--alt-default-font: #666; /* police par défault 2 - liens + pied de page */
--default-link: #999; /* liens par défaut */
--default-link-hover: #b0b0b0; /* liens lors d'un passage de la souris */
--thread-user-link: #9a9a9a; /* liens des rubriques et des utilisateurs */
--bg-03: #353535; /* fond du forum - le gros morceau (partie sombre) */
--bg-04: #3f3f3f; /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
--button-active: #d2d2d2; /* boutons capsules - lorsqu'actif */
--button-active-font: #222; /* police des boutons capsules - lorsqu'actif */
--button-standard: #969696; /* boutons capsules affichés - ni actif ni en hover */
--button-standard-font: #222; /* police des boutons capsules - ni actif ni en hover */
--button-hover: #bcbcbc; /* boutons capsules - lorsqu'on passe la souris au dessus */
--button-hover-font: #222; /* police des boutons capsules - lorsqu'on passe la souris au dessus */
--bg-05: #434343; /* les rubriques - intervalles claires ('windowbg') */
--bg-06: #3c3c3c; /* les rubriques - intervalles moyennes ('windowbg2') */
--bg-07: #9c9c9c; /* rubriques dans le centre de statistiques */
--bg-07-font: #fff; /* font des rubriques du cantre de statistiques */
--highlight: #fff; /* les emphases dans la recherche */
Gold
--bg-01: #ecd17f; /* début du dégradé en fond + catégories (Gestion de membres, Kali Linux, Tutoriel, etc) */
--bg-01-font: #2c2c2c; /* police des catégories */
--bg-02: #ebc75e; /* fin du dégradé en fond (un peu plus foncé) + bouton submit */
--default-font: #e6c355; /* police par défaut */
--alt-default-font: #6e5946; /* police par défault 2 - liens + pied de page */
--default-link: #8e735b; /* liens par défaut */
--default-link-hover: #fae6aa; /* liens lors d'un passage de la souris */
--thread-user-link: #9b7250; /* liens des rubriques et des utilisateurs */
--bg-03: #2c2c2c; /* fond du forum - le gros morceau (partie sombre) */
--bg-04: #453135; /* les entêtes (au dessus pour se connecter et au fond avec les connectés + stats) */
--button-active: #906e6b; /* boutons capsules - lorsqu'actif */
--button-active-font: #533; /* police des boutons capsules - lorsqu'actif */
--button-standard: #b58a4a; /* boutons capsules affichés - ni actif ni en hover */
--button-standard-font: #533; /* police des boutons capsules - ni actif ni en hover */
--button-hover: #d9a64f; /* boutons capsules - lorsqu'on passe la souris au dessus */
--button-hover-font: #533; /* police des boutons capsules - lorsqu'on passe la souris au dessus */
--bg-05: #483236; /* les rubriques - intervalles claires ('windowbg') */
--bg-06: #3d2f32; /* les rubriques - intervalles moyennes ('windowbg2') */
--bg-07: #f8ac3c; /* rubriques dans le centre de statistiques */
--bg-07-font: #fff; /* font des rubriques du cantre de statistiques */
--highlight: #ff8; /* les emphases dans la recherche */