@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; }