NodeBB Gece modu (Night Mode) özelleştirmeleri

admin

Kurulumu.net’te kullandığım tüm CSS özelleştirmelerini paylaşıyorum. Aşağıdaki CSS kodlarını Yönetim Panelinde Görünüm > Özelleştirilmiş içerik bölümüne yapıştırın. Bu sayfanın altında bulunan Özelleştirilmiş CSS /LESS kullan seçeneğibi aktif etmeyi unutmayın.

.chat-modal .chat-content li.chat-message .chat-user a, .expanded-chat .chat-content li.chat-message .chat-user a {
    color: #d9d9d9;
}

.form-control:focus {box-shadow:none}

.btn, .topic .posts .content pre code, .hljs, code, .tag-list .tag .btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info, .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary, .tag-list .tag, .alert-warning
{
    border-radius: 4px
}

.categories>li, .category>ul>li, .category .category-item, .topic .topic-item {border-top: 2px solid #eee}

.topic-list-header {border-bottom: none}

.fa-chevron-up:before {
    content: "\f164";
}

.input-group-addon {
    
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.announcements-widget {
    padding: 0;
    list-style-type: none;
}

.topic .content {
    font-size: 16px
}
.header .forum-logo {
    height: 35px;
    margin-top: 8px;
    margin-right: 12px;
}

.categories>li .category-children .category-children-item {
    min-width: 100px;
}

pre {
    padding: 0
}

code {
    color: #333;
    background-color: #e8ecf3;
}

.hljs{
    background: #f7f7f7;
    color: #666;
    padding: 9.5px;
}





@media (max-width: 767px){
.header .forum-logo {
     margin-left: 1px; 
}}

.popular-tags > .inline-block {
	width: 100%;
	margin-top: -8px;
	
	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: -5px;
	}
}

.popular-tags .tag-topic-count {
	float: left;
	width: 20%;
	margin-top: 0px;
	background-color: #cbebf7;
	color: #777;
	padding: 4px 4px 5px 4px;
	border: 0;
	text-align: center;
}

.popular-tags .tag-item {
	float: left;
	width: 80%;
	background-color: #4fc3f7;
	color: white;
	font-weight: 500;
	padding-left: 10px;
	position: relative;
	padding: 5px 5px 4px 10px;
}

.popular-tags-bar {
	background-color: rgba(0,0,0,0.07);
	width: 0px;
	height: 32px;
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transition: width 750ms ease-out;
	-moz-transition: width 750ms ease-out;
	-ms-transition: width 750ms ease-out;
	-o-transition: width 750ms ease-out;
	transition: width 750ms ease-out;
}

.topic .posts .content .img-responsive {
    padding: 6px;
    border: 1px solid #c3c3c3;
    background-color: #eee;
    border-radius: 3px;
    margin: 10px;
}


@media (max-width: 767px){
.topic .posts [component=post] {border-bottom: 1px solid #eee}}

.well {
background-color: #f5f5f5;
border-radius: 4px;
border: 1px solid #e3e3e3;
}

.btn-default {
    color: #56646f;
    background-color: #e8ecf3;
    border-color: #e8ecf3;
}

.form-control {
    border-radius:4px;
    border: 1px solid #c4d1dc;
}

.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default {
    color: #fff;
    background-color: #667c99;
    border-color: #667c99;
}

.open>.dropdown-menu  {
       border-radius: 4px;
}

.panel-default {
     border-radius: 4px;
     border-color: #e8ecf3;
}

.topic .pagination-block {
        background-color: #e8ecf3;
}


.dropdown-menu>li>form>.btn-link, .dropdown-menu>li>form>button {
    color: #f23d37;
}

.alert-warning {
    background-color: #d9534f;
    color: #fff;
    border-color: #d9534f;
}

body.lights-out .pagination a {
    
    background-color: #36393e;
   
}

body.lights-out .chat-list .unread {
    background-color: #252a30;
}

body.lights-out .header .notification-list li.unread, .slideout-menu .notification-list li.unread {background-color: #252a30;}

body.lights-out .category .category-item, .topic .topic-item  {border-top: 2px solid #36393e;}

body.lights-out  .categories>li, .category>ul>li {border-top: 2px solid #36393e;}


body.lights-out .recent-cards .recent-card-container .recent-card {
    
    
    border: 1px solid #252a30;
    background-color: #36393e;
    
}

body.lights-out .topic [component="post/downvote"], .topic [component="post/upvote"] {color: #d9d9d9;}

body.lights-out .topic .topic-info {
    border-bottom: 1px solid #252525;
}


body.lights-out .topic .posts>[component=post] .avatar {
    box-shadow: 0 0 0 0.5rem #36393e;
}

@media (max-width: 767px){
body.lights-out .topic .posts [component=post] {
    border-bottom: 1px solid #252a30;
}}

body.lights-out .form-control {
    background-color:#36393e;
    border: 1px solid #252a30;
    color: #d9d9d9;
}


body.lights-out .input-group-addon {
    background-color: #36393e;
    border: 1px solid #252a30;
    
}

body.lights-out .well {
    border: 1px solid #252a30;
    background-color: #36393e;
    
}

body.lights-out .topic .pagination-block .pagination-text {
    color: #d9d9d9
}

body.lights-out .navbar-default .navbar-nav>li>a {color: #fff}

body.lights-out .topic .pagination-block {
    background-color: #36393e;
}

body.lights-out .tag-list .tag {
    background: #36393e;
}



body.lights-out .composer .write {
    background: #36393e;
}

body.lights-out .composer {
    background:  #36393e;
}

body.lights-out .composer .formatting-bar .formatting-group li {
    color: #b3b3b3;
}

body.lights-out .modal-content{
    background-color: #3d4147;
    color: #d9d9d9
}

body.lights-out .account .profile .profile-meta strong {color: #337ab7}

body.lights-out .modal-footer {
    border-top: 1px solid #252a30;
}

body.lights-out code {
    
    color: #898685;
    background-color: #36393e;
    
}

body.lights-out {
    background: none repeat scroll 0 0 #3d4147;
    color: #d9d9d9
}

body.lights-out .navbar-default {
    background-color: #36393e;
    border-color: #d9d9d9
}
  
  
  body.lights-out .topic-header {
    background-color: #3d4147;
}

body.lights-out .topic .topic-info {
    border-bottom: 1px solid #252a30;
}

body.lights-out .dropdown-menu {
    background-color: #36393e;
}

body.lights-out .topic-list-header {
  background-color: #3d4147;   
}

body.lights-out .btn-default {
    color:#d9d9d9;
    background-color: #36393e;
    border-color: #252a30;
}

body.lights-out .dropdown-menu>li>a {
    color: #fff;
}

body.lights-out .chat-modal .modal-header {
    background-color: #337ab7;
    color: #eee;
    border-bottom: 0 solid #252a30;
}

body.lights-out .chat-modal .modal-body {
    background-color: #3d4147;
}

.chat-modal [component="chat/composer"] [component="chat/input"], .chats-full [component="chat/composer"] [component="chat/input"] {
    border: 1px solid #252a30;
}


body.lights-out .panel-body {
    background-color: #3d4147;
    color: #d9d9d9;
}

body.lights-out .panel-default .panel-heading {
    background-color: #36393e;
    color: #d9d9d9;
    border-color: #252a30;
}

body.lights-out .chats-list>li .room-name {color: #fff}

body.lights-out pre {
    
    color: #d9d9d9;
    background-color: #36393e;
    border: 1px solid #252a30;
    border-radius: 4px;
    
}

body.lights-out .posts-list .posts-list-item .topic-title {
    color: #d9d9d9
}

body.lights-out .navbar {
    border:0
}

body.lights-out .category>ul>li .tag-list .tag {
    background-color: #36393e;
}

body.lights-out .list-group-item {
   
    background-color: #36393e;
    border: 1px solid #252a30;
}

body.lights-out .panel {
    background-color: #36393e;
}

body.lights-out .panel-default {
    border-color: #252a30;
}

body.lights-out hr {
    
    border-top: 1px solid #252a30;
}

body.lights-out a {
    
    color: #fff
}


body.lights-out .bootstrap-tagsinput {
    background-color: #3d4147;
}

body.lights-out .navbar-default .navbar-nav>.open>a, body.lights-out .navbar-default .navbar-nav>.open>a:focus, body.lights-out .navbar-default .navbar-nav>.open>a:hover {
    background-color: #333;
    color: #555;
}

body.lights-out .category>ul>li:not(.unread) h2 a {color: #d9d9d9 !important}


body.lights-out .chat-modal .chat-content li.chat-message .message-body-wrapper .message-body, .expanded-chat .chat-content li.chat-message .message-body-wrapper .message-body:hover {background: transparent}

body.lights-out .chats-list>li .teaser-content {
   color: #6c757d;
}

body.lights-out .chats-list>li:hover {background: #3d4147}

body.lights-out .header .chat-list, .slideout-menu .chat-list {color: #ccc}

body.lights-out .nav-pills>li>a:hover {background: #36393e}

@media (max-width: 767px){
body.lights-out .categories>li, body.lights-out .category>ul>li {
    border-top: 1px solid #252a30;
}}

@media (max-width: 767px){
.menu-profile {
    
    background: #3d4147;
}}

@media (max-width: 767px){
.slideout-menu {
    z-index: 10000!important;
    background-color: #36393e;
    background-image: linear-gradient(
145deg
,#36393e,#36393e);
}}

? Çevrimdışı

@mekici Teşkkürler işime çok yaradı. Mevcut gece modu eklentisinde bir çok hata var.

Kurulumu.Net

NodeBB Gece modu (Night Mode) özelleştirmeleri

Benzer konular

NodeBB Harmony temasına dark Mod (gece modu) ekleme

NodeBB eklenti kurulumu

NodeBB Kullanim sartlari sayfasi

NodeBB Imgur Eklentisi

Kurulumu.Net'te kullandığım Özel CSS'ler