Files
Umbraco-CMS/src/Umbraco.Web.UI.Client/src/less/main.less
2013-09-30 21:36:49 +02:00

375 lines
6.5 KiB
Plaintext

// Main
// -------------------------
// Utillity classes
// @Per not sure where to put this part
// -------------------------
.fill {
height: 100%;
min-height: 100%;
}
.shadow {
box-shadow: 3px 0px 7px #dbdbdb;
}
.umb-scrollable, .umb-auto-overflow {
overflow: auto;
}
.umb-abstract {
display: block;
margin-top: 0px;
margin-bottom: 15px;
font-size: 14px;
color: #b3b3b3
}
h5{
text-transform: uppercase;
color: #b3b3b3;
font-weight: bold;
font-size: 13px;
}
/* STYLES FOR SPECIFIC EDITOR COMPONENTS - for all property editors and other reusable editing components*/
/* content picker */
.umb-contentpicker-popover .search-holder {
padding: 10px;
}
/* CODEMIRROR DATATYPE */
div.umb-codeeditor {
border: 1px solid #e8e8e8;
}
div.umb-codeeditor .umb-el-wrap {
padding: 0px;
}
div.umb-codeeditor .umb-btn-toolbar {
padding: 0px;
margin: 0px;
border-bottom: #e8e8e8 1px solid;
background: #f7f7f7
}
/* MISC FORM ELEMENTS */
.umb-form-actions {
background: none;
border: none
}
.datepicker td.active,
.datepicker td span.active {
background: #f3762c !important;
}
.umb-datetime-picker div.info {
vertical-align: middle
}
.umb-userwidget img {
float: left;
margin-right: 15px;
}
.umb-userwidget small {
display: block
}
.popover-title {
display: none
}
/*BUTTONS */
.thumbnails > li.umb-plus-btn {
margin: 0 10px 10px 0
}
.umb-plus-btn a {
border: 2px dashed @grayLight;
width: 136px;
height: 136px;
line-height: 136px;
text-align: center;
font-size: 50px;
display: block;
color: @grayLight;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.umb-plus-btn a:hover {
border: 2px dashed @black;
color: @black
}
.umb-plus-btn i {
vertical-align: middle;
margin: auto
}
/* FORM GRID */
.umb-pane {
margin: 30px 20px;
}
.umb-control-group {
border-bottom: 1px solid @grayLighter;
padding-bottom: 30px;
margin-bottom: 25px !important;
}
.umb-pane > .umb-control-group:last-child {
border: none;
padding-bottom: 0 !important;
}
.umb-control-group .umb-el-wrap {
padding: 0
}
.umb-control-group label.control-label {
text-align: left
}
.umb-control-group label .help-block,
.umb-control-group label small {
font-size: 11px;
color: #a0a0a0;
line-height: 13px;
padding-top: 5px;
}
.umb-nolabel .controls {
margin-left: 0px;
}
.controls-row {
padding-top: 5px;
margin-left: 240px !important;
}
.controls-row label {
display: inline-block
}
.hidelabel .controls-row {
padding: 0px;
border: none;
margin: 0px !important;
}
.thumbnails .selected {
border-color: @black;
background: @black
}
/* DASHBOARD */
.dashboardHideLink {
display: none;
}
.dashboardWrapper {
position: relative
}
.dashboardWrapper h2 {
padding: 0px 0px 0px 45px
}
.dashboardWrapper h3 {
font-size: 14px;
font-weight: bold
}
.dashboardIcon {
position: absolute;
top: 2px;
left: 2px
}
/* NOTIFICATIONS */
.umb-notification ul {
list-style: none;
margin: 0;
padding-left: 100px;
padding-right: 20px;
position: relative;
}
.umb-notification li {
padding: 5px 30px 5px 20px;
text-shadow: none;
font-size: 12px;
margin: auto;
margin-top: 5px;
border: none;
border-radius: 5;
position: relative;
}
/* TABLE */
.umb-table {
table-layout: fixed;
word-wrap: break-word;
}
.umb-no-border {
border: none !important;
}
table thead a {
color: #333
}
/* UI interactions */
.umb-table tbody.ui-sortable tr
{
cursor:pointer;
}
.umb-table tbody.ui-sortable tr.ui-sortable-helper {
background-color: @sortableHelperBg;
border: none;
}
.umb-table tbody.ui-sortable tr.ui-sortable-helper td
{
border:none;
}
.umb-table tbody.ui-sortable tr.ui-sortable-placeholder {
background-color: @sortablePlaceholderBg;
border:none;
}
.umb-table tbody.ui-sortable tr.ui-sortable-placeholder td
{
height:5px;
padding:0px;
line-height:0px;
}
/* MEDIA PICKER */
.thumbnails > li.umb-thumbnail {
margin: 0 10px 10px 0;
position: relative;
}
.thumbnails > li.umb-thumbnail .umb-icons {
background: @grayDarker;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 17px 0
}
.thumbnails > li.umb-thumbnail .icon-crop {
position: absolute;
left: 10px;
top: 10px;
color: @white;
font-size: 14px
}
.thumbnails > li.umb-thumbnail .icon-remove {
position: absolute;
right: 10px;
top: 10px;
color: @white;
font-size: 14px
}
/* IMAGE CROPPER */
.umb-image-crop {
margin: 0 30px 25px 0;
padding: 0 0 30px 0;
width: 400px;
float: left
}
.umb-image-mask {
width: 399px;
height: 300px;
position: relative;
margin: 0 30px 0 0
}
.umb-image-mask:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5999;
opacity: .6;
filter: alpha(opacity=6);
-webkit-box-shadow: inset 0 0 0 40px white,inset 0 0 0 41px rgba(0,0,0,0.2),inset 0 0 20px 41px rgba(0,0,0,0.2);
box-shadow: inset 0 0 0 40px white,inset 0 0 0 41px rgba(0,0,0,0.2),inset 0 0 20px 41px rgba(0,0,0,0.2);
}
.umb-image-mask .icon-screenshot {
color: @white;
font-size: 30px;
position: absolute;
top: 125px;
left: 110px;
z-index: 1000;
}
.umb-image-mask .icon-circle {
color: #4285f4;
position: absolute;
top: 130px;
left: 115px;
z-index: 1;
font-size: 20px
}
.umb-crop-preview {
float: left;
width: 400px
}
.umb-image-controls {
width: 400px; /* Need to be set dynamic, accounding to the width of the current image */
}
.umb-image-controls .icon-minus {
float: left;
padding: 14px 10px 0 10px;
color: @inputBorder;
}
.umb-image-controls .icon-plus {
float: right;
text-align: left;
padding: 14px 10px 0 10px;
color: @inputBorder;
}
.umb-image-crop .range {
display: block;
-webkit-appearance: none;
background: @inputBorder;
height: 1px;
margin: 20px 0 0 0;
width: 82%;
float: left;
}
.umb-image-crop .range::-webkit-slider-thumb {
-webkit-appearance: none;
width:14px;
height:14px;
border:1px solid @inputBorder;
border-radius:2px;
content:"1";
background:#f2f2f2;
margin-top: -1px;
}