scrivito_editing.css in scrivito_sdk-0.14.0

- old
+ new

@@ -460,10 +460,13 @@
 .scrivito_menu_box .scrivito_menu_item.disabled span .scrivito_icon,
 .scrivito_menu_box .scrivito_menu_item.disabled a .scrivito_icon {
   color: #696969!important;
   cursor: help;
 }
+body.scrivito_editing_active {
+  padding-top: 45px;
+}
 .scrivito_topbar * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   line-height: 1.42857;
@@ -913,19 +916,16 @@
   display: block;
   position: absolute;
   color: #fff;
   font-size: 13px;
   line-height: 14px;
+  height: 25px;
   text-align: center;
   padding: 5px 8px;
   margin: -2px 0 0 -2px;
   vertical-align: middle;
-  min-width: 20px;
-  min-height: 14px;
-  background: #111;
-  background: #ffa500;
-  background: rgba(255, 165, 0, 0.5);
+  background: rgba(67, 148, 57, 0.5);
   z-index: 11111;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-user-select: none;
@@ -939,21 +939,20 @@
   transition: background ease-in-out .6s;
 }
 .scrivito_editing_marker:hover,
 .scrivito_editing_marker:active {
   cursor: pointer;
-  background: #ffa500;
+  background: #439439;
   -webkit-transition: background ease-in-out .2s;
   -moz-transition: background ease-in-out .2s;
   -o-transition: background ease-in-out .2s;
   transition: background ease-in-out .2s;
 }
 .scrivito_editing_marker .scrivito_icon {
   padding: 0;
   font-size: 12px;
   line-height: 8px;
-  padding-bottom: 2px;
   color: #fff;
 }
 .scrivito_editing_marker .scrivito_icon:hover {
   cursor: pointer;
 }
@@ -974,10 +973,98 @@
 }
 .ui-sortable:not(.scrivito_empty_widget_field) .scrivito_editing_marker:hover,
 .ui-sortable:not(.scrivito_empty_widget_field) .scrivito_editing_marker .scrivito_icon:hover {
   cursor: move;
 }
+.scrivito_editing_marker .scrivito_editing_marker_title {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 29px;
+  color: #fff;
+  font-size: 11px;
+  line-height: 14px;
+  height: 25px;
+  text-align: center;
+  padding: 5px 10px;
+  margin: 0;
+  white-space: nowrap;
+  background: #439439;
+  opacity: 0;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-transition: opacity ease-in-out .6s;
+  -moz-transition: opacity ease-in-out .6s;
+  -o-transition: opacity ease-in-out .6s;
+  transition: opacity ease-in-out .6s;
+}
+.scrivito_editing_marker:hover .scrivito_editing_marker_title,
+.scrivito_editing_marker:active .scrivito_editing_marker_title {
+  cursor: pointer;
+}
+[data-scrivito-display-mode="editing"] [data-scrivito-private-child-list-path]:hover .scrivito_editing_marker .scrivito_editing_marker_title,
+[data-scrivito-display-mode="editing"] [data-scrivito-widget-obj-class]:hover .scrivito_editing_marker .scrivito_editing_marker_title,
+[data-scrivito-display-mode="diff"] [data-scrivito-widget-obj-class]:hover .scrivito_editing_marker .scrivito_editing_marker_title,
+[data-scrivito-display-mode="added"] [data-scrivito-widget-obj-class]:hover .scrivito_editing_marker .scrivito_editing_marker_title,
+[data-scrivito-display-mode="deleted"] [data-scrivito-widget-obj-class]:hover .scrivito_editing_marker .scrivito_editing_marker_title {
+  opacity: 1;
+  -webkit-transition: opacity ease-in-out .5s;
+  -moz-transition: opacity ease-in-out .5s;
+  -o-transition: opacity ease-in-out .5s;
+  transition: opacity ease-in-out .5s;
+}
+.scrivito_structure_marker {
+  display: block;
+  position: absolute;
+  color: #fff;
+  font-size: 13px;
+  line-height: 14px;
+  text-align: center;
+  padding: 0 8px;
+  margin: -2px 0 0 0;
+  vertical-align: middle;
+  min-height: 10px;
+  background: #111;
+  background: #ffa500;
+  background: rgba(255, 165, 0, 0.4);
+  z-index: 11111;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  -webkit-transition: background ease-in-out .6s;
+  -moz-transition: background ease-in-out .6s;
+  -o-transition: background ease-in-out .6s;
+  transition: background ease-in-out .6s;
+}
+.scrivito_structure_marker:hover,
+.scrivito_structure_marker:active {
+  cursor: pointer;
+  background: #ffa500;
+  -webkit-transition: background ease-in-out .2s;
+  -moz-transition: background ease-in-out .2s;
+  -o-transition: background ease-in-out .2s;
+  transition: background ease-in-out .2s;
+}
+.scrivito_structure_marker .scrivito_icon {
+  padding: 0;
+  font-size: 8px;
+  line-height: 8px;
+  color: #fff;
+}
+.scrivito_structure_marker .scrivito_icon:hover {
+  cursor: pointer;
+}
+.scrivito_empty_widget_field > .scrivito_structure_marker,
+*[data-scrivito-private-widget-id] > .scrivito_structure_marker {
+  left: 45%;
+}
 .scrivito_button {
   display: inline-block;
   color: #555;
   font-size: 14px;
   font-weight: normal;
@@ -1196,9 +1283,48 @@
   padding: 0!important;
   -webkit-animation: rotation 4s infinite linear;
   -moz-animation: rotation 4s infinite linear;
   -o-animation: rotation 4s infinite linear;
   animation: rotation 4s infinite linear;
+}
+.scrivito_glowing {
+  -webkit-animation: glow 4s infinite linear;
+  -moz-animation: glow 4s infinite linear;
+  -o-animation: glow 4s infinite linear;
+  animation: glow 4s infinite linear;
+}
+@-webkit-keyframes glow {
+  0% {
+    box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 2px 4px #ffa500;
+  }
+  100% {
+    box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.2);
+  }
+}
+@-moz-keyframes glow {
+  0% {
+    box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 2px 4px #ffa500;
+  }
+  100% {
+    box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.2);
+  }
+}
+@keyframes glow {
+  0% {
+    box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 2px 4px #ffa500;
+  }
+  100% {
+    box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.2);
+  }
 }
 .scrivito_modal_prompt .scrivito_modal_body form {
   margin: 0;
 }
 .scrivito_modal_prompt .scrivito_modal_body fieldset {