Skip to content

o.kimura / novel-noveler.com

Go to a project
Commit 0ff1f2c1 by o.kimura
Options

index.html の階層位置を移動。

parent bb821dea
Inline Side-by-side
Showing with 287 additions and 285 deletions
css/main.css
...@@ -65,489 +65,491 @@ output, ...@@ -65,489 +65,491 @@ output,
ruby, ruby,
section, section,
summary { summary {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font: inherit; font: inherit;
font-size: 100%; font-size: 100%;
vertical-align: baseline; vertical-align: baseline;
} }
a { a {
color: #1d6ec6; color: #1d6ec6;
} }
html { html {
line-height: 1; line-height: 1;
} }
body { body {
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
color: #333333; color: #333333;
background-color: #e4e7ee; background-color: #e4e7ee;
} }
body, body,
pre { pre {
font-family: "Helvetica Neue", "arial", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-family: "Helvetica Neue", "arial", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
} }
ol, ol,
ul { ul {
list-style: none; list-style: none;
} }
.row { .row {
margin-left: 0.2em; margin-left: 0.2em;
margin-right: 0.2em; margin-right: 0.2em;
} }
/* LOGO */ /* LOGO */
.logo { .logo {
font-family: 'Logo'; font-family: 'Logo';
position: absolute; position: absolute;
font-size: 200%; font-size: 200%;
margin: 0.5em 0 0.5em 1.2em; margin: 0.5em 0 0.5em 1.2em;
font-weight: 500; font-weight: 500;
} }
/* leftmenu */
.left-menu { .left-menu {
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #d6dee5; border: 1px solid #d6dee5;
margin: 5em 0 1em 0; margin: 5em 0 1em 0;
position: relative; position: relative;
min-width: inherit; min-width: inherit;
border-radius: 5px; border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
} }
.left-inside { .left-inside {
padding: 7px; padding: 7px;
text-align: left; text-align: left;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
} }
/* main */ /* main */
.main-contents { .main-contents {
float: left; float: left;
margin: 5em 0 1em 0; margin: 5em 0 1em 0;
padding: 0px; padding: 0px;
/* width: 550px;*/
} }
#main-container { #main-container {
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
margin-left: 0.2em; margin-left: 0.2em;
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: #fff;
border: 1px solid #d6dee5; border: 1px solid #d6dee5;
padding: 0 10px; padding: 0 10px;
overflow: visible; overflow: visible;
} }
.rounded { .rounded {
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
position: relative; position: relative;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
margin: 0 0 10px; margin: 0 0 10px;
padding: 5px 10px; padding: 5px 10px;
background-color: #fff; background-color: #fff;
border: 1px solid #d6dee5; border: 1px solid #d6dee5;
} }
.trans-button { .trans-button {
background-color: transparent; background-color: transparent;
border: 2px solid #fff; border: 2px solid #fff;
color: #fff; color: #fff;
line-height: 50px; line-height: 50px;
} }
.trans-button .trans1 { .trans-button .trans1 {
display: inline-block; display: inline-block;
width: 200px; width: 200px;
height: 54px; height: 54px;
font-size: 18px; font-size: 18px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
line-height: 54px; line-height: 54px;
outline: none; outline: none;
} }
.trans-button:hover { .trans-button:hover {
background-color: rgba(255, 255, 255, .2); background-color: rgba(255, 255, 255, .2);
} }
/* novel */ /* novel */
.novel-items { .novel-items {
margin-left: 0; margin-left: 0;
text-align: center; text-align: center;
} }
novel-item { novel-item {
position: relative; position: relative;
text-align: left; text-align: left;
min-height: 115px; min-height: 115px;
min-width: 700px; min-width: 700px;
margin: 0 50px; margin: 0 50px;
border: solid #e8f0f6; border: solid #e8f0f6;
border-width: 0 0 1px border-width: 0 0 1px
} }
.novel-item.muted .banner, .novel-item.muted .banner,
.novel-item.muted .chars, .novel-item.muted .chars,
.novel-item.muted .novel-right-contents { .novel-item.muted .novel-right-contents {
display: none display: none
} }
.novel-item.muted .thumbnail-filter-items { .novel-item.muted .thumbnail-filter-items {
bottom: 11px bottom: 11px
} }
.novel-item+.novel-item { .novel-item+.novel-item {
border-top: 1px solid #d6dee5; border-top: 1px solid #d6dee5;
padding-top: 10px padding-top: 10px
} }
.novel-item .series-title { .novel-item .series-title {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
margin-bottom: 4px; margin-bottom: 4px;
font-weight: 700; font-weight: 700;
color: #faa200 color: #faa200
} }
.novel-item .marker-delete { .novel-item .marker-delete {
text-align: center; text-align: center;
margin-top: 10px margin-top: 10px
} }
.novel-item .title { .novel-item .title {
text-decoration: none; text-decoration: none;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
line-height: 1 line-height: 1
} }
.novel-item .title:hover { .novel-item .title:hover {
text-decoration: underline text-decoration: underline
} }
.novel-item .title a { .novel-item .title a {
color: #555 color: #555
} }
.novel-item .title a:visited { .novel-item .title a:visited {
color: #555 color: #555
} }
.novel-item .banner:before { .novel-item .banner:before {
content: ""; content: "";
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
top: -17px; top: -17px;
left: 31px; left: 31px;
border: 17px solid transparent; border: 17px solid transparent;
border-bottom-color: #cd8603 border-bottom-color: #cd8603
} }
.novel-item .banner:after { .novel-item .banner:after {
content: ""; content: "";
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
top: 34px; top: 34px;
left: -14px; left: -14px;
border: 17px solid transparent; border: 17px solid transparent;
border-top-color: #cd8603 border-top-color: #cd8603
} }
.novel-item .banner span { .novel-item .banner span {
position: absolute; position: absolute;
left: -20px; left: -20px;
text-align: center; text-align: center;
top: 11px; top: 11px;
background: orange; background: orange;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
width: 78px; width: 78px;
font-size: 10px; font-size: 10px;
z-index: 1; z-index: 1;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg) transform: rotate(-45deg)
} }
.novel-item table.stats { .novel-item table.stats {
margin: 10px 0 5px; margin: 10px 0 5px;
font-size: 11px font-size: 11px
} }
.novel-item table.stats th { .novel-item table.stats th {
color: #888 color: #888
} }
.novel-item table.stats th:after { .novel-item table.stats th:after {
content: ":"; content: ":";
margin: 0 2px margin: 0 2px
} }
.novel-item table.stats td { .novel-item table.stats td {
padding-right: 10px padding-right: 10px
} }
.novel-item table.stats .report-link { .novel-item table.stats .report-link {
font-weight: 700 font-weight: 700
} }
.novel-item img.cover { .novel-item img.cover {
max-width: 75px; max-width: 75px;
max-height: 100px; max-height: 100px;
position: relative; position: relative;
z-index: 1 z-index: 1
} }
.novel-item .novel-contents { .novel-item .novel-contents {
width: 100%; width: 100%;
position: relative; position: relative;
min-height: 120px min-height: 120px
} }
.novel-item .novel-contents .imgbox { .novel-item .novel-contents .imgbox {
padding: 3px 0 0 3px; padding: 3px 0 0 3px;
top: -3px; top: -3px;
left: -3px; left: -3px;
float: left; float: left;
overflow: hidden; overflow: hidden;
position: relative position: relative
} }
.novel-item .novel-contents .novel-right-contents { .novel-item .novel-contents .novel-right-contents {
text-align: left; text-align: left;
padding: 20px 45px 10px 45px; padding: 20px 45px 10px 45px;
margin-bottom: 0.35em; margin-bottom: 0.35em;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
font-size: 120%; font-size: 120%;
} }
.novel-item .novel-contents .novel-right-contents .edit-bookmark { .novel-item .novel-contents .novel-right-contents .edit-bookmark {
margin: 5px 0 margin: 5px 0
} }
.novel-item .novel-contents .novel-right-contents .data-a { .novel-item .novel-contents .novel-right-contents .data-a {
margin: 6px 0 margin: 6px 0
} }
.novel-item .novel-contents .novel-right-contents .data-a li { .novel-item .novel-contents .novel-right-contents .data-a li {
display: inline; display: inline;
margin-left: 6px margin-left: 6px
} }
.novel-item .novel-contents .novel-right-contents .data-a li+li:before { .novel-item .novel-contents .novel-right-contents .data-a li+li:before {
content: "|"; content: "|";
font-size: 12px; font-size: 12px;
color: #ccc; color: #ccc;
margin: 0 10px 0 0 margin: 0 10px 0 0
} }
.novel-item .novel-contents .novel-right-contents .data-a li.bookmark-count { .novel-item .novel-contents .novel-right-contents .data-a li.bookmark-count {
background-color: #fff!important; background-color: #fff!important;
color: #333!important color: #333!important
} }
.novel-item .novel-contents .novel-right-contents .data-a li.response-count { .novel-item .novel-contents .novel-right-contents .data-a li.response-count {
color: #000; color: #000;
background-color: inherit; background-color: inherit;
padding: 0!important; padding: 0!important;
font: 700 10px/18px lucida grande, sans-serif font: 700 10px/18px lucida grande, sans-serif
} }
.novel-item .novel-contents .novel-right-contents .data-a li.response-count i { .novel-item .novel-contents .novel-right-contents .data-a li.response-count i {
margin-right: 3px margin-right: 3px
} }
.novel-item .novel-contents .novel-right-contents ._inline-list { .novel-item .novel-contents .novel-right-contents ._inline-list {
margin-bottom: 4px margin-bottom: 4px
} }
.novel-item .novel-contents .novel-right-contents ._inline-list dd+dt { .novel-item .novel-contents .novel-right-contents ._inline-list dd+dt {
margin-left: 20px margin-left: 20px
} }
.novel-item .novel-contents .novel-right-contents .stats td { .novel-item .novel-contents .novel-right-contents .stats td {
width: 5em width: 5em
} }
.novel-item .novel-contents .novel-right-contents .edit { .novel-item .novel-contents .novel-right-contents .edit {
float: left float: left
} }
.novel-item .novel-contents .novel-right-contents .update-date { .novel-item .novel-contents .novel-right-contents .update-date {
text-align: right; text-align: right;
color: #aaa; color: #aaa;
clear: left clear: left
} }
.novel-item .novel-contents .novel-right-contents .novel-caption { .novel-item .novel-contents .novel-right-contents .novel-caption {
padding: 15px 0; padding: 15px 0;
line-height: 1.8; line-height: 1.8;
word-break: break-all word-break: break-all
} }
.novel-item .novel-contents .novel-right-contents .tags li { .novel-item .novel-contents .novel-right-contents .tags li {
display: inline-block; display: inline-block;
max-width: 610px; max-width: 610px;
margin-right: 10px margin-right: 10px
} }
.novel-item .novel-contents .novel-right-contents .tags li:last-child { .novel-item .novel-contents .novel-right-contents .tags li:last-child {
margin-right: 0 margin-right: 0
} }
.novel-list { .novel-list {
margin-bottom: 10px margin-bottom: 10px
} }
.novel-list .novel-item { .novel-list .novel-item {
margin: 0; margin: 0;
max-width: 450px; max-width: 450px;
min-width: 450px; min-width: 450px;
border-width: 1px 0 0; border-width: 1px 0 0;
padding-top: 20px padding-top: 20px
} }
.novel-list .novel-item .novel-contents .novel-right-contents { .novel-list .novel-item .novel-contents .novel-right-contents {
padding-left: 90px padding-left: 90px
} }
.novel-list .novel-item .novel-contents .tags { .novel-list .novel-item .novel-contents .tags {
max-width: none max-width: none
} }
.novel-list .novel-item .novel-contents .novel-caption { .novel-list .novel-item .novel-contents .novel-caption {
max-width: 350px; max-width: 350px;
padding-bottom: 0 padding-bottom: 0
} }
.layout-column-tags-portal .novel-item { .layout-column-tags-portal .novel-item {
min-width: 555px min-width: 555px
} }
.rounded .novel-item { .rounded .novel-item {
min-width: 515px min-width: 515px
} }
.novel-items li input { .novel-items li input {
position: absolute; position: absolute;
left: -15px; left: -15px;
top: 15px top: 15px
} }
.novel-settings { .novel-settings {
margin-bottom: 10px margin-bottom: 10px
} }
.novel-settings>li { .novel-settings>li {
margin-bottom: 0 margin-bottom: 0
} }
.novel-settings .novel-item { .novel-settings .novel-item {
margin: 0; margin: 0;
max-width: 360px; max-width: 360px;
min-width: 360px; min-width: 360px;
border-width: 1px 0 0; border-width: 1px 0 0;
padding-top: 15px padding-top: 15px
} }
.novel-settings .novel-item .novel-contents .novel-right-contents { .novel-settings .novel-item .novel-contents .novel-right-contents {
padding-left: 90px padding-left: 90px
} }
.novel-settings .novel-item .novel-contents .tags { .novel-settings .novel-item .novel-contents .tags {
max-width: none max-width: none
} }
.novel-settings .novel-item .novel-contents .novel-caption { .novel-settings .novel-item .novel-contents .novel-caption {
max-width: 350px; max-width: 350px;
padding-bottom: 0 padding-bottom: 0
} }
.list-b .imgbox { .list-b .imgbox {
padding: 3px 0 0 3px; padding: 3px 0 0 3px;
top: -3px; top: -3px;
left: -3px; left: -3px;
float: left; float: left;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 75px width: 75px
} }
.list-b .series-title { .list-b .series-title {
display: inherit; display: inherit;
font-size: 12px; font-size: 12px;
margin-bottom: 4px; margin-bottom: 4px;
font-weight: 700; font-weight: 700;
color: #faa200 color: #faa200
} }
.list-b .chars { .list-b .chars {
background-color: #eee; background-color: #eee;
width: 75px; width: 75px;
text-align: center; text-align: center;
color: #666; color: #666;
padding: 3px 0; padding: 3px 0;
box-sizing: border-box box-sizing: border-box
} }
.list-b .author { .list-b .author {
margin: 5px 0 10px margin: 5px 0 10px
} }
.list-b .bookmark-box { .list-b .bookmark-box {
float: right; float: right;
margin: 0 0 15px margin: 0 0 15px
} }
.list-b .bookmark-box .bookmark-count { .list-b .bookmark-box .bookmark-count {
background-color: #cef; background-color: #cef;
color: #0069b1 color: #0069b1
} }
.list-b .bookmark-box .response-count { .list-b .bookmark-box .response-count {
background-color: #fad7de; background-color: #fad7de;
color: red!important; color: red!important;
margin-left: 4px margin-left: 4px
} }
.list-b .bookmark-box i { .list-b .bookmark-box i {
margin-right: 3px margin-right: 3px
} }
.list-b .bookmark-count, .list-b .bookmark-count,
.list-b .response-count { .list-b .response-count {
border-radius: 3px; border-radius: 3px;
display: inline-block!important; display: inline-block!important;
margin: 0 1px; margin: 0 1px;
padding: 0 6px!important; padding: 0 6px!important;
font: 700 10px/18px lucida grande, sans-serif!important; font: 700 10px/18px lucida grande, sans-serif!important;
text-decoration: none text-decoration: none
} }
.list-b .report-link { .list-b .report-link {
font-weight: 700 font-weight: 700
} }
.baseTop1 { .baseTop1 {
padding: 5px 0 15px 0; padding: 5px 0 15px 0;
} }
.ui-btn { .ui-btn {
overflow: hidden; overflow: hidden;
} }
/*menu*/ /*menu*/
.menu-unit ul li span { .menu-unit ul li span {
color: #999999; color: #999999;
} }
.menu-unit ul li span.count { .menu-unit ul li span.count {
color: black; color: black;
} }
.menu-unit ul.profile li { .menu-unit ul.profile li {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 8px 0; padding: 10px 8px 0;
} }
.menu-unit ul.menu-item a { .menu-unit ul.menu-item a {
text-decoration-color: #cccccc; text-decoration-color: #cccccc;
text-decoration-style: solid; text-decoration-style: solid;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding: 6px 4px; padding: 6px 4px;
} }
.ui-btn-icon-right { .ui-btn-icon-right {
font-size: 11px; font-size: 11px;
border: none; border: none;
padding-right: 4em; padding-right: 4em;
margin-left: 1em; margin-left: 1em;
text-align: right; text-align: right;
} }
/* font */ /* font */
@font-face { @font-face {
font-family: 'Logo'; font-family: 'Logo';
src: url(../res/A-OTF-ReimPro-Bold.otf); src: url(../res/A-OTF-ReimPro-Bold.otf);
} }
/* hidden menu */ /* hidden menu */
.menu-item>li.menu-list>a { .menu-item>li.menu-list>a {
display: none; display: none;
} }
/* media Query */ /* media Query */
@media screen and (max-width: 576px) { @media screen and (max-width: 576px) {
.ui-btn-icon-notext:after, .ui-btn-icon-notext:after,
.ui-btn-icon-left:after, .ui-btn-icon-left:after,
.ui-btn-icon-right:after { .ui-btn-icon-right:after {
display: none; display: none;
} }
.main-contents { .main-contents {
margin: -5em 0 1em 0; margin: -5em 0 1em 0;
padding: 0px; padding: 0px;
} }
.flex-menu, .flex-menu,
.flex-menu .ui-btn { .flex-menu .ui-btn {
display: inline; display: inline;
} }
#main-container { #main-container {
margin-top: 50px; margin-top: 50px;
} }
.menu-unit ul.menu-item a { .menu-unit ul.menu-item a {
display: inline; display: inline;
} }
.menu-unit ul.menu-item a { .menu-unit ul.menu-item a {
padding: 0; padding: 0;
} }
.left-inside { .left-inside {
border-bottom: none; border-bottom: none;
} }
.menu-item>li.menu-list>a { .menu-item>li.menu-list>a {
display: inline-block; display: inline-block;
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment