controlpannel.css

/* Matrix CSS */


#fields-dtmContentBuilderMatrix-field .matrixblock {
  margin-bottom: 30px;
}

#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] {
  margin-top: 50px;
}


#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] ~ .matrixblock:not([data-type^="blockSection"]) {
  width: 97%;
  margin-left: 3%;
}


/* Force 100% width for rc and banner section */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"],
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 100% !important;
  margin-left: 0 !important;
}

/* Red outline if  */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"] + .matrixblock:not([data-type^="blockSection"]):not([data-type^="blockRCSection"]):not([data-type^="blockBanner"]),
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] + .matrixblock:not([data-type^="blockSection"]):not([data-type^="blockRCSection"]):not([data-type^="blockBanner"]) {
  outline: 3px solid red;
}


#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"] + .matrixblock[data-type^="blockRCSection"],
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] + .matrixblock[data-type^="blockBanner"] {
  margin-top: -20px;
}


#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"] + .matrixblock:not([data-type^="blockSection"]):not([data-type^="blockRCSection"]):not([data-type^="blockBanner"])::before,
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] + .matrixblock:not([data-type^="blockSection"]):not([data-type^="blockRCSection"]):not([data-type^="blockBanner"])::before {
  content: "!!! Please add a section before";
  background: red;
  color: white;
  font-weight: 700;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 14px;
  transform: translateY(-100%);
}


/* Label Dark Sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSectionDark"] {
  outline: 3px solid #02091b;
}

#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSectionDark"]::before {
  content: "Dark Section";
  background: #02091b;
  color: white;
  font-weight: 700;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 14px;
  transform: translateY(-100%);
}

/* Label Light Sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSectionLight"] {
  outline: 3px solid #eee;
}

#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSectionLight"]::before {
  content: "Light Section";
  background: #eee;
  color: #02091b;
  font-weight: 700;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 14px;
  transform: translateY(-100%);
}

/* Handle two empty sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type^="blockSection"],
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type="blockRCSection"],
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type="blockBanner"] {
  outline: 3px solid red;
}


#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type^="blockSection"]::before,
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type="blockRCSection"]::before,
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type="blockBanner"]::before {
  content: "!!! There is an empty section before";
  background: red;
  color: white;
  font-weight: 700;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 14px;
  transform: translateY(-100%);
}

/* Handle first Matrix Block */
/* Handle two empty sections */
#fields-dtmContentBuilderMatrix-field .matrixblock:first-child:not(.matrixblock[data-type^="blockSection"]):not(.matrixblock[data-type^="blockRCSection"]) {
  outline: 3px solid red;
  margin-top: 50px;
}

#fields-dtmContentBuilderMatrix-field .matrixblock:first-child:not(.matrixblock[data-type^="blockSection"]):not(.matrixblock[data-type^="blockRCSection"])::before {
  content: "!!! Please start with a section";
  background: red;
  color: white;
  font-weight: 700;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 14px;
  transform: translateY(-100%);
}

/* Label RC Sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"] {
  outline: 3px solid orange;
}


#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"]::before {
  content: "Pre-build section";
  background: orange;
  color: white;
  font-weight: 700;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 14px;
  transform: translateY(-100%);
}


/* Label Banner Sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] {
  outline: 3px solid blue;
}


#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"]::before {
  content: "Banner section";
  background: blue;
  color: white;
  font-weight: 700;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 14px;
  transform: translateY(-100%);
}