Upload All
This commit is contained in:
Alan
173
public/css/showcase_extended.css
Normal file
173
public/css/showcase_extended.css
Normal file
@ -0,0 +1,173 @@
|
||||
@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; }
|
||||
Reference in New Issue
Block a user