Ciemny styl dla smf.pl

Zaczęty przez Adrian, 26 Październik 2020, 17:45

0 użytkowników i 1 Gość przegląda ten wątek.

Drukuj
Do dołu Strony1
Akcje użytkownika

Adrian

26 Październik 2020, 17:45 Ostatnia edycja: 26 Październik 2020, 17:50 by Adrian
W nawiązaniu do ciemnego stylu na simplemachines.org umieszczam tutaj styl który używam już kilka miesięcy, może komuś się przyda i skorzysta :)
Styl można wkleić w Stylus (Chrome, Firefox, Opera) lub Stylem (Pale Moon).

Kod [Zaznacz]

.navbar-default {
    background-color: #00224E;
    border: none;
}
#menu,
#user-menu {
    background: #171D20;
}
header {
    background: #2F3133;
    border-bottom: 1px solid #1E2529;
    color: #F5F5F5 !important;
}
a:link,
a:visited,
a.new_win:link,
a.new_win:visited {
    color: #F5F5F5;
    text-decoration: none;
}
body {
    color: #F5F5F5;
    background-color: #171D20;
}
.windowbg span.topslice {
    background: #2F3133;
}
.windowbg span.topslice span {
    background: #2F3133;
}
.windowbg,
#preview_body,
.windowbg2,
.windowbg3 {
    color: #F5F5F5;
    background-color: #2F3133;
    border-radius: 4px;
    margin: 0.2em 0;
}
.article_info {
    color: #F5F5F5;
}
.windowbg span.botslice {
    background: #2F3133;
}
.windowbg span.botslice span {
    background: #2F3133;
}
.scroll-to-top {
    background-color: #001A38;
}
h4.titlebg,
h3.titlebg {
    background: #001A38;
}
div.title_bar {
    background: #001A38;
}
.windowbg4 {
    color: #F5F5F5;
    background-color: #2F3133;
}
body,
td,
th,
tr {
    color: #F5F5F5;
}
.table_list tbody.content td.info a.subject {
    color: #F5F5F5;
}
.table_list td.icon {
    border-bottom: 1px solid #1E2529;
    border-left: 1px solid #1E2529;
}
.table_list td.info,
.table_list td.stats {
    border-bottom: 1px solid #1E2529;
}
.table_list td.lastpost {
    border-bottom: 1px solid #1E2529;
    border-right: 1px solid #1E2529;
}
.body_content {
    background: #2F3133;
    border-radius: 4px;
    padding: 20px;
}

.body_content span.arrow-left {
    border-color: transparent #2F3133 transparent transparent;
}
.poster ul li {
    background: #2F3133;
    padding: 5px 0;
    text-align: center;
}
.poster li.postcount {
    font-size: 1.6em;
    border-top: 1px solid #171D20;
    border-bottom: 1px solid #171D20;
}
.poster li.karma {
    border-bottom: 1px solid #171D20;
}
hr,
.hrcolor {
    color: #171D20;
    background-color: #171D20;
}
footer {
    background: #001A38;
    color: #F5F5F5;
}
div.cat_bar {
    background: #001A38;
}
h4.catbg,
h4.catbg2,
h3.catbg,
h3.catbg2,
.table_list tbody.header td.catbg {
    background: #001A38;
}
div#IC div.cat_bar h3.catbg {
    background: #001A38;
}
div#IC div.cat_bar {
    background: #001A38;
}
#IC ul.nav.nav-tabs {
    background: #1E2529;
    border: 1px solid #1E2529;
}
#IC .tab-content {
    background: #2F3133;
    border: 1px solid #2F3133;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #F5F5F5;
    background-color: #2F3133;
    border: 1px solid #2F3133;
    border-bottom-color: transparent;
    cursor: default;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #F5F5F5;
    background-color: #2F3133;
    border: 1px solid #2F3133;
    border-bottom-color: transparent;
    cursor: default;
}
.nav > li > a:hover,
.nav > li > a:focus,
.nav > li.active > a,
.nav > li.active > a:hover {
    background-color: #2F3133;
}
#IC .nav-tabs > li.active > a:hover {
    background: #2F3133;
}
#IC .nav-tabs > li.active > a,
#IC .nav-tabs > li.active > a:hover {
    border-left-color: #2F3133;
    border-right-color: #2F3133;
}
#IC .nav-tabs > li > a:hover {
    background: #2F3133;
    border-color: #2F3133;
}
div.title_barIC {
    background: #001A38;
    border: 1px solid #001A38;
}
div.title_barIC h4.titlebg {
    background: #001A38;
    color: #F5F5F5;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2F3133;
}
.titlebg,
.titlebg2,
tr.titlebg th,
tr.titlebg td,
tr.titlebg2 td,
.catbg,
.catbg2,
tr.catbg td,
tr.catbg2 td,
tr.catbg th,
tr.catbg2 th {
    color: #F5F5F5;
    background: #001A38;
}
.topic_table table thead {
    border-bottom: 1px solid #001A38;
}
tr.catbg th.first_th,
tr.titlebg th.first_th {
    background: #001A38;
}
tr.catbg th.last_th,
tr.titlebg th.last_th {
    background: #001A38;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 1px solid #2F3133;
}
.table_grid td {
    border-bottom: 1px solid #2F3133;
}
.table > thead > tr > th {
    border-bottom: 2px solid #2F3133;
}
.table_grid td.icon1 {
    border-left: 1px solid #2F3133;
}
.table_grid td.lastpost,
.table_grid td.moderation {
    border-right: 1px solid #2F3133;
}
.description,
.description_board,
.plainbox {
    border: 1px solid #171D20;
    background: #2F3133;
}
.buttonlist li a.active,
.buttonlist li a:hover,
.buttonlist li a:focus,
#admin_menu li a.dropdown-toggle:hover,
#admin_menu li a.dropdown-toggle:focus,
#admin_menu li a.active,
#admin_menu li a.active:hover,
#admin_menu li a.active:focus {
    background: #001A38;
}
.yagam,
.stickybg,
.lockedbg {
    background: #2F3133;
}
.alert-redsy {
    border-color: #171D20;
    background: #001A38;
    color: #F5F5F5;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #F5F5F5;
    background-color: #001A38;
    border-color: #001A38;
}
.btn-primary {
    color: #F5F5F5;
    background-color: #001A38;
    border-color: #171D20;
}
.dropdown-menu {
    background-color: #2F3133;
    border: 1px solid #171D20;
    color: #F5F5F5;
}
.dropdown-menu > li > a {
    color: #F5F5F5;
}

span.upperframe {
    background: #2F3133;
    border: 1px solid #2F3133;
}
span.upperframe span {
    background: #2F3133;
}
.roundframe {
    background: #2F3133;
    border-left: 1px solid #2F3133;
    border-right: 1px solid #2F3133;
}
span.lowerframe {
    background: #2F3133;
    border: 1px solid #2F3133;
}
span.lowerframe span {
    background: #2F3133;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    color: #F5F5F5;
    background-color: #001A38;
    border-color: #001A38;
}
.btn-danger {
    color: #F5F5F5;
    background-color: #001A38;
    border-color: #171D20;
}

code.bbc_code {
    background: #2F3133;
    border: 1px solid #171D20;
    border-left: 4px solid #171D20;
}
.windowbg2 span.botslice, .windowbg2 span.topslice, .windowbg2 span.topslice span, .windowbg2 span.botslice span {
    background: #2F3133;
}


the simplest solution is most likely the right one

pretor

#1
30 Październik 2020, 15:13
Fajnie @Adrian ale nie bardzo rozumiem czemu ma to służyć  ???

Adrian

#2
30 Październik 2020, 17:55
Ciemna wersja stylu, wg mnie wygodniej przegląda się stronę wieczorem/w nocy :)
W załączniku zrzut ekranu przed i po
the simplest solution is most likely the right one

pretor

#3
30 Październik 2020, 19:22
Jak mam to zrobić w Operze ?

Adrian

#4
31 Październik 2020, 19:02
O właśnie tak => https://www.youtube.com/watch?v=8AWowQVVTYs
W pozostałych przeglądarkach wiele nie powinno się różnić ;)
the simplest solution is most likely the right one
Drukuj
Do góry Strony1
Akcje użytkownika