Перейти к содержанию

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

Shamisen
 Поделиться

Рекомендуемые сообщения

Shamisen Ученик

Shamisen

Опубликовано
Опубликовано

Итак, интересуют размера аватарок как тут - 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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

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

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

 

Ссылка на комментарий
Поделиться на другие сайты
Maiden8 Опытный

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

 

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано
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 это настраивалось легчайше :(

Ссылка на комментарий
Поделиться на другие сайты
Zero108 Мастер

Zero108

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
PaddingtonBaby Помощник

PaddingtonBaby

Опубликовано
Опубликовано

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

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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано
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

 

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

chrome_okljAoOJfq.thumb.png.9145d9d6c3b41493bd9669ce5da2c169.png

 

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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

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

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

Ссылка на комментарий
Поделиться на другие сайты
Maiden8 Опытный

Maiden8

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

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

chrome_n3i28Kddls.png.74fd2bfadc235aad27f13c3fdcb8f871.png

 

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

chrome_a6EVSBhgpa.png.18f4f049045722abecc28fbe5ca6ee82.png

 

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

Ссылка на комментарий
Поделиться на другие сайты
Maiden8 Опытный

Maiden8

Опубликовано
Опубликовано (изменено)

 

Спойлер

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}

 

Изменено пользователем Maiden8
Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

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

Откройте АЦ - Внешний вид - Ваш шаблон - Редактировать 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

 

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

Ссылка на комментарий
Поделиться на другие сайты
Maiden8 Опытный

Maiden8

Опубликовано
Опубликовано

Слушай Shamisen молодец, уже начал делать, спасибо.

Лайки закончились, завтра накидаю.

Ссылка на комментарий
Поделиться на другие сайты
Maiden8 Опытный

Maiden8

Опубликовано
Опубликовано

Все супер, спасибо еще раз, кайфовая фишка.

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

 

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

chrome_SOcnLsl8Ff.png.2ecffcc15d63a373c0e48b6dc133198c.png

Ссылка на комментарий
Поделиться на другие сайты
Maiden8 Опытный

Maiden8

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано
2 минуты назад, Maiden8 сказал:

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

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

chrome_d4VJsgniWy.png.61c18f67dfbe52007dc116897b1f7094.png

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

Ссылка на комментарий
Поделиться на другие сайты
Maiden8 Опытный

Maiden8

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано
5 минут назад, Maiden8 сказал:

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

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

chrome_Brc8oEZWm7.png.2c14506e3ea44909ce460676273f8b39.png

 

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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


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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

<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

 

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

Ссылка на комментарий
Поделиться на другие сайты
Shamisen Ученик

Shamisen

Опубликовано
  • Автор
Опубликовано

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

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

 

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

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

Ссылка на комментарий
Поделиться на другие сайты
Maiden8 Опытный

Maiden8

Опубликовано
Опубликовано

Да не всплывает окошко

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

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

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...