734 lines
No EOL
12 KiB
CSS
734 lines
No EOL
12 KiB
CSS
/* Global */
|
|
|
|
:root {
|
|
--primary: #00a1cc;
|
|
--secondary: #606c76;
|
|
--light: #ccc;
|
|
--bright: rgb(247, 247, 247);
|
|
}
|
|
|
|
html {
|
|
/* background-color: #eee; */
|
|
font-size: 55%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.errorlist {
|
|
color: var(--primary);
|
|
font-size: small;
|
|
font-weight: bold;
|
|
list-style-type: square;
|
|
}
|
|
|
|
#page-wrapper {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
z-index: 0;
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
.icon-lock svg{
|
|
fill: var(--light);
|
|
height: 12px;
|
|
position: relative;
|
|
top: 1px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
textarea::placeholder {
|
|
color: var(--light);
|
|
}
|
|
|
|
input::placeholder {
|
|
color: var(--light);
|
|
}
|
|
|
|
.spinner {
|
|
transform: scale(0.4);
|
|
margin: auto;
|
|
}
|
|
|
|
.lds-spinner {
|
|
color: official;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.lds-spinner div {
|
|
transform-origin: 40px 40px;
|
|
animation: lds-spinner 1.2s linear infinite;
|
|
}
|
|
|
|
.lds-spinner div:after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 37px;
|
|
width: 6px;
|
|
height: 18px;
|
|
border-radius: 20%;
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.lds-spinner div:nth-child(1) {
|
|
transform: rotate(0deg);
|
|
animation-delay: -1.1s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(2) {
|
|
transform: rotate(30deg);
|
|
animation-delay: -1s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(3) {
|
|
transform: rotate(60deg);
|
|
animation-delay: -0.9s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(4) {
|
|
transform: rotate(90deg);
|
|
animation-delay: -0.8s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(5) {
|
|
transform: rotate(120deg);
|
|
animation-delay: -0.7s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(6) {
|
|
transform: rotate(150deg);
|
|
animation-delay: -0.6s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(7) {
|
|
transform: rotate(180deg);
|
|
animation-delay: -0.5s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(8) {
|
|
transform: rotate(210deg);
|
|
animation-delay: -0.4s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(9) {
|
|
transform: rotate(240deg);
|
|
animation-delay: -0.3s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(10) {
|
|
transform: rotate(270deg);
|
|
animation-delay: -0.2s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(11) {
|
|
transform: rotate(300deg);
|
|
animation-delay: -0.1s;
|
|
}
|
|
|
|
.lds-spinner div:nth-child(12) {
|
|
transform: rotate(330deg);
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
@keyframes lds-spinner {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* overwrite rating-star plugin makes it readonly */
|
|
.rating-star .jq-star {
|
|
cursor: unset;
|
|
}
|
|
|
|
/* 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%;
|
|
position: relative;
|
|
}
|
|
|
|
/* Aside Content Section */
|
|
|
|
section#content div#aside {
|
|
width: 25%;
|
|
}
|
|
|
|
.set {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.set .set-title {
|
|
display: inline-block;
|
|
margin-bottom: 7px;
|
|
}
|
|
.set .set-empty {
|
|
font-size: small;
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.set .set-item-list {
|
|
padding: 8px 25px 0 10px;
|
|
}
|
|
|
|
.set .set-item {
|
|
text-align: center;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.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-user .relation-name .emoji {
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.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-items .result-item:last-of-type {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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-item-title {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 500px;
|
|
display: block;
|
|
overflow: hidden
|
|
}
|
|
|
|
.result-item .result-info .result-item-brief {
|
|
margin-top: 10px;
|
|
margin-bottom: 0;
|
|
font-size: small;
|
|
width: 565px;
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
/* white-space: nowrap; */
|
|
height: 90px;
|
|
}
|
|
|
|
.aside-card .add-nav .clearfix {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
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;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.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;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.display-info-detail form, .display-info-detail input[type='submit'] {
|
|
display: inline;
|
|
}
|
|
|
|
.mark {
|
|
font-size: small;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.mark form {
|
|
display: inline;
|
|
/* margin: 0; */
|
|
}
|
|
|
|
.mark .mark-status-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mark .rating-star {
|
|
position: relative;
|
|
top: 1.5px;
|
|
}
|
|
|
|
.mark .icon-lock {
|
|
position: relative;
|
|
top: -0.5px;
|
|
}
|
|
|
|
.mark .clearfix {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.list-item .item-time {
|
|
color: var(--light);
|
|
margin-left: 5px;
|
|
font-size: small;
|
|
}
|
|
|
|
.list-item .mark-text {
|
|
margin: 20px 0 15px 0;
|
|
}
|
|
|
|
|
|
.mark .button-group a.button{
|
|
width: 33%;
|
|
box-sizing: border-box;
|
|
display: initial;
|
|
padding: 7px 8%;
|
|
margin: 0 4px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.review {
|
|
font-size: small;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.review .clearfix {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.review .review-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.review .review-time {
|
|
color: var(--light);
|
|
}
|
|
|
|
.review .review-title {
|
|
font-size: small;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-top: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.review .review-head .edit {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.set .mark {
|
|
font-size: small;
|
|
/* margin-bottom: 3px; */
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.list-label .rating-star {
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
|
|
.list-label .list-owner-name {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.list-label {
|
|
font-size: small;
|
|
}
|
|
|
|
.set .mark-text {
|
|
margin: 0;
|
|
}
|
|
|
|
.set .review-title {
|
|
font-weight: bold;
|
|
font-size: small;
|
|
}
|
|
|
|
.set.result-items .list-item {
|
|
margin-bottom: 10px;
|
|
}s
|
|
|
|
.aside-card .aside-item {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.aside-item .item-image {
|
|
height: 150px;
|
|
}
|
|
|
|
.aside-item div {
|
|
font-size: small;
|
|
}
|
|
|
|
.aside-item .item-title {
|
|
font-weight: bold;
|
|
font-size: small;
|
|
margin-bottom: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.aside-item .rating-star {
|
|
position: relative;
|
|
top: 4px;
|
|
}
|
|
|
|
.list-head {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.user {
|
|
font-size: small;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.user .user-info {
|
|
margin-left: 15px;
|
|
max-width: 88%;
|
|
}
|
|
|
|
.user .user-name {
|
|
font-size: small;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.user .user-brief {
|
|
margin: 0;
|
|
}
|
|
|
|
.user .avatar {
|
|
height: 70px;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 500px;
|
|
} |