670 lines
8.8 KiB
CSS
670 lines
8.8 KiB
CSS
/* overall */
|
|
|
|
* {
|
|
font-family: arial, helvetica, sans-serif;
|
|
font-size: 12pt;
|
|
}
|
|
|
|
a {
|
|
text-decoration:none;
|
|
}
|
|
|
|
h1 {
|
|
font-size:20px;
|
|
}
|
|
|
|
p {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
ul{
|
|
padding:0px;
|
|
margin:0px;
|
|
}
|
|
|
|
select{
|
|
padding:5px;
|
|
margin-top:5px;
|
|
border:0px;
|
|
font-weight:bold;
|
|
font-family:fontello, sans-serif;
|
|
}
|
|
|
|
option{
|
|
font-family:fontello, sans-serif;
|
|
}
|
|
|
|
label {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="file"], .nloadmore {
|
|
cursor:pointer;
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
}
|
|
|
|
/* omnipresent */
|
|
|
|
.desktop{
|
|
display:none !important;
|
|
}
|
|
|
|
.link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.external:after{
|
|
font-family:fontello;
|
|
font-weight:normal;
|
|
content: ' ';
|
|
}
|
|
|
|
/* basic structure */
|
|
|
|
.topbar {
|
|
width: 100vw;
|
|
height: 45px;
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.wrapper {
|
|
width: 100vw;
|
|
clear: both;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.container {
|
|
width: 100% !important;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
#posts {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
display: inline-block;
|
|
margin:0px !important;
|
|
text-align: left;
|
|
word-break: break-all;
|
|
}
|
|
|
|
aside {
|
|
display:none !important;
|
|
}
|
|
|
|
.gotop {
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 5px;
|
|
position: fixed;
|
|
display: table;
|
|
text-align: center;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
border-radius: 10px;
|
|
z-index:50;
|
|
}
|
|
|
|
.gotop a {
|
|
text-align: center;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
opacity: 0.7;
|
|
font-size: 20px;
|
|
}
|
|
|
|
#hiddenside {
|
|
background-color: rgba(255, 255, 255, 0);
|
|
position: fixed;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
width: 100vw;
|
|
height: auto;
|
|
z-index: 99;
|
|
}
|
|
|
|
/* topbar elements */
|
|
|
|
.mid {
|
|
display:none;
|
|
}
|
|
|
|
.topbutton {
|
|
vertical-align: middle;
|
|
display: table-cell;
|
|
line-height: 45px;
|
|
height: 100%;
|
|
width: 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.topicon {
|
|
text-decoration: none;
|
|
display: inline;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.badge {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.alert {
|
|
border-radius: 90px;
|
|
width: 10px;
|
|
height: 10px;
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 15px;
|
|
display: none;
|
|
}
|
|
|
|
#notifications {
|
|
position: fixed;
|
|
left: 0px;
|
|
top: 45px;
|
|
width: 100vw;
|
|
max-height: 400px;
|
|
display: none;
|
|
line-height:12px;
|
|
overflow-y:scroll;
|
|
border-radius:3px;
|
|
}
|
|
|
|
.notif{
|
|
width:100%;
|
|
height:80px;
|
|
display:inline-block;
|
|
text-align:left;
|
|
position:relative;
|
|
}
|
|
|
|
#quicksend {
|
|
border-radius: 3px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.notifContents{
|
|
margin:10px;
|
|
display:flex;
|
|
height:60px;
|
|
max-width:325px;
|
|
}
|
|
|
|
.nloadmore {
|
|
display:inline-block;
|
|
height:20px;
|
|
padding-top:10px;
|
|
}
|
|
|
|
/* sidebar */
|
|
|
|
.side_element {
|
|
display:none;
|
|
width: 92%;
|
|
margin: 10px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
color: lightgray;
|
|
}
|
|
|
|
.side_element a {
|
|
color: lightgray;
|
|
}
|
|
|
|
/* posts area elements */
|
|
|
|
.uploadedImage {
|
|
width: 60px;
|
|
margin: 10px 0px 10px 10px;
|
|
height: 60px;
|
|
border: 1px solid #ccc;
|
|
display: inline-block;
|
|
box-shadow: 3px 3px 3px grey;
|
|
float: left;
|
|
background-size: cover;
|
|
}
|
|
|
|
.uploadBox {
|
|
width: 100%;
|
|
display: inline-block;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.delpic {
|
|
border-radius:90px;
|
|
display:inline-block;
|
|
cursor:pointer;
|
|
}
|
|
|
|
#send {
|
|
padding:5px;
|
|
border-radius:3px;
|
|
font-weight:bold;
|
|
margin-top:5px;
|
|
}
|
|
|
|
.formbtn {
|
|
background-color:transparent;
|
|
border: 0px;
|
|
margin-top:11px;
|
|
margin-left:15px;
|
|
float:left;
|
|
width:20px;
|
|
height:20px;
|
|
line-height:20px;
|
|
text-align:center;
|
|
overflow:hidden;
|
|
font-size:20px;
|
|
}
|
|
|
|
.formbtn label{
|
|
margin:-5px;
|
|
font-size:20px;
|
|
}
|
|
|
|
.element {
|
|
width: 90% !important;
|
|
clear: both;
|
|
display: inline-block;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.element {
|
|
width: 800px;
|
|
clear: both;
|
|
display: inline-block;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.element_pad {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.profile {
|
|
float:left;
|
|
background-color:white;
|
|
border-radius:5px;
|
|
//width:650px;
|
|
width:100%;
|
|
}
|
|
|
|
.profileButton{
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
font-family: fontello, sans-serif;
|
|
}
|
|
|
|
#usermenu .menu {
|
|
display: none;
|
|
width: 150px;
|
|
height: 100px;
|
|
position: absolute;
|
|
top: 45px;
|
|
left: -80px;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
#usermenu:hover>.menu,
|
|
#usermenu:active>.menu {
|
|
display: block;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.postMenu,.listmenu {
|
|
cursor: pointer;
|
|
position:relative;
|
|
}
|
|
|
|
.postMenu div{
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.postMenu li {
|
|
margin:0px;
|
|
width:100%;
|
|
height:35px;
|
|
display:block;
|
|
text-align:center;
|
|
line-height:35px;
|
|
}
|
|
|
|
.postMenu:hover > div{
|
|
display:block !important;
|
|
}
|
|
|
|
.postMenu ul {
|
|
margin:0px;
|
|
width:100%;
|
|
padding:0px;
|
|
}
|
|
|
|
.profileMenu:hover > div, .listmenu:hover > div{
|
|
display:block !important;
|
|
}
|
|
|
|
.listmenu li {
|
|
font-family: fontello, sans-serif;
|
|
height:30px;
|
|
line-height:30px;
|
|
text-align:left;
|
|
padding-left:12px;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.felem {
|
|
margin-left: 10px;
|
|
float: left;
|
|
}
|
|
|
|
.avatar {
|
|
display:none;
|
|
width: 50px;
|
|
background-size: cover;
|
|
height: 50px;
|
|
float: left;
|
|
margin: 15px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.post,
|
|
.loader,
|
|
.loadmore,
|
|
.rb,
|
|
.textonly,
|
|
.profile {
|
|
width: 100% !important;
|
|
float: left;
|
|
text-align: center;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.postform {
|
|
display:none;
|
|
position:fixed;
|
|
width: 100vw !important;
|
|
left:0px;
|
|
top:45px;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
z-index: 99;
|
|
}
|
|
|
|
#postform {
|
|
display:none;
|
|
}
|
|
|
|
.postHeader {
|
|
width: 100%;
|
|
display: inline-block;
|
|
height: 40px;
|
|
text-align: left;
|
|
}
|
|
|
|
.postHeader *,.post_footer *{
|
|
font-size:small;
|
|
}
|
|
|
|
.previewpost {
|
|
display: none;
|
|
position: absolute;
|
|
margin-top: -100px;
|
|
width: 400px;
|
|
border-radius:3px;
|
|
}
|
|
|
|
.user {
|
|
position:relative;
|
|
}
|
|
|
|
.userinfo {
|
|
display: none;
|
|
position: absolute;
|
|
left:0px;
|
|
top:-198px;
|
|
width: 300px;
|
|
height: 200px;
|
|
border-radius:3px;
|
|
}
|
|
|
|
.userinfo_co {
|
|
width: 280px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.userinfo_he {
|
|
width: 300px;
|
|
height: 100px;
|
|
}
|
|
|
|
.media {
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.img {
|
|
width: 600px;
|
|
text-align: center;
|
|
}
|
|
|
|
.blur {
|
|
-webkit-filter: blur(25px) brightness(70%) grayscale(100%);
|
|
/* Safari 6.0 - 9.0 */
|
|
filter: blur(25px) brightness(70%) grayscale(100%);
|
|
opacity: 0.5;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.toggleblur {
|
|
display:none;
|
|
cursor: pointer;
|
|
font-family: sans, fontello;
|
|
}
|
|
|
|
.small {
|
|
width: 48% !important;
|
|
height: 321px;
|
|
line-height: 321px;
|
|
background-color: black;
|
|
float:left;
|
|
margin:2px !important;
|
|
}
|
|
|
|
.smaller {
|
|
width: 31% !important;
|
|
height: 212px;
|
|
line-height: 212px;
|
|
background-color: black;
|
|
float:left;
|
|
margin:2px !important;
|
|
}
|
|
|
|
.icon {
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
line-height: 80px;
|
|
float:left;
|
|
text-align:center;
|
|
margin:2px !important;
|
|
}
|
|
|
|
.postbody {
|
|
margin: 15px;
|
|
}
|
|
|
|
.post_footer {
|
|
width: 630px;
|
|
display: table-cell;
|
|
clear: both;
|
|
padding: 10px;
|
|
height: 20px;
|
|
text-align: left;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.post_buttons {
|
|
font-family: fontello;
|
|
float: right;
|
|
display: inline-block;
|
|
text-align: right;
|
|
font-size: 15pt;
|
|
}
|
|
|
|
.post_buttons a,
|
|
.post_buttons span {
|
|
font-family: inherit;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.reply {
|
|
width: 100%;
|
|
clear: both;
|
|
text-align: left;
|
|
display: block;
|
|
}
|
|
|
|
.note {
|
|
width: 640px;
|
|
float: left;
|
|
text-align: left;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.button {
|
|
padding: 15px;
|
|
float: left;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
font-size: 20pt;
|
|
}
|
|
|
|
/* pages */
|
|
|
|
.setting label {
|
|
display: block;
|
|
width: 40px;
|
|
height: 20px;
|
|
padding: 5px;
|
|
float: left;
|
|
margin: 0px;
|
|
text-align: center;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.setting input[type="radio"]:checked+label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/* other stuff */
|
|
|
|
/* <lightbox> */
|
|
.lightbox-opened {
|
|
/* background-color: #333; */
|
|
background-color: rgba(50, 50, 50, 0.85);
|
|
cursor: pointer;
|
|
height: 100%;
|
|
/* left: 0; */
|
|
overflow-y: scroll;
|
|
position: fixed;
|
|
text-align: center;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index:105;
|
|
&:before {
|
|
background-color: #333;
|
|
background-color: rgba(#333, 0.9);
|
|
color: #eee;
|
|
content: "x";
|
|
font-family: sans-serif;
|
|
padding: 6px 12px;
|
|
position: fixed;
|
|
text-transform: uppercase;
|
|
}
|
|
img {
|
|
box-shadow: 0 0 6px 3px #333;
|
|
}
|
|
}
|
|
/*
|
|
.lightbox-opened {
|
|
//background-color: #333;
|
|
background-color: rgba(50, 50, 50, 0.85);
|
|
cursor: pointer;
|
|
height: 100%;
|
|
left: 0;
|
|
overflow-y: scroll;
|
|
padding: 24px;
|
|
position: fixed;
|
|
text-align: center;
|
|
top: 0;
|
|
width: 100%;
|
|
&:before {
|
|
background-color: #333;
|
|
background-color: rgba(#333, 0.9);
|
|
color: #eee;
|
|
content: "x";
|
|
font-family: sans-serif;
|
|
padding: 6px 12px;
|
|
position: fixed;
|
|
text-transform: uppercase;
|
|
}
|
|
img {
|
|
box-shadow: 0 0 6px 3px #333;
|
|
}
|
|
}
|
|
*/
|
|
.no-scroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* </lightbox> */
|
|
|
|
.fontello {
|
|
font-family: fontello, sans-serif;
|
|
}
|
|
|
|
.loading {
|
|
font-family: fontello;
|
|
color: black;
|
|
content: "\E822";
|
|
animation-name: spin;
|
|
animation-duration: 5000ms;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
/* transform: rotate(3deg); */
|
|
/* transform: rotate(0.3rad);/ */
|
|
/* transform: rotate(3grad); */
|
|
/* transform: rotate(.03turn); */
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.disabled {
|
|
background-color: black;
|
|
}
|