HFS DB sombre

Modérateur : Modérateurs

Avatar de l’utilisateur
Doctor
Gourou
Gourou
Messages : 575
Inscription : 29 nov. 2013 - 00:00
Localisation : Cherbourg-en-Cotentin
A remercié : 1 fois
A été remercié : 20 fois

HFS DB sombre

Message par Doctor » 21 oct. 2019 - 23:16

Bon voila, j'avais envie de faire autre chose que de remplir la bd et de me péter les yeux ...alors j'me suis dit que j'allais faire un thème sombre pour la DB

Voila ce que ça donne pour l'instant :)

Image
Image
Image
hebergement gif animé

faut juste installer un petit plugin du nom de stylus (ou stylish)
et d'ajouter ce code pour la page de la hfs bd


body {
background: #797979;
}

.ui.inverted.menu .yellow.active.item,
.ui.inverted.yellow.menu {
background-color: #bf9d38;
}

#search {
border: none;
background-color: #474747;
}

.ui.items a.item:hover .content .header,
.ui.link.items > .item:hover .content .header {
color: #693030;
}

.ui.inverted.menu .item,
.ui.inverted.menu .item > a:not(.ui) {
background: 0 0;
color: #474747;
}

.ui.modal > .content {
background: #757575;
}

.ui.modal > .actions {
background: #757575;
}

.ui.small.modal > .header:not(.ui) {
background-color: #5e5e5e;
}

.ui.message {
background: #939393;
}

.ui.form input:not([type]):focus,
.ui.form input[type=date]:focus,
.ui.form input[type=datetime-local]:focus,
.ui.form input[type=email]:focus,
.ui.form input[type=file]:focus,
.ui.form input[type=number]:focus,
.ui.form input[type=password]:focus,
.ui.form input[type=search]:focus,
.ui.form input[type=tel]:focus,
.ui.form input[type=text]:focus,
.ui.form input[type=time]:focus,
.ui.form input[type=url]:focus {
background: #8a8a8a;
}

.ui.form input:not([type]),
.ui.form input[type=date],
.ui.form input[type=datetime-local],
.ui.form input[type=email],
.ui.form input[type=file],
.ui.form input[type=number],
.ui.form input[type=password],
.ui.form input[type=search],
.ui.form input[type=tel],
.ui.form input[type=text],
.ui.form input[type=time],
.ui.form input[type=url] {
background-color: #8a8a8a;
}


.ui.default.dropdown:not(.button) > .text,
.ui.dropdown:not(.button) > .default.text {
color: #767676;
}

.ui-menu .ui-menu-item-wrapper {
position: relative;
padding: 3px 1em 3px .4em;
background-color: #767676;
}

.ui.selection.dropdown .menu > .item {
border-top: 1px solid #696969;
padding: .78571429rem 1.14285714rem!important;
white-space: normal;
word-wrap: normal;
background-color: #8a8a8a;
}

.ui.dropdown .scrolling.menu > .item.item.item,
.ui.scrolling.dropdown .menu .item.item.item {
border-top: 1px solid #696969;
background-color: #8a8a8a;
}

.ui.default.dropdown:not(.button) > .text,
.ui.dropdown:not(.button) > .default.text {
color: #0a0a0a;
}

.ui.selection.dropdown {
background-color: #939393;
}

.ui.grid > .green.column,
.ui.grid > .green.row,
.ui.grid > .row > .green.column {
background-color: #000000!important;
color: #b7b7b7;
}

.ui.card > .content,
.ui.cards > .card > .content {
background-color: #b7b7b7;
}

.ui.table thead th {
background: #929292;
}

.ui.compact.table td {
padding: .5em .7em;
background-color: #929292;
}

.ui.table {
width: 100%;
background: #000;
}
/*Code modifier par Doctor*/
En espérant que ça vous soit utiles :)

ps: c'est modifiable a souhait ,j'ai fait ça rapidement si vous voulez corriger/ améliorer la chose ne vous en privez pas !

edit :
la même mais pour le forum (tres basique)

/*----- DEFAULT TEXT, BORDER & BACKGROUND COLORS -----*/
* {
color: #999 !important;
text-shadow: 0 0 3px #000 !important;
box-shadow: none !important;
background-color: rgba(117, 74, 74, 0) !important;
border-color: #444 !important;
border-top-color: #444 !important;
border-bottom-color: #444 !important;
border-left-color: #444 !important;
border-right-color: #444 !important;
}

body {
background: rgba(0, 0, 0, .83) !important;
}

*:before,
*:after {
background-color: transparent !important;
border-color: #444 !important;
}

a,
a * {
color: #409B9B !important;
text-decoration: none !important;
}

a:hover,
a:hover *,
a:visited:hover,
a:visited:hover *,
span[onclick]:hover,
div[onclick]:hover,
[role="link"]:hover,
[role="link"]:hover *,
[role="button"]:hover *,
[role="menuitem"]:hover,
[role="menuitem"]:hover *,
.link:hover,
.link:hover * {
color: #000 !important;
text-shadow: 0 0 5px rgba(255, 255, 200, 0.9) !important;
}

a:visited,
a:visited * {
color: #607069 !important;
}

a.highlight,
a.highlight *,
a.active,
a.active *,
.selected,
.selected *,
[href="#"] {
color: #DDD !important;
font-weight: bold !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
strong,
[id*="headline"],
[class*="headline"],
[id*="header"],
[class*="header"],
[class*="header"] td {
color: #DDD !important;
}

a h1,
a h2,
a h3,
a h4,
a h5,
a h6,
h1 a,
h2 a,
h3 a,
a strong,
a[id*="headline"],
a[class*="headline"],
a[id*="header"],
a[class*="header"] {
text-decoration: underline !important;
}

[class*="error"],
[class*="alert"],
code,
span[onclick],
div[onclick] {
color: #900 !important;
}

::-moz-selection {
background: #377 !important;
color: #000 !important;
}

::selection {
background: #377 !important;
color: #000 !important;
}

:focus {
outline: none !important;
}


/*----- MENU & CO BACKGROUND-COLORS -----*/
div[style="display: block;"],
div[role="navigation"] {
background: rgba(0, 0, 0, .5) !important;
}

table {
background: rgba(40, 30, 30, .6) !important;
border-radius: 6px !important;
}

table > tbody > tr:nth-child(even),
table > tbody > tr > td:nth-child(even) {
background-color: rgba(0, 0, 0, .2) !important;
}

iframe,
embed,
nav,
label [onclick],
nav ul,
div[style*="position:"][style*="left:"][style*="visible"],
div[style*="z-index:"][style*="left:"][style*="visible"],
div[style*="-moz-user-select"],
div[role="menu"],
div[role="dialog"],
span[class*="script"] div,
[id*="menu"],
[id*="Menu"],
[class*="dropdown"],
[class*="popup"],
[class="title"],
ul[style*="display:"],
ul[style*="visibility:"] ul,
[id*="nav"] ul,
[class*="nav"] ul,
ul[class*="menu"],
a[onclick][style*="display"],
a[id*="ghosteryfirefox"],
#ghostery-purple-bubble,
#translator-popup,
.menu,
.tooltip,
.hovercard,
.vbmenu_popup {
background: rgba(5, 5, 5, .9) !important;
border-radius: 5px;
box-shadow: 1px 1px 5px #000 !important;
}

header,
#header,
footer,
#footer {
background: rgba(19, 19, 19, .9) !important;
box-shadow: 0 0 5px #000 !important;
}

body > #dialog,
body > .xenOverlay {
background: rgba(19, 19, 19, .96) !important;
background-clip: padding-box !important;
box-shadow: 0 0 15px #000, inset 0 0 0 1px rgba(200, 200, 200, .5), inset 0 0 5px #111 !important;
border: 10px solid rgba(99, 99, 99, .7) !important;
border-radius: 0 !important;
}

[id*="overlay"],
[id*="lightbox"],
blockquote {
background-color: rgba(35, 35, 35, .9) !important;
border-radius: 5px;
}

pre,
dl,
.Message code {
background-color: rgba(5, 5, 5, .5) !important;
}


/*----- DEFAULT BUTTONS, SEARCHBOXES & CO -----*/
input,
select,
button,
[role="button"],
a.button,
a.submit,
a.BigButton,
a.TabLink,
.install[onclick] {
-moz-appearance: none !important;
-webkit-appearance: none !important;
transition: border-color 0.3s !important;
background: #060606 !important;
color: #BBB !important;
text-shadow: 0 1px #000 !important;
border: 2px solid #333 !important;
border-radius: 4px !important;
box-shadow: 0 0 2px rgba(0, 0, 0, .9) !important;
}

a[href="javascript:;"],
a[class*="button"]:not(:empty),
a[id*="button"]:not(:empty),
a[id*="Button"]:not(:empty),
div[class*="button"][onclick] {
transition: border-color 0.3s !important;
background: #060606 !important;
color: #BBB !important;
text-shadow: 0 1px #000 !important;
border-color: #333 !important;
box-shadow: 0 0 2px rgba(0, 0, 0, .9) !important;
}

a[href="javascript:;"]:hover,
a[class*="button"]:not(:empty):hover,
a[id*="button"]:hover,
a[id*="Button"]:not(:empty):hover,
div[class*="button"][onclick]:hover {
background: #151515 !important;
color: #FFF !important;
}

input *,
select *,
button *,
a.button *,
a.submit * {
color: #BBB !important;
text-shadow: none !important;
}

input:hover,
input[type="button"]:hover,
select:hover,
button:hover,
[role="button"]:hover,
a.button:hover,
a.submit:hover,
a.BigButton:hover,
a.TabLink:hover {
border: 2px solid #555 !important;
border-top-color: #555 !important;
border-bottom-color: #555 !important;
border-left-color: #555 !important;
border-right-color: #555 !important;
}

input:focus,
select:focus {
box-shadow: 0 0 5px #077 !important;
}

input *:hover * {
color: #F0F0F0 !important;
text-shadow: 0 0 2px #FFF !important;
}

input[disabled],
select[disabled],
button[disabled],
input[disabled]:hover,
select[disabled]:hover,
button[disabled]:hover,
input[disabled]:focus,
select[disabled]:focus,
button[disabled]:focus {
opacity: 0.5 !important;
border-color: #333 !important;
}

/*
input[type="checkbox"], input[type="radio"] {
box-shadow: 0 0 0 2px #444, 0 0 2px 2px #000 !important;
opacity: 0.7;
transition: box-shadow 0.2s, opacity 0.2s !important}
input[type="checkbox"]:not([disabled]):hover, input[type="radio"]:not([disabled]):hover {
opacity: 0.9}
input[type="checkbox"]:not([disabled]):active, input[type="radio"]:not([disabled]):active {
box-shadow: 0 0 0 2px #999, 0 0 2px 2px #000 !important}
input[type="checkbox"]:checked, input[type="radio"]:checked {
box-shadow: 0 0 0 2px #077, 0 0 2px 2px #000 !important}
input[type="checkbox"][disabled], input[type="radio"][disabled] {
opacity: 0.35}
*/
input[type="checkbox"] {
border-radius: 1px !important;
}

input[type="radio"],
input[type="radio"]:focus {
border-radius: 100% !important;
}

input[type="checkbox"],
input[type="radio"] {
min-width: 12px;
min-height: 12px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
border-color: #077 !important;
box-shadow: 0 0 5px #077 !important;
}

select {
padding-right: 15px !important;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAeSURBVBhXY5g5c+Z/BiwALo6uAEMDTACXSWgSDAwA4jATh950E30AAAAASUVORK5CYII=) no-repeat right 4px center #060606 !important;
transition: border-color 0.3s, background-position 0.3s !important;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
a.button:active,
a[class*="button"]:not(:empty):active,
a.submit:active,
a.BigButton:active,
a.TabLink:active,
.Active .TabLink {
background: #292929 !important;
color: #FFF !important;
}

textarea {
-moz-appearance: none !important;
-webkit-appearance: none !important;
background: rgba(0, 0, 0, .3) !important;
border-radius: 3px !important;
border: 1px solid #000 !important;
box-shadow: inset 0 0 8px #000 !important;
transition: border-color, background, 0.3s !important;
}

textarea,
textarea * {
color: #C8C8C8 !important;
text-shadow: 0 0 1px gray !important;
}

textarea:hover,
textarea:focus:hover {
border-color: #333 !important;
}

textarea:focus {
background: rgba(0, 0, 0, .5) !important;
border-color: #222 !important;
}

textarea:focus,
textarea:focus > * {
text-shadow: none !important;
box-shadow: none !important;
}

option,
optgroup {
-moz-appearance: none !important;
-webkit-appearance: none !important;
background: none !important;
color: #666 !important;
}

optgroup {
background: #222 !important;
color: #DDD !important;
}

option:not([disabled]):hover,
option:focus,
option:checked {
background: linear-gradient(#333, #292929) !important;
color: #DDD !important;
}


/*----- IMAGE CHANGES -----*/
body,
*:not(:empty):not(html):not(span):not(a):not(b):not(option):not(select):not(img):not([style="display: block;"]):not([onclick*="open"]):not([onclick*="s_objectID"]):not([class*="stars"]):not([id*="stars"]):not([id="rating"]):not([class="rating"]):not([class*="SPRITE"]):not([id*="SPRITE"]):not([class*="item"]):not([id*="item"]):not([class*="thumb"]):not([class*="icon"]):not([class*="photo"]):not(.view):not(.text):not([id*="lbImage"]):not([class*="cc-in"]):not([class*="gr-body"]):not([id*="watch"]):not(#globalsearch),
.r3_hm,
.gmbutton2 b,
.gtab-i,
.ph,
.bstab-iLft,
.csb,
#pagination div,
[style*="sprite2.png"],
#mw-head-base,
#mw-page-base {
background-image: none !important;
}

img {
opacity: .7 !important;
transition: opacity .2s;
}

img:hover,
a:hover img,
#mpiv-popup {
opacity: 1 !important;
}
Dernière modification par Doctor le 22 oct. 2019 - 18:56, modifié 1 fois.
Il faut profiter de la vie, je me tue à le dire !

Avatar de l’utilisateur
phenix14000
Connaisseur
Connaisseur
Messages : 392
Inscription : 03 mai 2016 - 06:34
Localisation : val d'izé
A remercié : 127 fois
A été remercié : 104 fois

Re: HFS BD sombre

Message par phenix14000 » 22 oct. 2019 - 07:11

Super merci ça sera fort appréciable ;)

Avatar de l’utilisateur
wildpumpk1n
Virtuose
Virtuose
Messages : 1292
Inscription : 04 févr. 2018 - 19:01
Localisation : Région Parisienne
A remercié : 283 fois
A été remercié : 261 fois

Re: HFS BD sombre

Message par wildpumpk1n » 22 oct. 2019 - 10:07

Merci a toi doctor! 🙂
Image-Image-Image
#Cid2nice"Mais y'a la planche Naomi en sakura véritable et vénérable du Japon"

Avatar de l’utilisateur
snuf69
Modérateur
Modérateur
Messages : 2577
Inscription : 31 déc. 2013 - 00:00
Localisation : 38200
A remercié : 181 fois
A été remercié : 406 fois

Re: HFS BD sombre

Message par snuf69 » 22 oct. 2019 - 17:51

merci a toi
On me confirme dans l'oreillette que c'est HFS DB et non HFS BD :lol:
Image

Avatar de l’utilisateur
Doctor
Gourou
Gourou
Messages : 575
Inscription : 29 nov. 2013 - 00:00
Localisation : Cherbourg-en-Cotentin
A remercié : 1 fois
A été remercié : 20 fois

Re: HFS DB sombre

Message par Doctor » 22 oct. 2019 - 18:56

mais heuuuu :(
c'est corrigé
Il faut profiter de la vie, je me tue à le dire !

Avatar de l’utilisateur
snuf69
Modérateur
Modérateur
Messages : 2577
Inscription : 31 déc. 2013 - 00:00
Localisation : 38200
A remercié : 181 fois
A été remercié : 406 fois

Re: HFS DB sombre

Message par snuf69 » 22 oct. 2019 - 19:33

Haha
Image

Répondre

Revenir à « Discussions »