Toggle SharePoint Webparts

:root {
  --excalidraw-transparent: transparent;
  --excalidraw-white: #ffffff;

  --excalidraw-gray-1: #f8f9fa;

  --excalidraw-gray-2: #e9ecef;

  --excalidraw-gray-3: #ced4da;

  --excalidraw-gray-4: #868e96;

  --excalidraw-gray-5: #343a40;

  --excalidraw-black: #1e1e1e;

  --excalidraw-bronze-1: #f8f1ee;

  --excalidraw-bronze-2: #eaddd7;

  --excalidraw-bronze-3: #d2bab0;

  --excalidraw-bronze-4: #a18072;

  --excalidraw-bronze-5: #846358;

  --excalidraw-cyan-1: #e3fafc;

  --excalidraw-cyan-2: #99e9f2;

  --excalidraw-cyan-3: #3bc9db;

  --excalidraw-cyan-4: #15aabf;

  --excalidraw-cyan-5: #0c8599;

  --excalidraw-blue-1: #e7f5ff;

  --excalidraw-blue-2: #a5d8ff;

  --excalidraw-blue-3: #4dabf7;

  --excalidraw-blue-4: #228be6;

  --excalidraw-blue-5: #1971c2;

  --excalidraw-violet-1: #f3f0ff;

  --excalidraw-violet-2: #d0bfff;

  --excalidraw-violet-3: #9775fa;

  --excalidraw-violet-4: #7950f2;

  --excalidraw-violet-5: #6741d9;

  --excalidraw-grape-1: #f8f0fc;

  --excalidraw-grape-2: #eebefa;

  --excalidraw-grape-3: #da77f2;

  --excalidraw-grape-4: #be4bdb;

  --excalidraw-grape-5: #9c36b5;

  --excalidraw-pink-1: #fff0f6;

  --excalidraw-pink-2: #fcc2d7;

  --excalidraw-pink-3: #f783ac;

  --excalidraw-pink-4: #e64980;

  --excalidraw-pink-5: #c2255c;

  --excalidraw-green-1: #ebfbee;

  --excalidraw-green-2: #b2f2bb;

  --excalidraw-green-3: #69db7c;

  --excalidraw-green-4: #40c057;

  --excalidraw-green-5: #2f9e44;

  --excalidraw-teal-1: #e6fcf5;

  --excalidraw-teal-2: #96f2d7;

  --excalidraw-teal-3: #38d9a9;

  --excalidraw-teal-4: #12b886;

  --excalidraw-teal-5: #099268;

  --excalidraw-yellow-1: #fff9db;

  --excalidraw-yellow-2: #ffec99;

  --excalidraw-yellow-3: #ffd43b;

  --excalidraw-yellow-4: #fab005;

  --excalidraw-yellow-5: #f08c00;

  --excalidraw-orange-1: #fff4e6;

  --excalidraw-orange-2: #ffd8a8;

  --excalidraw-orange-3: #ffa94d;

  --excalidraw-orange-4: #fd7e14;

  --excalidraw-orange-5: #e8590c;

  --excalidraw-red-1: #fff5f5;

  --excalidraw-red-2: #ffc9c9;

  --excalidraw-red-3: #ff8787;

  --excalidraw-red-4: #fa5252;

  --excalidraw-red-5: #e03131;

}
.ControlZone:not(:has([data-automation-id="FlexibleControl"])) {
  border-radius: 4px;
  outline-width: 3px;
  outline-style: solid;
  position: relative;
  outline-color: var(--excalidraw-color, #1e1e1e);

}
.ControlZone:not(#emptySection) [data-automation-id="FlexibleControl"] {

  border-radius: 4px;
  outline-width: 3px;
  outline-style: solid;
  outline-offset: 4px;
  outline-color: var(--excalidraw-color, #1e1e1e);

}
.ControlZone:has(.ControlZone--control):not(:has(.ControlZone--control [data-automation-id="FlexibleControl"]))::before {
  content: var(--webpart-name, "unknown");
  position: absolute;
  font-size: 18px;
  z-index: 100000;
  top: -16px;
  padding-inline: 6px;
  font-weight: 700;
  color: #fff;

  background: var(--excalidraw-color, #1e1e1e);

}
.ControlZone .ControlZone--control [data-automation-id="FlexibleControl"]::before {
  content: var(--webpart-name, "unknown");
  position: absolute;
  font-size: 18px;
  z-index: 100000;
  top: -16px;
  padding-inline: 6px;
  font-weight: 700;
  color: #fff;

  background: var(--excalidraw-color, #1e1e1e);

}
.ControlZone:has([data-sp-feature-tag="Rich Text Editor"]) {
  --webpart-name: "Text";
  --excalidraw-color: var(--excalidraw-bronze-4);
}
.ControlZone:has([data-sp-feature-tag="SpacerWebPart web part (Spacer)"]) {
  --webpart-name: "Spacer";
  --excalidraw-color: var(--excalidraw-gray-4);
}
.ControlZone:has(
    [data-sp-feature-tag="QuickLinksWebPart web part (Quick links)"]
  ) {
  --webpart-name: "Quick links";
  --excalidraw-color: var(--excalidraw-orange-3);
}
.ControlZone:has(
    [data-sp-feature-tag="EditorialCardWebPart web part (Editorial card)"]
  ) {
  --webpart-name: "Editorial card";
  --excalidraw-color: var(--excalidraw-blue-4);
}
.ControlZone:has(
    [data-sp-feature-tag="CallToActionWebPart web part (Call to action)"]
  ) {
  --webpart-name: "Call to action";
  --excalidraw-color: var(--excalidraw-grape-5);
}
.ControlZone:has([data-sp-feature-tag="ButtonWebPart web part (Button)"]) {
  --webpart-name: "Button";
  --excalidraw-color: var(--excalidraw-teal-3);
}
.ControlZone:has(
    [data-sp-feature-tag="ImageGalleryWebPart web part (Image gallery)"]
  ) {
  --webpart-name: "Image gallery";
  --excalidraw-color: var(--excalidraw-violet-4);
}
.ControlZone:has([data-sp-feature-tag="PeopleWebPart web part (People)"]) {
  --webpart-name: "People";
  --excalidraw-color: var(--excalidraw-green-4);
}
.ControlZone:has([data-sp-feature-tag="EventsWebPart web part (Events)"]) {
  --webpart-name: "Events";
  --excalidraw-color: var(--excalidraw-red-4);
}
.ControlZone:has([data-sp-feature-tag="NewsWebPart web part (News)"]) {
  --webpart-name: "News";
  --excalidraw-color: var(--excalidraw-red-5);
}
.ControlZone:has([data-sp-feature-tag="ListWebPart web part (List)"]) {
  --webpart-name: "List";
  --excalidraw-color: var(--excalidraw-yellow-3);
}
.ControlZone:has(
    [data-sp-feature-tag="react-tiles-extended web part (react tiles extended)"]
  ) {
  --webpart-name: "react tiles extended";
  --excalidraw-color: var(--excalidraw-cyan-4);
}
.ControlZone:has([data-sp-feature-tag="HeroWebPart web part (Hero)"]) {
  --webpart-name: "Hero";
  --excalidraw-color: var(--excalidraw-pink-4);
}
.ControlZone:has([data-sp-feature-tag="StreamWebPart web part (Stream)"]) {
  --webpart-name: "Stream";
  --excalidraw-color: var(--excalidraw-violet-5);
}
.ControlZone:has(
    [data-sp-feature-tag="DocumentEmbedWebPart web part (File and Media)"]
  ) {
  --webpart-name: "File and Media";
  --excalidraw-color: var(--excalidraw-violet-5);
}
.ControlZone:has([data-sp-feature-tag="QrCodeWebPart web part (QR Code)"]) {
  --webpart-name: "QR Code";
  --excalidraw-color: var(--excalidraw-black);
}
.ControlZone:has(img) {
  --webpart-name: "Image";
  --excalidraw-color: var(--excalidraw-violet-3);
}
.ControlZone:has(
    [data-sp-feature-tag="PageNavigatorWebPart web part (PageNavigator)"]
  ) {
  --webpart-name: "PageNavigator";
  --excalidraw-color: var(--excalidraw-blue-3);
}
.ControlZone:has([data-sp-feature-tag="FaqsWebPart web part (FAQs)"]) {
  --webpart-name: "FAQs";
  --excalidraw-color: var(--excalidraw-teal-5);
}
.ControlZone:has(
    [data-sp-feature-tag="AlertNotificationsWebPart web part (Alert Notifications)"]
  ) {
  --webpart-name: "Alert Notifications";
  --excalidraw-color: var(--excalidraw-gray-5);
}
.ControlZone:has(
    [data-sp-feature-tag="DividerWebPart web part (Divider)"]
  ) {
  --webpart-name: "Divider";
  --excalidraw-color: var(--excalidraw-black);
}

javascript:(()=>{const e="excalidraw-style",t=document.getElementById(e);t?t.remove():fetch("https://gist.githubusercontent.com/cogb-jclaney/dea2d66e121f50bef251d93e7c5f0673/raw/sharepoint-webpart-overviews.css").then(e=>e.text()).then(t=>{const n=document.createElement("style");n.id=e,n.textContent=t,document.head.appendChild(n)})})();