loading {
position: relative;
width: 100px;
height: 100px;
margin: 100px auto;
}
loading:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 150%;
height: 150%;
background-color: #333;
border-radius: 50%;
animation: scale-up 1s infinite ease-in-out;
}
@keyframes scale-up {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
@keyframes blink {
0% {
background-color: #f0faff;
}
100% {
background-color: #d6f1ff;
}
}
.blinking {
animation: blink .5s 2;
}
.swforumBtn {
position: fixed;
right: 10px;
bottom: 15px;
width: 55px;
height: 55px;
line-height: 55px;
text-align: center;
background-color: #2182df;
display: none;
border-radius: 50%;
transition: display 1.5s ease-out;
z-index: 100000;
}
.swforumBtn img {
width: 35px;
height: 35px;
vertical-align: middle;
}
.swforumBtn:hover {
background-color: #06c;
}
.swforumBtn.actived {
display: block;
}
.swforum {
position: fixed;
bottom: 10px;
z-index: 10000;
transition: top 2s ease-out;
}
.swforum.pc {
top: 100px;
right: 20px;
width: calc(100% - 30px);
max-width: 500px;
}
.swforum.mb {
top: 80px;
right: 5px;
width: calc(100% - 30px);
}
.swforum.forumhide,
.swforum.forumhide {
top: 200%;
}
.swforum .swfcollapse {
position: absolute;
top: 0;
right: 15px;
padding-top: 5px;
padding-bottom: 5px;
text-align: right;
}
.swforum .swfcollapse>div {
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
color: #2182df;
font-weight: bolder;
text-align: center;
border-radius: 50%;
background-color: #fff;
transform: rotate(-90deg);
font-family: none;
}
.swforum .swfcollapse>div:hover {
cursor: pointer;
background-color: #ddd;
}
.swforum>.forumdiv {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
border: 1px solid #aaa;
box-shadow: 0px 2px 5px 3px #ccc;
border-radius: 15px;
background-color: white
}
.swforum .historydiv {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 120px;
transition: bottom .5s ease-out;
}
.swforum .Additional>.historydiv {
bottom: 155px;
}
.swforum.pc .historydiv.small {
bottom: 65%;
}
.swforum.mb .historydiv.small {
bottom: 65%;
}
.swforum .historydiv>.title {
position: absolute;
top: 0;
width: 100%;
height: 40px;
line-height: 40px;
color: white;
font-size: 20px;
background-color: #2182df;
border-radius: 15px 15px 0px 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.swforum .historydiv > .title > span {
padding-left:20px;
}
.swforum .historydiv > .title > span > span {
max-width: calc(100% - 250px);
font-size: 12px;
vertical-align: middle;
margin-left: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.swforum .fhdata {
position: absolute;
top: 45px;
left: 0px;
right: 0px;
bottom: 0;
overflow: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.swforum swfItem {
position: relative;
color: #222;
font-size: 13px;
padding: 5px 10px;
display: block;
}
.swforum swfItem.highlight {
background-color: #bad6ec;
}
.swforum swfItem.right {
text-align: right;
}
.swforum swfItem userImg {
width: 38px;
height: 38px;
display: inline-block;
}
.swforum swfItem userImg>img {
position: absolute;
top: 3px;
width: 32px;
height: 32px;
border-radius: 50%;
}
.swforum swfItem.right>userImg {
position: absolute;
top: 3px;
right: 10px;
border-radius: 50%;
}
.swforum swfItem.right>userImg>img {
position: absolute;
left: 0;
}
.swforum swfItem userComment {
max-width: calc(100% - 70px);
display: inline-block;
}
.swforum swfItem.right>userComment {
max-width: calc(100% - 78px);
margin-right: 42px;
}
.swforum swfItem user mark {
font-size: 12px;
padding: 1px 4px;
margin-right: 5px;
border-radius: 3px;
}
.swforum swfItem user mark.vip {
color: white;
background-color: #0099ff;
}
.swforum swfItem user mark.offical {
color: white;
background-color: #ff8d40;
}
.swforum swfItem.right content {
text-align: left;
}
.swforum swfItem content {
position: relative;
display: block;
margin: 5px 0px;
padding: 8px 12px 8px 12px;
background-color: #f8f8f8;
border-radius: 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.swforum swfItem content:hover {
background-color: #eee;
}
.swforum swfItem content text {
display: block;
}
.swforum swfItem content text > a {
min-width: 45px;
max-width: 100%;
white-space:normal;
word-wrap:break-word;
display:inline-block;
}
.swforum swfItem content reply {
max-width: 100%;
color: #666;
font-size: 13px;
background-color: #ecf6ff;
border: 1px solid #1890ff;
border-radius: 5px;
padding: 5px 20px 5px 5px;
margin-bottom: 5px;
display: block;
}
.swforum swfItem content reply::after {
position: absolute;
top: 10px;
right: 25px;
content: "\25B2";
display: block;
}
.swforum swfItem content reply:hover {
color: #333;
cursor: pointer;
}
.swforum swfItem property {
color: #888;
font-size: 11px;
font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", "Helvetica", "Segoe UI", "Tahoma", "Geneva", "Arial", sans-serif;
margin-top: 10px;
display: inline-block;
}
.swforum swfItem control {
font-size: 11px;
padding-bottom: 15px;
display: block;
}
.swforum swfItem control cItem {
margin-left: 10px;
color: #4d7891;
display: inline-block;
}
.swforum swfItem control cItem:hover {
cursor: pointer;
color: #2182df;
}
.swforum swfItem control>cItem[data-liked='true'] {
color: #2182df;
}
.swforum swfItem control>cItem img {
width: 16px;
height: 16px;
vertical-align: middle;
filter: grayscale(.8);
}
.swforum swfItem control admin {
color: #ff8d40;
margin-top: 15px;
display: block;
}
.swforum swfItem control admin>div {
border-top: 1px solid #ffcead;
display: block;
}
.swforum swfItem control admin>cItem {
color: #ff8d40;
}
.swforum swfItem control admin>cItem:hover {
color: #944b1b;
}
.swforum swfItemEnd {
height: 100px;
line-height: 60px;
color: #666;
font-size: 12px;
text-align: center;
display: block;
border-top: 1px solid #ddd;
}
.swforum .submitdiv {
position: absolute;
left: 0;
right: 0;
height: 90px;
bottom: 0;
border-top: 1px solid #aaa;
background-color: #eee;
transition: height .5s ease-out;
}
.swforum .submitdiv .submitlogin {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background-color: rgba(255,255,255, 0.8);
}
.swforum .submitdiv .submitlogin:hover {
background-color: rgba(245,245,245, 0.8);
cursor: pointer;
}
.submitlogin > span {
position: relative;
top: 3px;
color: #aaa;
font-size: 18px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}
.submitlogin > span > a {
color: #333;
font-size: 13px;
text-shadow: none;
margin-top: 3px;
display:block;
}
.submitlogin > span > a:hover {
text-decoration: underline;
}
.swforum .Additional > .submitdiv {
height: 155px;
}
.swforum.pc .submitdiv.large {
height: 65%;
}
.swforum.mb .submitdiv.large {
height: 65%;
}
.swforum .submitdiv>.resize {
float: right;
margin-top: -35px;
margin-right: 10px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
background-color: #666;
border-radius: 50%;
font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana;
}
.swforum .submitdiv>.resize:hover {
cursor: pointer;
background-color: #333;
}
.swforum .submitdiv>.resize>div {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
font-family:none;
transform: rotate(90deg);
transition: transform 0.5s ease-out;
}
.swforum .submitdiv>.resize.down>div {
transform: rotate(-90deg);
}
.swforum .submitdiv>textarea {
position: absolute;
top: 3px;
left: 2px;
right: 2px;
width: calc(100% - 12px);
height: calc(100% - 55px);
resize: none;
border: 1px solid #aaa;
border-radius: 3px;
}
.swforum .Additional>.submitdiv>textarea {
top: 30px;
height: calc(100% - 80px);
}
.swforum .submitdiv>additionalinfo {
width: calc(100% - 45px);
height: 20px;
font-size: 13px;
background-color: #ecf6ff;
border: 1px solid #1890ff;
border-radius: 5px;
margin: 3px 0 0 5px;
padding: 1px 5px;
display: block;
}
.swforum .submitdiv>additionalinfo.hide {
display: none;
}
.swforum .submitdiv>additionalinfo info {
width: calc(100% - 25px);
color: #666;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
.swforum .submitdiv > additionalinfo info:hover {
cursor:pointer;
}
.swforum .submitdiv > additionalinfo close {
width: 13px;
height: 13px;
color: white;
font-size: 10px;
background-color: #999;
border-radius: 50%;
text-align: center;
margin-top: 3px;
margin-right: 5px;
vertical-align: middle;
float: left;
}
.swforum .submitdiv>additionalinfo close:hover {
background-color: #666;
cursor: pointer;
}
.swforum .swformsubmit {
position: absolute;
right: 10px;
bottom: 8px;
color: white;
background-color: #2182df;
border-radius: 5px;
padding: 5px 10px;
}
.swforum .swformsubmit:hover {
color: #06c;
}
.swforum .swformsubmit:hover {
cursor: pointer;
background-color: #61acf3;
}