MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

.puzzle .draggable {
	display: inline-block;
}
.puzzle .draggable img {
	filter: drop-shadow(0 14px 28px rgba(0,0,0,0.2));
	cursor: move;
}

/**
  * INFOBOX
  */
.infobox {
	color: var(--color-base--subtle);
	background: var(--background-color-framed);
	border: 1px solid var(--border-color-base);
	padding: 0 0 20px 0;
	border-spacing: 0;
	border-radius: 1rem;
	float: right;
	clear: right;
	margin-bottom: 1rem;
	margin-left: 1.4rem;
	overflow: hidden !important;
	font-size: 95%;
	width: 400px;
}
.infobox .image-placeholder {
    height: 100px;
    background: var(--background-color-quiet--hover);
}
.infobox a.image {
	display: flex;
	max-height: 300px;
	justify-content: center;
	align-items: center;
}
.infobox img {
	width: 400px;
	max-width: 100%;
	height: auto;
}
.infobox td {
    position: relative;
}
.infobox tr:not(:first-child) td {
    padding-left: 30px;
}
.infobox .label {
    display: block;
    font-size: 90%;
    margin-top: 20px;
}
.infobox .field, .infobox .required {
    display: block;
	margin: 0;
    font-weight: bold;
    font-size: 16px;
	color: var(--color-base--subtle);
}
.infobox .required {
    color: var(--color-destructive);
    font-style: italic;
}
.infobox .bible {
    font-size: 100% !important;
}
.infobox .bible a {
    color: var(--color-base--subtle);
}
.infobox .image-flyer {
    position: absolute;
	bottom: 5px;
	right: 5px;
	user-select: none;
}
.image-flyer > * {
    float: right;
}
.infobox .external {
 	background-image: none !important;
	padding-right: 0 !important;
}
.infobox .believer {
    padding: 2px 7px;
    background: var(--background-color-destructive);
    border: 1px solid #ffb6b3;
    color: var(--color-destructive);
    border-radius: var(--border-radius--small);
    font-weight: 600;
    margin: 5px;
}
.infobox .believer.true {
    background: #cfffdb;
    border-color: #a2ffb9;
    color: #008621;
}
.infobox .level {
	padding: 2px 7px;
	background: var(--background-color-framed);
	border: 1px solid var(--border-color-base);
	border-radius: var(--border-radius--small);
	font-weight: 600;
	margin: 5px;
}
.infobox .roughly {
    color: var(--color-success);
}

/**
  * FORM INPUTS
  */

/* kein Kommentar */
#pfForm ~ .editOptions {
    border: none !important;
}
#pfForm ~ .editOptions > div:not(.editButtons), #pfForm ~ .editOptions #wpPreview, #pfForm ~ .editOptions #wpDiff {
    display: none !important;
}
#pfForm ~ .editOptions br {
	display: none;
}

/* element */
.formedit input {
	width: 100%;
	box-sizing: border-box;
	border: none !important;
	padding: 0 !important;
	font-size: 0.875rem !important;
	padding: 10px 0 !important;
	background-color: transparent !important;
}
.formedit input:focus {
	border: none !important;
}
.formedit .selection input {
    border: none !important;
}
.formedit .warn {
    background-color: var(--background-color-destructive);
	margin: 20px 10px;
	border: 1px solid var(--color-destructive);
	border-radius: 8px;
	padding: 10px 15px;
	color: rgba(0,0,0,.6);
	font-size: .875rem;
}

/* grid */
.formedit .tabs-input {
    display: none !important;
}
.formedit .tabs-label {
    padding: 5px 15px !important;
    margin: 0 10px 0 0 !important;
    border: 1px solid var(--border-color-base);
	border-bottom: none;
	background-color: var(--background-color-framed);
}
.formedit .tabs-label:hover {
    background-color: var(--background-color-framed);
}
.formedit .tabs-label:active, .tabs-label:focus {
    background-color: var(--background-color-framed);
}
.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    background-color: var(--background-color-dp-00);
    cursor: default;
    font-weight: bold;
}
.formedit .tabs-container {
    border: none !important;
    border-top: 1px solid var(--border-color-base) !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.formedit .tab {
	display: grid;
    grid-template-columns: calc(50% - 15px) calc(50% - 15px);
    grid-auto-flow: row;
    grid-gap: 30px 30px;
    margin-top: 30px;
}
.tabs-input-1:checked ~ .tabs-container .tabs-content-1, .tabs-input-2:checked ~ .tabs-container .tabs-content-2, .tabs-input-0:checked ~ .tabs-container .tabs-content-1 {
    display: block !important;
}
.formedit .col-2 {
	grid-column: 1 / 3;
}
.formedit .tab > div {
    position: relative;
    display: flex;
    padding: 20px;
    border-radius: var(--border-radius--medium);
	border: 1px var(--border-color-base--darker) solid;
}
.formedit .inputSpan {
	display: inherit;
}
.formedit .label {
	position: absolute;
	top: -15px;
	padding: 0 30px 0 5px;
	left: 5px;
    font-size: 120%;
	background: var(--background-color-dp-00);
	color: var(--color-base);
	cursor: pointer;
}
.formedit .label::after {
    position: absolute;
    content: '';
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjQzOC41MzNweCIgaGVpZ2h0PSI0MzguNTMzcHgiIHZpZXdCb3g9IjAgMCA0MzguNTMzIDQzOC41MzMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQzOC41MzMgNDM4LjUzMzsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQwOS4xMzMsMTA5LjIwM2MtMTkuNjA4LTMzLjU5Mi00Ni4yMDUtNjAuMTg5LTc5Ljc5OC03OS43OTZDMjk1LjczNiw5LjgwMSwyNTkuMDU4LDAsMjE5LjI3MywwDQoJCWMtMzkuNzgxLDAtNzYuNDcsOS44MDEtMTEwLjA2MywyOS40MDdjLTMzLjU5NSwxOS42MDQtNjAuMTkyLDQ2LjIwMS03OS44LDc5Ljc5NkM5LjgwMSwxNDIuOCwwLDE3OS40ODksMCwyMTkuMjY3DQoJCWMwLDM5Ljc4LDkuODA0LDc2LjQ2MywyOS40MDcsMTEwLjA2MmMxOS42MDcsMzMuNTkyLDQ2LjIwNCw2MC4xODksNzkuNzk5LDc5Ljc5OGMzMy41OTcsMTkuNjA1LDcwLjI4MywyOS40MDcsMTEwLjA2MywyOS40MDcNCgkJczc2LjQ3LTkuODAyLDExMC4wNjUtMjkuNDA3YzMzLjU5My0xOS42MDIsNjAuMTg5LTQ2LjIwNiw3OS43OTUtNzkuNzk4YzE5LjYwMy0zMy41OTYsMjkuNDAzLTcwLjI4NCwyOS40MDMtMTEwLjA2Mg0KCQlDNDM4LjUzMywxNzkuNDg1LDQyOC43MzIsMTQyLjc5NSw0MDkuMTMzLDEwOS4yMDN6IE0yNTUuODIsMzU2LjMwOWMwLDIuNjYyLTAuODYyLDQuODUzLTIuNTczLDYuNTYzDQoJCWMtMS43MDQsMS43MTEtMy44OTUsMi41NjctNi41NTcsMi41NjdoLTU0LjgyM2MtMi42NjQsMC00Ljg1NC0wLjg1Ni02LjU2Ny0yLjU2N2MtMS43MTQtMS43MTEtMi41Ny0zLjkwMS0yLjU3LTYuNTYzdi01NC44MjMNCgkJYzAtMi42NjIsMC44NTUtNC44NTMsMi41Ny02LjU2M2MxLjcxMy0xLjcwOCwzLjkwMy0yLjU2Myw2LjU2Ny0yLjU2M2g1NC44MjNjMi42NjIsMCw0Ljg1MywwLjg1NSw2LjU1NywyLjU2Mw0KCQljMS43MTEsMS43MTEsMi41NzMsMy45MDEsMi41NzMsNi41NjNWMzU2LjMwOXogTTMyNS4zMzgsMTg3LjU3NGMtMi4zODIsNy4wNDMtNS4wNDQsMTIuODA0LTcuOTk0LDE3LjI3NQ0KCQljLTIuOTQ5LDQuNDczLTcuMTg3LDkuMDQyLTEyLjcwOSwxMy43MDNjLTUuNTEsNC42NjMtOS44OTEsNy45OTYtMTMuMTM1LDkuOTk4Yy0zLjIzLDEuOTk1LTcuODk4LDQuNzEzLTEzLjk4Miw4LjEzNQ0KCQljLTYuMjgzLDMuNjEzLTExLjQ2NSw4LjMyNi0xNS41NTUsMTQuMTM0Yy00LjA5Myw1LjgwNC02LjEzOSwxMC41MTMtNi4xMzksMTQuMTI2YzAsMi42Ny0wLjg2Miw0Ljg1OS0yLjU3NCw2LjU3MQ0KCQljLTEuNzA3LDEuNzExLTMuODk3LDIuNTY2LTYuNTYsMi41NjZoLTU0LjgyYy0yLjY2NCwwLTQuODU0LTAuODU1LTYuNTY3LTIuNTY2Yy0xLjcxNS0xLjcxMi0yLjU2OC0zLjkwMS0yLjU2OC02LjU3MXYtMTAuMjc5DQoJCWMwLTEyLjc1Miw0Ljk5My0yNC43MDEsMTQuOTg3LTM1LjgzMmM5Ljk5NC0xMS4xMzYsMjAuOTg2LTE5LjM2OCwzMi45NzktMjQuNjk4YzkuMTMtNC4xODYsMTUuNjA0LTguNDcsMTkuNDEtMTIuODQ3DQoJCWMzLjgxMi00LjM3Nyw1LjcxNS0xMC4xODgsNS43MTUtMTcuNDE3YzAtNi4yODMtMy41NzItMTEuODk3LTEwLjcxMS0xNi44NDljLTcuMTM5LTQuOTQ3LTE1LjI3LTcuNDIxLTI0LjQwOS03LjQyMQ0KCQljLTkuOSwwLTE4LjA4MiwyLjI4NS0yNC41NTUsNi44NTVjLTYuMjgzLDQuNTY1LTE0LjQ2NSwxMy4zMjItMjQuNTU0LDI2LjI2M2MtMS43MTMsMi4yODYtNC4wOTMsMy40MzEtNy4xMzksMy40MzENCgkJYy0yLjI4NCwwLTQuMDkzLTAuNTctNS40MjQtMS43MDlMMTIxLjM1LDE0NS44OWMtNC4zNzctMy40MjctNS4xMzgtNy40MjItMi4yODYtMTEuOTkxDQoJCWMyNC4zNjYtNDAuNTQyLDU5LjY3Mi02MC44MTMsMTA1LjkyMi02MC44MTNjMTYuNTYzLDAsMzIuNzQ0LDMuOTAzLDQ4LjU0MSwxMS43MDhjMTUuNzk2LDcuODAxLDI4Ljk3OSwxOC44NDIsMzkuNTQ2LDMzLjExOQ0KCQljMTAuNTU0LDE0LjI3MiwxNS44NDUsMjkuNzg3LDE1Ljg0NSw0Ni41MzdDMzI4LjkwNCwxNzIuODI0LDMyNy43MSwxODAuNTI5LDMyNS4zMzgsMTg3LjU3NHoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K");
    background-size: calc(var(--size-icon) / 1.5);
	background-position: center;
	background-repeat: no-repeat;
    height: var(--size-icon);
    width: var(--size-icon);
    top: 5px;
	right: 2px;
	cursor: pointer;
	opacity: var(--opacity-icon-base);
	transition: opacity 200ms ease;
}
.formedit .info {
    position: absolute;
    padding: 10px 20px;
    max-width: calc(100% - 80px);
    border: 1px solid var(--border-color-base);
    background-color: var(--background-color-dp-08);
    border-radius: var(--border-radius--medium);
    box-shadow: 0 14px 28px rgba(0,0,0,0.0625),0 10px 10px rgba(0,0,0,0.055);
    transition: opacity 200ms ease,box-shadow 200ms ease;
    font-size: 14px;
    opacity: 0;
    z-index: -1;
}
.formedit .info:hover, .formedit .label:hover ~ .info {
    opacity: 1;
    z-index: 1;
}
.skin-citizen-dark .formedit .label::after {
    filter: invert(1);
}
.formedit .input {
	display: grid;
    grid-template-columns: 1fr 100px;
    grid-auto-flow: row;
    grid-gap: 20px 10px;
    width: 100%;
}
.formedit .noSource .input {
    grid-template-columns: 1fr;
}
.formedit .date .input {
    grid-template-columns: 2fr 1fr 1fr auto auto 1fr 100px;
}
.formedit .date .roughly {
    line-height: 220%;
    color: var(--color-success);
    margin-right: -7px;
}
.formedit .date .roughly + .inputSpan {
    color: var(--color-success);
    font-weight: bold;
}
.formedit .source .input > span:first-child {
	border-right: 1px var(--border-color-base--darker) solid !important;
}
.formedit .date .input .integerInput:not(:nth-child(3)) {
	border-right: 1px var(--border-color-base--darker) solid !important;
}
.formedit .file {
	grid-row: 2 / span 3;
}
.formedit .file .input .inputSpan > input:first-child {
	text-align: center;
}
.formedit .file .inputSpan {
    display: grid;
    grid-template-rows: 1fr auto auto;
    min-height: 240px;
}

.formedit .radioButtonSpan {
    display: flex;
	align-items: center;
	justify-content: center;
}
.formedit .radioButtonItem {
    margin-right: 10px !important;
}
.formedit .radioButtonItem, t {
    font-size: 0.875rem !important;
}
.formedit .radioButtonItem input {
    width: auto;
}
#pfForm .formedit select {
	width: 100% !important;
	border: none !important;
	cursor: pointer;
	background: transparent !important;
}
#pfForm .formedit select:focus {
	border: none !important;
}
.formedit .mw-widget-dateInputWidget-handle, .formedit .mw-widget-dateInputWidget-handle:focus {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}
.formedit .date .input label {
    display: flex;
    justify-content: center;
    align-items: center;
}

.formedit .comboboxSpan {
    display: flex;
    align-items: center;
}
.formedit .comboboxSpan > div {
	width: 100% !important;
	max-width: none;
	min-width: 0 !important;
}
.formedit .comboboxSpan a {
	background-color: transparent !important;
}

#pfForm .formedit select option {
    background: var(--background-color-dp-00);
}
.formedit .simpleUploadInterface {
    display: flex;
}
.formedit .simpleupload_btn, .formedit .simpleupload_rmv_btn {
    border-radius: var(--border-radius--medium) !important;
    cursor: pointer;
    min-width: 150px;
}
.formedit .simpleupload_btn:hover, .formedit .simpleupload_rmv_btn:hover {
    background-color: var(--background-color-quiet--hover) !important;
    color: var(--color-base--emphasized);
}
.formedit .simpleupload_btn:active, .formedit .simpleupload_rmv_btn:active {
    background-color: var(--background-color-quiet--active) !important;
    color: var(--color-base--subtle);
}
.formedit .simpleupload_rmv_btn {
    color: var(--color-destructive);
}
.formedit .simpleupload_rmv_btn:hover {
    color: var(--color-destructive--hover);
}
.formedit .simpleupload_rmv_btn:active {
    color: var(--color-destructive--active);
}
.formedit .simpleupload_prv {
	margin: auto;
	border-radius: var(--border-radius--small);
	box-shadow: 0 14px 28px rgba(0,0,0,0.0625),0 10px 10px rgba(0,0,0,0.055);
}
.formedit .loading {
    margin: 20px auto;
}

@media screen and (max-width: 600px) {
	.formedit .tab {
	    grid-template-columns: calc(100% - 15px);
	}
	.formedit .col-2 {
		grid-column: 1 / 2;
	}
	.formedit .radioButtonSpan {
	    text-align: left;
	}
	.formedit .radioButtonItem {
	    display: block !important;
	}
}

* {
	outline: none;
}

.mw-userrights-groups tr td div:not(.mw-userrights-nested):nth-child(1),
.mw-userrights-groups tr td div:not(.mw-userrights-nested):nth-child(3),
.mw-userrights-groups tr td div:not(.mw-userrights-nested):nth-child(4),
.mw-userrights-groups tr td div:not(.mw-userrights-nested):nth-child(5),
.mw-userrights-groups tr td div:not(.mw-userrights-nested):nth-child(8),
.mw-userrights-groups tr td div:not(.mw-userrights-nested):nth-child(9),
.mw-userrights-groups tr td div:not(.mw-userrights-nested):nth-child(10),
.mw-userrights-groups tr td div:not(.mw-userrights-nested):nth-child(12) {
    display: none;
}

/* BABEL */
.mw-babel-wrapper {
    border-width: 0;
    overflow: visible !important;
}
.mw-babel-header , .mw-babel-footer {
    display: none;
}
.mw-babel-box > table {
    overflow: hidden !important;
}
.mw-content-ltr .mw-babel-box {
    border-radius: var(--border-radius--small);
}
.mw-content-ltr .mw-babel-box a {
    color: rgba(0,0,0,.8) !important;
}

#mw-content-container {
    background-image: url(/resources/assets/biblewiki.svg);
}

.bible, .bible > p {
	display: inline;
	font-size: 90%;
	color: black;
}

#postedit-modqueued {
    margin: 0 20px;
}
#pending-review {
    border: 3px solid #d33;
    background: #d33;
    width: calc(100% - 15px);
    text-align: center;
    color: white;
}

/* CSS used for https://www.mediawiki.org/wiki/MediaWiki/Homepage_improvements_2018 : */
.mainpage_row {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0;
	margin: 0 -5px 0 -5px;
}
.mainpage_box {
	flex: 1;
	margin: 5px;
	min-width: 210px;
	border: 1px solid #CCC;
	padding: 0 10px 10px 10px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.mainpage_box h3 {
	/* Reset padding so is equal across skins */
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	/* Padding left gets overridden by headanchor gadget */
	margin: 0.5em 0;
}
/* Set padding left only if headanchor gadget is not enabled */
.mainpage_box h3:not(.tpl-vheadanchor-heading) {
	padding-left: 0;
}
.mainpage_box h3 .header_icon {
	float: left;
	margin-right: 5px;
}
.mainpage_box .items {
	border-top: 1px solid #CCC;
	padding-top: 0.5em;
}
.mainpage_box p:last-child {
	margin-bottom: 0;
}
.mainpage_boxcontents_small {
	font-size: 95%;
}
/* Style the "other languages" box the same way as other boxes on the main page */
.mw-pt-languages {
	display: block;
	background: none;
	border: 1px solid #CCC;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
	width: auto;
}
.mw-pt-languages-label {
	background: none;
	border-right: none;
}

@media screen and (max-width: 719px) {
	.thumb {
		float: none;
	}
	.thumb, .thumbinner {
		margin-left: auto;
		margin-right: auto;
	}
}

/** Ref Image margin **/
.reference-text img {
    margin-right: 5px;
}

/** Base Table styles */
.mw-capiunto-infobox.wikitable {
    margin-top: 0;
    margin-left: 2rem;
}

.mw-capiunto-infobox caption,
table.mw-capiunto-infobox caption {
    text-align: center;
    padding-bottom: 0.5rem;
}

table.mw-capiunto-infobox tbody tr:first-of-type > :first-child {
    overflow: hidden;
    border-top-left-radius: 1rem;
}

table.mw-capiunto-infobox tbody tr:first-of-type > :last-child {
    border-top-right-radius: 1rem;
    overflow: hidden;
}

table.mw-capiunto-infobox tbody tr:last-of-type > :first-child {
    overflow: hidden;
    border-bottom-left-radius: 1rem;
}

table.mw-capiunto-infobox tbody tr:last-of-type > :last-child {
    border-bottom-right-radius: 1rem;
    overflow: hidden;
}

/** TimedMediaHandler fixes **/
.center .mediaContainer {
    margin: 0 auto;
}

.mw-tmh-player {
	position: relative;
}

.mw-tmh-play {
	display: block;
    left: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

/** EmbedVideo **/
.embedvideo {
	display: flex;
	flex-direction: column;
}

/** Ul styles **/
.ul-col-2 {
    column-count: 2;
}

.ul-col-3 {
    column-count: 3;
}

.ul-col-4 {
    column-count: 4;
}

/** Helper */
.text-center {
    text-align: center;
}

.broadtable {
    display: table;
}

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

.img-responsive {
    max-width: 100%;
    height: auto;
}