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: 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 */

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

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

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

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

.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 {
	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 {
	width: 80px;
	background-size: 80px;
	height: 80px;
	float: left;
	margin: 15px;
	border-radius: 10px;
}

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

.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(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: 321px !important;
	height: 321px;
	line-height: 321px;
	/* background-color: black; */
	float:left;
	margin:2px !important;
}

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

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

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

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