なろうホームダークモード by masu

Details

Authormasu
LicenseCC BY-NC-SA
Category小説家になろう
Created1 year, 11 months ago
Updated1 year, 3 months ago
Size9.7 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

なろうのホーム画面を色々と改良しました。
関数である程度色を変更できます。
※要らないと思った機能を削除しています。(例：辞書メニュー、重複箇所)
こちらのダークモードCSSもよろしくお願いします。
https://userstyles.world/style/7928/default-slug
Notes

2023/10/8 角丸など形以外の大規模な変更右上の設定変更など初期版で手が回らなかった所を改修
Source code

/* ==UserStyle==
@name         なろうホームダークモード
@namespace    Narou-home-dark
@description  なろうの自作ダークモード
@author       https://twitter.com/Mathmaticsssss
@preprocessor stylus
@version      1.1.0
@license      CC BY-NC-SA
==/UserStyle== */

/* This userstyle uses Stylus-lang preprocessor.
   Complete preprocessor documentation at: https://stylus-lang.com
   Writing UserCSS: https://github.com/openstyles/stylus/wiki/Writing-UserCSS */

@-moz-document url("https://syosetu.com/user/top/") {
:root{
	--BACK:#333;
	--BACK2:#454545;
	--BACK3:#555;
	--BACK5:#555;
	--TEXT:#eee;
	--TEXT2:#fff;
	--RADIUS:7px;
}


body,#header,#footer{background: var(--BACK);font-family:'Helvetica Neue',sans-serif}

#narou_link{height:23px}

/*ログイン中、ログアウト、設定変更*/
#head_log{color:var(--TEXT);font-size:12px;border-bottom:1px dashed}
#edit{color:var(--TEXT)}
#edit .absolute span{border:1px solid #aaa;background:var(--BACK2)}
#edit .absolute a{color:var(--TEXT)}
#head_log li#edit a:hover {text-decoration:underline;border-radius: var(--RADIUS);background:var(--BACK2);color:var(--TEXT2)}
#head_log ul li:nth-child(1){text-decoration:underline}
#head_log ul li:nth-child(2){display:none}
#logout.js-logout{color:var(--TEXT);font-weight:bold}
#logout.js-logout:hover{color:#ff8383}


#container {
	margin: 0 auto;
	width:1443px;
	height:800px}

#container:after {display:none}

/*contents*/
#contents{margin:0;height:700px}

#favnovel,#favuser,#favuserblog,#favusernovel{border-radius: var(--RADIUS);background:var(--BACK2);padding:0;margin:0 10px 0 0}

#header{width: 1335px}
#head_log{float: right}


/*告知*/
#user_info{padding:0 0 10px 0;width:fit-content}
#official{margin:0 10px 0 0;width:700px;height:73px;background:var(--BACK3);border:1px solid #aaa}
#official h3{border:0;border-bottom:1px solid #aaa;height:20px}
#official h3 a{color:var(--TEXT);font-size:15px}
#official h3 a:hover{text-decoration:underline;color:var(--TEXT2);font-size:15px}
#official a{color:var(--TEXT)}
#official ul a:hover{color:var(--TEXT2)}
#official ul li {width:auto;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;-moz-text-overflow: ellipsis}
#official ul li{color:var(--TEXT)}


.kokuti_box .midashi{display:none}
.kokuti_box{border: 1px solid #fff;
	margin:0 10px 10px 0; width:auto; height:34px}
.kokuti_box p.kokuti{margin: 5px 0;background:#0000;color:var(--TEXT)}


/*小説作成など横リスト*/
#writter_menu_top .writter_menu_title{display:none}
#writter_menu_top .writter_menu_list a{padding:7px 13px 5px 12.5px; min-width:fit-content;height:22px;background:var(--BACK2);border:1px solid #aaa;border-left:0px}
#writter_menu_top .writter_menu_list a:nth-child(1){padding:7px 12.5px 5px 13px;border:1px solid #aaa}
#writter_menu_top .writter_menu_list a:hover{border:1px solid #aaa;border-left:0px;color:var(--TEXT);text-decoration:underline}
#writter_menu_top .writter_menu_list a:nth-child(1):hover{border:1px solid #aaa}

#contents,#sub_top,#main_top{width:fit-content}
#writter_menu_top .writter_menu_list_item{color:var(--TEXT)}


#sub_top{float: left;margin:0 0 7px 0;height:636px}

h3{margin:0 0 0;
	padding:0 0 0 5px;
	height:25px;
	background:var(--BACK2);
	border-radius: var(--RADIUS) var(--RADIUS) 0 0;
	color:#f0f0f0;
	 align-items: center;
	font-size:15px}/*トップ色*/

.favnovel_list,
#favuser .favuser_list li,
#favuserblog li,
.favusernovel_title a,
.favusernovel_list{background:var(--BACK2)}/*記号消し*/

#favnovel .favnovel_hover:hover,
#favuserblog ul li .title:hover,
#favusernovel div a:hover{background:var(--BACK2)}/*ホバー時背景変化消去*/

#favuser ul li a,.favusernovel_title a{background:var(--BACK2);color:var(--TEXT)}



/*更新チェック中の小説*/
#favnovel{float: left;margin:0 10px 10px 0;width:250px;border:0px}
#favnovel h3{padding:5px 0 0 5px;height:20px}
#favnovel .favnovel_title{color:var(--TEXT)}

.a_line {
	margin: 4px 5px var(--RADIUS) 0;
	text-align: right;
	clear: both
}

.favnovel_list .favnovel_hover,
.favnovel_list .favnovel_hover:visited{
	margin:0;
	padding:5px 0 0 15px;
	height:40px;
	color:var(--TEXT)}

#favnovel .favnovel_list .favnovel_hover:hover{
	height:40px;background:var(--BACK5);color:#fff}
.favnovel_list .favnovel_title{font-size:14px}

.favnovel_list .no a,
.favnovel_list .no a:visited,
.favnovel_list a,
.favnovel_list a:visited{color:#b5b5b5;font-size:13px}

.favnovel_list .no a:hover,
.favnovel_list a:hover{color:var(--TEXT2)}

.favnovel_list .favnovel_info,.favnovel_info:visited{color:#b5b5b5}
.favnovel_info a{padding:0 0 0 10px}

.favnovel_list{margin:0;padding:0;border-bottom:1px dotted #ccc}
.a_line{height:15px}
.a_line a{color:#b5b5b5}
.a_line a:hover{color:#fff}

#favnovel div:nth-child(9),#favnovel div:nth-child(10){display:none}



/*お気に入りユーザー*/
#favuser{float: left;clear: none;width:150px;height:410px;border:0px solid #aaa}
#favuser h3{padding:5px 0 0 5px;height:20px}
#favuser li{margin:0;padding:0;border-bottom:1px dotted #ccc;font-size:14px}
#favuser li a{width:auto;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;-moz-text-overflow: ellipsis}
#favuser li a:hover{background:var(--BACK5);text-decoration:none}

/*お気に入りユーザの活動報告*/
#favuserblog{float: left;border:0px solid #aaa;width:350px;height:fit-content}
#favuserblog ul{margin:0}
#favuserblog li{margin:0;padding:6px 0;height:41px;border-bottom:1px dotted #ccc}
#favuserblog li a{padding:0 0 0 5px}
#favuserblog li a{width:auto;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;-moz-text-overflow: ellipsis}


#favuserblog  li a.title{background:#0000;
	color:var(--TEXT);
	font-size:14px;
	font-weight:100}
#favuserblog  li a.title:hover{text-decoration:underline;background:#0000;color:var(--TEXT2)}
#favuserblog  li a:nth-child(2){color:#b5b5b5;font-size:13px}
#favuserblog  li a:nth-child(2):hover{color:var(--TEXT2)}
#favuserblog  li:nth-child(10){border-radius: var(--RADIUS);border-bottom:0px}



#main_top{margin:0 0 10px 0}

/*お気に入りユーザの新着小説*/
#favusernovel{float:left;clear:none;width:400px;height:fit-content;border:0px solid #aaa}
.favusernovel_list{margin:0;padding:6px 0;border-bottom:1px dotted #ccc}
.favusernovel_list:nth-child(11){border-radius: var(--RADIUS);border-bottom:0px}

.favusernovel_title a{margin:0;padding: 5px 0 0 5px;font-size:14px;font-weight:100}
#favusernovel .favusernovel_title a:hover{text-decoration:underline;color:var(--TEXT2)}
.favusernovel_title a{width:auto;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;-moz-text-overflow: ellipsis}
.favusernovel_type,.favusernovel_type div,.favusernovel_type a{color:#b5b5b5;font-size:13px}
.favusernovel_info{width:fit-content}
.favusernovel_type a:hover{color:var(--TEXT2)}

/*右メニュー*/
#extra{float:left;margin:0;padding:0;background:#0000;border:0px solid #aaa}
.extranav{margin:0;padding:0;border-radius:var(--RADIUS) var(--RADIUS) 0 0;background:#0000}
#menu_box a{color:var(--TEXT)}
#menu_box{margin:0;padding:0;border:0;background:var(--BACK2);border-radius:var(--RADIUS) var(--RADIUS) 0 0}
#menu_box ul{margin:0;border-top:0;border-right:0;border-left:0;border-bottom:1px dashed #ccc}

#menu_box ul:nth-child(4){border-bottom:0px solid}
#mypagelink{margin:0;padding:0;border:0;border-bottom:1px solid #fff;background:var(--BACK2)}
#mypagelink li{margin:0;border-top:1px solid #fff}
#mypagelink a{border:0;padding:7px 10px;background:var(--BACK2);color:var(--TEXT);font-size:15px;font-weight:200}

.normal_box{margin:0;padding:0;border:0}
.normal_box ul li a,.normal_box ul li a:hover{height:24px;background:var(--BACK2);border-bottom:1px dashed #ccc;color:var(--TEXT);font-size:14px}
.normal_box a:hover{text-decoration:underline}
.normal_box li:nth-child(3) a,.normal_box li:nth-child(3) a:hover{border:none}
.normal_box li:nth-child(3){border-bottom:1px solid #fff}

#pd_box{margin:0;padding:0;border:0;background:#0000}
#pd_box h3{margin:0;padding:6px 10px;border:0;
	border-bottom:1px dashed #ccc;
	border-radius:0;box-shadow:none;
	text-shadow:none;background:var(--BACK2);
	color:var(--TEXT);font-size:14px}
#pd_box h3[onmouseover="pDown6();"]{border-bottom:0}
#pd_box h3:nth-child(11){border-radius:0 0 var(--RADIUS) var(--RADIUS)}

#pd_box div.absolute a,#pd_box div.absolute a:hover{background:var(--BACK2)}
#pd_box div.absolute ul{border:1px solid #ccc}
#pd_box div.absolute a{color:var(--TEXT)}
#es li.n a{padding:7px 15px 7px 20px;width:145px}
#pd_box div.absolute a:hover{text-decoration:underline;color:var(--TEXT2)}


#home,
#extra div:nth-child(4) h3,
#extra div:nth-child(7),
#extra div[class^="normal"]:nth-child(6){display:none}



/*下ナビ*/
#navigate{margin:10px 0 0 0}
#navigate dd,#navigate dt:nth-child(1){display:none}
#navigate dt{float: left;clear:none;margin:0 10px 0;width:fit-content}
#navigate dt.op{float: left;clear:none;width:fit-content}
#navigate dt.op a,#navigate dt a{color:#11acff}
#navigate dt.op a:hover,#navigate dt a:hover{text-decoration:underline;color:#2fb7ff}
.upper{display:none}

#footer{margin:0 auto;width:1400px;flex-direction:column}
#footer ul{margin:0;padding:0;height:10px;border-top:0}
#footer ul li a{color:var(--TEXT)}
#footer ul li a:hover{text-decoration:underline;color:var(--TEXT2)}
#footer ul li:nth-child(1){display:none}

::-webkit-scrollbar{width:0;height:10px}
::-webkit-scrollbar-track{background-color:#242424}
::-webkit-scrollbar-thumb{background-color:#d2d2d2}
}
Reviews

No reviews yet.