gosora/themes/shadow/public/main.css

/* Patch for Edge, until they fix emojis in arial x.x */
@supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } }

:root {
	--main-block-color: rgb(61,61,61);
	--main-text-color: white;
	--dim-text-color: rgb(205,205,205);
	--main-background-color: #222222;
	--inner-background-color: #333333;
	--input-background-color: #444444;
	--input-border-color: #555555;
	--input-text-color: #999999;
}

body {
	font-family: arial;
	color: var(--main-text-color);
	background-color: var(--main-background-color);
	margin: 0;
}
p::selection, span::selection, a::selection {
	background-color: hsl(0,0%,75%);
	color: hsl(0,0%,20%);
	font-weight: 100;
}

#back {
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	background-color: var(--inner-background-color);
	position: relative;
	top: -2px;
}

ul {
	list-style-type: none;
	background-color: var(--main-block-color);
	border-bottom: 1px solid var(--main-background-color);
	padding-left: 15%;
	padding-right: 15%;
	margin: 0;
	height: 41px;
}

li {
	float: left;
	height: 29.5px;
	padding-top: 12px;
	margin: 0;
}

.menu_left {
	margin-right: 10px;
}

.menu_right {
	float: right;
}

#menu_overview {
	margin-right: 13px;
	margin-left: 10px;
	font-size: 16px;
}

.menu_left:not(#menu_overview) {
	font-size: 15px;
	padding-top: 13px;
}

#menu_forums a:after {
	content: "Forums";
}
.menu_topics a:after {
	content: "Topics";
}
.menu_account a:after {
	content: "Account";
}
.menu_profile a:after {
	content: "Profile";
}
.menu_panel a:after {
	content: "Panel";
}
.menu_logout a:after {
	content: "Logout";
}
.menu_login a:after {
	content: "Login";
}
.menu_register a:after {
	content: "Register";
}

.alert_bell {
	float: right;
}

.menu_alerts {
	float: right;
	padding-top: 14px;
}

.alert_counter {
	background-color: rgb(200,0,0);
	border-radius: 2px;
	font-size: 11px;
	padding: 3px;
	float: right;
	position: relative;
	top: -1px;
}

.alert_aftercounter {
	float: right;
	margin-right: 4px;
	font-size: 14px;
}
.alert_aftercounter:before {
	content: "Alerts";
}

.menu_alerts .alertList, .auto_hide, .hide_on_big, .show_on_mobile {
	display: none;
}
.selectedAlert .alertList {
	display: block;
	position: absolute;
	top: 44px;
	float: left;
	width: 200px;
	z-index: 50;
	right: 15%;
	font-size: 13px;
	background-color: var(--inner-background-color);
}

.alertItem {
	margin-bottom: 2px;
}
.alertItem.withAvatar {
	height: 40px;
	background-size: 48px;
	background-repeat: no-repeat;
	background-color: var(--main-block-color);
	padding-left: 56px;
	padding-top: 8px;
}

a {
	text-decoration: none;
	color: var(--main-text-color);
}

.alert {
	padding-bottom: 12px;
	background-color: var(--main-block-color);
	padding: 12px;
	display: block;
}

.rowblock {
	margin-left: 8px;
	margin-right: 8px;
}

.opthead, .rowhead, .colstack_head {
	padding-bottom: 0px;
	padding-top: 3px !important;
	white-space: nowrap;
}

.rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem {
	font-size: 15px; /*16px*/
}

.rowblock:last-child, .colstack_item:last-child {
	padding-bottom: 10px;
}

.rowitem, .formitem {
	padding-bottom: 12px;
	background-color: var(--main-block-color);
	margin-top: 8px;
	padding: 12px;
}
.rowitem h1 {
	font-size: 16px;
	font-weight: normal;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	display: inline;
}
.rowsmall {
	font-size: 12px;
}

.colstack_left, .colstack_right {
	margin-left: 8px;
}
.colstack_left {
	float: left;
	width: 30%;
}
.colstack_right {
	float: left;
	width: calc(70% - 24px);
}
.colstack_left:empty, .colstack_right:empty, .show_on_edit {
	display: none;
}

.colline {
	font-size: 14px;
	background-color: var(--main-block-color);
	margin-top: 5px;
	padding: 10px;
}

/* Align to right in a flex head */
.to_right {
	float: right;
	margin-left: auto;
}

/* Topic View */

/* TODO: How should we handle the sticky headers? */
.topic_sticky_head {
}

/* TODO: Add the avatars to the forum list */
.extra_little_row_avatar {
	display: none;
}
.shift_left {
	float: left;
}
.shift_right {
	float: right;
}

/* TODO: Rewrite the closed topic header so that it looks more consistent with the rest of the theme */
.topic_closed_head .topic_status_closed {
	margin-bottom: -10px;
	font-size: 19px;
}

.post_item {
	background-size: 128px;
	padding-left: calc(128px + 12px);
}

.controls {
	width: 100%;
	display: inline-block;
	margin-top: 20px;
}

.staff_post {
	border: 1px solid rgb(101, 71, 101)
}

.user_tag {
	float: right;
	color: var(--dim-text-color);
}

.real_username {
	float: left;
	margin-right: 7px;
}

.mod_button {
	margin-right: 5px;
	display: block;
	float: left;
}
.mod_button button {
	border: none;
	background: none;
	color: var(--main-text-color);
	font-size: 12px;
	padding: 0;
}

.like_label:before {
	content: "+1";
}
.edit_label:before {
	content: "Edit";
}
.trash_label:before {
	content: "Delete";
}
.pin_label:before {
	content: "Pin";
}
.lock_label:before {
	content: "Lock";
}
.unlock_label:before {
	content: "Unlock";
}
.unpin_label:before {
	content: "Unpin";
}
.ip_label:before {
	content: "IP";
}
.flag_label:before {
	content: "Flag";
}
.level_label:before {
	content: "Level";
}

.like_count_label:before {
	content: "likes";
}
.like_count_label {
	font-size: 12px;
	display: block;
	float: left;
	line-height: 19px;
}
.like_count {
	font-size: 12px;
	display: block;
	float: left;
	line-height: 19px;
	margin-right: 2px;
}
.like_count:before {
	content: "|";
	margin-right: 5px;
}

.level_label, .level {
	color: var(--dim-text-color);
	float: right;
}
.level {
	margin-left: 3px;
}

.formrow.real_first_child, .formrow:first-child {
	margin-top: 8px;
}
.formrow.real_first_child .formitem, .formrow:first-child .formitem {
	padding-top: 12px;
}
.formrow:last-child .formitem {
	padding-bottom: 12px;
}

textarea {
	background-color: var(--input-background-color);
	border-color: var(--input-border-color);
	color: var(--input-text-color);
	width: calc(100% - 15px);
	min-height: 80px;
}
textarea:focus, input:focus, select:focus, button:focus {
	outline-color: rgb(95,95,95);
}
textarea.large {
	min-height: 120px;
	margin-top: 1px;
	padding: 5px;
	display: block;
}

.formitem button, .formbutton {
	background-color: var(--input-background-color);
	border: 1px solid var(--input-border-color);
	color: var(--input-text-color);
	padding: 7px;
	padding-bottom: 6px;
	font-size: 13px;
}

.formrow {
	flex-direction: row;
	display: flex;
}

.formitem {
	margin-top: 0px;
	padding-bottom: 2px;
	padding-top: 3px;
	flex-grow: 2;
}

.formlabel {
	flex-grow: 0;
	width: 20%;
	padding-top: 9px;
}

/* If the form label is on the right */
.formlabel:not(:first-child) {
	font-size: 15px;
	flex-grow: 2;
}

.formrow.real_first_child .formlabel, .formrow:first-child .formlabel {
	padding-top: 17px;
}

/* Too big compared to the other items in the Control Panel and Account Panel */
/*.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child {
	margin-top: 8px;
}*/
.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child {
	margin-top: 3px;
}

.thin_margins .formrow.real_first_child, .thin_margins .formrow:first-child {
	margin-top: 5px;
}

.formitem a {
	font-size: 14px;
}
.rowmenu .rowitem, .rowlist .rowitem, .rowlist .formitem {
	margin-top: 3px;
	font-size: 13px;
	padding: 10px;
}
.menu_stats {
	font-size: 12px;
}

/* Mini paginators aka panel paginators */
.pageset {
	margin-top: 4px;
	display: flex;
	flex-direction: row;
}
.pageitem {
	background-color: var(--main-block-color);
	padding: 10px;
	margin-right: 4px;
	font-size: 13px;
}

.bgsub {
	display: none;
}
.rowlist.bgavatars .rowitem {
	background-repeat: no-repeat;
	background-size: 40px;
	padding-left: 46px;
}
.bgavatars:not(.rowlist) .rowitem {
	background-repeat: no-repeat;
	background-size: 40px;
	padding-left: 46px;
}
.rowlist .formrow, .rowlist .formrow:first-child {
	margin-top: 0px;
}

.formitem input {
	background-color: var(--input-background-color);
	border: 1px solid var(--input-border-color);
	color: var(--input-text-color);
	padding-bottom: 6px;
	font-size: 13px;

	padding: 5px;
 	width: calc(100% - 16px);
}

.formitem select {
	background-color: var(--input-background-color);
	border: 1px solid var(--input-border-color);
	color: var(--input-text-color);
	font-size: 13px;
	padding: 4px;
}

.rowlist .formitem select {
	padding: 2px;
	font-size: 11px;
	margin-top: -5px;
}

input, select, textarea {
	caret-color: rgb(95,95,95);
}

.form_middle_button {
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 5px;
}

.little_row_avatar {
	display: none;
}
.topic_create_form .topic_board_row .formitem, .topic_create_form .topic_name_row .formitem {
	padding-bottom: 5px;
}
.topic_create_form input, .topic_create_form select {
	padding: 7px;
	font-family: monospace;
}
.topic_create_form select {
	padding: 6px;
}
.topic_create_form input {
	width: calc(100% - 14px);
}
.topic_create_form textarea, .topic_reply_form textarea {
	width: calc(100% - 5px);
	min-height: 80px;
}
.topic_create_form textarea {
	padding: 7px;
	width: calc(100% - 14px);
}

.quick_button_row .formitem, .quick_create_form .upload_file_dock {
	display: flex;
}
.quick_create_form .add_file_button {
	margin-left: 8px;
}
.quick_create_form .close_form {
	margin-left: auto;
}
.quick_create_form .uploadItem {
	display: inline-block;
	margin-left: 8px;
	background-size: 25px 30px;
	background-repeat: no-repeat;
	padding-left: 30px;
}

#poweredByHolder {
    background-color: var(--main-block-color);
    margin-top: 5px;
    padding: 10px;
    font-size: 14px;
    padding-left: 13px;
    padding-right: 13px;
	clear: left;
    height: 25px;
}
#poweredByHolder select {
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    color: var(--input-text-color);
    font-size: 13px;
    padding: 4px;
}
#poweredBy {
	float: left;
	margin-top: 4px;
}
#poweredBy span {
	font-size: 12px;
}

/* Forum View */
.rowhead, .opthead, .colstack_head, .rowhead .rowitem {
	display: flex;
	flex-direction: row;
}

.has_opt {
	margin-right: 0px;
	display: inline-block;
	float: left;
	padding-right: 0px;
}
.rowhead .rowitem:not(.has_opt), .opthead .rowitem, .colstack_head .rowitem {
	width: 100%;
}

.opt {
	float: left;
	margin-top: 8px;
	height: 30.4px;
	padding-left: 5px;
	width: 100%;
	background-color: var(--main-block-color);
	padding-top: 11px;
}
.opt a {
	font-size: 11px;
}

.create_topic_opt a:before {
	content: "New Topic";
}
.locked_opt a:before {
	content: "Locked";
}

.topic_list .topic_row {
	display: flex;
}
/* Temporary hack, so that I don't break the topic lists of the other themes */
.topic_list .topic_inner_right {
	display: none;
}
.topic_list .rowitem {
	float: left;
	overflow: hidden;
}
.topic_list .topic_left {
	width: 100%;
	height: 59px;
	display: flex;
	padding: 0px;
	overflow: hidden;
}
.topic_list .topic_right {
	height: 59px;
	margin-left: 8px;
	display: flex;
	width: 284px;
	padding: 0px;
}
.topic_list .topic_left img, .topic_list .topic_right img {
	width: 64px;
}
.topic_list .topic_inner_left, .topic_right > span {
	margin-left: 8px;
	margin-top: 12px;
}
.topic_list .topic_row:last-child {
	margin-bottom: 10px;
}
.topic_list .lastReplyAt {
	white-space: nowrap;
}
.topic_list .lastReplyAt:before {
	content: "Last: ";
}
.topic_list .starter:before {
	content: "Starter: ";
}

.topic_name_input {
	width: 100%;
	margin-right: 10px;
	background-color: var(--input-background-color);
	border: 1px solid var(--input-border-color);
	color: var(--input-text-color);
	padding-bottom: 6px;
	font-size: 13px;
	padding: 5px;
}
.topic_item .submit_edit {
	margin-left: auto;
}
.topic_item .topic_status_closed {
	margin-left: auto;
	position: relative;
	top: -5px;
}

.prev_link, .next_link {
	display: none;
}

.postImage {
	max-width: 100%;
	max-height: 200px;/*300px;*/
	background-color: rgb(71,71,71);
	padding: 10px;
}

/* Profiles */
#profile_left_lane {
	width: 220px;
	margin-top: 5px;
}
#profile_left_lane .avatarRow {
	overflow: hidden;
	max-height: 220px;
	padding: 0;
}
#profile_left_lane .avatar {
	width: 100%;
	margin: 0;
	display: block;
}
#profile_left_lane .username {
	font-size: 14px;
	display: block;
	margin-top: 3px;
}
#profile_left_pane .nameRow .username {
	float: right;
	font-weight: normal;
}
#profile_left_pane .report_item:after {
	content: "Report";
}
#profile_left_lane .profileName {
	font-size: 18px;
}
#profile_right_lane {
	width: calc(100% - 245px);
}
#profile_right_lane .rowitem {
	margin-top: 5px;
}
#profile_right_lane .colstack_item .formrow.real_first_child, #profile_right_lane .colstack_item .formrow:first-child {
	margin-top: 5px;
}
.simple .user_tag {
	font-size: 14px;
}
/* TODO: Have a has_avatar class for profile comments and topic replies to allow posts without avatars? Won't that look inconsistent next to everything else for just about every theme though? */
#profile_comments .rowitem {
	background-repeat: no-repeat, repeat-y;
	background-size: 128px;
	padding-left: 136px;
}

.ip_search_block .rowitem {
	display: flex;
	flex-direction: row;
}

.ip_search_block input {
	background-color: var(--input-background-color);
	border: 1px solid var(--input-border-color);
	color: var(--input-text-color);
	margin-top: -3px;
	margin-bottom: -3px;
	padding: 4px;
	padding-bottom: 3px;
}

.ip_search_input {
	font-size: 15px;
	width: 100%;
	margin-left: 0px;
}

.ip_search_search {
	font-size: 14px;
	margin-left: 8px;
}

.colstack_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 3px;
	grid-gap: 3px;
	text-align: center;
}

.grid_stat, .grid_istat {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 13px;
	background-color: var(--main-block-color);
}

#panel_dashboard_right .colstack_head .rowitem {
	padding: 10px;
}

#panel_dashboard_right .colstack_head a {
	text-align: center;
	width: 100%;
	display: block;
	font-size: 15px;
}

@media(max-width: 935px) {
	.simple .user_tag {
		display: none;
	}
	#profile_left_lane {
		width: 160px;
	}
	#profile_left_lane .avatarRow {
		max-height: 160px;
	}
	#profile_left_lane .profileName {
		font-size: 16px;
	}
	#profile_right_lane {
		width: calc(100% - 185px);
	}
}

@media(max-width: 830px) {
	ul {
		padding-left: 10px;
		padding-right: 0px;
		height: 35px;
	}
	li {
		height: 26px;
	}

	#menu_overview {
		margin-right: 9px;
		margin-left: 0px;
		font-size: 15px;
		width: 32px;
		text-align: center;
	}
	.menu_left {
		margin-right: 7px;
	}
	.menu_left:not(#menu_overview) {
		font-size: 13px;
		padding-top: 10px;
	}

	.menu_alerts {
		padding-top: 9px;
		float: left;
		margin-right: 6px;
	}
	.alert_counter {
		border-radius: 8px;
		font-size: 0px;
		color: #c80000;
		left: 2px;
	}
	.alert_aftercounter {
		float: none;
		margin-right: 0px;
		font-size: 13px;
		padding-top: 1.5px;
	}
	.has_alerts .alert_aftercounter {
		position: relative;
		top: -5px;
	}
	.menu_alerts:not(.has_alerts) .alert_counter {
		display: none;
	}

	.selectedAlert .alertList {
		right: 10px;
		top: 42px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.alertItem.withAvatar {
		height: 28px;
		background-size: 38px;
		padding-left: 46px;
		padding-top: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#back {
		width: calc(100% - 20px);
	}
	.opthead, .rowhead, .colstack_head {
		padding-top: 0px !important;
		font-size 15px;
	}
	.rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem {
		font-size: 14px;
	}
	.rowsmall {
		font-size: 11px;
	}

	@media(min-width: 400px) {
		ul {
			height: 40px;
		}
		#menu_overview {
			font-size: 16px;
		}
		.menu_left:not(#menu_overview) {
			font-size: 14px;
			padding-top: 13px;
		}
		.alert_aftercounter {
			font-size: 14px;
			padding-top: 4px;
		}
	}
}

@media(max-width: 520px) {
	.user_tag, .level_label, .level {
		display: none;
	}
	#profile_left_lane {
		width: 100px;
	}
	#profile_comments .rowitem {
		background-size: 80px;
		padding-left: calc(80px + 12px);
	}
	#profile_left_lane .avatarRow {
		max-height: 100px;
	}
	#profile_right_lane {
		width: calc(100% - 125px);
	}
}

@media(max-width: 500px) {
	.topic_list .rowitem {
		float: none;
	}
	.topic_list .topic_left {
		width: 100%;
	}
	.topic_list .topic_right {
		display: none;
	}
	#poweredBy span {
		display: none;
	}
}

@media(max-width: 470px) {
	.like_count_label, .like_count {
		display: none;
	}
	.post_item {
		background-size: 100px;
		padding-left: calc(100px + 12px);
	}
}

@media(max-width: 370px) {
	.menu_profile {
		display: none;
	}
	.post_item {
		background-size: 80px;
		padding-left: calc(80px + 12px);
	}
	.controls {
		margin-top: 14px;
	}
	#profile_comments .rowitem {
		background-image: none !important;
		padding-left: 10px !important;
	}
}

@media(max-width: 324px) {
	ul {
		padding-left: 5px;
	}
}