416 lines
No EOL
6.8 KiB
CSS
416 lines
No EOL
6.8 KiB
CSS
/* Global */
|
|
|
|
:root {
|
|
--primary: #9b4dca;
|
|
--secondary: #606c76;
|
|
--light: #ccc;
|
|
--bright: rgb(250, 250, 250);
|
|
}
|
|
|
|
html {
|
|
/* background-color: #eee; */
|
|
font-size: 55%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
#page-wrapper {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
#content-wrapper {
|
|
padding-bottom: 160px;
|
|
}
|
|
|
|
|
|
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
|
|
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
|
|
input[type="search"]::-webkit-search-decoration,
|
|
input[type="search"]::-webkit-search-cancel-button,
|
|
input[type="search"]::-webkit-search-results-button,
|
|
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
|
|
|
footer {
|
|
text-align: center;
|
|
|
|
margin-bottom: 4px !important;
|
|
|
|
border-top: var(--bright) solid 2px;
|
|
|
|
position: absolute !important;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
}
|
|
|
|
footer a {
|
|
margin: 0 15px;
|
|
font-size: small;
|
|
}
|
|
|
|
img.emoji {
|
|
height: 20px !important;
|
|
width: 20px !important;
|
|
box-sizing: border-box;
|
|
object-fit: contain;
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
|
|
.more-link {
|
|
font-size: small;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.highlight {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.dividing-line {
|
|
height: 0;
|
|
width: 100%;
|
|
margin: 40px 0 15px 0;
|
|
border-top: solid 1px var(--light);
|
|
}
|
|
|
|
|
|
/* Nav Bar */
|
|
|
|
section#navbar {
|
|
background-color: var(--bright);
|
|
box-sizing: border-box;
|
|
padding: 18px 0;
|
|
margin-bottom: 50px;
|
|
border-bottom: var(--light) 0.5px solid;
|
|
|
|
}
|
|
|
|
.navbar img.logo {
|
|
width: 100px;
|
|
float: left;
|
|
}
|
|
|
|
.navbar .search-box {
|
|
height: 32px;
|
|
margin: 5px 0 0 16px;
|
|
width: 50%;
|
|
float: left;
|
|
background-color: white;
|
|
}
|
|
|
|
.navbar .search-box::placeholder {
|
|
color: var(--light);
|
|
}
|
|
|
|
.navbar a.nav-link, .navbar a.nav-link:visited {
|
|
font-size: 80%;
|
|
float: right;
|
|
margin-top: 10px;
|
|
color: var(--secondary);
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.navbar a.nav-link:hover, .navbar a.nav-link:hover:visited {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Main Content Section */
|
|
|
|
section#content div#main {
|
|
padding: 32px 35px;
|
|
background-color: var(--bright);
|
|
margin-right: 40px;
|
|
width: 75%;
|
|
}
|
|
|
|
/* Aside Content Section */
|
|
|
|
section#content div#aside {
|
|
width: 25%;
|
|
}
|
|
|
|
.set .set-title {
|
|
display: inline-block;
|
|
}
|
|
.set .set-empty {
|
|
font-size: small;
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.set .set-item-list {
|
|
padding: 0 25px 0 10px;
|
|
}
|
|
|
|
.set .set-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.set .set-item-image {
|
|
max-width: 90px;
|
|
height: 110px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.set .set-item-title, .set .set-item-title:visited {
|
|
width: 80%;
|
|
margin: auto;
|
|
line-height: 1.3em;
|
|
font-size: small;
|
|
display: block;
|
|
color: var(--secondary);
|
|
|
|
}
|
|
|
|
.set .set-item-title:hover, .set .set-item-title:visited:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.set .set-content {
|
|
font-size: small;
|
|
}
|
|
|
|
/* Info Card */
|
|
|
|
.aside-card {
|
|
background-color: var(--bright);
|
|
padding: 20px 24px 15px 24px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.aside-card .clearfix {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.aside-card .info-avatar {
|
|
width: 72px;
|
|
object-fit: contain;
|
|
float: left;
|
|
}
|
|
|
|
.aside-card .info-name {
|
|
margin: 0;
|
|
max-width: 120px;
|
|
margin-bottom: 12px;
|
|
padding-left: 8px;
|
|
float: left;
|
|
}
|
|
|
|
.aside-card .info-brief {
|
|
line-height: 2rem;
|
|
font-size: small;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.aside-card a.report {
|
|
color: var(--light);
|
|
font-size: small;
|
|
}
|
|
|
|
.aside-card a.follow {
|
|
font-size: small;
|
|
color: var(--secondary);
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.aside-card .button.add-button {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Relation Card */
|
|
|
|
.relation-card {
|
|
padding: 2px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.relation-card .relation-label {
|
|
margin: 0;
|
|
margin-bottom: 12px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.relation-card .relation-user .relation-avatar {
|
|
width: 50px;
|
|
}
|
|
|
|
.relation-card .relation-user .relation-name {
|
|
display: block;
|
|
font-size: small;
|
|
line-height: 1.8rem;
|
|
/* white-space: nowrap; */
|
|
text-overflow: ellipsis;
|
|
/* max-width: 100px; */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.relation-card .relation-user-list {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.relation-card .relation-user-list .relation-user {
|
|
list-style-type: none;
|
|
text-align: center;
|
|
margin-bottom: 0px !important;
|
|
justify-items: center;
|
|
padding: 0 3px !important;
|
|
}
|
|
|
|
/* Report Card */
|
|
|
|
.report-card {
|
|
padding: 2px;
|
|
font-size: small;
|
|
}
|
|
|
|
.report-card .report-label {
|
|
margin: 0;
|
|
}
|
|
|
|
.report-card .report-user-link {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.report-card .report-message {
|
|
list-style-type: none;
|
|
}
|
|
|
|
/* Search Result */
|
|
|
|
.result-item {
|
|
list-style: none;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
|
|
.result-item .result-info {
|
|
margin-left: 20px;
|
|
float: left;
|
|
}
|
|
|
|
.result-item img.result-book-cover {
|
|
float: left;
|
|
object-fit: contain;
|
|
height: 150px;
|
|
width: 100px;
|
|
}
|
|
|
|
.result-item .result-info .rating-empty {
|
|
font-size: small;
|
|
}
|
|
|
|
.result-item .result-info .rating-star{
|
|
cursor: unset;
|
|
display: inline;
|
|
position: relative;
|
|
top: 3px;
|
|
left: -3px;
|
|
}
|
|
|
|
/* overwrite rating-star plugin */
|
|
.result-item .result-info .rating-star .jq-star {
|
|
cursor: unset;
|
|
}
|
|
|
|
.result-item .result-info .result-book-info {
|
|
font-size: 80%;
|
|
overflow: hidden;
|
|
width: 420px;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: relative;
|
|
top: .55rem;
|
|
}
|
|
|
|
.result-item .result-info .rating-score {
|
|
font-size: 80%;
|
|
display: inline;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.result-item .result-info .result-book-title {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 500px;
|
|
display: block;
|
|
overflow: hidden
|
|
}
|
|
|
|
.result-item .result-info .result-book-brief {
|
|
margin-top: 10px;
|
|
margin-bottom: 0;
|
|
font-size: small;
|
|
width: 565px;
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
/* white-space: nowrap; */
|
|
height: 90px;
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination {
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pagination a {
|
|
display: inline-block;
|
|
}
|
|
|
|
.pagination .button {
|
|
padding: 0 5px;
|
|
height: 2rem;
|
|
}
|
|
|
|
.pagination .page-index {
|
|
font-size: small;
|
|
}
|
|
|
|
/* Display Page */
|
|
|
|
img.display-image {
|
|
height: 210px;
|
|
object-fit: contain;
|
|
float: left;
|
|
}
|
|
|
|
.display-info {
|
|
max-width: 530px;
|
|
float: left;
|
|
margin-left: 20px;
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.display-title {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1; /* number of lines to show */
|
|
-webkit-box-orient: vertical;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.display-info-detail {
|
|
font-size: small;
|
|
width: 250px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.display-info-detail .rating-star {
|
|
position: relative;
|
|
left: -5px;
|
|
}
|
|
|
|
.display-info-detail .rating-score {
|
|
position: relative;
|
|
top: -2.5px;
|
|
} |