Jump to content

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

Shamisen
Shamisen
in Invision Community 4 Support

Featured Replies

Posted
comment_162692

Итак, интересуют размера аватарок как тут - 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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/
    Share on other sites
    • Author
    comment_162693

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

    .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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162693
    Share on other sites
    comment_162694

    У меня так

      

    @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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162694
    Share on other sites
    • Author
    comment_162695
    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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162695
    Share on other sites
    comment_162696

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162696
    Share on other sites
    comment_162697

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162697
    Share on other sites
    • Author
    comment_162699
    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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162699
    Share on other sites
    • Author
    comment_162704

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

    chrome_okljAoOJfq.thumb.png.9145d9d6c3b41493bd9669ce5da2c169.png

     

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162704
    Share on other sites
    • Author
    comment_162705

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

    <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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162705
    Share on other sites
    comment_162706

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162706
    Share on other sites
    • Author
    comment_162707

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

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

    chrome_n3i28Kddls.png.74fd2bfadc235aad27f13c3fdcb8f871.png

     

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

    chrome_a6EVSBhgpa.png.18f4f049045722abecc28fbe5ca6ee82.png

     

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162707
    Share on other sites
    comment_162708

     

    Спойлер

    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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162708
    Share on other sites
    • Author
    comment_162709

    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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162709
    Share on other sites
    • Author
    comment_162710

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

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

    Откройте АЦ - Внешний вид - Ваш шаблон - Редактировать 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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162710
    Share on other sites
    comment_162711

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162711
    Share on other sites
    comment_162712

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162712
    Share on other sites
    • Author
    comment_162713

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

     

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

    chrome_SOcnLsl8Ff.png.2ecffcc15d63a373c0e48b6dc133198c.png

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162713
    Share on other sites
    comment_162714

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162714
    Share on other sites
    • Author
    comment_162715
    2 минуты назад, Maiden8 сказал:

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

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

    chrome_d4VJsgniWy.png.61c18f67dfbe52007dc116897b1f7094.png

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162715
    Share on other sites
    comment_162716

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162716
    Share on other sites
    • Author
    comment_162717
    5 минут назад, Maiden8 сказал:

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

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

    chrome_Brc8oEZWm7.png.2c14506e3ea44909ce460676273f8b39.png

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162717
    Share on other sites
    • Author
    comment_162718

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


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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162718
    Share on other sites
    • Author
    comment_162724

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

    <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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162724
    Share on other sites
    • Author
    comment_162725

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

    <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
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162725
    Share on other sites
    comment_162726

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22254-proizvolnyj-razmer-avatarov/?&do=findComment&comment=162726
    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
    Ответить в этой теме...
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.