/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
//
// Portal - Edit Inline WS
// --------------------------------------------------
.UIEditInlineWS { // Nav Top: Edit > Page > Add Page
	.EdittingContainer {
		padding: 3px;
	}
	.NormalContainerBlock {
		.border-radius(5px);
		border: 1px dashed @borderColor;
		padding: 2px;
	}

	.OverContainerBlock {
		border: 1px solid @primaryColorLighter;
		background: @baseBackground;
		height: 100%;
		padding: 2px;
		.border-radius(5px);
		border-top-left-radius: 2px;
	}

	.EdittingContainer .UIRowContainer {
		min-height: 100px;
        text-align: center;
	}
	.DragAndDropPreview {
		width: auto; height: 80px;
		background: url('@{images-path}/Container/DragAndDropPreview4x4.gif');
		border: 1px solid @borderColor;
		margin: 0px 12px 10px 12px;
	}
	.UIPageBodyMask {
		opacity: 0;
		filter: alpha(opacity=0);
		background: @baseBackground;
		cursor:move;
	}
	.EDITION-BLOCK {
		.CONTROL-BLOCK {
	    background: @primaryColorLighter;
	    border-bottom-left-radius: 5px;
	    border-bottom-right-radius: 5px;
	    color: @btnPrimaryColor;
	    height: 20px;
	    left: -3px;
	    padding: 5px 10px 5px 5px;
	    position: absolute;
	    top: -3px;
	    white-space: nowrap;
	    .uiIconDragDrop + .tooltip .tooltip-inner{
	    	white-space: normal;
	    }
	    > span {
	    	margin: 0 8px 0 2px;
	    }
	    .dropdown-menu {
			.border-radius(@baseBorderRadius);
				&.dropdown-menu:after {
			    border-bottom: 6px solid @baseBackground;
			    border-left: 6px solid transparent;
			    border-right: 6px solid transparent;
			    content: "";
			    display: inline-block;
			    left: 10px;
			    position: absolute;
			    top: -6px;
				}
				&:before {
			    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
			    border-left: 7px solid transparent;
			    border-right: 7px solid transparent;
			    content: "";
			    display: inline-block;
			    left: 9px;
			    position: absolute;
			    top: -7px;
				}
			}
		}
		.NewLayer {
			background: none;
            &.Disabled {
                background: #ffffff;
            }
		}
	}

	.uiTabContainer {
		.tab-pane {
			padding: 2px;
		}
	}

	/*---------- Portlet ----------*/
	.UIPortlet {

		.LAYOUT-PORTLET {
			padding: 4px;
		}

		.portletLayoutDecorator {
			background: @baseBackground;
			border: 1px solid @borderColor;
			box-shadow: 0px 1px 3px rgba(35,44,48,0.2);
			.border-radius(3px);
			min-height: 85px;
			padding: 5px 10px;
			text-align: center;
		}

		.portletLayoutDecoratorHover {
			background: @primaryBackgroundLight;
			border: 1px solid @primaryColorLighter;
			.border-radius(3px);
			border-top-left-radius: 0px;
			min-height: 85px;
			padding: 5px 10px;
			text-align: center;
		}

	}

	/*---------- uiContainerList ----------*/
	.uiContainerList {
		[class*="ContainerLayout"] {
			background: url("@{images-path}/Container/Container.png") no-repeat center;
			padding-left: 95px;
			font-weight:bold;
			margin-top: 3px;
		}
		.OneRowContainerLayout {
			background-position: 5px top;
			height: 41px;
		}
		.TwoRowContainerLayout {
			background-position: 5px -41px;
			height: 41px;
		}
		.ThreeRowContainerLayout {
			background-position: 5px -82px;
			height: 41px;
		}
    .PluginContainerLayout {
      background-position: 5px -401px;
      height: 41px;
    }
    .PluginColumnContainerLayout {
      background-position: 5px -401px;
      height: 41px;
    }
		.TwoColumnContainerLayout {
			background-position: 5px -154px;
			height: 31px;
		}
		.ThreeColumnContainerLayout {
			background-position: 5px -185px;
			height: 31px;
		}
		.TwoTabContainerLayout {
			background-position: 5px -216px;
			height: 31px;
		}
		.ThreeTabContainerLayout {
			background-position: 5px -247px;
			height: 31px;
		}
		.TwoColumnOneRowContainerLayout {
			background-position: 5px -278px;
			height: 41px;
		}
		.OneRowTwoColumnContainerLayout {
			background-position: 5px -319px;
			height: 41px;
		}
		.OneRow2Column1RowContainerLayout {
			background-position: 5px -360px;
			height: 41px;
		}
	}

	/*---------- UIPageBody ----------*/
	.UIPageBody {
		.pageLayoutDecorator {
			background: url("@{images-path}/Container/PortalTexture.png") repeat center;
			min-height: 140px;
			border: 1px solid @primaryColorLighter;
			.box-shadow(0 2px 1px rgab(35,44,48,0.3));
			.border-radius(6px);
			margin: 2px;
			padding: 30px;
			text-align: center;
			overflow: hidden;
			.title {
				background: @primaryColorLighter;
				line-height: 33px;
				height: 33px;
				color: @baseBackground;
				float: left;
				font-weight: bold;
				font-size: 15px;
				letter-spacing: 1px;
			    margin: -6px -85px;
			    padding: 0 78px;
			    word-spacing: 6px;
				.box-shadow(0px 1px 3px rgba(35,44,48,0.2));
				.rotate(-29deg);
			}
		}
      .SelfDisabledChildrenEnabled {
        background: rgba(181, 182, 182, 0.4);
      }
	}
}

/*---------- UIPortletForm ----------*/
#tab-UIPortletForm{
	.tab-content {
		.uiItemSelector {
			padding: 0;
		}
	}
}

#tab-UIPortletForm .uiTabContent.resizable {overflow: auto; max-height: 300px; margin: -10px; }

/****************** Toggle Container *********************/

/*Note: we only want this to apply to the first SwitchingContianer and not nested ones.
 *      Ideally the markup for contianers would be more simple than this...           */
.UISwitchingContainer>.UIComponentBlock>div>div>.UISwitchingColumn>.TRContainer>.SwitchingContainer {
  display: table-cell;
}

.UISwitchingContainer.ToggledRow>.UIComponentBlock>div>div>.UISwitchingColumn>.TRContainer>.SwitchingContainer {
  display: block;
}
.UIEditInlineWS {
    .popupHeader [class^="uiIcon"] {
        margin-left: 6px!important;
    }
}
@media (max-width: 1024px) {
    #UIPageEditor,#UIPortalComposer,.uiDashboardPortlet .uiPopup   {
        float: right;
        width: 400px !important;
    }
}

@media (max-width: 767px) {
    #UIPageEditor ,#UIPortalComposer,.uiDashboardPortlet .uiPopup {
        .uiAction .btn {
            display: block;
            margin: 10px;
            max-width: 100%;
        }
    }
}
@media (max-width: 480px) {
    #UIPageEditor ,#UIPortalComposer,.uiDashboardPortlet .uiPopup {
        width: 70% !important;
    }

}
@media (max-width: 320px) {
    .UIEditInlineWS .uiContainerList [class*="ContainerLayout"] {
        color: transparent;
    }
}