Je viens de comprendre d'où venais mon problème :
Je voyais la page comme ceci :
![Image](http://img11.hostingpics.net/thumbs/mini_385539Bugicons.png)
C'était du au fait que j'importais mon css en plus, et je désactivais seulement l'autre au lieu de le modifier par le mien (sous firefox).
(bref, c'est ma faute
)
Effectivement, il n'y a pas de problème !
Petite correction, j'ai oublié la page pour poster et les zones de code :
colours.css :
Code : Tout sélectionner
/*
--------------------------------------------------------------
Colours and backgrounds for common.css
--------------------------------------------------------------
*/
html, body {
color: #ffffff;
background-color: #0B1725;
}
h1 {
color: #FFFFFF;
}
h2 {
color: #F5F4F4;
}
h3 {
/*border-bottom-color: #DADADA;*/
}
hr {
border-color: #F5F5F5;
border-top-color: #F5F5F5;
}
/* Search box
--------------------------------------------- */
.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus,
.search-box .button:hover {
border-color: #DADADA;
}
.search-header input#keywords {
background-color: #222C37;
color: #8494A3;
}
/* Round cornered boxes and backgrounds
---------------------------------------- */
#wrap {
}
.headerbar {
}
.navbar {
}
.navbar ul#nav-main {
background-color: #3C4855;
border-bottom-color: #54606E;
}
.forabg {
background-color: #162331;
}
.forumbg {
background-color: #162331;
}
.panel {
background-color: #3C4855;
}
.post:target .content {
color: #FFFFFF;
}
.post:target h3 a {
color: #000000;
}
.bg1 {
background-color: #3C4855;
}
table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd) {
background-color: #FBFBFB;
}
.bg2 {
background-color: #3C4855;
}
table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) {
background-color: #EAEDF1;
}
.bg3 {
background-color: #3C4855;
}
.ucprowbg {
background-color: #DCDEE2;
}
.fieldsbg {
background-color: #E7E8EA;
}
/* Horizontal lists
----------------------------------------*/
ul.navlinks {
border-top-color: #FFFFFF;
}
/* Table styles
----------------------------------------*/
table.table1 thead th {
color: #FFFFFF;
}
table.table1 tbody tr {
border-color: #F5F5F5;
}
table.table1 tbody tr:hover, table.table1 tbody tr.hover {
color: #000;
}
table.table1 td {
color: #FFFFFF;
}
table.table1 tbody td {
border-top-color: #F5F5F5;
}
.section-viewonline table.table1 tbody td,
.section-memberlist table.table1 tbody td {
border-top-color: #F5F5F5;
}
table.table1 tbody th {
border-bottom-color: #000000;
color: #333333;
background-color: #FFFFFF;
}
table.info tbody th {
color: #000000;
}
/* Misc layout styles
---------------------------------------- */
dl.details dt {
color: #000000;
}
dl.details dd {
color: #828282;
}
.sep {
color: #1198D9;
}
/* Pagination
---------------------------------------- */
.pagination li a {
background-color: #EBEBEB;
color: #555555;
}
.pagination li.ellipsis span {
background-color: transparent;
color: #000000;
}
.pagination li.active span {
background-color: #727D89;
border-color: #005554;
color: #FFFFFF;
}
.pagination li a:hover, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
background-color: #727D89;
color: #F5F5F5;
}
/*.pagination li.next a, .pagination li.previous a, .pagination li.page-jump a {
}*/
/* Pagination in viewforum for multipage topics */
.row .pagination:before {
content: "\f0c5";
font-family: FontAwesome;
}
/* Miscellaneous styles
---------------------------------------- */
#prefooter + .copyright {
background-color: #026766;
}
.copyright {
background-color: #0B1725;
}
.error {
color: #BC2A4D;
}
.reported {
background-color: #FFFFFF;
}
li.reported {
background-color: #FFF1EA;
}
li.reported + li.reported {
border-top: 0 !important;
}
li.reported:hover {
background-color: #FFF !important;
}
.sticky, .announce {
/* you can add a background for stickies and announcements*/
}
div.rules {
background-color: #EBEBEB;
}
p.post-notice {
background-color: #ECD5D8;
background-image: none;
}
p.post-notice.deleted:before {
font-family: FontAwesome;
content: "\f1b8";
font-size: 14px;
color: #3CA83C;
}
p.post-notice.unapproved:before {
font-family: FontAwesome;
content: "\f059";
font-size: 14px;
color: #5D8DFF;
}
p.post-notice.reported:before, p.post-notice.error:before {
font-family: FontAwesome;
content: "\f071";
font-size: 14px;
color: #FD5E01;
}
p.post-notice.reported {
border-color: transparent;
}
/*
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */
a {color: #F5F4F4;}
a:hover { text-decoration: underline; }
a.forumtitle {
color: #FFFFFF;
font-weight: bold;
}
a.topictitle {
color: #FFFFFF;
}
/* Links on gradient backgrounds */
.forumbg .header a, .forabg .header a, th a {
color: #FFFFFF;
}
.forumbg .header a:hover, .forabg .header a:hover, th a:hover {
}
.navbar ul#nav-main > li > a {
color: #ffffff;
font-weight: bold;
}
.navbar ul#nav-main > li:not(.rightside) > a:hover,
.navbar ul#nav-main > li.icon-register > a:hover,
.navbar ul#nav-main > li.icon-logout > a:hover {
background-color: #162331;
border-bottom-color: #3E4D5D;
}
/* Notification mark read link */
.dropdown-extended a.mark_read {
background-color: #FFFFFF;
}
/* Post body links */
.postlink {
/*border-bottom-color: #368AD2;
color: #368AD2;*/
}
.postlink:visited {
/*border-bottom-color: #5D8FBD;
color: #5D8FBD;*/
}
.postlink:hover {
/*background-color: #D0E4F6;
color: #0D4473;*/
}
.signature a, .signature a:hover {
background-color: transparent;
}
/* Back to top of page */
a.top {
color: #A7A7AA;
}
a.top:before {
font-family: FontAwesome;
content: "\f139";
display: inline-block;
color: #A7A7AA;
}
a.top2 {
color: #139895;
}
a.top2:before {
font-family: FontAwesome;
content: "\f139";
display: inline-block;
color: #A7A7AA;
font-size: 12px;
width: 14px;
padding: 0 1px;
}
/* Arrow links */
a.arrow-up:before { content: "\f102"; }
a.arrow-down:before { content: "\f103"; }
a.arrow-left:before { content: "\f100"; }
a.arrow-right:after { content: "\f101"; }
a.arrow-up:hover {
background-color: transparent;
}
a.arrow-left:hover {
}
a.arrow-right:hover {
}
/*
--------------------------------------------------------------
Colours and backgrounds for content.css
-------------------------------------------------------------- */
ul.forums {
background-color: #3C4855;
}
ul.topiclist li {
color: #C6C9CD;
}
#cp-main ul.topiclist li.header {
background-color: #005554;
color: #FFFFFF;
}
ul.topiclist dd {
}
.rtl ul.topiclist dd {
border-right-color: transparent;
border-left-color: transparent;
}
ul.topiclist li.row dt a.subforum.read:before {
content:"\f15b";
color: #D5D8D9;
}
ul.topiclist li.row dt a.subforum.unread:before {
content:"\f15b";
color: #FD5E01;
}
li.row {
border-bottom-color: #79bfb5;
}
li.row strong {
color: #C6C9CD;
}
li.row:hover {
background-color: #556372;
}
li.row:hover dd {
border-left-color: transparent;
}
.rtl li.row:hover dd {
border-right-color: transparent;
border-left-color: transparent;
}
li.header dt {
color: #FFFFFF;
}
li.header dd {
color: #FFFFFF;
}
/* Post body styles
----------------------------------------*/
.postbody {
color: #C6C9CD;
}
/* Content container styles
----------------------------------------*/
.content {
color: #ffffff;
}
.content h2, .panel h2 {
border-bottom-color: transparent;
}
dl.faq dt {
color: #FFFFFF;
}
.posthilit {
background-color: #F3BFCC;
color: #BC2A4D;
}
.announce, .unreadpost {
/* Highlight the announcements & unread posts box */
}
/* Post signature */
.signature {
border-top-color: #F5F5F5;
}
/* Post noticies */
.notice {
border-top-color: #F5F5F5;
}
/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
background-color: #556372;
border-color: #00A0A0;
}
.rtl blockquote {
}
blockquote blockquote {
/* Nested quotes */
background-color: #F5F5F5;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #FFFFFF;
}
/* Code block */
.codebox {
background-color: #556372;
border-color: #00A0A0;
}
.codebox p {
border-bottom-color: #CCCCCC;
}
.codebox code {
color: #FFFFFF;
}
.syntaxbg { color: #FFFFFF; }
.syntaxcomment { color: #FF8000; }
.syntaxdefault { color: #0000BB; }
.syntaxhtml { color: #000000; }
.syntaxkeyword { color: #007700; }
.syntaxstring { color: #DD0000; }
/* Attachments
----------------------------------------*/
.attachbox {
background-color: #FFFFFF;
border-color: #C9D2D8;
}
.pm-message .attachbox {
background-color: #F2F3F3;
}
.attachbox dd {
border-top-color: #EBEBEB;
}
.attachbox p {
color: #666666;
}
.attachbox p.stats {
color: #666666;
}
.attach-image img {
border-color: #999999;
}
/* Inline image thumbnails */
dl.file dd {
color: #666666;
}
dl.thumbnail img {
border-color: #666666;
background-color: #FFFFFF;
}
dl.thumbnail dd {
color: #666666;
}
dl.thumbnail dt a:hover {
background-color: #EEEEEE;
}
dl.thumbnail dt a:hover img {
border-color: #368AD2;
}
/* Post poll styles
----------------------------------------*/
fieldset.polls dl {
border-top-color: #F5F5F5;
color: #FFFFFF;
}
fieldset.polls dl.voted {
color: #000000;
}
fieldset.polls dd div {
color: #FFFFFF;
}
.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 {
border-right-color: transparent;
}
.pollbar1 {
background-color: #556372;
border-bottom-color: #556372;
border-right-color: #556372;
}
.rtl .pollbar1 {
border-left-color: #556372;
}
.pollbar2 {
background-color: #556372;
border-bottom-color: #556372;
border-right-color: #556372;
}
.rtl .pollbar2 {
border-left-color: #556372;
}
.pollbar3 {
background-color: #556372;
border-bottom-color: #556372;
border-right-color: #556372;
}
.rtl .pollbar3 {
border-left-color: #556372;
}
.pollbar4 {
background-color: #556372;
border-bottom-color: #556372;
border-right-color: #556372;
}
.rtl .pollbar4 {
border-left-color: #556372;
}
.pollbar5 {
background-color: #556372;
border-bottom-color: #556372;
border-right-color: #556372;
}
.rtl .pollbar5 {
border-left-color: #556372;
}
/* Poster profile block
----------------------------------------*/
.postprofile {
color: #ffffff;
border-color: #FFFFFF;
}
.pm .postprofile {
border-color: #FFFFFF;
}
.postprofile strong {
color: #ffffff;
}
.online {
background-image: none;
}
dd.profile-warnings {
color: #BC2A4D;
}
/*
--------------------------------------------------------------
Colours and backgrounds for buttons.css
-------------------------------------------------------------- */
.button {
background-color: #3C4855;
color: #FFFFFF;
}
.search-box button.search-icon {
background-color: #3C4855;
}
.headerbar .search-box button.search-icon {
background-color: #3C4855;
}
.headerbar .search-box button.search-icon:hover,
.headerbar .search-box input#keywords:focus + button.search-icon {
background-color: #222C37;
}
.headerbar .search-box button.search-icon:hover:before,
.headerbar .search-box input#keywords:focus + button.search-icon:before {
opacity: 1;
}
.search-box a.button.search-adv-icon {
background-color: #3C4855;
}
.headerbar .search-box a.button.search-adv-icon:hover,
.headerbar .search-box input#keywords:focus + button.search-icon {
background-color: #222C37;
}
.post-icon, .newpm-icon, .reply-all,
.reply-icon,
.pmreply-icon, .forwardpm-icon {
background-color: #3C4855;
border: solid 3px #3C4855;
}
.post-icon:hover, .newpm-icon:hover, .reply-all:hover,
.reply-icon:hover,
.pmreply-icon:hover, .forwardpm-icon:hover {
background-color: #FFFFFF !important;
border-color: #3C4855;
color: #3C4855;
}
form#login p > .button2 {
background-color: #FF3800;
border: 3px solid #FF3800;
color: #FFFFFF;
}
form#login p > .button2:hover {
background-color: #FFFFFF;
border: 3px solid #FF3800;
color: #FF3800;
}
.dropdown-select {
color: #FFFFFF;
}
.button:hover, .dropdown-visible .dropdown-select, .nojs .dropdown-container:hover .dropdown-select {
background-color: #727D89;
}
.dropdown-select:after {border-color: #556372;}
.dropdown-select:hover {border-color: #9ACCC8;}
.dropdown-visible .dropdown-select, .dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
border-color: #A6B2BA;
color: #FFFFFF;
}
.contact-icons a { border-color: #EBEBEB; }
.contact-icons a:hover { background-color: #EAEDF1; }
/* Icon images
---------------------------------------- */
.icon-acp:before, #nav-main > .icon-acp > a:before, .icon-faq > a:before, .icon-home:before, .icon-logout:before, #nav-main > .icon-logout > a:before, .icon-mcp > a:before, .icon-notification > a:first-child:before, .icon-pm > a:first-child:before, .icon-register > a:before {
color: #79BFB5;
}
.icon-bookmark:before, .icon-bump:before, .icon-contact:before, .icon-delete-cookies:before, .icon-download:before, .dropdown-contents .icon-logout:before, .icon-mark:before, .icon-members:before, .icon-pages:before, .icon-print:before, .icon-profile:before, .icon-search:before, .responsive-search a:before, .icon-search-active:before, .icon-search-new:before, .icon-search-self:before, .icon-search-unanswered:before, .icon-search-unread:before, .icon-sendemail:before, .icon-subscribe:before, .icon-team:before, .icon-ucp:before, .icon-unsubscribe:before {
color: #A7A7A7;
}
.dropdown-contents > .small-icon.clone a:before,
.dropdown-contents > .clone:before,
.dropdown-contents > .small-icon.clone:before {
color: #A7A7A7;
}
#page-footer-links li:not(.clone):before {
color: #79BFB5;
}
#nav-main > .icon-acp > a:before { content:"\f135" !important; }
#nav-main > .icon-acp:before { content: none !important; }
.icon-acp:before { content:"\f135" !important; }
.icon-bookmark:before { content:"\f02e" !important; }
.icon-bump:before { content:"\f256" !important; }
.icon-contact:before { content:"\f0e0" !important; }
.icon-delete-cookies:before { content:"\f1f8" !important; }
.icon-download { background-image: url("./images/icon_download.gif"); }
.icon-faq > a:before { content:"\f059" !important; }
.icon-logout:before { content:"\f011" !important; }
#nav-main > .icon-logout > a:before { content:"\f084" !important; }
#nav-main > .icon-logout:before { content: none !important; }
.icon-mark:before { content:"\f058" !important; }
.icon-mcp > a:before { content:"\f06e" !important; }
.icon-members:before { content:"\f007" !important; }
.icon-notification { background-image: none; }
.icon-notification > a:first-child:before { content:"\f0a2" !important; }
.icon-pages { background-image: url("./images/icon_pages.gif"); }
.icon-pm > a:first-child:before { content:"\f003" !important; }
.icon-print:before { content:"\f02f" !important; }
.icon-profile:before { content:"\f007" !important; }
.icon-register > a:before { content:"\f234" !important; }
.icon-search:before, .responsive-search a:before { content:"\f002" !important; }
.icon-search-active:before { content:"\f27a" !important; }
.icon-search-new:before { content:"\f24d" !important; }
.icon-search-self:before { content:"\f016" !important; }
.icon-search-unanswered:before { content:"\f15c" !important; }
.icon-search-unread:before { content:"\f15b" !important; }
.icon-sendemail:before { content:"\f0e0" !important; }
.icon-subscribe:before { content:"\f046" !important; }
.icon-team:before { content:"\f0c0" !important; }
.icon-ucp:before { content:"\f013" !important; }
.icon-unsubscribe:before { content:"\f057" !important; }
/* Profile & navigation icons */
.contact-icon { background-image: url("./images/icons_contact.svg"); }
.icon-button:before { /*background-image: url("./images/icons_button.png");*/ }
.dropdown-select:after { content:"\f078"; }
/* Forum icons & Topic icons */
.global_read { background-image: url("./images/announce_read.svg"); }
.global_read_mine { background-image: url("./images/announce_read_mine.svg"); }
.global_read_locked { background-image: url("./images/announce_read_locked.svg"); }
.global_read_locked_mine { background-image: url("./images/announce_read_locked_mine.svg"); }
.global_unread { background-image: url("./images/announce_unread.svg"); }
.global_unread_mine { background-image: url("./images/announce_unread_mine.svg"); }
.global_unread_locked { background-image: url("./images/announce_unread_locked.svg"); }
.global_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.svg"); }
.announce_read { background-image: url("./images/announce_read.svg"); }
.announce_read_mine { background-image: url("./images/announce_read_mine.svg"); }
.announce_read_locked { background-image: url("./images/announce_read_locked.svg"); }
.announce_read_locked_mine { background-image: url("./images/announce_read_locked_mine.svg"); }
.announce_unread { background-image: url("./images/announce_unread.svg"); }
.announce_unread_mine { background-image: url("./images/announce_unread_mine.svg"); }
.announce_unread_locked { background-image: url("./images/announce_unread_locked.svg"); }
.announce_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.svg"); }
.forum_link { background-image: url("./images/forum_link.svg"); }
.forum_read { background-image: url("./images/forum_read.svg"); }
.forum_read_locked { background-image: url("./images/forum_read_locked.svg"); }
.forum_read_subforum { background-image: url("./images/forum_read_subforum.svg"); }
.forum_unread { background-image: url("./images/forum_unread.svg"); }
.forum_unread_locked { background-image: url("./images/forum_unread_locked.svg"); }
.forum_unread_subforum { background-image: url("./images/forum_unread_subforum.svg"); }
.sticky_read { background-image: url("./images/sticky_read.svg"); }
.sticky_read_mine { background-image: url("./images/sticky_read_mine.svg"); }
.sticky_read_locked { background-image: url("./images/sticky_read_locked.svg"); }
.sticky_read_locked_mine { background-image: url("./images/sticky_read_locked_mine.svg"); }
.sticky_unread { background-image: url("./images/sticky_unread.svg"); }
.sticky_unread_mine { background-image: url("./images/sticky_unread_mine.svg"); }
.sticky_unread_locked { background-image: url("./images/sticky_unread_locked.svg"); }
.sticky_unread_locked_mine { background-image: url("./images/sticky_unread_locked_mine.svg"); }
.topic_moved { background-image: url("./images/topic_moved.svg"); }
.topic_read { background-image: url("./images/topic_read.svg"); }
.topic_read_mine { background-image: url("./images/topic_read_mine.svg"); }
.topic_read_hot { background-image: url("./images/topic_read_hot.svg"); }
.topic_read_hot_mine { background-image: url("./images/topic_read_hot_mine.svg"); }
.topic_read_locked { background-image: url("./images/topic_read_locked.svg"); }
.topic_read_locked_mine { background-image: url("./images/topic_read_locked_mine.svg"); }
.topic_unread { background-image: url("./images/topic_unread.svg"); }
.topic_unread_mine { background-image: url("./images/topic_unread_mine.svg"); }
.topic_unread_hot { background-image: url("./images/topic_unread_hot.svg"); }
.topic_unread_hot_mine { background-image: url("./images/topic_unread_hot_mine.svg"); }
.topic_unread_locked { background-image: url("./images/topic_unread_locked.svg"); }
.topic_unread_locked_mine { background-image: url("./images/topic_unread_locked_mine.svg"); }
.pm_read { background-image: url("./images/topic_read.svg"); }
.pm_unread { background-image: url("./images/topic_unread.svg"); }
/*
--------------------------------------------------------------
Colours and backgrounds for cp.css
-------------------------------------------------------------- */
/* Main CP box
----------------------------------------*/
.panel-container h3, .panel-container hr, #cp-menu hr {
border-color: #EBEBEB;
}
.panel-container .panel li.row {
border-bottom-color: #F5F5F5;
border-top-color: transparent;
}
ul.cplist {
}
.panel-container .panel li.header dd, .panel-container .panel li.header dt,
.panel-container .panel li.header dd a, .panel-container .panel li.header dt a {
color: #FFFFFF;
}
.panel-container table.table1 thead th {
color: #FFFFFF;
border-bottom-color: transparent;
background-color: #005554;
}
#cp-main .pm-message {
border-color: #DBDEE2;
background-color: #FFFFFF;
}
/* CP tabbed menu
----------------------------------------*/
#tabs .tab > a {
background-color: #556372;
color: #FFFFFF;
}
#tabs .tab > a:hover {
opacity: .7;
}
#tabs .activetab > a,
#tabs .activetab > a:hover {
background-color: #FFFFFF;
color: #333333;
opacity: 1;
}
#tabs .activetab > a:hover {
color: #000000;
}
/* Mini tabbed menu used in MCP
----------------------------------------*/
#minitabs .tab > a {
background-color: #323A45;
color: #FFFFFF;
}
#minitabs .activetab > a,
#minitabs .activetab > a:hover {
background-color: #F9F9F9;
color: #333333;
}
/* Responsive tabs
----------------------------------------*/
.responsive-tab .responsive-tab-link:before {
border-color: #FFFFFF;
}
.responsive-tab .responsive-tab-link:hover:before {
border-color: #FFFFFF;
}
#tabs .activetab > .responsive-tab-link:before,
#tabs .activetab > .responsive-tab-link:hover:before {
border-color: #333333;
}
/* UCP navigation menu
----------------------------------------*/
/* Link styles for the sub-section links */
#navigation a {
color: #FFFFFF;
background: #556372;
}
.rtl #navigation a {
background: #323A45;
}
#navigation a:hover {
opacity: 0.7;
}
#navigation #active-subsection a {
background: #F5F5F5;
color: #333333;
}
#navigation #active-subsection a:hover {
color: #333333;
opacity: 1;
}
/* Preferences pane layout
----------------------------------------*/
.panel-container h2 {
color: #FFFFFF;
}
.panel-container .panel {
background-color: #F9F9F9;
}
#file-list-container.panel {
background-color: transparent;
}
#cp-main .pm {
background-color: #F5F5F5;
}
#cp-main .panel {
background-color: #222C37;
}
/* Friends list */
.cp-mini {
background-color: #FFFFFF;
}
dl.mini dt {
color: #425067;
}
/* PM Styles
----------------------------------------*/
/* PM Message history */
.current {
color: #000000 !important;
}
/* PM marking colours */
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
border-left-color: #BC2A4D;
border-right-color: #BC2A4D;
}
.pmlist li.pm_marked_colour, .pm_marked_colour {
border-color: #FF6600;
}
.pmlist li.pm_replied_colour, .pm_replied_colour {
border-color: #A9B8C2;
}
.pmlist li.pm_friend_colour, .pm_friend_colour {
border-color: #5D8FBD;
}
.pmlist li.pm_foe_colour, .pm_foe_colour {
border-color: #000000;
}
/* Avatar gallery */
#gallery label {
background: #FFFFFF;
border-color: #CCC;
}
#gallery label:hover {
background-color: #EEE;
}
/*
--------------------------------------------------------------
Colours and backgrounds for forms.css
-------------------------------------------------------------- */
/* General form styles
----------------------------------------*/
select {
border-color: #DADADA;
background-color: #FAFAFA;
}
label {
/*color: #425067;*/
}
option.disabled-option {
color: graytext;
}
/* Definition list layout for forms
---------------------------------------- */
dd label {
color: #FFF;
}
fieldset.fields1 {
background-color: transparent;
}
/* Hover effects */
fieldset dl:hover dt label {
color: #CECECE;
}
fieldset.fields2 dl:hover dt label {
color: inherit;
}
/* Quick-login on index page */
fieldset.quick-login input.inputbox {
background-color: #F2F3F3;
}
/* Posting page styles
----------------------------------------*/
#message-box textarea {
color: #333333;
}
#message-box textarea.drag-n-drop {
outline-color: rgba(102, 102, 102, 0.5);
}
#message-box textarea.drag-n-drop-highlight {
outline-color: rgba(17, 163, 234, 0.5);
}
/* Input field styles
---------------------------------------- */
.inputbox {
background-color: #F5F5F5;
border-color: #DADADA;
color: #333333;
}
.inputbox:-moz-placeholder {
color: #333333;
}
.search-header input#keywords::-moz-placeholder {
color: #8494A3;
opacity: 1 !important;
}
.inputbox::-webkit-input-placeholder {
color: #333333;
}
.search-header input#keywords::-webkit-input-placeholder {
color: #8494A3;
}
.inputbox:hover {
border-color: #DADADA;
background-color: #FFFFFF;
}
.inputbox:focus {
border-color: #DADADA;
background-color: #FFFFFF;
}
.inputbox:focus:-moz-placeholder {
color: transparent;
}
.inputbox:focus::-webkit-input-placeholder {
color: transparent;
}
/* Form button styles
---------------------------------------- */
a.button1, input.button1, input.button3 {
background-color: #00A0A0;
border: 3px solid #00A0A0;
color: #FFFFFF;
}
a.button2, input.button2 {
background-color: #00A0A0;
color: #FFFFFF;
border-color: #00A0A0;
}
.button2#refresh_vc {
background-color: #FF3800;
border: transparent;
}
a.button1, input.button1 {
/*! border-color: #666666; */
}
input.button3 {
background-image: none;
}
/* Alternative button */
a.button2, input.button2, input.button3 {
border-color: #DADADA;
}
/* <a> button in the style of the form buttons */
a.button1, a.button2 {
color: #FFFFFF;
}
/* Hover states */
/*a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, */input.button3:hover {
color: #FFFFFF;
opacity: .7;
}
a.button1:hover, input.button1:hover {
background-color: #FFFFFF;
/*border: 3px solid #19E3B1;*/
color: #000000;
}
a.button2:hover, input.button2:hover {
background-color: #FFFFFF;
/*border: 3px solid #FF3800;*/
color: #000000;
}
/* Focus states */
input.button1:focus, input.button2:focus, input.button3:focus {
/*color: #FFFFFF;*/
}
input.search {
/*background-image: url("./images/icon_textbox_search.gif");*/
}
input.disabled {
color: #666666;
}
/* jQuery popups
---------------------------------------- */
.phpbb_alert {
background-color: #FFFFFF;
}
.phpbb_alert .alert_close {
}
.phpbb_alert .alert_close:before {
font-family: FontAwesome;
content: "\f057";
font-size: 20px;
color: #A7A7A7;
display: inline-block;
}
.phpbb_alert .alert_close:hover:before {
color: #FF3800;
}
#darken {
background-color: #000000;
}
#loading_indicator {
background-color: #000000;
background-image: url("./images/loading.gif");
}
.dropdown-extended ul li {
border-top-color: #E5E5E5;
}
.dropdown-extended ul li:hover {
background-color: #EAEDF1;
}
.dropdown-extended .header, .dropdown-extended .footer {
color: #FFFFFF;
}
.dropdown-extended .footer {
border-top-style: solid;
border-top-width: 1px;
background-color: #FF3800;
}
.dropdown-extended .header {
background: #026362;
color: #FFFFFF !important;
}
.dropdown-extended .header a,
.dropdown-extended .footer a {
color: #FFFFFF;
}
.dropdown .pointer {
border-color: #E3E3E3 transparent;
}
.icon-notification .dropdown .pointer {
border-color: #026362 transparent;
}
.dropdown .pointer-inner {
border-color: #FFF transparent;
}
.dropdown-extended .pointer-inner {
border-color: #026362 transparent;
}
ul.linklist li.responsive-menu a.responsive-menu-link:before {
color: #FF3800;
}
/*ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist li.responsive-menu.visible a.responsive-menu-link:before {
color: #FE9B0E;
}*/
ul#nav-main.linklist li.responsive-menu a.responsive-menu-link {
background-color: #556372;
border-bottom-color: #727D89;
}
ul.linklist li.responsive-menu a.responsive-menu-link:before {
color: #FFFFFF;
opacity: .7;
}
ul.linklist li.responsive-menu a.responsive-menu-link:hover:before,
ul.linklist li.responsive-menu.dropdown-visible a.responsive-menu-link:before {
opacity: 1;
}
.dropdown .dropdown-contents {
background: #3C4855;
border-color: #b9b9b9;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}
.dropdown-up .dropdown-contents {
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
}
.dropdown li, .dropdown li li {
border-color: #DCDCDC;
}
.dropdown li.separator {
border-color: #DCDCDC;
}
/* Notifications
---------------------------------------- */
.notification_list p.notification-time {
color: #323A45;
}
li.notification-reported strong, li.notification-disapproved strong {
color: #D31141;
}
/* Ajouts par Pitou */
.pagination {
color: #FFFFFF;
}
.stat-block p {
background-color: #162331;
}
quarto.css :
Code : Tout sélectionner
/* Body background
---------------------------------------- */
/* Main block
---------------------------------------- */
#page-body {
background-color: #222C37;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
}
/* Popup Login
---------------------------------------- */
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.6;
z-index: 999;
}
.login-popup {
display: none;
width: 300px;
background: #FFFFFF;
padding: 20px 20px 0;
float: left;
font-size: 1em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #434343; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #434343; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #434343; /* Safari, Chrome */
}
#navbar_username,
#navbar_password_hint,
#navbar_password {
width: 300px;
padding: 0 10px;
height: 40px;
line-height: 40px;
outline: none !important;
box-sizing: border-box;
}
#navbar_username {
background-position: 12px 0;
}
.navbar_username_outer,
.navbar_password_outer {
padding: 10px 0;
}
#login-box .quick-login {
margin-bottom: 5px;
}
#login-box #autologin_label {
cursor: pointer;
}
#login-box .login-footer {
padding: 15px 20px;
margin: 0 -20px;
background-color: #005554;
}
#login-box .login-footer a {
color: #FFFFFF;
}
.rtl #login-box .register-link {
}
.rtl #login-box .restore-password {
float: left;
margin-left: 0 !important;
}
#login-box a.close {
display: block;
float: right;
margin-right: -15px;
margin-top: -21px;
}
.rtl #login-box a.close {
float: left;
margin-left: -15px;
}
#login-box a.close:before {
font-family: FontAwesome;
content: "\f057";
font-size: 20px;
color: #A7A7A7;
display: inline-block;
}
#login-box a.close:hover:before {
color: #FF3800;
}
#login-box .login-popup fieldset {
border:none;
}
#login-box .login-link {
display: none;
}
#login-box input[name="login"] {
padding: 10px;
}
#login-box .button2 {
background-color: #FF3800;
border: 3px solid #FF3800;
color: #FFFFFF;
background-image: none !important;
height: 42px;
margin-bottom: 10px;
margin-top: 5px;
padding: 0 0 4px;
width: 300px !important;
line-height: 12px;
box-shadow: none;
outline: none;
}
#login-box .button2:hover {
background-color: #FFFFFF;
border: 3px solid #FF3800;
color: #005554;
opacity: 1;
}
.login-buttons {
overflow: hidden;
margin-bottom: 10px;
}
/* Notifications
---------------------------------------- */
li.icon-notification,
li.icon-pm,
li#username_logged_in {
position: relative;
margin-left: 25px !important;
}
li.icon-notification strong.notification-count,
li.icon-pm strong.private-message-count {
background-color: #ff5500;
border-radius: 12px;
color: #ffffff;
display: inline-block;
line-height: 15px;
min-width: 12px;
padding: 2px 4px;
text-align: center;
font-weight: bold;
position: absolute;
right: -9px;
top: 13px;
font-size: 14px;
}
/* Stat blocks
---------------------------------------- */
.stat-block {
background-color: #FFFFFF;
}
.stat-block h3 {
margin: 0;
padding: 0 20px;
border-bottom-width: 0;
background-color: #3C4855;
height: 50px;
color: #FFFFFF;
text-transform: none;
font-size: 1.077em;
line-height: 50px;
font-weight: normal;
}
.stat-block h3 a {
color: #FFFFFF;
}
.stat-block p {
padding: 20px;
}
/* Icons
---------------------------------------- */
.dropdown-contents > .small-icon:before,
.dropdown-contents > .clone:before,
.dropdown-contents > .small-icon.clone a:before {
margin-right: 6px;
}
.icon-acp > a, .icon-bookmark > a, .icon-bump > a, .icon-contact > a, .icon-delete-cookies > a,/* .icon-download > a, */.icon-faq > a, .icon-logout > a, .icon-mark > a, .icon-mcp > a, .icon-members > a, .icon-notification > a:first-child,/* .icon-pages > a,*/ .icon-pm > a:first-child, .icon-print > a, .icon-profile > a, .icon-register > a, .icon-search > a, .responsive-search a > a, .icon-search-active > a, .icon-search-new > a, .icon-search-self > a, .icon-search-unanswered > a, .icon-search-unread > a, .icon-sendemail > a, .icon-subscribe > a, .icon-team > a, .icon-ucp > a, .icon-unsubscribe > a {
padding: 0px;
}
#nav-main > .icon-acp > a:before, .icon-acp:before, .icon-bookmark:before, .icon-bump:before, .icon-contact:before, .icon-delete-cookies:before, /*.icon-download:before, */.icon-faq > a:before, .icon-logout:before, #nav-main > .icon-logout > a:before, .icon-mark:before, .icon-mcp > a:before, .icon-members:before, .icon-notification > a:first-child:before,/* .icon-pages:before,*/ .icon-pm > a:first-child:before, .icon-print:before, .icon-profile:before, .icon-register > a:before, .icon-search:before, .responsive-search a:before, .icon-search-active:before,.icon-search-new:before, .icon-search-self:before, .icon-search-unanswered:before, .icon-search-unread:before, .icon-sendemail:before, .icon-subscribe:before, .icon-team:before, .icon-ucp:before, .icon-unsubscribe:before {
display: inline-block !important;
font-family: FontAwesome;
}
.icon-home > a {}
.icon-home:before {}
#nav-breadcrumbs {
padding: 15px 20px;
border-top-width: 0;
background-color: #162331;
}
.icon-mark:before {
font-size: 16px;
margin-top: 4px;
color: #FF3800;
}
.icon-notification > a:first-child:before,
.icon-pm > a:first-child:before {
font-size: 28px;
line-height: 10px;
vertical-align: middle;
}
.icon-notification > a:first-child:hover:before,
.icon-pm > a:first-child:hover:before {
color: #FFFFFF;
}
/* Navbar
---------------------------------------- */
.header-avatar .username,
.header-avatar .username-coloured {
color: #FFFFFF !important;
font-weight: normal;
}
/* Prefooter
---------------------------------------- */
#prefooter {
display: table;
padding: 30px 20px;
width: 100%;
box-sizing: border-box;
}
#prefooter .prefooter-block {
display: table-cell;
vertical-align: top;
}
#prefooter .prefooter-block:not(:first-child) {
padding-left: 15px;
}
#prefooter .prefooter-block:not(:last-child) {
padding-right: 15px;
}
.prefooter-block.width-33 {
width: 33%;
}
.prefooter-block.width-50 {
width: 50%;
}
.prefooter-block.width-100 {
width: 100%;
}
#prefooter .prefooter-block:last-child {
padding-right: 0;
}
#prefooter h1, #prefooter h2, #prefooter h3, #prefooter h4 {
color: #FFF;
margin-bottom: 15px;
}
#prefooter h2 {
font-size: 1.538em;
}
#prefooter ul {
list-style: none;
}
#prefooter ul li {
margin-bottom: 5px;
}
#prefooter ul li:last-child {
margin-bottom: 0;
}
#prefooter ul li .fa {
color: #79BFB5;
}
#prefooter .prefooter-block *:first-child {
margin-top: 0;
}
#prefooter .prefooter-block *:last-child {
margin-bottom: 0;
}
/* Social Links
---------------------------------------- */
#footer-social-links {
position: absolute;
right: 0;
top: 22px;
}
#footer-social-links li {
display: inline-block;
font-size: 1.385em;
}
#footer-social-links li a:link, #footer-social-links li a:visited {
color: #79BFB5;
}
#footer-social-links li a:hover {
opacity: .7;
text-decoration: none;
}
/* Footer
---------------------------------------- */
#page-footer {
border-top: solid 5px #3C4855;
}
#page-footer {
background-color: #005554;
color: #ABC6C1;
}
#page-footer a,
.copyright a,
#page-footer-links a {
color: #FFFFFF;
}
#page-footer-links {
min-height: 60px;
}
#page-footer-links ul.linklist {
padding-top: 20px;
}
/* Alerts
---------------------------------------- */
.alert_text {
color: #000000;
}
h3.alert_title,
.alert_text > form > h3 {
color: #555555;
border-bottom: solid 1px #F5F5F5;
padding-bottom: 10px;
line-height: 34px;
}
p.alert_text,
.alert_text > form > p {
color: #000000;
}
/* Posting buttons
---------------------------------------- */
#format-buttons [class^="button"] {
background-color: #FFFFFF;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
box-shadow: none;
}
#format-buttons input[class^="button"] {
min-width: 24px;
display: inline-block;
box-sizing: border-box;
background-color: #FFFFFF;
color: #000000;
height: 24px;
line-height: 20px;
margin: 0 2px;
}
#format-buttons input[class^="button"]:hover {
background-color: #E1E1E1;
}
#format-buttons button[class^="button"]:before {
font-family: FontAwesome;
color: #000000;
min-width: 24px;
padding: 4px 3px 0;
display: inline-block;
box-sizing: border-box;
height: 24px;
}
#format-buttons [class^="button"]:hover:before {
background-color: #E1E1E1;
}
#format-buttons .bbcode-b:before {
content: "\f032";
}
#format-buttons .bbcode-i:before {
content: "\f033";
}
#format-buttons .bbcode-u:before {
content: "\f0cd";
}
#format-buttons .bbcode-quote:before {
content: "\f10d";
}
#format-buttons .bbcode-code:before {
content: "\f121";
}
#format-buttons .bbcode-list:before {
content: "\f0ca";
}
#format-buttons .bbcode-list-:before {
content: "\f0cb";
}
#format-buttons .bbcode-asterisk:before {
content: "\f069";
}
#format-buttons .bbcode-img:before {
content: "\f03e";
}
#format-buttons .bbcode-url:before {
content: "\f0c1";
}
#format-buttons .bbcode-flash:before {
content: "\f144";
}
#format-buttons .bbcode-color:before {
content: "\f1fb";
}
/* Sidebar
---------------------------------------- */
.page-body-inner-with-sidebar {
float: left;
margin-right: 20px;
width: calc(100% - 300px);
width: -moz-calc(100% - 300px);
width: -webkit-calc(100% - 300px);
}
#sidebar {
float: left;
width: 280px;
}
.sidebar-block {
margin-bottom: 20px;
}
.sidebar-block-header {
background-color: #005554;
color: #ffffff;
font-size: 1.077em;
line-height: 50px;
padding-left: 20px;
padding-right: 20px;
margin: 0;
box-sizing: border-box;
letter-spacing: 0;
}
.sidebar-block-content {
background-color: #FFFFFF;
margin-bottom: 20px;
padding: 20px;
}
.sidebar-block-content p:last-child {
margin-bottom: 0;
}
#sidebar ul {
list-style-position: inside;
margin-bottom: 1.5em;
}
/* Misc
---------------------------------------- */
.divider-vertical {
color: #A7A7A7;
}
#breadcrumb-footer {
padding: 15px 20px;
background-color: #162331;
}
.cron-block {
background-color: #212D2D;
}
.postbody .content {
border-top: solid 1px #F5F5F5;
}
.status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #C1C1C1;
margin-bottom: 1px;
margin-left: 5px;
}
.online .status-dot {
background-color: #55BF00;
}
a.login-responsive-link {
display: none;
}
.display-options input.button2[type="submit"] {
border: 0 !important;
height: 32px;
background-color: #C8C8C8 !important;
}
.display-options input.button2[type="submit"]:hover {
background-color: #3C4855 !important;
color: #FFFFFF;
}
a.button2,
input.button2 {
/*border: solid 3px transparent !important;*/
background-color: #222C37;
color: #FFFFFF;
}
a.button1, input.button1 {
background-color: #222C37;
color: #FFFFFF;
}
a.button2:hover,
input.button2:hover {
border-color: #005554 !important;
color: #000000;
}
.button.dropdown-select {
height: 38px;
line-height: 38px;
}
.button.dropdown-select:after {
height: 40px;
line-height: 38px;
}
.button.locked-icon {
border: solid 3px #C8C8C8;
}
.button.locked-icon:hover {
border-color: #FF3800;
}
.search-box .inputbox {
background-color: #556372;
color: #ffffff;
}
.section-ucp .panel fieldset .inputbox,
.section-mcp .panel fieldset .inputbox,
.section-mcp .action-bar .inputbox {
background-color: #FFFFFF;
}
.section-viewforum p.jumpbox-return {
clear: both;
}
input[type=submit],
.attach-panel input[type=button] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
/* Transitions
----------------------------------------*/
.button,
a.button1, input.button1, input.button3, a.button2, input.button2,
input.inputbox,
#footer-social-links li a,
a.close:before,
.pagination li span,
.pagination li a,
.inputbox,
.post-buttons .icon-button:before,
#format-buttons button[class^="button"]:before,
#tabs .tab > a,
#navigation a,
#quick-links a.responsive-menu-link:before,
li.row,
.navbar ul#nav-main > li > a,
.icon-notification > a:first-child:before,
.icon-pm > a:first-child:before,
.headerbar .search-box button.search-icon:before {
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.dropdown-select:after {
-webkit-transition: border-color 0s ease 0s;
-moz-transition: border-color 0s ease 0s;
-ms-transition: border-color 0s ease 0s;
-o-transition: border-color 0s ease 0s;
transition: border-color 0s ease 0s;
}
/* Quarto RTL */
.rtl .navbar ul#nav-main {
padding: 0 0 0 20px;
}
.rtl ul#nav-main.linklist > li:not(.rightside) > a:before,
.rtl ul#nav-main.linklist > li.icon-register > a:before,
.rtl ul#nav-main.linklist > li.icon-logout > a:before {
margin-right: 0;
margin-left: 5px;
}
.rtl #nav-main .dropdown-left .dropdown,
.rtl #nav-main .nojs .rightside .dropdown {
right: 4px;
}
.rtl li.icon-notification strong.notification-count,
.rtl li.icon-pm strong.private-message-count {
left: -9px;
right: inherit !important;
}
.rtl .pagination li.next a:before {
content: "\f104";
}
.rtl .pagination li.previous a:before {
content: "\f105";
}
.rtl .dropdown-contents > .small-icon:before,
.rtl .dropdown-contents > .clone:before,
.rtl .dropdown-contents > .small-icon.clone a:before {
margin-right: 0px;
margin-left: 6px;
}
.rtl li.icon-notification,
.rtl li.icon-pm,
.rtl li#username_logged_in {
margin-left: 0px !important;
margin-right: 25px !important;
}
/* Quarto theme responsive rules
----------------------------------------*/
@media only screen and (max-width: 1152px) {
.headerbar {
padding: 0 20px;
}
#page-footer-links ul.linklist {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
.page-body-inner-with-sidebar ul.topiclist li.header dd.topics,
.page-body-inner-with-sidebar ul.topiclist dd.topics {
display: none;
}
.page-body-inner-with-sidebar li.header dt .list-inner,
.page-body-inner-with-sidebar ul.topiclist dt .list-inner {
margin-right: 350px;
}
.page-body-inner-with-sidebar ul.topiclist dt {
margin-right: -350px;
}
}
@media only screen and (max-width: 900px) {
.page-body-inner-with-sidebar {
float: none !important;
margin-right: 0;
overflow: auto;
width: 100%;
}
#sidebar {
float: none !important;
width: 100%;
margin-bottom: 20px;
}
.sidebar-block-header {
text-align: center;
}
.page-body-inner-with-sidebar ul.topiclist li.header dd.topics,
.page-body-inner-with-sidebar ul.topiclist dd.topics {
display: block;
}
.page-body-inner-with-sidebar li.header dt .list-inner,
.page-body-inner-with-sidebar ul.topiclist dt .list-inner {
margin-right: 440px;
}
.page-body-inner-with-sidebar ul.topiclist dt {
margin-right: -440px;
}
#cp-main h2 {
margin-left: 0px;
}
}
@media only screen and (max-width: 875px) {
#site-description {
float: none;
width: auto;
text-align: center;
}
.logo {
/* change display value to inline-block to show logo */
display: inline-block;
float: none;
}
#site-description p,
.search-header {
display: none;
}
.responsive-search {
display: block !important;
}
.responsive-search a {
display: block;
width: 16px;
height: 18px;
overflow: hidden;
}
}
@media only screen and (max-width: 700px) {
a.login-window {
display: none;
}
a.login-responsive-link {
display: inherit;
}
.page-body-inner-with-sidebar ul.topiclist li.header dd.topics,
.page-body-inner-with-sidebar ul.topiclist dd.topics {
display: none;
}
#prefooter .prefooter-block {
display: block;
width: 100%;
margin-bottom: 20px;
padding-right: 0;
padding-left: 0 !important;
}
#prefooter .prefooter-block:last-child {
margin-bottom: 0px;
}
.copyright {
text-align: center;
}
#footer-social-links {
position: static;
text-align: center;
margin-bottom: 20px;
}
#page-footer-links .dropdown-contents > li > a {
color: #139895;
}
.private-message-count,
.notification-count {
display: inline-block !important;
}
.rtl ul.linklist > li:first-child {
margin-left: 15px !important;
}
}
@media only screen and (max-width: 500px) {
dl.details dd {
margin-left: 0px !important;
padding-left: 0 !important;
margin-bottom: 10px;
}
fieldset.display-options label {
white-space: normal !important;
}
}
@media only screen and (max-width: 480px) {
#cp-main ul.topiclist > li {
padding: 0px 10px !important;
}
#cp-main ul.topiclist li.row dl {
padding: 10px 0 !important;
}
fieldset.submit-buttons input {
margin-bottom: 10px;
}
}
@media only screen and (max-width: 360px) {
#cp-main fieldset .inputbox {
width: 217px !important;
}
fieldset.display-actions label {
white-space: normal !important;
}
#quick-links a.responsive-menu-link {
padding: 25px 20px 16px !important;
}
#quick-links a.responsive-menu-link:before {
margin-right: 0 !important;
}
.rtl #page-footer-links ul.linklist > li:first-child {
margin-left: 0 !important;
}
}
Là c'est pas mal pour un premier thème sombre/dark !
PS : oui, les émoticones bavent un peu :
![Image](http://img11.hostingpics.net/pics/515728moticonnes.png)
Mais perso ça ne me dérange pas !