173 lines
4.3 KiB
CSS
173 lines
4.3 KiB
CSS
@keyframes flashBk {
|
|
0% {background-color: rgba(153, 153, 255, 0.5); }
|
|
16.667% {background-color: rgba(153, 255, 255, 0.5); }
|
|
33.333% {background-color: rgba(153, 255, 153, 0.5); }
|
|
50% {background-color: rgba(255, 255, 153, 0.5); }
|
|
66.667% {background-color: rgba(255, 153, 153, 0.5); }
|
|
83.333% {background-color: rgba(255, 153, 255, 0.5); }
|
|
100% {background-color: rgba(153, 153, 255, 0.5); }
|
|
}
|
|
|
|
@keyframes artistName {
|
|
0% {color: rgb(255, 255, 255); }
|
|
50% {color: rgb(145, 230, 255); }
|
|
100% {color: rgb(255, 255, 255); }
|
|
}
|
|
|
|
hr { margin: 20px; }
|
|
|
|
body {
|
|
background: url("../images/Abstract_11.jpg") no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
/* 主題的標題樣式 */
|
|
div.titleBackground {
|
|
margin-bottom: 20px;
|
|
padding: 10px 0;
|
|
background-color: rgba(153, 153, 255, 0.5);;
|
|
|
|
animation-name: flashBk;
|
|
animation-duration: 60s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
h1.themeTitle {
|
|
margin: 10px 0 0 0;
|
|
text-align: center;
|
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
}
|
|
h4.originator {
|
|
margin: 15px 0 10px 0;
|
|
text-align: center;
|
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
}
|
|
|
|
/* 畫作展示台 */
|
|
div.displayStand {
|
|
padding: 20px 0;
|
|
background-color: rgba(64, 64, 64, 0.5);
|
|
}
|
|
ol.disableIndicators > li {
|
|
display: none;
|
|
border: none;
|
|
}
|
|
ol.disableIndicators > li.active {
|
|
display: none;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
}
|
|
div.carousel > button {
|
|
position: absolute;
|
|
width: 5%;
|
|
font-size: 1em;
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
|
|
opacity: .5;
|
|
|
|
transition-duration: 0.3s;
|
|
}
|
|
div.carousel > button:hover,
|
|
div.carousel > button:focus {
|
|
color: #fff;
|
|
opacity: 1;
|
|
}
|
|
div.carousel > button.left , div.carousel > button.right,
|
|
div.carousel > button.left:hover , div.carousel > button.right:hover,
|
|
div.carousel > button.left:active , div.carousel > button.right:active { outline: none; }
|
|
div.carousel > button.left {
|
|
top: 30%; bottom: 30%; left: -6%;
|
|
outline: none;
|
|
}
|
|
div.carousel > button.right {
|
|
top: 30%; bottom: 30%; left: auto; right: -6%;
|
|
outline: none;
|
|
}
|
|
div.pagerWall {
|
|
margin-top: 20px;
|
|
margin-bottom: 5px;;
|
|
text-align: center;
|
|
background-image: none;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
ul.pager-ul {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 作品資訊 */
|
|
div.informationSection {
|
|
background-color: rgba(178, 195, 216, 0.5);
|
|
padding-top: 20px;
|
|
}
|
|
div.thumbnail > a {
|
|
cursor: pointer;
|
|
}
|
|
div.caption > h4 {
|
|
margin: 0;
|
|
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5), 0px 0px 16px rgba(0, 0, 0, 0.5), 0px 0px 16px rgba(0, 0, 0, 0.5);
|
|
animation: artistName 4s infinite;
|
|
}
|
|
|
|
div[data-artist-thumbnail] { display: none; }
|
|
div[data-artist-thumbnail="0"] { display: block; }
|
|
|
|
div[data-works-info] { display: none; }
|
|
div[data-works-info="0"] { display: block; }
|
|
|
|
/* 評論區 */
|
|
div.media {
|
|
position: relative;
|
|
}
|
|
div.media-left { position: relative; width: 140px; overflow: auto; }
|
|
div.media-body { position: relative; width: 80%;}
|
|
div.media-right { position: absolute; left: auto; right: 20px; bottom: 0px; font-style: italic; }
|
|
div.media-button { display: table-cell; position: relative; width: 10%;}
|
|
div.media-left img.media-object {
|
|
max-width: 120px;
|
|
max-height: 120px;
|
|
}
|
|
textarea#txtaComment {
|
|
resize: none;
|
|
}
|
|
button#btnSendComment {
|
|
display: block;
|
|
position: absolute;
|
|
top: 25px; bottom: 5px; right: 0;
|
|
}
|
|
|
|
h3.comment-group-title {
|
|
margin: 0 0 20px 0;
|
|
padding: 5px 0;
|
|
text-align: center;
|
|
background-color: rgba(160, 160, 160, 0.3);
|
|
}
|
|
div.comment-item {
|
|
position: relative;
|
|
min-height: 130px;
|
|
padding-bottom: 16px;
|
|
}
|
|
img.userImage {
|
|
position: absolute;
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
div.userComment {
|
|
margin-left: 130px;
|
|
}
|
|
label.commentTime {
|
|
position: absolute;
|
|
margin-bottom: 0;
|
|
left: auto; right: 10px; bottom: 0;
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
}
|
|
label.commentTime > a.report {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
div[data-comment-group-index] { display: none; }
|
|
div[data-comment-group-index="0"] { display: block; } |