DashboardFE/css/style.css

/* overall */
html {
	scroll-behavior: smooth;
}

* {
	font-family: arial, helvetica, sans-serif;
	font-size: 11pt;
}

a {
	text-decoration: none;
}

h1 { 
	font-size:30px;
}

p {
	margin-bottom: 1em !important;
}

body {
	margin: 0;
}

ul{
	padding:0px;
	margin:0px;
	list-style: none;
}

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

.cursor {
	cursor: pointer;
}

input[type="file"], .nloadmore {
	cursor:pointer;
}

textarea {
	resize: none;
}

/* omnipresent */

.mobile {
	display:none !important;
}

.link {
	text-decoration: none;
}

.external:after{
		font-family:fontello;
		font-weight:normal;
		content: ' ';
		}

/* basic structure */

.topbar {
	width: 100%;
	height: 45px;
	margin: 0;
	position: relative;
}

.topbar > div.topbar{
	position:fixed; top:0px; left:0px; 
}

.fw {
	float:right;
}

.wrapper {
	width: 100%;
	clear: both;
	display: inline-block;
	text-align: center;
}

.container {
	display: inline-block;
	text-align: center;
}

#posts {
	width: 800px;
	float: left;
}

aside {
	margin-top: 5px;
	width: 280px;
	float: left;
	display: inline-block;
}

.gotop {
	width: 30px;
	height: 30px;
	padding: 5px;
	position: fixed;
	display: table;
	text-align: center;
	right: 20px;
	bottom: 20px;
	border-radius: 10px;
}

.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;
	right: 10px;
	bottom: 115px;
	width: 350px;
	height: auto;
}

#videodock {
	background-color: rgba(255, 255, 255, 0);
	display:none;
	position: fixed;
	right: 40px;
	bottom: 115px;
	width: 350px;
	height: 240px;
}

/* topbar elements */

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

.ntbutton {
	position:relative;
}

.badge {
	text-decoration: none;
}

.alert {
	border-radius: 90px;
	width: 10px;
	height: 10px;
	position: absolute;
	right: 15px;
	top: 15px;
	display: none;
}

#notifications {
	position: absolute;
	right: -20px;
	top: 45px;
	width: 350px;
	max-height: 500px;
	display: none;
	line-height:12px;
	overflow-y:scroll;
	border-radius:3px;
}

.notif{
	width:330px;
	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 {
	border-radius: 3px;
	width: 92%;
	margin: 10px;
	display: inline-block;
	text-align: center;
}

.side_element li {
	font-family: fontello, sans-serif;
	height:30px;
	line-height:30px;
	text-align:left;
	padding-left:12px;
	list-style-type: none;
}

/* 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 rgba(0, 0, 0, 0.3);
	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;
	float:left;
}

.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: 800px;
	clear: both;
	display: inline-block;
	margin-top: 5px;
	margin-left:90px;
}

.profile,.loader {
	float:left; 
	border-radius:5px;
	width:650px;
}

.profileButton{
	padding: 5px;
	border-radius: 5px;
	font-family: fontello, sans-serif;
}

#usermenu .menu, 
#accountmenu .menu {
	display: none;
	width: 150px;
	position: absolute;
	top: 45px;
	left: -120px;
	transition: 0.4s;
}

#accountmenu:hover>.menu,
#accountmenu:active>.menu {
	display: block;
	transition: 0.4s;
}

.postMenu {
	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;
}

#accountmenu .menu li {
	text-align:left;
	line-height:25px;
	padding-left:5px;
}

.postMenu:hover > div{
	display:block !important;
}

.postMenu ul {
	margin:0px;
	width:100%;
	padding:0px;
}

.reply .postMenu {
	margin-right:15px !important;
}

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

.felem a {
	font-size:20px !important;
	position:relative;
}

.notif .felem a {
	font-size:13px !important;
}

.felem a > span {
	display:none;
}

.felem a:hover > span {
	display:block;
	position:absolute;
	width:30px;
	height:27px;
	top:-35px;
	left:-5px;
	text-align:center;
	padding-top:3px;
}

.contact{
	background-color:white;
	cursor: pointer;
	border-top:1px dotted #aaa;
}

.contact:hover{
	background-color:#0000a0;
	color:white;
}

.avatar {
	width: 80px;
	height: 80px;
	float: left;
	margin: 15px;
	border-radius: 10px;
	background-size: auto 80px;
	position:absolute;
	left:-110px;
}

.avatar_header {
	width: 80px;
	height: 80px;
	float: left;
	margin: 15px;
	border-radius: 10px;
	background-size: auto 80px;
}

.post,
.rb,
.textonly,
.loadmore {
	width: 650px;
	float: left;
	text-align: center;
	position: relative;
	border-radius: 5px;
}

#searchmobile{
	display:none;
}

.postform {
	width:650px;
	float: left;
	text-align: center;
	position: relative;
	border-radius: 3px;
	display:block !important;
}

.postHeader {
	width: 100%;
	display: inline-block;
	height: 40px;
	text-align: left;
	position:relative;
}

.previewpost {
	display: none;
	position: absolute;
	margin-top: -100px;
	width: 400px;
	border-radius:3px;
}

.user {
	position:relative;
}

.userinfo {
	display: none;
	position: absolute;
	left:0px;
	top:15px;
	width: 300px;
	height: auto;
	border-radius:3px;
	line-height:initial;
	z-index:99;
}

.userinfo_upper{
	top:-100px;
}

.userinfo_co {
	width: 280px;
	margin: 10px;
	text-align: center; 
	position:relative;
}

.userinfo_he {
	width: 300px;
	height: 150px;
}

.media {
	width: 100%;
	display: inline-block;
}

.img {
	width: 600px;
	text-align: center;
}

.blur {
	-webkit-filter: blur(25px) brightness(70%) grayscale(80%);
	/* Safari 6.0 - 9.0 */
	filter: blur(25px) brightness(70%) grayscale(80%);
	opacity: 0.5;
	transition: 0.4s;
}

.toggleblur {
	display:none;
	cursor: pointer;
	font-family: sans, fontello;
}

.small {
	width: 321px;
	height: 321px;
	line-height: 321px;
	/* background-color: black; */
	float:left;
	margin:2px !important;
}

.smaller {
	width: 212px;
	height: 212px;
	line-height: 212px;
	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;
}

.content {
	width: 600px;
	display: inline-block;
	margin:0px !important;
	text-align: left;
	word-break: break-all;
}

.flex {
	margin-top: 5px;
	max-height:100px;
	overflow:hidden;
}

.flex_host{
	font-weight:lighter;
	font-style:italic;
	display:block;
	margin-bottom:5px;
	font-size:12px;
	opacity:0.5;
}

.flex > div{
	text-overflow: ellipsis;
}

.post_footer {
	width: 630px;
	display: table-cell;
	clear: both;
	padding: 10px;
	height: 20px;
	text-align: left;
	border-radius: 3px;
}

.postAge,.public:after,.unlisted:after,.private:after,.direct:after {
	font-size:12px;
}

.reply:hover .post_buttons,.reply:hover .postMenu {
	display:block !important;
}

.replyflex {
	flex:9;
}	

.post_buttons {
	font-family: fontello, sans-serif;
	float: right;
	display: inline-block;
	text-align: right;
	font-size: 15pt;
}

.post_buttons a,
.post_buttons span {
	font-family: fontello, sans-serif;
	text-decoration: none;
	color: inherit;
	font-size: inherit;
}

.reply {
	width: 100%;
	clear: both;
	text-align: left;
	display: block;
	border-bottom:1px dotted #aaa;
}

.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;
	min-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,.setting input[type="checkbox"]: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;
	}
}

.no-scroll {
	overflow: hidden;
}

/* </lightbox> */

.fontello {
	font-family: fontello;
}

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

.hidden {
	display:none;
}