body { padding-bottom: 500px; } #loco-loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.85); z-index: 9999; text-align: center; img { display: inline-block; margin-bottom: 20px; } h1 { margin-bottom: 0; font-size: 18px; color: #4990E1; font-family: "Open Sans"; } } #admin_content_wrapper { // height: calc(100vh - 54px); // overflow: scroll; } #admin_content_body { background: #f3f3f3; padding: 0 !important; } #admin_content_body #page_content { /*max-width: calc(100vw - 390px);*/ margin: 0 0 0 1px; /*20px auto*/ &.desktop { width: 1080px; } &.tablet { width: 570px; } &.mobile { width: 315px; } } @import url('https://fonts.googleapis.com/css?family=Open+Sans'); header#admin_header, #admin_nav, #admin_subnav { font-family: 'Open Sans'; z-index: 999; } #admin_subnav { h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans'; } } #admin_subnav #admin_subnav_content #edit_block_content .mb_container input[type=text], #admin_subnav #admin_subnav_content #edit_block_content .mb_container select, #admin_subnav #admin_subnav_content #edit_block_content .mb_container .mb_fake option, #admin_subnav #admin_subnav_content #edit_block_content .mb_container option, #admin_subnav #admin_subnav_content #edit_block_content .mb_container .mb_placeholder span { font-family: 'Open Sans'; } #viewers input[type=checkbox] { position: relative; } #editors input[type=checkbox] { position: relative; } #admin_subnav .ui-tabs { padding: 0; } #admin_subnav .ui-tabs .ui-tabs-nav { width: 100%; } #admin_subnav .ui-tabs .ui-tabs-nav li { width: 32%; } #admin_subnav .ui-tabs .ui-tabs-nav .ui-tabs-anchor { display: block; padding: 0; width: 100%; text-align: center; } #admin_subnav .ui-tabs .ui-tabs-panel { padding: 0; } #admin_subnav .ui-tabs .ui-tabs-panel .ui-accordion-content { padding: 4px; } #admin_subnav { .subnav_tabs { padding: 0 !important; ul { padding: 0 !important; li { margin: 0; padding: 0; width: 33%; a { font-size: 10px; } } } } ul.edit_selector { width: 270px; list-style: none; margin: 0; padding: 0; border-top: 4px solid #f7f7f7; li { list-style: none; margin: 0; padding: 0; float: left; a { display: block; text-decoration: none; width: 90px; height: 75px; position: relative; // border-top: #f7f7f7 4px solid; border-bottom: #f7f7f7 4px solid; span.icon { position: absolute; top: 0px; left: 20px; display: block; width: 50px; height: 50px; background-image: url('/assets/caboose/admin/page_edit_icons2.gif'); } span.text { display: block; position: absolute; top: 50px; left: 0; width: 90px; height: 20px; color: #a1a1a1 !important; text-transform: uppercase; font-size: 10px; text-align: center; } &:hover { border-bottom: #8d9fb9 4px solid; span.text { color: #8d9fb9 !important; } } } &.selected { a, a:hover { border-bottom: #505e72 4px solid; span.text { color: #505e72 !important; } } } &.content { a { span.icon { background-position: 0px 0px; } &:hover { span.icon { background-position: -50px 0px; }}} &.selected { a, a:hover { span.icon { background-position: -100px 0px; }}}} &.layout { a { span.icon { background-position: 0px -50px; } &:hover { span.icon { background-position: -50px -50px; }}} &.selected { a, a:hover { span.icon { background-position: -100px -50px; }}}} &.settings { a { span.icon { background-position: 0px -100px; } &:hover { span.icon { background-position: -50px -100px; }}} &.selected { a, a:hover { span.icon { background-position: -100px -100px; }}}} } } li.layout_block_type { list-style: none; width: 190px; height: 114px; background: url('http://placehold.it/190x114'); border: #ccc 1px solid; margin: 0 auto 10px auto; span.name { display: none; } } } #admin_subnav_content h2 { clear: left; } ul.block_types { clear: left; li:nth-child(odd) { margin: 0 10px 10px auto; } li:nth-child(even) { margin: 0 auto 10px 10px; } } ul.block_type_groups { clear: left; li:nth-child(odd) { margin: 0 10px 10px auto; } li:nth-child(even) { margin: 0 auto 10px 10px; } } li.new_block_type, li.new_block_type_group { list-style: none; width: 100px; height: 100px; float: left; position: relative; background-color: #F2F2F2; border-color: #ccc; border-width: 10px; border-style: solid; border-radius: 10px; border-width: 2px; background-size: cover; .name { display: table; position: absolute; top: 4px; left: 4px; z-index: 21; width: 88px; height: 32px; text-align: center; span { display: table-cell; vertical-align: middle; text-align: center; font-size: 10px; text-transform: uppercase; line-height: 0.95 } } } #admin_content_body { text-align: center; position: relative; } #select_device_wrapper { table { margin: 0 auto; width: 100%; td { text-align: center; } tr#device_selector { td { margin: 0; padding: 0; a { display: block; text-decoration: none; width: 74px; height: 54px !important; margin: 0 auto; padding: 0; position: relative; span.icon { position: absolute; top: 0px; left: 0px; display: block; width: 74px; height: 54px; background-image: url('/assets/caboose/admin/admin_device_icons.gif'); background-position: center center; } span.text { display: block; position: absolute; top: 36px; left: 0; width: 74px; height: 16px; color: #333 !important; text-transform: uppercase; font-size: 10px; text-align: center; } &:hover { span.text { color: white !important; } } } &.selected { border-bottom: none; a, a:hover { span.text { color: white !important; } } } &.breakpoint3 /* Mobile */ { a { span.icon { background-position: -74px 0px; } &:hover { span.icon { background-position: -148px 0px; }}} &.selected { a, a:hover { span.icon { background-position: 0 0px; }}}} &.breakpoint2 /* Tablet */ { a { span.icon { background-position: -74px -54px; } &:hover { span.icon { background-position: -148px -54px; }}} &.selected { a, a:hover { span.icon { background-position: 0 -54px; }}}} &.breakpoint1 /* Desktop */ { a { span.icon { background-position: -74px -108px; } &:hover { span.icon { background-position: -148px -108px; }}} &.selected { a, a:hover { span.icon { background-position: 0 -108px; }}}} } } } } .flex-grid-container.ui-droppable, .flex-grid-unit.ui-droppable { border: 1px dashed #cccccc; &.block_over { border-color: #4990E1; } } #page_content { background: #fff; .new_block_link { position: relative; width: 100%; } .new_block_link .line { position: absolute; top: -11px; width: 100%; height: 2px; background: transparent; } .new_block_link a { position: absolute; top: -20px; left: 45%; background: transparent; color: transparent !important; display: block; padding: 4px 8px; } .new_block_link_over { position: relative; width: 100%; } .new_block_link_over .line { position: absolute; top: -11px; width: 100%; height: 2px; background: #ccc; } .new_block_link_over a { position: absolute; top: -22px; left: 45%; color: #fff; background: #666; display: block; padding: 2px 4px; text-decoration: none; font-size: 12px; } .flexbox { .flex-grid-unit { &.resize_handle { position: relative; width: 4px; background: #dcdcdc; transition: all ease-in 0.1s; position: relative; border-radius: 2px; .grabber { display: none; // width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: -10px; background: transparent; } } } &:hover { .flex-grid-unit { &.resize_handle { position: relative; width: 4px; background: #dcdcdc; transition: all ease-in 0.1s; position: relative; border-radius: 2px; .grabber { display: none; // width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: -10px; background: #ff0000; } } } } } box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; $dt1: 1px dotted #666666; $dt2: none; $dt3: 2px solid #ff0000; .drop_target_active { border: $dt1; } .drop_target_hover_all { border-top: $dt3; border-right: $dt3; border-bottom: $dt3; border-left: $dt3; } .drop_target_hover_top { border-top: $dt3; border-right: $dt1; border-bottom: $dt1; border-left: $dt1; } .drop_target_hover_bottom { border-top: $dt1; border-right: $dt1; border-bottom: $dt3; border-left: $dt1; } .drop_target_hover_left { border-top: $dt1; border-right: $dt1; border-bottom: $dt1; border-left: $dt3; } .drop_target_hover_right { border-top: $dt1; border-right: $dt3; border-bottom: $dt1; border-left: $dt1; } .flex-grid-unit > .drop_target_active { border-bottom: $dt1; } .flex-grid-unit > .drop_target_hover_top { border-bottom: $dt1; } .flex-grid-unit > .drop_target_hover_bottom { border-bottom: $dt3; } .flex-grid-unit > .drop_target_hover_left { border-bottom: $dt1; } .flex-grid-unit > .drop_target_hover_right { border-bottom: $dt1; } /* .flex-grid-unit > .drop_target_active:first-child { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_hover_top:first-child { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_hover_bottom:first-child { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt3; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_hover_left:first-child { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_hover_right:first-child { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_active:last-child { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_hover_top:last-child { border-top: $dt3; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_hover_bottom:last-child { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_hover_left:last-child { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; } .flex-grid-unit > .drop_target_hover_right:last-child { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; } */ /* .drop_target {} .drop_target_horizontal { height: 10px; border: #efefef 1px solid; background: transparent; } .drop_target_vertical { width: 10px !important; border: #efefef 1px solid; background: transparent; flex: 0 0 10px; } .drop_target_highlight { border: 1px dotted #666666; } .drop_target_horizontal_highlight { height: 10px; border: #ccc 1px solid; background: #efefef !important; } .drop_target_vertical_highlight { width: 10px !important; border: #ccc 1px solid; background: #efefef !important; flex: 0 0 10px; } .drop_target_horizontal_hover { height: 10px; border: #ff0000 1px solid; background: #ffcccc !important; } .drop_target_vertical_hover { width: 10px !important; border: #ff0000 1px solid; background: #ffcccc !important; flex: 0 0 10px; } .drop_target_highlight_about_to_drop { height: 40px !important; background: #ffffff !important; border: #ff0000 1px solid; } */ } .magic_header { padding: 4px 8px; font-size: 10px; } .block_tabs { width: 270px; background: #E7E7E7; margin: 0 0 10px -20px; padding: 10px 0 0 0; ul { li { display: inline-block; a { display: block; margin: 0; padding: 4px 8px; font-size: 12px; text-decoration: none; border-right: #E7E7E7 1px solid; border-bottom: #E7E7E7 1px solid; color: #000; } &:last-child { a { border-right: 0 }} &.selected { a { background: #fff; border-bottom: #fff 1px solid; }} } } } #admin_header #admin_page_top_nav { position: absolute; top: 0; right: 0; & > ul { & > li { position: absolute; top: 0; right: 0; display: inline-block; margin: 0; padding: 0; vertical-align: top; a { margin: 0; padding: 0; display: inline-block; text-decoration: none; font-size: 12px; text-transform: uppercase; text-align: center; position: relative; background-repeat: no-repeat; border: transparent 1px solid; color: #fff; } a:hover { border: #2d76b7 1px solid; } &.select-device { top: 13px; right: 243px; #select_device_wrapper { display: none; } } &.stack { top: 13px; right: 244px; } &.undo { top: 13px; right: 204px; } &.redo { top: 13px; right: 174px; } &.revisions { top: 26px; right: 174px; } &.preview { top: 13px; right: 93px; } &.publish { top: 13px; right: 12px; } &.select-device a { background-color: #3893e5; width: 75px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; } &.undo a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 6px 0px 0px 0px; background-image: url('/assets/caboose/admin/undo_arrow.png'); background-position: 6px 1px; } &.redo a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 0px 6px 0px 0px; background-image: url('/assets/caboose/admin/redo_arrow.png'); background-position: 6px 1px; } &.revisions a { background-color: #3893e5; width: 59px; height: 11px; border-radius: 0px 0px 6px 6px; background-image: url('/assets/caboose/admin/down_arrow.png'); background-position: 22px 0px; } &.preview a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; } &.publish a { background-color: #6cb049; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; } &.stack a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; } &.undo a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 6px 0px 0px 0px; background-image: url('/assets/caboose/admin/undo_arrow.png'); background-position: 6px 1px; } &.redo a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 0px 6px 0px 0px; background-image: url('/assets/caboose/admin/redo_arrow.png'); background-position: 6px 1px; } &.revisions a { background-color: #3893e5; width: 59px; height: 11px; border-radius: 0px 0px 6px 6px; background-image: url('/assets/caboose/admin/down_arrow.png'); background-position: 22px 0px; } &.preview a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; } &.publish a { background-color: #6cb049; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; } &.revisions.open { top: 31px; } &.revisions.open a { height: 16px; border-radius: 0; border-color: transparent !important; } &.revisions.open a:hover { height: 16px; border-radius: 0; border-color: transparent !important; } &.preview.open a { height: 35px; border-radius: 6px 6px 0 0; border-color: transparent !important; } &.preview.open a:hover { border-color: #72a761 1px solid; } &.publish.open a { height: 35px; border-radius: 6px 6px 0 0; border-color: transparent !important; } &.publish.open a:hover { border-color: #72a761 1px solid; } &.stack a span { } &.undo a span { display: none; } &.redo a span { display: none; } &.revisions a span { display: none; } &.preview a span { } &.publish a span { } &.select-device.open { #select_device_wrapper { display: block; position: absolute; top: 35px; right: -110px; z-index: 1000; width: 300px; padding: 10px; border-radius: 6px 6px 6px 6px; border-color: #EDEEF0; border-width: 0 2px 2px 2px; border-style: solid; background: #3893e5; color: #fff; text-align: center; } /* a { height: 35px; border-radius: 6px 6px 0 0; border-color: transparent !important; } */ } } } } #revision_history { position: absolute; top: 48px; right: 10px; z-index: 1000; width: 300px; max-height: 200px; overflow-y: scroll; border-radius: 6px 6px 6px 6px; border-color: #EDEEF0; border-width: 0 2px 2px 2px; border-style: solid; background: #3893e5; color: #fff; text-align: center; p { padding: 10px; } ul { margin: 0; padding: 0; list-style: none; li { margin: 0; padding: 0; list-style: none; a { display: block; margin: 0; padding: 0 30px 0 0; width: 285px; background: #3893E5; color: #fff; font-size: 12px; text-decoration: none; border-top: #2d76b7 1px solid;; span { display: inline-block; margin: 0; padding: 8px 8px; text-align: center; &.user { width: 50%; } &.date { width: 25%; } &.time { width: 25%; } } } &:first-child a { border-top: 0; } &.like a { background-image: url('/assets/caboose/admin/like_thumb.png'); background-position: 4px 3px; } &.current a { background: #2d76b7; } } } } #preview_confirm { position: absolute; top: 48px; right: 10px; z-index: 1000; width: 300px; padding: 10px; border-radius: 6px 6px 6px 6px; border-color: #EDEEF0; border-width: 0 2px 2px 2px; border-style: solid; background: #3893e5; font-size: 14px; color: #fff; text-align: center; p { margin-bottom: 8px; } select, input[type=text] { margin: 0; padding: 4px 8px; border: #ccc 1px solid; font-size: 14px; width: 250px; } } #publish_confirm { position: absolute; top: 48px; right: 10px; z-index: 1000; width: 300px; padding: 10px; border-radius: 6px 0 6px 6px; border-color: #EDEEF0; border-width: 0 2px 2px 2px; border-style: solid; background: #6cb049; font-size: 14px; color: #fff; text-align: center; p { margin-bottom: 8px; } select, input[type=text] { margin: 0; padding: 4px 8px; border: #ccc 1px solid; font-size: 14px; width: 250px; } } #block_overlays_container { position: absolute; top: 0; left: 0; #block_overlays { position: relative; .section_width_overlay { position: absolute; top: 0; left: 0; z-index: 100; border-left: #3893E5 1px dashed; border-right: #3893E5 1px dashed; } .block_overlay { position: absolute; top: 0; left: 0; z-index: 100; /* border: #ff0000 1px dashed; */ &.section_block_overlay { border-bottom: #ff0000 1px dashed; } .message { width: 100%; height: 100%; display: table; } .caboose_note { width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; padding: 10px 20px; background: #d07f7f; color: #fff; font-size: 16px; } &.selected { background: #fff799; border: #ff0000 2px solid; background: transparent; } $dt1: 1px dotted #666666; $dt3: 2px solid #00ff00 !important; &.drop_target_active { /* border: $dt1; */ } &.drop_target_hover_all { border-top: $dt3; border-right: $dt3; border-bottom: $dt3; border-left: $dt3; } &.drop_target_hover_top { border-top: $dt3; } &.drop_target_hover_bottom { border-bottom: $dt3; } &.drop_target_hover_left { border-left: $dt3; } &.drop_target_hover_right { border-right: $dt3; } .overlay_controls { display: none; } &.over { /* background: #e3e3e3 !important; background-color: rgba(0,0,0,0.1) !important; */ border: #ff0000 1px dashed; &.selected { border: #ff0000 2px solid; } .overlay_controls { display: block; a { position: absolute; top: -26px; display: block; width: 25px; height: 25px; background-image: url('/assets/caboose/admin/overlay_nav.png'); background-repeat: no-repeat; background-position: top left; border: #10151b 1px solid; &.layers { right: 74px; background-position: -350px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.duplicate { right: 49px; background-position: -375px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.save { right: 24px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.delete { right: -1px; background-position: -325px 0; border-width: 1px 1px 1px 1px; width: 27px; height: 27px; } /* &.align_left { right: 25px; background-position: 50px 0; } &.align_right { right: 25px; background-position: 50px 0; } &.align_bottom { right: 25px; background-position: 50px 0; } &.align_top { right: 25px; background-position: 50px 0; } &.align_horizontally { right: 25px; background-position: 50px 0; } &.align_vertically { right: 25px; background-position: 50px 0; } &.center_horiontally { right: 25px; background-position: 50px 0; } &.center_vertically { right: 25px; background-position: 50px 0; } */ } } &.section_block_overlay { .overlay_controls { a { top: -1px; } } } } } .over > .layers_handle { display: block; position: relative; z-index: 3; } .over > .duplicate_handle { display: block; position: relative; z-index: 3; } .over > .save_handle { display: block; position: relative; z-index: 3; } .over > .delete_handle { display: block; position: relative; z-index: 3; } .over > .layers_handle span { position: absolute; top: 0; right: 54px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; } .over > .duplicate_handle span { position: absolute; top: 0; right: 36px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; } .over > .save_handle span { position: absolute; top: 0; right: 18px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; } .over > .delete_handle span { position: absolute; top: 0; right: 0px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; } .highlight { border-width: 2px; background-color: rgba(255, 255, 0, 0.5); } /* .block_overlay_flex_grid { border: #ff0000 1px dashed; } .block_overlay_flex_unit { border: #ff0000 1px dashed; } */ .guide { display: none; position: absolute; left: 0; top: 0; background: #ff0000 !important; z-index: 20000; } #guide-h { border-top: 1px dashed #55f !important; width: 100%; } #guide-v { border-left: 1px dashed #55f !important; height: 100%; } } } .group_overlay { border: #0000ff 1px dotted; position: absolute; .caboose_note { width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; padding: 10px 20px; background: #d07f7f; color: #fff; font-size: 16px; } .group_controls { position: absolute; top: -20px; height: 20px; a { float: right; width: 20px; &.hover { background: #ff0000; } } #align_top {} #align_bottom {} #align_left {} #align_right {} #evenly_dist_h {} #evenly_dist_v {} #create_group {} #clear_group {} } .overlay_controls { position: absolute; left: -1px; top: -2px; box-sizing: border-box; display: block; a { position: absolute; top: -25px; display: block; width: 26px; height: 26px; background-image: url('/assets/caboose/admin/overlay_nav.png'); background-repeat: no-repeat; background-position: top left; background-color: #ff0000; border: #10151b 1px solid; color: #fff; /* &.layers { right: 74px; background-position: -250px 0; background-color: #3c4c62; border-width: 1px 0px 1px 1px; } &.duplicate { right: 49px; background-position: -275px 0; background-color: #3c4c62; border-width: 1px 0px 1px 1px; } */ span { display: block; color: #fff; padding-top: 4px; background: #4f5e72; font-size: 12px; } &.align { left: 0px; background: #4f5e72; border-width: 1px 0px 1px 1px; width: 50px; height: 27px; text-align: center; } &.distribute { left: 50px; background: #4f5e72; border-width: 1px 0px 1px 1px; width: 75px; height: 27px; text-align: center; } &.save { left: 125px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.delete { left: 151px; background-position: -325px 0; border-width: 1px 1px 1px 1px; width: 27px; height: 27px; } &.align_top_edges { top: 0; left: 0px; background-position: 0px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.align_vertical_centers { top: 0; left: 25px; background-position: -25px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.align_bottom_edges { top: 0; left: 50px; background-position: -50px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.align_left_edges { top: 0; left: 75px; background-position: -75px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.align_horizontal_centers { top: 0; left: 100px; background-position: -100px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.align_right_edges { top: 0; left: 125px; background-position: -125px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.dist_top_edges { top: 0; left: 0px; background-position: -150px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.dist_vertical_centers { top: 0; left: 25px; background-position: -175px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.dist_bottom_edges { top: 0; left: 50px; background-position: -200px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.dist_left_edges { top: 0; left: 75px; background-position: -225px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.dist_horizontal_centers { top: 0; left: 100px; background-position: -250px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.dist_right_edges { top: 0; left: 125px; background-position: -275px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.dist_padding_vertically { top: 0; left: 150px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } &.dist_padding_horizontally { top: 0; left: 175px; background-position: -325px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; } } #align_controls { position: absolute; top: -25px; left: 50px; width: 0; height: 27px; overflow: hidden; background: #ff0000; } #distribute_controls { position: absolute; top: -25px; left: 125px; width: 0; height: 27px; overflow: hidden; background: #ff0000; } } } .move { width : 25px; height: 25px; right : 0; } .move_up { margin-top: 25px; } .move_down { margin-top: 50px; } /****************************************/ .selected { border-bottom: #505e72 4px solid; } #multiselect { position:absolute; z-index: 9000; background-color:rgba(73, 144, 225, 0.3); border: 1px solid #4990E1; cursor: default !important; } /****************************************/ /* Heading Froala editor /****************************************/ .fr-box.fr-basic .fr-wrapper { background: transparent !important; } .fr-box.fr-basic.fr-top .fr-wrapper { box-shadow : none !important; -webkit-box-shadow: none !important; } .heading-froala > .fr-toolbar.fr-desktop.fr-top { position: absolute; top: -40px; width: 500px; } .fr-box.fr-basic .fr-wrapper { text-align: center; } .fr-box.fr-basic .fr-element { padding: 0 !important; overflow-x: hidden !important; height: 100% !important; } .fr-element.fr-viewer { margin: 0; } /****************************************/ /* Richtext Froala editor /****************************************/ .richtext-froala > .fr-toolbar.fr-desktop.fr-top { position: absolute; top: -80px; width: 600px; } /****************************************/