なろうダークモード-Bookmark by masu

Details

Authormasu
LicenseCC BY-NC-SA
Category小説家になろう
Created1 year, 2 weeks ago
Updated1 year, 1 week ago
Size19 kB
Statistics

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

なろうのブックマーク画面を色々と改良しました。カ◯ヨムを意識しました。
関数である程度色と形を変更できます。
こちらのCSSもよろしくお願いします。
https://userstyles.world/style/8246/default-slug
Notes

2023/11/27 Released
2023/12/02 「ブックマーク」への対応その他シークバー、リストの高さ等の修正
2023/12/02 「ブックマークカテゴリ名変更」への対応
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         なろうダークモード-Bookmark
@namespace    Narou-dark-Bookmark
@description  なろうの自作ダークモードです
@author       https://twitter.com/Mathmaticsssss
@preprocessor stylus
@version      1.1.0
@license      CC BY-NC-SA
==/UserStyle== */

/*更新チェック一覧*/
@-moz-document url-prefix("https://syosetu.com/favnovelmain/isnoticelist/") {
: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}
#container{margin:0 auto;width:1443px}
#header{display:flex;width:1300px}
a#narou_link{margin:30px 0px 0px 0px}

#sub{float:right}
#sub div{display:none}


/*ログイン中、ログアウト、設定変更*/
#head_log{width:420px;height:20px;margin:49px 0px 0px 580px;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}


/*上メニュー*/
#userglobal_koukoku{order:2;margin:10px 10px 10px 10px}
ul.writter_menu{margin:0px 0px 0px 5px;clear:right;width:fit-content;order:1}
.writter_menu li:nth-child(7) a{margin-right:6px}
#contents2 .writter_menu li a:hover{color:#eee}
.writter_menu li.menu_h{display:none}
#contents2 .writter_menu, #contents2 .writter_menu a{background:var(--BACK2);color:var(--TEXT)}

ul.writter_menu li:not(:last-child)  {border-right:1px solid #aaa}
ul.writter_menu li:not(:last-child) a{border-right:0px solid}
.writter_menu a:hover{border-left:0px;color:var(--TEXT);text-decoration:underline}

#contents2 #sub{width:100%;margin:0;height:100px;display:flex;flex-wrap: wrap}

a#noticelist{width:fit-content}

a#category_manage{height:30px;margin:15px 5px 10px 5px;padding:30px 4px 15px 4px;background:var(--BACK2);color:var(--TEXT);}
a#category_manage:hover{height:30px;margin:15px 5px 10px 5px;padding:30px 4px 15px 4px;background:var(--BACK3);color:var(--TEXT2);border:1px solid #cccccc}

ul.category_box {display:flex;width:87%;flex-wrap: wrap}
ul.category_box li {margin:0px 10px 10px 0px;padding:0px 5px 0px 15px;width:120px;height:fit-content;background:var(--BACK2);border-radius:2px;}
ul.category_box li:hover{background:var(--BACK3)}


ul.category_box li a{width:120px;color:var(--TEXT)}
a#noticelist{display:none}

ul.category_box li a:hover{width:120px;color:var(--TEXT2)}
a#noticelist{display:none}

.clr{display:none}


/*更新通知チェック中一覧 */

h3.isnoticelist{background:var(--BACK2);color:var(--TEXT);border:1px solid #eee}
#contents2{margin:0 0 0 30px;width:81%;display:flex;flex-direction:column-reverse}
#contents2 #main{float:left;width:fit-content}
#main form{width:100%}
#main .favnovel{float:left}


.pager_idou{display:flex;justify-content:center;flex-wrap: wrap;}
.pager_idou a{background:var(--BACK2);color:var(--TEXT);width:140px;border-radius:2px;}
.pager_idou a:hover{background:var(--BACK3);color:var(--TEXT);width:140px;border-radius:2px;}


table.favnovel{width:374px;height:197px;margin:7px;background:var(--BACK2);color:var(--TEXT);border:0px;border-radius:var(--RADIUS)}
table.favnovel p{width:340px;font-size:120%;}
span.no{margin:100px 0px 0px 0px;white-space: nowrap}
.isnotice{display:none}
td.title2 {font-size:130%}

table.favnovel td.title2 a.title{   
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;}

td.jyokyo1{background:#1c1c1c;border-radius:var(--RADIUS) 0 0 var(--RADIUS)}
td.jyokyo2{background:#bcbcbc;border-radius:var(--RADIUS) 0 0 var(--RADIUS)}

td.title a.title, td.title2 a.title, td.title span.title, td.title2 span.title{color:var(--TEXT)}
td.title a.title:hover, td.title2 a.title:hover, td.title span.title, td.title2 span.title:hover{color:var(--TEXT2);text-decoration:underline}

.no a{color:var(--TEXT);font-size:110%;font-weight:bold}
.no a:hover{color:var(--TEXT2);font-size:110%;text-decoration:underline;font-weight:bold}
td.info2 p.right a{color:var(--TEXT)}
td.info2 p.right a:hover{color:var(--TEXT2);text-decoration:underline}

.upper a{color:var(--TEXT)}
.upper a:hover{color:var(--TEXT2);text-decoration:underline}

#footer ul li a{color:var(--TEXT)}
#footer ul li a:hover{color:var(--TEXT2);text-decoration:underline}

/*右メニュー*/
#extra{float:left;margin:10px 0px 0px 5px;padding:0;background:#0000;}
.extranav{margin-bottom:0;padding:0;border-radius:var(--RADIUS);background:#0000;}
#home {margin:0;border:0px solid;}
#home, #home a,#home a:hover{background:var(--BACK2);color:var(--TEXT);font-size:15px;border-radius:var(--RADIUS) var(--RADIUS) 0px 0px}
#home a:hover{color:#eee;text-decoration:underline}
#menu_box ul:nth-child(1){border-top:1px solid #aaa}

#menu_box a{color:var(--TEXT)}
#menu_box{margin:0;padding:0;border:0;background:var(--BACK2)}
#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:0}
#mypagelink{margin:0;padding:0;border:0;border-bottom:1px solid #fff;background:var(--BACK2)}
#mypagelink a{border:0;padding:7px 10px;background:var(--BACK2);color:var(--TEXT);font-size:15px;font-weight:200}
#mypagelink ul {
    margin: 0px 0px 0px 1px;}
 #mypagelink{border-top: 1px solid #fff}
#pd_box div.absolute a:hover{text-decoration:underline;color:var(--TEXT2)}




#pd_box{background:#0000;margin:0;padding:0;border:0;border-radius:0}
#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)}
#pd_box div.absolute a:hover{color:#eee}

#extra div[class^="normal"]{display:none}



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


/*ブックマーク一覧*/
@-moz-document url-prefix("https://syosetu.com/favnovelmain/list/") {
:root{
	--BACK:#333;
	--BACK2:#454545;
	--BACK3:#555;
	--BACK5:#555;
	--TEXT:#eee;
	--TEXT2:#fff;
	--RADIUS:7px;
    --WIDTH:375px;/*375=3列,570=2列,1150=1列*/
}

body,#header,#footer{background: var(--BACK);font-family:'Helvetica Neue',sans-serif}
#container{margin:0 auto;width:1443px}
#header{display:flex;width:1300px}
a#narou_link{margin:30px 0px 0px 0px}

#sub{float:right}
#sub div{display:none}


/*ログイン中、ログアウト、設定変更*/
#head_log{width:420px;height:20px;margin:49px 0px 0px 580px;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}


/*上メニュー*/

li.now{color:var(--TEXT);text-decoration:underline}

#userglobal_koukoku{order:2;margin:10px 10px 10px 10px}
ul.writter_menu{margin:0px 0px 0px 5px;clear:right;width:fit-content;order:1}
.writter_menu li:nth-child(7) a{margin-right:6px}
#contents2 .writter_menu li a:hover{color:#eee}
.writter_menu li.menu_h{display:none}
#contents2 .writter_menu, #contents2 .writter_menu a{background:var(--BACK2);color:var(--TEXT)}

ul.writter_menu li:not(:last-child)  {border-right:1px solid #aaa}
ul.writter_menu li:not(:last-child) a{border-right:0px solid}
.writter_menu a:hover{border-left:0px;color:var(--TEXT);text-decoration:underline}

#contents2 #sub{width:100%;margin:0;height:100px;display:flex;flex-wrap: wrap}

a#noticelist{width:fit-content}

a#category_manage{height:30px;margin:15px 5px 10px 5px;padding:30px 4px 15px 4px;background:var(--BACK2);color:var(--TEXT);}
a#category_manage:hover{height:30px;margin:15px 5px 10px 5px;padding:30px 4px 15px 4px;background:var(--BACK3);color:var(--TEXT2);border:1px solid #cccccc}

ul.category_box {display:flex;width:87%;flex-wrap: wrap}
ul.category_box li {margin:0px 10px 10px 0px;padding:0px 5px 0px 15px;width:120px;height:fit-content;background:var(--BACK2);border-radius:2px;}
ul.category_box li:hover{background:var(--BACK3)}


ul.category_box li a{width:120px;color:var(--TEXT)}
a#noticelist{display:none}

ul.category_box li a:hover{width:120px;color:var(--TEXT2)}
a#noticelist{display:none}

.clr{display:none}


/*ブックマーク一覧 */

.nowcategory {color:var(--TEXT)}

#search_menu li{color:var(--TEXT)}
#search_menu li#all .on,#search_menu li#koukai .on,#search_menu li#hikoukai .on {color:var(--TEXT);background:#0000;border-bottom: 3px solid #fff}
#search_menu li#all a,#search_menu li#koukai a,#search_menu li#hikoukai a{color:var(--TEXT);font-weight:normal;}
#search_menu li#all a:hover,#search_menu li#koukai a:hover,#search_menu li#hikoukai a:hover{color:var(--TEXT2);font-weight:normal;text-decoration:underline}

#search_menu li#isnotice a{color:var(--TEXT)}
#search_menu li#isnotice a:hover{color:var(--TEXT2);text-decoration:underline}
#search_menu li#isnotice .on {color:var(--TEXT)}


#manage_menu {border:1px solid #aaa;color:var(--TEXT)}
.checker a{color:var(--TEXT);font-weight:bold;font-size:110%}
.checker a:hover{color:var(--TE...
Reviews

No reviews yet.