Jump to content

Произвольный размер аватаров

Shamisen
 Share

Recommended Posts

Shamisen Apprentice

Shamisen

Posted
Posted

Итак, интересуют размера аватарок как тут - https://forums.gamemag.ru/topic/132046-nintendo-switch/?page=287
Т.е. чтобы были широкие, высокие, длинные, низенькие и пухленькие, чтобы оно не сжималось и не уменьшалось где не надо. Крутил и курил матчасть я крайне долго, мною было выс, кхм, слеплено из различных кусков следующее: 

@media screen and (min-width: 768px) {
.cTopic .ipsUserPhoto_large img, .cTopic img.ipsUserPhoto_large, .cTopic .ipsUserPhoto_large:after {
    width: 150px !important;
    object-fit: cover;
}
}

Результат такой:

chrome_m14TbGQkF2.png.0bba8c8c4a0c9c70543cbfe0c1d066ce.png

Вроде как всё ок и изображение как надо, но стоит только добавить аватар не в ширину а в высоту получается вот такое:

chrome_CvJ7VkHhKR.png.dd4134b0e85351c962d3145ae95677af.png

т.е. он полностью обрезается

К тому же у них загрузчик аватаров не предлагает обрезать изображение как на дефолт движке:

chrome_dvJw1yimE9.png

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Код у них показывает вот такой: 

.cAuthorPane_photo_3 > .ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after, .cAuthorPane_photo_16 > .ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after, .cAuthorPane_photo_15 > .ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after, .cAuthorPane_photo_14 > .ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after {
    max-width: 160px;
    max-height: 160px;
}

Как оно работает - не понимаю...

 

Link to comment
Share on other sites
Maiden8 Experienced

Maiden8

Posted
Posted

У меня так

  

@media screen and (min-width: 768px) {
.cTopic .ipsUserPhoto_large img, .cTopic img.ipsUserPhoto_large, .cTopic .ipsUserPhoto_large:after {
    width: 200px !important;
    height: 200px !important;
}

 

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted
2 минуты назад, Maiden8 сказал:

У меня так

  


@media screen and (min-width: 768px) {
.cTopic .ipsUserPhoto_large img, .cTopic img.ipsUserPhoto_large, .cTopic .ipsUserPhoto_large:after {
    width: 200px !important;
    height: 200px !important;
}

 

К сожалению стало ещё хуже и не решило главную проблему разных аватаров. В IPB3 это настраивалось легчайше :(

Link to comment
Share on other sites
PaddingtonBaby Contributor

PaddingtonBaby

Posted
Posted

Так вы фиксируете ширину, а нужно сделать её гибкой при помощи max-height, max-width, как предложил @Zero108.

Попробуйте пофиксить самостоятельно, если нет - отпишите, поможем, куда мы денемся 😞

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted
1 час назад, Zero108 сказал:

Попробуйте поэкспериментирвать с min-height, max-height, min-width,  max-width.

В теории вот это должно сработать т.к. при загрузке всё равно стоят ограничения группы: 

@media screen and (min-width: 768px) {
.cTopic .ipsUserPhoto_large img, .cTopic img.ipsUserPhoto_large, .cTopic .ipsUserPhoto_large:after {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
}

Но пока проблема в мерзопакостной сетке загрузчика, когда гружу картинку на сервер всё нормально, фулл сайз как и должен быть:chrome_HeivD9pimS.thumb.png.faa09710c2ce473235782c001830b9e1.png

Но как только я нажимаю продолжить вылезает вот это дефолт чудо и я не могу выбрать прямоугольник или произвольный размер, только квадрат:

chrome_Hh5jwrA82P.thumb.png.830f16c95aaea5b66fb85b6fc36df0c7.png

 

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Итак, речь идёт о вот этой штуке из дефолт движка:

chrome_okljAoOJfq.thumb.png.9145d9d6c3b41493bd9669ce5da2c169.png

 

Можно ли её вообще выпилить и как правильно это сделать? Не хочу чтобы форум вообще ресайзил изображение для аватарок а оставлял их как есть

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Нашел вот такой код: 

<div data-controller='core.global.core.cropper' id='elPhotoCropper' class='ipsAreaBackground_light ipsType_center ipsPad'>
	<h3 class='ipsType_sectionHead'>{lang="photo_crop_title"}</h3>
	<p class='ipsType_light ipsType_reset'>{lang="photo_crop_instructions"}</p>
	<br>

	<div class='ipsForm_cropper'>
		<div data-role='cropper'>
			<img src="{$photo}" data-role='profilePhoto'>
		</div>
	</div>

	<input type='hidden' name='{$name}[0]' value='{$value[0]}' data-role='topLeftX'>
	<input type='hidden' name='{$name}[1]' value='{$value[1]}' data-role='topLeftY'>
	<input type='hidden' name='{$name}[2]' value='{$value[2]}' data-role='bottomRightX'>
	<input type='hidden' name='{$name}[3]' value='{$value[3]}' data-role='bottomRightY'>
</div>

если убрать полностью его (лол, да, я пытался) форум говорит что так не удалось обрезать фото

Link to comment
Share on other sites
Maiden8 Experienced

Maiden8

Posted
Posted

Ты меня озадачил, стало очень интересно, сам этот код перековырял, ноль.
Но где то же указано условие именно квадратности этого Кроппера, где эти пропорции прописаны, не могу найти, а зацепила идея.

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Сверил код на форуме без этих точек и на дефолт форуме, 

Без точек обрезки:

chrome_n3i28Kddls.png.74fd2bfadc235aad27f13c3fdcb8f871.png

 

Дефолт форум:

chrome_a6EVSBhgpa.png.18f4f049045722abecc28fbe5ca6ee82.png

 

Как я понял нужно выпилить "cropper-container cropper bg". Только где он?)

Link to comment
Share on other sites
Maiden8 Experienced

Maiden8

Posted
Posted (edited)

 

Спойлер

image.thumb.png.3d5475ec84f5f5daf15cb442038bb91c.png


Я выпилил кроппер
Вот так оставил, он не предлагает резать фотку.

 

Спойлер 



 

.ipsApp select {
	border: 1px solid {theme="lk_form_border"};
	border-radius: {theme="lk_form_border_radius"}px;
	padding: {theme="lk_form_padding"};
	background: {theme="lk_form_bg"};
	color: {theme="lk_form_font"};
	font-size: 13px !important;
	position: relative;	
	transition: all {theme="lk_transition"}ms ease;
	outline: 0;
}

.ipsApp select:focus {
	border-color: {theme="lk_form_border_focus"};
	background: {theme="lk_form_bg_focus"};
	color: {theme="lk_form_font_focus"};
}
	
	.ipsApp select::-ms-expand {
		display: none;
	}
	
	.ipsApp select[multiple] {
		min-height: 130px;
		min-width: 200px;
		max-width: 100%;
	}

	.ipsApp select:not( [multiple] ) {
		-webkit-appearance: button;
		background-image: url( "{resource="select_dropdown.png" app="core" location="global"}" ), linear-gradient(to bottom, {theme="lk_form_bg"} 0%,{theme="lk_form_bg"} 100%);
		background-position: right center;
		background-size: 18px 9px, 100% 100%;
		background-repeat: no-repeat, repeat;
		cursor: pointer;
		padding: {theme="lk_form_padding"};
		padding-right: 30px;
		/* Workaround for firefox */
		-moz-appearance: none;
		text-indent: 0.01px;
	}
	html[dir="rtl"] .ipsApp select:not( [multiple] ) {
		background-image: url( "{resource="select_dropdown_rtl.png" app="core" location="global"}" ), -moz-linear-gradient(top, {theme="lk_form_bg"} 0%, {theme="lk_form_bg"} 100%);
		background-image: url( "{resource="select_dropdown_rtl.png" app="core" location="global"}" ), -webkit-gradient(linear, left top, left bottom, color-stop(0%,{theme="lk_form_bg"}), color-stop(100%,{theme="lk_form_bg"}));
		background-image: url( "{resource="select_dropdown_rtl.png" app="core" location="global"}" ), -webkit-linear-gradient(top, {theme="lk_form_bg"} 0%,{theme="lk_form_bg"} 100%);
		background-image: url( "{resource="select_dropdown_rtl.png" app="core" location="global"}" ), -o-linear-gradient(top, {theme="lk_form_bg"} 0%,{theme="lk_form_bg"} 100%);
		background-image: url( "{resource="select_dropdown_rtl.png" app="core" location="global"}" ), -ms-linear-gradient(top, {theme="lk_form_bg"} 0%,{theme="lk_form_bg"} 100%);
		background-image: url( "{resource="select_dropdown_rtl.png" app="core" location="global"}" ), linear-gradient(to bottom, {theme="lk_form_bg"} 0%,{theme="lk_form_bg"} 100%);
		background-position: left center;
		padding: {theme="lk_form_padding"};
		padding-left: 30px;
	}

	.ipsApp select[disabled] {
		opacity: 0.6;
		pointer-events: none;
	}

	.ipsApp select:not( [multiple] ):after {
		top: 0;
		width: 30px;
		height: 30px;
		content: '';
		display: block;
	}
	html[dir="ltr"] .ipsApp select:not( [multiple] ):after {
		right: 0;
	}
	html[dir="rtl"] .ipsApp select:not( [multiple] ):after {
		left: 0;
	}

/* Override the default webkit appearance of time/date fields */
input[type="datetime"], input[type="datetime-local"], input[type="date"],
input[type="month"], input[type="time"], input[type="week"] {
	-webkit-appearance: none;
	min-height: 32px;
}

ul.ipsForm, ol.ipsForm {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ipsForm[data-role="advancedSearch"] {
	margin-top: 15px;
	padding-bottom: 15px;
}

.ipsFieldRow:not( :last-child ) {
	margin-bottom: 15px;
}

	.ipsFieldRow_noLabel > label,
	.ipsFieldRow_noLabel > .ipsFieldRow_content > label {
		display: none;
	}

.ipsFieldRow_searchResult {
	background-color: #f2e6d4;
	border: 1px solid #d1aa6e;
}

	.ipsFieldRow.ipsFieldRow_searchResult .ipsFieldRow_desc {
		color: #ad884e;
	}

/* CHECKBOX FIELDS */
/* For single checkboxes, and inline checkboxes */
.ipsFieldRow_checkbox {
	margin-bottom: 5px;
}
	
	.ipsFieldRow_checkbox + .ipsFieldRow:not( .ipsFieldRow_checkbox ) {
		margin-top: 15px;
	}

	.ipsFieldRow_checkbox input[type="checkbox"],
	.ipsFieldRow_checkbox input[type="radio"],
	.ipsFieldRow_checkbox .ipsCustomInput {
		float: left;
		margin-top: 3px;
	}
	html[dir="rtl"] .ipsFieldRow_checkbox input[type="checkbox"],
	html[dir="rtl"] .ipsFieldRow_checkbox input[type="radio"],
	html[dir="rtl"] .ipsFieldRow_checkbox .ipsCustomInput {
		float: right;
	}

	html[dir="ltr"] .ipsFieldRow_checkbox .ipsFieldRow_content {
		margin-left: 24px;
	}
	html[dir="rtl"] .ipsFieldRow_checkbox .ipsFieldRow_content {
		margin-right: 24px;
	}

	.ipsFieldRow_checkbox label {
		display: block;
	}

	.ipsFieldRow_inlineCheckbox {
		margin-top: 6px;
		display: inline-block;
		position: relative;
	}
	html[dir="ltr"] .ipsFieldRow_inlineCheckbox {
		margin-right: 15px;
	}
	html[dir="rtl"] .ipsFieldRow_inlineCheckbox {
		margin-left: 15px;
	}

		html[dir="ltr"] .ipsFieldRow_inlineCheckbox .ipsCustomInput,
		html[dir="ltr"] .ipsToggle {
			margin-right: 3px;
		}
		html[dir="rtl"] .ipsFieldRow_inlineCheckbox .ipsCustomInput,
		html[dir="rtl"] .ipsToggle {
			margin-left: 3px;
		}

/* FIELD LISTS (for stacks of radios/checkboxes) */
.ipsField_fieldList {
	list-style: none;
	margin: 0;
	padding: 7px 0 0 0;
}

.ipsField_fieldList > li {
	margin-bottom: 10px;
}

	.ipsField_fieldList > li:last-child {
		margin-bottom: 0px;
	}

.ipsField_fieldList input[type="radio"], .ipsField_fieldList input[type="checkbox"],
.ipsField_fieldList .ipsCustomInput {
	float: left;
	margin-top: 3px;
}
html[dir="rtl"] .ipsField_fieldList input[type="radio"],
html[dir="rtl"] .ipsField_fieldList input[type="checkbox"],
html[dir="rtl"] .ipsField_fieldList .ipsCustomInput {
	float: right;
}

html[dir="ltr"] .ipsField_fieldList_content {
	margin-left: 24px;
}
html[dir="rtl"] .ipsField_fieldList_content {
	margin-right: 24px;
}

/* FULL WIDTH FIELDS */
.ipsApp .ipsFieldRow_fullWidth input[type="text"],
.ipsApp .ipsForm_fullWidth .ipsFieldRow input[type="text"],
.ipsApp .ipsFieldRow_fullWidth input[type="email"],
.ipsApp .ipsForm_fullWidth .ipsFieldRow input[type="email"],
.ipsApp .ipsFieldRow_fullWidth input[type="password"], 
.ipsApp .ipsForm_fullWidth .ipsFieldRow input[type="password"], 
.ipsApp .ipsFieldRow_fullWidth input[type="submit"], 
.ipsApp .ipsForm_fullWidth .ipsFieldRow input[type="submit"], 
.ipsApp .ipsFieldRow_fullWidth select, 
.ipsApp .ipsForm_fullWidth .ipsFieldRow select, 
.ipsApp .ipsFieldRow_fullWidth button,
.ipsApp .ipsForm_fullWidth .ipsFieldRow button, 
.ipsApp .ipsFieldRow_fullWidth textarea,
.ipsApp .ipsForm_fullWidth .ipsFieldRow textarea,
.ipsApp .ipsFieldRow_fullWidth .ipsField_autocomplete,
.ipsApp .ipsForm_fullWidth .ipsFieldRow .ipsField_autocomplete,
.ipsApp .ipsFieldRow_fullWidth .ipsSelectTree,
.ipsApp .ipsForm_fullWidth .ipsFieldRow .ipsSelectTree,
.ipsApp input.ipsField_fullWidth, .ipsApp textarea.ipsField_fullWidth,
.ipsApp .ipsField_autocomplete.ipsField_fullWidth, .ipsApp select.ipsField_fullWidth,
.ipsApp .ipsSelectTree.ipsField_fullWidth,
.ipsApp .ipsField_dummy.ipsField_fullWidth {
	width: 100%;
	max-width: 100% !important;
}

/* FORM TYPOGRAPHY */
.ipsFieldRow_desc {
	font-size: 12px;
	color: {theme="text_light"};
	margin-top: 3px;
	display: inline-block;
}

.ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_label,
.ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 5px;
	display: inline-block;
	padding-top: 5px;
}

.ipsFieldRow.ipsFieldRow_yesNo .ipsFieldRow_label,
.ipsFieldRow.ipsFieldRow_yesNo .ipsFieldRow_title {
	padding-top: 0;
}

.ipsApp .ipsField_primary,
.ipsApp .ipsField_primary.ipsField_autocomplete input,
.ipsApp .ipsFieldRow_primary input {
	font-size: 18px;
}

.ipsFieldRow_required {
	font-size: 10px;
	text-transform: uppercase;
	color: {theme="lk_text_warning"};
	font-weight: normal;
}
html[dir="ltr"] .ipsFieldRow_required {
	margin-left: 10px;
}
html[dir="rtl"] .ipsFieldRow_required {
	margin-right: 10px;
}

/* HORIZONTAL FORMS */
/* i.e. titles beside fields */
/*.ipsForm_horizontal {
	padding-bottom: 20px;
}*/	

.ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_label,
.ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_title {
	width: 185px;
	line-height: 1.3;
	font-size: 14px;
	font-weight: 600;
}
html[dir="ltr"] .ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_label,
html[dir="ltr"] .ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_title {
	float: left;
	padding-right: 15px;
	text-align: right;
}
html[dir="rtl"] .ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_label,
html[dir="rtl"] .ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_title {
	float: right;
	padding-left: 15px;
	text-align: left;
}

.ipsForm.ipsForm_horizontal .ipsFieldRow.ipsFieldRow_shortTitle > .ipsFieldRow_title {
	width: 85px;
}

html[dir="ltr"] .ipsForm_horizontal .ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_content {
	margin-left: 185px;
}
html[dir="ltr"] .ipsForm_horizontal .ipsFieldRow.ipsFieldRow_shortTitle:not( .ipsFieldRow_checkbox ) .ipsFieldRow_content {
	margin-left: 95px;
}
html[dir="ltr"] .ipsForm_horizontal .ipsFieldRow_checkbox {
	margin-left: 185px;
}
html[dir="rtl"] .ipsForm_horizontal .ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_content {
	margin-right: 185px;
}
html[dir="rtl"] .ipsForm_horizontal .ipsFieldRow.ipsFieldRow_shortTitle:not( .ipsFieldRow_checkbox ) .ipsFieldRow_content {
	margin-right: 95px;
}
html[dir="rtl"] .ipsForm_horizontal .ipsFieldRow_checkbox {
	margin-right: 185px;
}

.ipsForm_horizontal .ipsFieldRow_required {
	font-size: 0;
	margin: 0;
}

	.ipsForm_horizontal .ipsFieldRow_required:before {
		content: '*';
		display: inline;
		color: #c02222;
		font-size: 16px;
	}

.ipsForm_horizontal .ipsFieldRow_textValue .ipsFieldRow_content {
	padding-top: 7px;
}

.ipsForm_horizontal .ipsFieldRow_content .ipsRating {
	margin-top: 3px;
}

/* VERTICAL FORMS */
/* i.e. titles above fields; overwrites horizontal rules */
.ipsForm_vertical .ipsFieldRow > .ipsFieldRow_label,
.ipsForm_vertical .ipsFieldRow > .ipsFieldRow_title {
	float: none !important;
	width: 100%;
	text-align: left;
}
html[dir="rtl"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_label,
html[dir="rtl"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_title {
	text-align: right;
}

html[dir="rtl"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ),
html[dir="rtl"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_label,
html[dir="rtl"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_content,
html[dir="rtl"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_title {
	margin-right: 0px;
}

html[dir="ltr"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ),
html[dir="ltr"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_label,
html[dir="ltr"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_content,
html[dir="ltr"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_title {
	margin-left: 0px !important;
}

html[dir="ltr"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_label,
html[dir="ltr"] .ipsForm_vertical .ipsFieldRow:not( .ipsFieldRow_checkbox ) > .ipsFieldRow_title {
	text-align: left;
}	


/* FIELD GROUPS */
.ipsForm_group {
	margin-bottom: 15px;
	padding-top: 15px;
	border: 0;
	border-bottom: 1px solid {hextorgb="lk_seperator" opacity=".1"};
}
	
	.ipsForm_group > .ipsForm_groupTitle {
		float: left;
		font-size: 16px;
		font-weight: 500;
		margin: 0;
	}
	html[dir="rtl"] .ipsForm_group > .ipsForm_groupTitle {
		float: right;
	}

	.ipsForm_group > .ipsForm_groupContent {
		list-style: none;
	}
	html[dir="ltr"] .ipsForm_group > .ipsForm_groupContent {
		margin: 0 0 0 175px;
		padding: 0 0 0 15px;
		border-left: 1px solid #f6f6f6;
	}
	html[dir="rtl"] .ipsForm_group > .ipsForm_groupContent {
		margin: 0 175px 0 0;
		padding: 0 15px 0 0 ;
		border-right: 1px solid #f6f6f6;
	}

.ipsForm .ipsForm_group:last-child {
	border-bottom: 0;
}

/* ELEMENT STYLES */
.ipsApp label:not( .ipsField_unlimited ), .ipsApp input, .ipsApp button, .ipsApp select, .ipsApp textarea {
	font-size: 14px;
	{{if theme.lk_body_font_google}}
		font-family: "{theme="lk_body_font_google"}", "Helvetica Neue", Helvetica, Arial, sans-serif;
	{{else}}
		{{if !theme.body_font || theme.body_font == 'default'}}
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		{{else}}
			font-family: "{theme="body_font"}", "Helvetica Neue", Helvetica, Arial, sans-serif;
		{{endif}}
	{{endif}}
	{{if theme.lk_font_smoothing_enable}}
		-webkit-font-smoothing: subpixel-antialiased !important;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility:    hidden;
		-ms-backface-visibility:     hidden;
	{{endif}}
	vertical-align: middle;
	transition: all {theme="lk_transition"}ms ease;
}

.ipsApp a label:not( .ipsField_unlimited ) {
	transition: none;
}

.ipsApp .ipsField_dummy {
	height: 32px;
}

.ipsApp .ipsField_autocomplete {
	position: relative;
	outline: 0;
	display: inline-block;
}
html[dir="ltr"] .ipsApp .ipsField_autocomplete {
	padding-right: 35px;
}
html[dir="rtl"] .ipsApp .ipsField_autocomplete {
	padding-left: 35px;
}
	.ipsApp .ipsField_autocomplete input[type="text"] {
		border: 0;
		border-radius: {theme="lk_form_border_radius"}px;
		padding: 0;
		background: transparent;
		width: 20px;
		max-width: 100%;
		box-shadow: none;
	}

		.ipsApp .ipsField_autocomplete input[type="text"]:focus {
			outline: 0;
			box-shadow: none;
		}

	.ipsApp .ipsField_autocomplete.ipsField_autocompleteDisabled {
		pointer-events: none;
	}
		
		.ipsApp .ipsField_autocomplete.ipsField_autocompleteDisabled .cToken {
			opacity: 0.6;
		}

	html[dir="ltr"] .ipsApp .ipsField_autocomplete_loading {
		position: absolute;
		right: 10px;
	}
	html[dir="rtl"] .ipsApp .ipsField_autocomplete_loading {
		position: absolute;
		left: 10px;
	}

	.ipsApp .ipsField_autocomplete [data-action='addToken'] {
		font-size: 13px;
	}

.ipsApp input[type="color"] {
	min-width: 50px;
}

.ipsApp .ipsField_autocomplete, .ipsApp textarea, .ipsApp input[type="text"], .ipsApp input[type="password"],
.ipsApp input[type="datetime"], .ipsApp input[type="datetime-local"], .ipsApp input[type="date"],
.ipsApp input[type="month"], .ipsApp input[type="time"], .ipsApp input[type="week"], 
.ipsApp input[type="number"], .ipsApp input[type="email"], .ipsApp input[type="url"],
.ipsApp input[type="search"], .ipsApp input[type="tel"], .ipsApp .ipsField_dummy {
 	background-color: {theme="lk_form_bg"};
 	border-width: 1px;
 	border-style: solid;
	border-color: {theme="lk_form_border"};
	color: {theme="lk_form_font"};
	border-radius: {theme="lk_form_border_radius"}px;
	width: 100%;
	max-width: 350px;
	padding: {theme="lk_form_padding"};
	transition: all {theme="lk_transition"}ms ease;
}

.CodeMirror {
	border-width: 1px;
	border-style: solid;
 	border-color: {theme="lk_form_border"};
	border-radius: {theme="lk_form_border_radius"}px;
	cursor: text;
}

html[dir="rtl"] .CodeMirror {
	direction: ltr;
}

.ipsApp textarea.ipsField_short, .ipsApp input[type="text"].ipsField_short, .ipsApp input[type="password"].ipsField_short,
.ipsApp input[type="datetime"].ipsField_short, .ipsApp input[type="datetime-local"].ipsField_short, .ipsApp input[type="date"].ipsField_short,
.ipsApp input[type="month"].ipsField_short, .ipsApp input[type="time"].ipsField_short, .ipsApp input[type="week"].ipsField_short, 
.ipsApp input[type="number"].ipsField_short, .ipsApp input[type="email"].ipsField_short, .ipsApp input[type="url"].ipsField_short,
.ipsApp input[type="search"].ipsField_short, .ipsApp input[type="tel"].ipsField_short, .ipsApp input[type="color"].ipsField_short, .ipsApp select.ipsField_short {
	width: 200px;
	max-width: 200px;
}

.ipsApp textarea.ipsField_medium, .ipsApp input[type="text"].ipsField_medium, .ipsApp input[type="password"].ipsField_medium,
.ipsApp input[type="datetime"].ipsField_medium, .ipsApp input[type="datetime-local"].ipsField_medium, .ipsApp input[type="date"].ipsField_medium,
.ipsApp input[type="month"].ipsField_medium, .ipsApp input[type="time"].ipsField_medium, .ipsApp input[type="week"].ipsField_medium, 
.ipsApp input[type="number"].ipsField_medium, .ipsApp input[type="email"].ipsField_medium, .ipsApp input[type="url"].ipsField_medium,
.ipsApp input[type="search"].ipsField_medium, .ipsApp input[type="tel"].ipsField_medium, .ipsApp input[type="color"].ipsField_medium, .ipsApp select.ipsField_medium {
	width: 270px;
	max-width: 270px;
}

.ipsApp textarea.ipsField_tiny, .ipsApp input[type="text"].ipsField_tiny, .ipsApp input[type="password"].ipsField_tiny,
.ipsApp input[type="datetime"].ipsField_tiny, .ipsApp input[type="datetime-local"].ipsField_tiny, .ipsApp input[type="date"].ipsField_tiny,
.ipsApp input[type="month"].ipsField_tiny, .ipsApp input[type="time"].ipsField_tiny, .ipsApp input[type="week"].ipsField_tiny, 
.ipsApp input[type="number"].ipsField_tiny, .ipsApp input[type="email"].ipsField_tiny, .ipsApp input[type="url"].ipsField_tiny,
.ipsApp input[type="search"].ipsField_tiny, .ipsApp input[type="tel"].ipsField_tiny, .ipsApp input[type="color"].ipsField_tiny, .ipsApp select.ipsField_tiny {
	width: 80px;
	max-width: 80px;
}

	.ipsApp select.ipsField_short, .ipsApp select.ipsField_medium, .ipsApp select.ipsField_tiny {
		text-overflow: ellipsis;
	}

.ipsApp .ipsField_autocomplete:focus-within,
.ipsApp textarea:focus, .ipsApp input[type="text"]:focus, .ipsApp input[type="password"]:focus,
.ipsApp input[type="datetime"]:focus, .ipsApp input[type="datetime-local"]:focus,
.ipsApp input[type="date"]:focus, .ipsApp input[type="month"]:focus, .ipsApp input[type="time"]:focus,
.ipsApp input[type="week"]:focus, .ipsApp input[type="number"]:focus, .ipsApp input[type="email"]:focus,
.ipsApp input[type="url"]:focus, .ipsApp input[type="search"]:focus, .ipsApp input[type="tel"]:focus,
.ipsApp input[type="color"]:focus {
	border-color: {theme="lk_form_border_focus"};
	background: {theme="lk_form_bg_focus"};
	color: {theme="lk_form_font_focus"};
	outline: 0;
}

.ipsApp textarea[disabled], .ipsApp input[type="text"][disabled], .ipsApp input[type="password"][disabled],
.ipsApp input[type="datetime"][disabled], .ipsApp input[type="datetime-local"][disabled],
.ipsApp input[type="date"][disabled], .ipsApp input[type="month"][disabled], .ipsApp input[type="time"][disabled],
.ipsApp input[type="week"][disabled], .ipsApp input[type="number"][disabled], .ipsApp input[type="email"][disabled],
.ipsApp input[type="url"][disabled], .ipsApp input[type="search"][disabled], .ipsApp input[type="tel"][disabled],
.ipsApp input[type="color"][disabled] {
	background: {theme="lk_form_bg_disabled"};
	border-color: {theme="lk_form_border_disabled"};
	color: {theme="lk_form_font_disabled"};
	{{$opacitycommas = str_replace(array(','), array('.'), theme.lk_form_opacity_disabled);}}
	opacity: {$opacitycommas};
}

/* Fix for textarea word wrap in Edge */
.ipsApp textarea {
	white-space: pre-wrap;
}

.ipsApp .ipsToggle:focus,
.ipsApp .ipsCustomInput input:focus + span {
	border-color: {theme="lk_form_border_focus"};
	outline: 0;
}

.ipsFieldRow_content [data-role="prefixRow"] {
	margin-top: 5px;
}

.ipsApp textarea:not([data-ipsAutocomplete]) {
	height: auto;
	max-width: 100%;
}

/*.ipsFieldRow_content select {
	margin-top: 6px;
}*/

.ipsFieldRow .ipsFieldRow_icon {
	position: relative;
}

	html[dir="ltr"] .ipsFieldRow .ipsFieldRow_icon input[type="text"] {
		padding-left: 35px;
	}
	html[dir="rtl"] .ipsFieldRow .ipsFieldRow_icon input[type="text"] {
		padding-right: 35px;
	}

	.ipsFieldRow .ipsFieldRow_icon:after {
		font-family: 'FontAwesome';
		font-size: 16px;
		position: absolute;
		top: 3px;
		color: {theme="text"};
		display: inline-block;
		width: 30px;
		height: 30px;
	}
	html[dir="ltr"] .ipsFieldRow .ipsFieldRow_icon:after {
		left: 3px;
	}
	html[dir="rtl"] .ipsFieldRow .ipsFieldRow_icon:after {
		right: 3px;
	}

		.ipsFieldRow .ipsFieldRow_icon[data-icon="search"] {
			content: "\f002";
		}

	.ipsFieldRow.ipsFieldRow_primary .ipsFieldRow_icon:after {
		font-size: 18px;
		top: 0;
	}
	html[dir="ltr"] .ipsFieldRow.ipsFieldRow_primary .ipsFieldRow_icon:after {
		left: 10px;
	}
	html[dir="rtl"] .ipsFieldRow.ipsFieldRow_primary .ipsFieldRow_icon:after {
		right: 10px;
	}

.ipsApp .ipsField_loading {
	background-image: url( "{resource="loaders/tiny_loading.gif" app="core" location="front"}" );
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: right 5px center;
}

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	.ipsApp .ipsField_loading {
		background-image: url( "{resource="loaders/[email protected]" app="core" location="front"}" );
	}
}

html[dir="rtl"] .ipsApp .ipsField_loading {
	background-position: left 5px center;
}

.ipsFieldRow_section {
	{{if !theme.lk_form_sectiontitle_gradient_enable}}
		background: {theme="lk_form_sectiontitle_bg"};
	{{else}}
		background: {theme="lk_form_sectiontitle_gradient_b"};
		background-image: linear-gradient(to right, {theme="lk_form_sectiontitle_gradient_a"}, {theme="lk_form_sectiontitle_gradient_b"});
	{{endif}}
	color: {theme="lk_form_sectiontitle_font"};
	padding: 15px;
	font-size: 16px;
}

/* VALIDATION */
.ipsApp input.ipsField_error, .ipsFieldRow_error textarea:not( .ipsFieldRow_errorExclude ), .ipsFieldRow_error input[type="text"]:not( .ipsFieldRow_errorExclude ),
.ipsFieldRow_error input[type="password"]:not( .ipsFieldRow_errorExclude ), .ipsFieldRow_error input[type="datetime"]:not( .ipsFieldRow_errorExclude ),
.ipsFieldRow_error input[type="datetime-local"]:not( .ipsFieldRow_errorExclude ), .ipsFieldRow_error input[type="date"]:not( .ipsFieldRow_errorExclude ),
.ipsFieldRow_error input[type="month"]:not( .ipsFieldRow_errorExclude ), .ipsFieldRow_error input[type="time"]:not( .ipsFieldRow_errorExclude ),
.ipsFieldRow_error input[type="week"]:not( .ipsFieldRow_errorExclude ), .ipsFieldRow_error input[type="number"]:not( .ipsFieldRow_errorExclude ),
.ipsFieldRow_error input[type="email"]:not( .ipsFieldRow_errorExclude ), .ipsFieldRow_error input[type="url"]:not( .ipsFieldRow_errorExclude ),
.ipsFieldRow_error input[type="search"]:not( .ipsFieldRow_errorExclude ), .ipsFieldRow_error input[type="tel"]:not( .ipsFieldRow_errorExclude ),
.ipsFieldRow_error input[type="color"]:not( .ipsFieldRow_errorExclude ),
.ipsFieldRow_error .ipsField_dummy, .ipsFieldRow_error.ipsField_dummy {
	background-color: {theme="lk_form_bg_error"};
	border-color: {theme="lk_form_border_error"};
	color: {theme="lk_form_font_error"};
}

.ipsApp input.ipsField_success, .ipsApp textarea.ipsField_success, .ipsFieldRow_success textarea, .ipsFieldRow_success input[type="text"], .ipsFieldRow_success input[type="password"],
.ipsFieldRow_success input[type="datetime"], .ipsFieldRow_success input[type="datetime-local"],
.ipsFieldRow_success input[type="date"], .ipsFieldRow_success input[type="month"], .ipsFieldRow_success input[type="time"],
.ipsFieldRow_success input[type="week"], .ipsFieldRow_success input[type="number"], .ipsFieldRow_success input[type="email"],
.ipsFieldRow_success input[type="url"], .ipsFieldRow_success input[type="search"], .ipsFieldRow_success input[type="tel"],
.ipsFieldRow_success input[type="color"] {
	background-color: {theme="lk_form_bg_success"};
	border-color: {theme="lk_form_border_success"};
	color: {theme="lk_form_font_success"};
}

/* Monospace textarea */
textarea.ipsField_codeInput {
	font-family: "Courier New", Courier, monospace;
}

input[type="text"].ipsField_tinyText {
	font-size: 11px;
	padding: 4px;
}

/* TOGGLES */
input[type="checkbox"]:disabled + .ipsToggle {
	opacity: 0.4;
	cursor: default !important;
}

	input[type="checkbox"]:disabled + .ipsToggle:not( [data-ipsTooltip] ) {
		pointer-events: none;
	}

.ipsToggle {
		outline: 0;
		display: inline-flex;
		overflow: hidden;
		width: 50px;
		height: 22px;
		box-sizing: border-box;
		position: relative;
		cursor: pointer;
		-webkit-user-select: none;
			 -moz-user-select: none;
				-ms-user-select: none;
						user-select: none;
		background: red;
		border-radius: 50px;
		padding: 2px;
		transition: all {theme="lk_transition"}ms ease;
		font-size: 0;
		color: transparent;
		box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
}
	
	.ipsToggle.ipsToggle_off {
		background-color: {theme="lk_form_yesno_off_bg"};
	}

	.ipsToggle.ipsToggle_on {
		background-color: {theme="lk_form_yesno_on_bg"};
	}

	{{if theme.lk_form_yesno_gradient_enable == 'gradient'}}
		.ipsToggle.ipsToggle_off,
		.ipsToggle.ipsToggle_on {
			background-image: linear-gradient(to right, {theme="lk_form_yesno_on_gradient_a"}, {theme="lk_form_yesno_on_gradient_b"}, {theme="lk_form_yesno_on_gradient_b"}, {theme="lk_form_yesno_off_gradient_a"}, {theme="lk_form_yesno_off_gradient_a"}, {theme="lk_form_yesno_off_gradient_b"});
			background-size: 300% 100%;
		}
		.ipsToggle.ipsToggle_off {
			background-position: 100% 0;
		}
		.ipsToggle.ipsToggle_on {
			background-position: 0% 0;
		}
	{{endif}}

	.ipsToggle input {
		opacity: 0;
	}

	.ipsToggle span {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		content: "";
		width: 50%;
		height: 100%;
		box-sizing: content-box;
		border-radius: 50px;
		background: {theme="lk_form_yesno_toggle_bg"};
		transition: left {theme="lk_transition"}ms ease, width {theme="lk_transition"}ms ease;
		box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.08);
	}	

		html[dir="ltr"] .ipsToggle span {
			left: 0%;
		}
		html[dir="rtl"] .ipsToggle span {
			right: 0%;
		}

		html[dir] .ipsToggle:hover {
			will-change: padding;
		}

		html[dir] .ipsToggle:active span {
			width: 60%;
		}
		
		html[dir="ltr"] .ipsToggle.ipsToggle_on span {
			left: 50%;
		}
		html[dir="rtl"] .ipsToggle.ipsToggle_on span {
			right: 50%;
		}

		html[dir="ltr"] .ipsToggle.ipsToggle_on:active span {
			left: 40%;
		}
		html[dir="rtl"] .ipsToggle.ipsToggle_on:active span {
			right: 40%;
		}

	.ipsToggle span:after {
		content: '\f00d';
		font-family: 'FontAwesome';
		font-size: 12px;
		text-transform: uppercase;
		display: block;
		color: {theme="lk_form_yesno_toggle_icon"};
		line-height: 1;
	}

		.ipsToggle.ipsToggle_on span:after {
			content: '\f00c';
		}

		
/* No, no, no, no, yes */
.ipsField_yesNo {
	display: inline-block;
	margin: 0;
	padding: 0;
}

html[dir="ltr"] .ipsField_yesNo li {
	float: left;
}
html[dir="rtl"] .ipsField_yesNo li {
	float: right;
}

.ipsField_yesNo input[type="radio"] {
	display: none;
}

.ipsField_yesNo label {
	display: block;
	height: 32px;
	line-height: 32px;
	text-align: center;
	width: 40px;
	background: #f2f2f2;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	transition: 0.2s all linear;
}

	.ipsField_yesNo label:after {
		color: #d5d5d5;		
		font-family: "FontAwesome";
		position: absolute;
		top: 0;
		text-indent: 0;
		font-size: 18px;
	}
	html[dir="ltr"] .ipsField_yesNo label:after {
		left: 50%;
	}
	html[dir="rtl"] .ipsField_yesNo label:after {
		right: 50%;
	}

		.ipsField_yesNo .ipsField_yesNo_yes label:after {
			content: "\f00c";
		}
		html[dir="ltr"] .ipsField_yesNo .ipsField_yesNo_yes label:after {
			margin-left: -9px;
		}
		html[dir="rtl"] .ipsField_yesNo .ipsField_yesNo_yes label:after {
			margin-right: -9px;
		}

			.ipsField_yesNo .ipsField_yesNo_yes input[type="radio"]:checked + label {
				background: #68a72f;
			}

		.ipsField_yesNo .ipsField_yesNo_no label:after {
			content: "\f00d";
		}
		html[dir="ltr"] .ipsField_yesNo .ipsField_yesNo_no label:after {
			margin-left: -7px;
		}
		html[dir="rtl"] .ipsField_yesNo .ipsField_yesNo_no label:after {
			margin-right: -7px;
		}

			.ipsField_yesNo .ipsField_yesNo_no input[type="radio"]:checked + label {
				background: #a72f35;
			}

.ipsField_yesNo li:first-child label {
	border-radius: {theme="lk_form_border_radius"}px 0 0 {theme="lk_form_border_radius"}px;
}
html[dir="rtl"] .ipsField_yesNo li:first-child label {
	border-radius: 0 {theme="lk_form_border_radius"}px {theme="lk_form_border_radius"}px 0;
}

.ipsField_yesNo li:last-child label {
	border-radius: 0 {theme="lk_form_border_radius"}px {theme="lk_form_border_radius"}px 0;
}
html[dir="rtl"] .ipsField_yesNo li:last-child label {
	border-radius: {theme="lk_form_border_radius"}px 0 0 {theme="lk_form_border_radius"}px;
}

.ipsField_yesNo input[type="radio"]:checked + label:after {
	color: #fff;
}

.ipsField_yesNo.ipsField_yesNo_disabled {
	opacity: 0.5;
}

/* CUSTOM CHECKBOX/RADIO STYLES */
.ipsCustomInput {
	position: relative;
}

.ipsCustomInput,
.ipsCustomInput > span {
	width: 16px;
	height: 16px;
	display: inline-block;
	font-size: 0;
}

	.ipsCustomInput > span {
		border: 1px solid {theme="lk_form_border"};
		background: {theme="lk_form_bg"};
		position: absolute;
		top: -1px;
		left: 0;
		pointer-events: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

		.ipsCustomInput input[type="checkbox"] + span {
			border-radius: {theme="lk_form_border_radius"}px;
		}
		.ipsCustomInput input[type="radio"] + span {
			border-radius: 8px;
		}

	/* Hover */
	.ipsCustomInput input:hover:not( :disabled ) + span {
		background: {theme="lk_form_bg_focus"};
		border-color: {theme="lk_form_border_focus"};
	}

	/* Disabled styles */
	.ipsCustomInput input:disabled + span {
		opacity: {theme="lk_form_opacity_disabled"};
	}

		.ipsCustomInput input:not( :checked ):disabled + span {
			background: {theme="lk_form_bg_disabled"};
			border-color: {theme="lk_form_border_disabled"};
		}

		.ipsCustomInput input:checked:disabled + span {
			background: {theme="lk_form_bg_disabled"};
			border-color: {theme="lk_form_border_disabled"};
		}

			.ipsCustomInput input[type="checkbox"]:checked:disabled + span:after {
				color: {theme="lk_form_font_disabled"};
			}

			.ipsCustomInput input[type="radio"]:checked:disabled + span:after {
				background-color: {theme="lk_form_font_disabled"};
			}

	/* Active styles */
	.ipsCustomInput input:not( :disabled ):active + span {
		border-color: {theme="lk_form_border_focus"};
		background: {theme="lk_form_bg_focus"};
		color: {theme="lk_form_font_focus"};
	}

	/* Checked styles */
	.ipsCustomInput input:checked + span {
		border-color: {theme="lk_form_border"};
		/*background: #385e8a;*/
	}

	.ipsCustomInput input[type="checkbox"]:checked + span:after {
		content: '\f00c';
		font-family: "FontAwesome";
		color: {theme="lk_form_checkbox_icon"};
		
		line-height: 1;
		text-align: center;
		font-size: 10px;
	}

	.ipsCustomInput input[type="radio"]:checked + span:after {
		width: 6px;
		height: 6px;
		display: block;
		content: '';
		border-radius: 8px;
		background: {theme="lk_form_radio_icon"};
	}

	.ipsCustomInput input {
		opacity: 0.000001;
		position: relative;
		z-index: 1;
		width: 15px;
		height: 15px;
		cursor: pointer;
		top: -2px;
	}

	html[dir="ltr"] .ipsCustomInput + label {
		margin-left: 3px;
	}
	html[dir="rtl"] .ipsCustomInput + label {
		margin-right: 3px;
	}

/* TRANSLATABLE */
.ipsField_translatable li {
	margin-bottom: 5px;
	position: relative;
}

.ipsField_translatable li span.ipsFlag {
	display: inline-block;
	position: absolute;
	top: 9px;
}
html[dir="ltr"] .ipsField_translatable li span.ipsFlag {
	left: 8px;
}
html[dir="rtl"] .ipsField_translatable li span.ipsFlag {
	right: 8px;
}

	.ipsField_translatable li p.ipsFlagEditor span.ipsFlag{
		top: 4px;
	}

html[dir="ltr"] .ipsField_translatable li .ipsFlag + input[type="text"],
html[dir="ltr"] .ipsField_translatable li .ipsFlag + input[type="password"] {
	padding-left: 30px;
}
html[dir="rtl"] .ipsField_translatable li .ipsFlag + input[type="text"],
html[dir="rtl"] .ipsField_translatable li .ipsFlag + input[type="password"] {
	padding-right: 30px;
}

.ipsField_translatable li .ipsFlag + span.ipsFlagLabel {
	font-weight: bold;
}
html[dir="ltr"] .ipsField_translatable li .ipsFlag + span.ipsFlagLabel {
	margin-left: 30px;
}
html[dir="rtl"] .ipsField_translatable li .ipsFlag + span.ipsFlagLabel {
	margin-right: 30px;
}

/* STACK */
.ipsFieldRow:not( .ipsFieldRow_fullWidth ) .ipsField_stack { 
	max-width: 350px;
}

.ipsField_stackItem {
	margin-bottom: 5px;
	position: relative;
	padding-left: 32px;
}

.ipsField_stackItem .ipsField_stackDrag,
.ipsField_stackItem .ipsField_stackDelete {
	position: absolute;
	width: 32px;
	height: 32px;
	line-height: 34px;
	top: 0;
	text-align: center;
}

html[dir="ltr"] .ipsField_stackItem .ipsField_stackDrag {
	left: 0;
}
html[dir="rtl"] .ipsField_stackItem .ipsField_stackDrag {
	right: 0;
}

	.ipsField_stackItem .ipsDrag_dragHandle {
		opacity: 0.2;
	}

.ipsField_stackItem .ipsField_stackDelete {
	background: #323232;
	color: #fff;
	width: 19px;
	height: 19px;
	border-radius: 19px;
	line-height: 17px;
	top: 5px;
}

html[dir="ltr"] .ipsField_stackDelete {
	right: 0;
}
html[dir="rtl"] .ipsField_stackDelete {
	left: 0;
}

.ipsField_stackItem input[type="text"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="url"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="tel"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="email"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="number"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="search"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="password"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="datetime"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="datetime-local"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="date"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="week"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="month"]:not(.ipsField_stackItemNoMargin),
.ipsField_stackItem input[type="time"]:not(.ipsField_stackItemNoMargin) {
	margin-left: -32px;
	padding-left: 32px;
}
	
	html[dir="ltr"] .ipsField_stackItem input[type="button"],
	html[dir="ltr"] .ipsField_stackItem input[type="checkbox"],
	html[dir="ltr"] .ipsField_stackItem input[type="color"],
	html[dir="ltr"] .ipsField_stackItem input[type="file"],
	html[dir="ltr"] .ipsField_stackItem input[type="radio"],
	html[dir="ltr"] .ipsField_stackItem input[type="range"],
	html[dir="ltr"] .ipsField_stackItem input[type="submit"],
	html[dir="ltr"] .ipsField_stackItem select,
	html[dir="ltr"] .ipsField_stackItem textarea {
		margin-left: 36px;
	}
	html[dir="rtl"] .ipsField_stackItem input[type="button"],
	html[dir="rtl"] .ipsField_stackItem input[type="checkbox"],
	html[dir="rtl"] .ipsField_stackItem input[type="color"],
	html[dir="rtl"] .ipsField_stackItem input[type="file"],
	html[dir="rtl"] .ipsField_stackItem input[type="radio"],
	html[dir="rtl"] .ipsField_stackItem input[type="range"],
	html[dir="rtl"] .ipsField_stackItem input[type="submit"],
	html[dir="rtl"] .ipsField_stackItem select,
	html[dir="rtl"] .ipsField_stackItem textarea {
		margin-right: 36px;
	}

	/* Key value pairs */
	html[dir="ltr"] .ipsField_stackItem_keyValue span input[type="text"] {
		margin-left: 0px;
		padding-left: 6px;
	}
	html[dir="rtl"] .ipsField_stackItem_keyValue span input[type="text"] {
		margin-right: 0px;
		padding-right: 6px;
	}
	
	.ipsField_stackItem_keyValue
	{
		padding-top: 8px;
	}
	html[dir="ltr"] .ipsField_stackItem_keyValue
	{
		margin-left: 36px;
	}
	html[dir="rtl"] .ipsField_stackItem_keyValue
	{
		margin-right: 36px;
	}
	
/* ATTACHMENTS */
.ipsField_uploader {
	border: 1px solid {theme="lk_form_border"};
	border-bottom: 1px solid {theme="lk_form_border"};
	background: {theme="lk_form_bg"};
	padding: 15px;
	text-shadow: 0px 1px 0px #fff;
	position: relative;
}

	.ipsField_uploader .ipsField_uploader_icon {
		font-size: 36px;
		vertical-align: middle;
		transition: all {theme="lk_transition"}ms ease;
	}
	html[dir="ltr"] .ipsField_uploader .ipsField_uploader_icon {
		margin-right: 10px;
		float: left;
	}
	html[dir="rtl"] .ipsField_uploader .ipsField_uploader_icon {
		margin-left: 10px;
		float: right;
	}

		.ipsField_uploader:hover .ipsField_uploader_icon {
			transform: scale(1.3);
		}

	.ipsField_uploader .ipsField_uploader_msg span {
		font-size: 14px;
		font-weight: bold;
		display: block;
	}

		.ipsField_uploader .ipsField_uploader_msg span + span {
			opacity: 0.7;
			font-weight: normal;
			font-size: 12px;
		}

.ipsAttachments_list {
	border: 1px solid {theme="lk_form_border"};
}

	.ipsAttachments_list > li {
		padding: 15px;
		background: {theme="lk_form_bg"};
		border-bottom: 1px solid {theme="lk_form_border"};
	}

		.ipsAttachments_list > li:last-child {
			border-bottom: 0;
		}

.ipsAttachment_name {
	font-weight: bold;
}

.ipsAttachment_size {
	opacity: 0.7;
	font-size: 12px;
}

.ipsAttachments_tools {
	opacity: 0;
	transition: all {theme="lk_transition"}ms ease;
}

	.ipsAttachments_list > li:hover .ipsAttachments_tools {
		opacity: 0.4;
	}

	.ipsAttachments_list > li .ipsAttachments_tools:hover {
		opacity: 1;
	}

.ipsAttachment_progress {
	border: 1px solid {theme="lk_form_border"};
	height: 12px;
	border-radius: 10px;
	width: 150px;
	display: inline-block;
	background: {theme="lk_form_bg"};
}

	.ipsAttachment_progress > span {
		background: #151515;
		width: 0%;
		display: block;
		height: 10px;
		border-radius: 10px;
	}

	.ipsImageAttach .ipsAttachment_progress {
		width: 70%;
		position: absolute;
		top: 45%;
	}
	html[dir="ltr"] .ipsImageAttach .ipsAttachment_progress {
		margin-left: -35%;
		left: 50%;
	}
	html[dir="rtl"] .ipsImageAttach .ipsAttachment_progress {
		margin-right: -35%;
		right: 50%;
	}

.ipsField_uploader + .ipsAttachments_list {
	border-top: 0;
}
html[dir="ltr"] .ipsField_uploader + .ipsAttachments_list {
	margin-left: 10px;
}
html[dir="rtl"] .ipsField_uploader + .ipsAttachments_list {
	margin-right: 10px;
}

.ipsAttachment_supportDrag {
	display: none;
}

/* AUTOCOMPLETE TOKENS */
.cToken {
	height: 22px;
	line-height: 22px;
	background: {theme="lk_form_token_bg"};
	{{if theme.lk_form_token_gradient_enable}}
		background-color: {theme="lk_form_token_gradient_b"};
		background-image: linear-gradient(to right, {theme="lk_form_token_gradient_a"}, {theme="lk_form_token_gradient_b"});
	{{endif}}
	color: {theme="lk_form_token_font"};
	display: inline-block;
	font-size: 12px;
	border-radius: 12px;
	padding: 0 10px;
	cursor: pointer;
	margin: 1px 5px 1px 0 !important;
	max-width: 100%;
	overflow: hidden;
}
html[dir="rtl"] .cToken {
	margin: 1px 0 1px 5px !important;
}

.cToken.cToken_selected {
	filter: brightness(1.1) saturate(1.05);
}

/* CONTENTITEM */
ul.ipsContentItemSelector li {
	margin-top: 10px;
}

ul.ipsContentItemSelector li:first-child {
	margin-top: 5px;
}

ul.ipsContentItemSelector li div[data-role="contentItemRow"]
{
	padding-left: 5px;
}

.cContentItem_delete {
	height: 18px;
	line-height: 18px;
	background: #385e8a;
	color: #fff;
	display: inline-block;
	font-size: 13px;
	border-radius: 12px;
	padding: 0 10px;
	cursor: pointer;
	margin: 1px 5px 1px 0 !important;
	float: left;
}

/* SELECT TREE */
.ipsSelectTree {
	min-height: 32px;
	border: 1px solid {theme="lk_form_border"};
	width: 100%;
	max-width: 350px;
	border-radius: {theme="lk_form_border_radius"}px;
	padding: {theme="lk_form_padding"};
	padding-rignt: 25px;
	position: relative;
	background: {theme="lk_form_bg"};
	cursor: pointer;
	margin-bottom: 5px;
}
html[dir="rtl"] .ipsSelectTree {
	padding: {theme="lk_form_padding"};
	padding-left: 25px;
}
	
	.ipsSelectTree.ipsSelectTree_disabled, .ipsSelectTree.ipsSelectTree_disabled .ipsSelectTree_expand {
		opacity: 0.6;
		pointer-events: none;
	}

	.ipsSelectTree_active {
		border-bottom: 0;
		border-radius: {theme="lk_form_border_radius"}px {theme="lk_form_border_radius"}px 0 0;
		background: {theme="lk_form_bg_focus"};
		color: {theme="lk_form_font_focus"};
		border-color: {theme="lk_form_border_focus"};
	}	

	.ipsSelectTree_expand {
		position: absolute;
		top: -1px;
		bottom: -1px;
		line-height: 1;
		border-radius: 0 {theme="lk_form_border_radius"}px {theme="lk_form_border_radius"}px 0;
		width: 30px;
		text-align: center;
		color: {theme="lk_form_font"};
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.ipsSelectTree_expand:not(:hover) {
		opacity: 0.7;
	}
	html[dir="ltr"] .ipsSelectTree_expand {
		right: -1px;
	}
	html[dir="rtl"] .ipsSelectTree_expand {
		left: -1px;
	}
		
	.ipsSelectTree [data-role="tokenList"] li {
		line-height: 1;
	}
	html[dir="ltr"] .ipsSelectTree [data-role="tokenList"] li {
		margin-right: 5px;
	}
	html[dir="rtl"] .ipsSelectTree [data-role="tokenList"] li {
		margin-left: 5px;
	}

		.ipsSelectTree [data-role="tokenList"] .cToken {
			background: {theme="lk_form_token_bg"};
			{{if theme.lk_form_token_gradient_enable}}
				background-color: {theme="lk_form_token_gradient_b"};
				background-image: linear-gradient(to right, {theme="lk_form_token_gradient_a"}, {theme="lk_form_token_gradient_b"});
			{{endif}}
			color: {theme="normal_button_font"};
			margin-bottom: 4px;
		}

.ipsSelectTree_nodes {
	position: absolute;
	top: 100%;
	margin: -4px 0 0 -1px;
	max-width: 500px;
	border: 1px solid {theme="lk_form_border"};
	border-top: 0;
	border-bottom-right-radius: {theme="lk_form_border_radius"}px;
	border-bottom-left-radius: {theme="lk_form_border_radius"}px;
	padding: {theme="lk_form_padding"};
	background: {theme="lk_form_bg"};
	color: {theme="lk_form_font"};
}
.ipsSelectTree_active .ipsSelectTree_nodes {
	background: {theme="lk_form_bg_focus"};
	color: {theme="lk_form_font_focus"};
	border-color: {theme="lk_form_border_focus"};
}
html[dir="rtl"] .ipsSelectTree_nodes {
	margin: -4px -1px 0 0;
}
	
	.ipsSelectTree_nodes [data-role="nodeList"] {
		background: {theme="lk_form_bg_focus"};
		border: 0;
		max-height: 300px;
		overflow: auto;
	}
	
	.ipsSelectTree_nodes [data-role="nodeList"] .ipsTabs_panel {
		min-height: 264px;
	}

		.ipsSelectTree_nodes [data-role="nodeList"] li {
			position: relative;
			border-bottom: 1px solid {hextorgb="lk_seperator" opacity=".07"};
		}	

			.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item {
				padding: 7px 25px 7px 22px;
			}
			html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item {
				padding: 7px 22px 7px 25px;
			}

				.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_withChildren {
					padding: 7px 4px;
				}

				.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):not( .ipsSelectTree_selected ):hover {
					background: {theme="lk_treeitem_bg_hover"};
					color: {theme="lk_treeitem_font_hover"};
				}

					.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ).ipsSelectTree_selected:hover {
						filter: brightness(1.1) saturate(1.05);
					}

			.ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"] {
				border-top: 1px solid {hextorgb="lk_seperator" opacity=".07"};
			}
			html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"] {
				margin-left: 15px;
				border-left: 1px dotted {hextorgb="lk_seperator" opacity=".15"};
			}
			html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"] {
				margin-right: 15px;
				border-right: 1px dotted {hextorgb="lk_seperator" opacity=".15"};
			}

			.ipsSelectTree_nodes [data-role="nodeList"] li:last-child {
				border: 0;
			}

			.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle {
				width: 16px;
				height: 19px;
				display: inline-block;
				color: inherit;
				position: relative;
				vertical-align: middle;
				float: left;
			}
			html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle {
				float: right;
			}

				.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle + [data-role="nodeTitle"] {
					display: block;
				}
				html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle + [data-role="nodeTitle"] {
					margin-left: 20px;
				}
				html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle + [data-role="nodeTitle"] {
					margin-right: 20px;
				}

				.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item > .ipsSelectTree_toggle:before {
					text-align: center;
					font-size: 11px;
					display: block;
					width: 20px;
					height: 19px;
					position: absolute;
					top: 0;
					content: '\f04b';
					font-family: 'FontAwesome';
				}
				html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item > .ipsSelectTree_toggle:before {
					left: 0;
				}
				html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item > .ipsSelectTree_toggle:before {
					right: 0;
				}

					.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_itemOpen > .ipsSelectTree_toggle:before {
						transform: rotate(90deg);
					}
					html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_itemOpen > .ipsSelectTree_toggle:before {
						left: -2px;
					}
					html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_itemOpen > .ipsSelectTree_toggle:before {
						right: -2px;
					}

		.ipsSelectTree_nodes [data-role="nodeList"] .ipsTabs li {
			border-bottom: 0;
		}

.ipsSelectTree_selected {
	{{if !theme.lk_treeitem_active_gradient_enable}}
    background: {theme="lk_treeitem_active_bg"};
	{{else}}
		background-color: {theme="lk_treeitem_active_gradient_b"};
		background-image: linear-gradient(to right, {theme="lk_treeitem_active_gradient_a"}, {theme="lk_treeitem_active_gradient_b"});
	{{endif}}
	color: {theme="lk_treeitem_active_font"};
	border-radius: 5px;
}
	
	.ipsSelectTree_selected:after {
		content: '\f00c';
		font-family: 'FontAwesome';
		position: absolute;
		top: 7px;
		color: inherit;
	}
	html[dir="ltr"] .ipsSelectTree_selected:after {
		right: 7px;
	}
	html[dir="rtl"] .ipsSelectTree_selected:after {
		left: 7px;
	}

.ipsSelectTree_itemDisabled > [data-role="nodeTitle"] {
	color: {hextorgb="lk_form_font" opacity=".6"};
	cursor: default;
}

.ipsSelectTree_placeholder {
	color: {theme="lk_form_font_placeholder"};
}

.ipsSelectTree_search {
	margin-top: 7px;
	position: relative;
}

	.ipsApp .ipsSelectTree_search input {
		border: 1px solid {theme="lk_form_border"};
		font-size: 12px;
	}
	html[dir="ltr"] .ipsApp .ipsSelectTree_search input {
		padding-left: 26px;
	}
	html[dir="rtl"] .ipsApp .ipsSelectTree_search input {
		padding-right: 26px;
	}

	.ipsSelectTree_search:after {
		content: '\f002';
		font-family: "FontAwesome";
		position: absolute;
		top: 7px;
	}
	html[dir="ltr"] .ipsSelectTree_search:after {
		left: 7px;
	}
	html[dir="rtl"] .ipsSelectTree_search:after {
		right: 7px;
	}

/* HIDDEN LABELS */
.ipsForm_noLabels .ipsFieldRow_label, .ipsForm_noLabels .ipsFieldRow_title,
.ipsForm_noLabels .ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_label, .ipsForm_noLabels .ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_title {
	display: none;
}

input.ipsField_vle {
	color: black;
	font-weight: normal;
}

/* RECAPTCHA RTL FIX */
/* Recaptcha appears to not support RTL properly, so we'll force it to LTR mode */
html[dir="rtl"] #recaptcha_table:not( .recaptcha_theme_clean ) {
	direction: ltr !important;
}

/* IE11 CKE Source fix */
_:-ms-input-placeholder, :root .cke_source {
	min-width: 100% !important;
}

.ipsForm_meter {
	max-width: 350px;
	width: 100%;
	height: 7px;
	display: block;
	margin-top: 7px;
	border-radius: {theme="lk_form_border_radius"}px;
}

.ipsForm_meterAdvice {
	font-size: 10px;
	font-weight: bold;
	display: block;
}

	.ipsForm_meter[data-adviceValue="1"] + .ipsForm_meterAdvice { color: #C62828;}
	.ipsForm_meter[data-adviceValue="2"] + .ipsForm_meterAdvice { color: #D84315;}
	.ipsForm_meter[data-adviceValue="3"] + .ipsForm_meterAdvice { color: #FF8F00;}
	.ipsForm_meter[data-adviceValue="4"] + .ipsForm_meterAdvice { color: #9E9D24;}
	.ipsForm_meter[data-adviceValue="5"] + .ipsForm_meterAdvice { color: #2E7D32;}

.ipsForm_meter::-webkit-meter-bar {
	background: none;
	border-radius: {theme="lk_form_border_radius"}px;
	background-color: {theme="lk_form_bg"};
	border: 1px solid {theme="lk_form_border"};
}

/* Webkit based browsers */
.ipsForm_meter[data-adviceValue="1"]::-webkit-meter-optimum-value { background: #C62828; }
.ipsForm_meter[data-adviceValue="2"]::-webkit-meter-optimum-value { background: #D84315; }
.ipsForm_meter[data-adviceValue="3"]::-webkit-meter-optimum-value { background: #FF8F00; }
.ipsForm_meter[data-adviceValue="4"]::-webkit-meter-optimum-value { background: #9E9D24; }
.ipsForm_meter[data-adviceValue="5"]::-webkit-meter-optimum-value { background: #2E7D32; }

/* Gecko based browsers */
.ipsForm_meter[data-adviceValue="1"]::-moz-meter-bar { background: #C62828; }
.ipsForm_meter[data-adviceValue="2"]::-moz-meter-bar { background: #D84315; }
.ipsForm_meter[data-adviceValue="3"]::-moz-meter-bar { background: #FF8F00; }
.ipsForm_meter[data-adviceValue="4"]::-moz-meter-bar { background: #9E9D24; }
.ipsForm_meter[data-adviceValue="5"]::-moz-meter-bar { background: #2E7D32; }


/* Cropper tool */
[data-role="cropper"] {
	margin: 0 auto;
	max-width: 100%;
}

.ipsForm_cropper {
	max-width: 100%;
}

.ipsForm_cropper > img {
	max-width: 100%;
}

/* Just a little thing to make the Google address field autocomplete have
	a higher z-index because otherwise it's hidden behind modals */
.pac-container {
	z-index: 100000;
}

/*!
 * Cropper v0.8.0
 * https://github.com/fengyuanchen/cropper
 *
 * Copyright 2014-2015 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2015-02-19T06:49:29.144Z
 */

 

 

Удали этот кусок
  

/* Cropper tool */
[data-role="cropper"] {
	margin: 0 auto;
	max-width: 100%;
}

.ipsForm_cropper {
	max-width: 100%;
}

.ipsForm_cropper > img {
	max-width: 100%;
}

/* Just a little thing to make the Google address field autocomplete have
	a higher z-index because otherwise it's hidden behind modals */
.pac-container {
	z-index: 100000;
}

/*!
 * Cropper v0.8.0
 * https://github.com/fengyuanchen/cropper
 *
 * Copyright 2014-2015 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2015-02-19T06:49:29.144Z
 */.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.cropper-container img{display:block;width:100%;min-width:0!important;max-width:none!important;height:100%;min-height:0!important;max-height:none!important}.cropper-canvas,.cropper-modal{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-canvas{background-color:#fff;filter:alpha(opacity=0);opacity:0}.cropper-modal{background-color:#000;filter:alpha(opacity=50);opacity:.5}.cropper-cropbox{position:absolute;top:10%;left:10%;width:80%;height:80%}.cropper-viewer{display:block;width:100%;height:100%;overflow:hidden;outline:#69f solid 1px;outline-color:rgba(102,153,255,.75)}.cropper-dashed{position:absolute;display:block;filter:alpha(opacity=50);border:0 dashed #fff;opacity:.5}.cropper-dashed.dashed-h{top:33.33333333%;left:0;width:100%;height:33.33333333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333333%;width:33.33333333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-face,.cropper-line,.cropper-point{position:absolute;display:block;width:100%;height:100%;filter:alpha(opacity=10);opacity:.1}.cropper-face{top:0;left:0;cursor:move;background-color:#fff}.cropper-line{background-color:#69f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;background-color:#69f;filter:alpha(opacity=75);opacity:.75}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;filter:alpha(opacity=100);opacity:1}.cropper-point.point-se:before{position:absolute;right:-50%;bottom:-50%;display:block;width:200%;height:200%;content:" ";background-color:#69f;filter:alpha(opacity=0);opacity:0}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;filter:alpha(opacity=75);opacity:.75}}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-invisible{filter:alpha(opacity=0);opacity:0}.cropper-hide{position:fixed;top:0;left:0;z-index:-1;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;filter:alpha(opacity=0);opacity:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-canvas,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

 

Edited by Maiden8
Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Maiden8 вот я тормознутый, там нужно было переключить скин с визуального редактора на продвинутый, поэтому я ничего не находил самостоятельно

Если выпилить весь код или вот этот кусок: 

 */.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select (и так далее)

получается вот так:
chrome_BbyAGhyQEL.thumb.png.b2a2d9fb05640570ada2979715461c15.png

 

Но зато обрезки по ходу нет :D Ща ещё покурю ту длинную строчку, может смогу просто выпилить точки не сбив при этом ничего

Всё, выпилил, сам код кроппера в строчке 

*/.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select (и так далее)

заменить на: 

*/.cropper-container {
	position: relative;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none
}

.cropper-container img {
	display: block;
	width: 100%;
	min-width: 0!important;
	max-width: none!important;
	height: 100%;
	min-height: 0!important;
	max-height: none!important
}

.cropper-canvas,
.cropper-modal {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.cropper-canvas {
	background-color: #fff;
	filter: alpha(opacity=0);
	opacity: 0
}

.cropper-modal {
	background-color: #000;
	filter: alpha(opacity=50);
	opacity: .5
}



@media (min-width:768px) {
	.cropper-point.point-se {
		width: 15px;
		height: 15px
	}
}

@media (min-width:992px) {
	.cropper-point.point-se {
		width: 10px;
		height: 10px
	}
}

@media (min-width:1200px) {
	.cropper-point.point-se {
		width: 5px;
		height: 5px;
		filter: alpha(opacity=75);
		opacity: .75
	}
}

.cropper-bg {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)
}

.cropper-invisible {
	filter: alpha(opacity=0);
	opacity: 0
}

.cropper-hide {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: auto!important;
	max-width: none!important;
	height: auto!important;
	max-height: none!important;
	filter: alpha(opacity=0);
	opacity: 0
}

.cropper-hidden {
	display: none!important
}

.cropper-move {
	cursor: move
}

.cropper-crop {
	cursor: crosshair
}

.cropper-disabled .cropper-canvas,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
	cursor: not-allowed
}

Результат:

chrome_MhGnS7cnkX.thumb.png.309e4c5442e6211eb03c04aab73f6cde.png

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Далее нужно следовать вот этой инструкции:

Спойлер
Цитата

Откройте АЦ - Внешний вид - Ваш шаблон - Редактировать HTML и CSS - postContainer

Найти: 



<li class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			</li>

Заменить на: 



<li class='cAuthorPane_photo'>
                {{if $comment->author()->pp_main_photo}}<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><span class='ipsUserPhoto ipsUserPhoto_variable'><img src="{setting="base_url"}uploads/{$comment->author()->pp_main_photo}" /></span></a>{{else}}<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><img src="Default Image Url" /></a>{{endif}}
          </li>

Где не забудьте заменить  



<img src="Default Image Url" />

На ссылку с аватаром по умолчанию, который будет отображаться всем пользователям, у которых нет аватара.

Далее пройдите во вкладку CSS и найдите misc.css

Найти: 



.ipsUserPhoto_xlarge img, img.ipsUserPhoto_xlarge, .ipsUserPhoto_xlarge:after {
		width: 120px;
		height: 120px;
		{{if theme.rounded_photos}}
			border-radius: 60px;
		{{endif}}
	}

Добавить после: 



.ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after {
		width: 150px;
		{{if theme.rounded_photos}}
			border-radius: 0px;
		{{endif}}
	}

 

 

 

И финальный результат:

chrome_kJxU6jBb6D.png.5b6f27959fe052654f7fc000c1de4fa8.png

 

Ура, ура, ура!

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Maiden8 кстати, а можно как-то вернуть упрощённый редактор тем? Я конвертировал тему в продвинутый и теперь упрощённого редактора нетchrome_Brc8oEZWm7.png.31e1cd5ce087abfbcc8da543af092fec.png

 

Стиль теперь также не отмечается возможностью упрощённого редактирования:

chrome_SOcnLsl8Ff.png.2ecffcc15d63a373c0e48b6dc133198c.png

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted
2 минуты назад, Maiden8 сказал:

И где ты это замутил? Давай поищем.

Да вот тут кнопка была:

chrome_d4VJsgniWy.png.61c18f67dfbe52007dc116897b1f7094.png

Без продвинутого режима я не мог попасть в forms.css. В упрощённом режиме его вообще не было

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted
5 минут назад, Maiden8 сказал:

А обратно там же никак?

Неа, на конвертированном стиле теперь вот так:

chrome_Brc8oEZWm7.png.2c14506e3ea44909ce460676273f8b39.png

 

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

По поводу обрезки в загрузчике автаарок, как оказалось её выпиливать не обязательно т.к. с настройкой из вот этого поста 


Всё работает и так, обрезка влияет только на миниатюру в профиле, превью на форуме и т.д. и т.п.

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Так, нашел баг - как только меняется вот эта часть  

<li class='cAuthorPane_photo'> {
	{
		if $comment->author()->pp_main_photo
	}
}

<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><span class='ipsUserPhoto ipsUserPhoto_variable'><img src="{setting="base_url"}uploads/{$comment->author()->pp_main_photo}" /></span></a> {
	{
		else
	}
}

<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><img src="Default Image Url" /></a> {
	{
		endif
	}
}

</li>

При клике по профилю пользователя перекидывает на главную форума, т.к. страница ломается и выглядит вот так:

chrome_SrWn9jfKPi.png.c20bd188fc85ceca2dc85cf3b90f1efb.png

 

Вместо оригинального линка:

chrome_EptrbP6HrM.png.feca59e3b0bceef66e153aa6e2b4ce81.png

 

Есть идеи как пофиксить это?

Link to comment
Share on other sites
Shamisen Apprentice

Shamisen

Posted
  • Author
Posted

Эм, код при вставке сломался, т.к. нельзя отредактировать продублирую. Оригинальный код:
  

<li class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			</li>

Код который делает размер аватаров согласно их соотношению сторон и размеру: 

<li class='cAuthorPane_photo'>
                {{if $comment->author()->pp_main_photo}}<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><span class='ipsUserPhoto ipsUserPhoto_variable'><img src="{setting="base_url"}uploads/{$comment->author()->pp_main_photo}" /></span></a>{{else}}<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><img src="Default Image Url" /></a>{{endif}}
          </li>

 

Совершенно не понимаю что там нужно переделать чтобы ссылни на профиль по клику на автар опять ожили

Дополнение - в мобильной версии код не сломан, только когда начинает отображаться аватар в ПК версии

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...