refactor: mutualize popup styles into shared SCSS file

Extract ~150 lines of identical CSS from ElementPopup and PagePopup into a new _settings-popup.scss partial: - Common popup structure (header, body, controls, CSS panel) - Shared components (tooltips, toggle switches, inheritance button) - CSS editor styling (readonly display, textarea) Component-specific styles retained: - ElementPopup: purple theme, button groups, checkboxes - PagePopup: orange theme, margin grid layout Reduces duplication and improves maintainability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
feat: add purple highlight for content elements
2025-12-08 16:17:34 +01:00 · 2025-12-08 14:15:06 +01:00
8 changed files with 505 additions and 423 deletions
--- a/public/assets/css/src/_settings-popup.scss
+++ b/public/assets/css/src/_settings-popup.scss
@ -0,0 +1,214 @@
+// Common styles for ElementPopup and PagePopup components
+
+.settings-popup {
+  position: fixed;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  z-index: 10000;
+  width: 800px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f9f9f9;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 0;
+  color: #666;
+}
+
+.popup-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.popup-controls {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.settings-subsection h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+// Label with CSS tooltip
+.label-with-tooltip {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+
+  &::after {
+    content: attr(data-css);
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 4px;
+    padding: 0.25rem 0.5rem;
+    background: var(--color-browngray-700, #3d3d3d);
+    color: var(--color-browngray-100, #f5f5f5);
+    font-family: "Courier New", Courier, monospace;
+    font-size: 0.75rem;
+    border-radius: 4px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.15s ease,
+      visibility 0.15s ease;
+    z-index: 10;
+  }
+
+  &:hover::after {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// Inheritance lock/unlock button
+.inheritance-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #666;
+  transition: color 0.2s;
+
+  &:hover {
+    color: #333;
+  }
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+// CSS Editor panel
+.popup-css {
+  flex: 1;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #e0e0e0;
+}
+
+.css-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  background: #e8e8e8;
+  border-bottom: 1px solid #d0d0d0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+// Toggle switch for edit mode
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: normal;
+  color: #666;
+
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 18px;
+  background: #ccc;
+  border-radius: 18px;
+  transition: background 0.2s ease;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+  }
+}
+
+.toggle input[type="checkbox"]:checked + .toggle-switch {
+  background: #61afef;
+
+  &::after {
+    transform: translateX(18px);
+  }
+}
+
+// CSS readonly display
+.readonly {
+  flex: 1;
+  margin: 0;
+  padding: 0.75rem;
+  background: #1e1e1e;
+  color: #abb2bf;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+// CSS textarea editor
+.popup-css textarea {
+  flex: 1;
+  width: 100%;
+  background: #1e1e1e;
+  color: #abb2bf;
+  border: none;
+  padding: 0.75rem;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+}
--- a/public/assets/css/src/_variables.scss
+++ b/public/assets/css/src/_variables.scss
@ -5,6 +5,7 @@
  --color-browngray-300: #b5a9a1;

  --color-page-highlight: #ff8a50;
+  --color-purple: #7136ff;

  --border-radius: 0.2rem;

--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@ -31,6 +31,7 @@ button {
  --color-browngray-200: #d0c4ba;
  --color-browngray-300: #b5a9a1;
  --color-page-highlight: #ff8a50;
+  --color-purple: #7136ff;
  --border-radius: 0.2rem;
  --space-xs: 0.5rem;
  --curve: cubic-bezier(0.86, 0, 0.07, 1);
@ -196,4 +197,203 @@ button.tab.active {
  background-color: #000;
  color: #fff;
  border: none;
+}
+
+.settings-popup {
+  position: fixed;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  z-index: 10000;
+  width: 800px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f9f9f9;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 0;
+  color: #666;
+}
+
+.popup-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.popup-controls {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.settings-subsection h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.label-with-tooltip {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700, #3d3d3d);
+  color: var(--color-browngray-100, #f5f5f5);
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.inheritance-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #666;
+  transition: color 0.2s;
+}
+.inheritance-btn:hover {
+  color: #333;
+}
+.inheritance-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.popup-css {
+  flex: 1;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #e0e0e0;
+}
+
+.css-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  background: #e8e8e8;
+  border-bottom: 1px solid #d0d0d0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: normal;
+  color: #666;
+}
+.toggle input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 18px;
+  background: #ccc;
+  border-radius: 18px;
+  transition: background 0.2s ease;
+}
+.toggle-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle input[type=checkbox]:checked + .toggle-switch {
+  background: #61afef;
+}
+.toggle input[type=checkbox]:checked + .toggle-switch::after {
+  transform: translateX(18px);
+}
+
+.readonly {
+  flex: 1;
+  margin: 0;
+  padding: 0.75rem;
+  background: #1e1e1e;
+  color: #abb2bf;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+.popup-css textarea {
+  flex: 1;
+  width: 100%;
+  background: #1e1e1e;
+  color: #abb2bf;
+  border: none;
+  padding: 0.75rem;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
 }/*# sourceMappingURL=style.css.map */
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
@ -1 +1 @@
-{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,+BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADwBF;;AEpCA;;;;;;;;;;;;;EAaE,uBAAA;AFuCF;;AGpDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHuDF;AGrDA;EACE,8BAAA;OAAA,kBAAA;AHuDF;;AGpDA;EACE;IACE,sBAAA;EHuDF;AACF;AGrDA;EACE,+BAAA;AHuDF;;AItEA;;;EAGE,4CAAA;AJyEF;;AItEA;EACE,YAAA;AJyEF;;AItEA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;AJyEF;AIvEE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,sCAAA;EACA,iCAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;AJuEJ;AIpEE;EACE,UAAA;EACA,mBAAA;AJsEJ;;AIjEE;EACE,6BAAA;EACA,8BAAA;AJoEJ;AIlEE;EACE,mDAAA;AJoEJ;AIjEE;EACE,0BAAA;AJmEJ;AIjEI;EACE,8BAAA;AJmEN;AIhEI;EACE,aAAA;AJkEN;AIhEM;;EAEE,UAAA;AJkER;AI/DM;EACE,oCAAA;AJiER;AI9DM;EACE,aAAA;EACA,WAAA;AJgER;AI9DQ;EACE,aAAA;EACA,WAAA;AJgEV;AI5DM;EACE,UAAA;AJ8DR;AI7DQ;EACE,aAAA;AJ+DV;AI9DU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJgEZ;AI7DU;EACE,oBAAA;EACA,WAAA;AJ+DZ;AIzDI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ2DN;AIzDM;EACE,WAAA;AJ2DR;AIzDM;EACE,UAAA;AJ2DR;AIzDQ;EACE,UAAA;AJ2DV;AIvDU;EACE,UAAA;AJyDZ;;AKlLA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALoLF;AKlLE;EACE,sBAAA;EACA,WAAA;ALoLJ;AKhLI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALkLN","file":"style.css"}
+{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"}
--- a/public/assets/css/style.scss
+++ b/public/assets/css/style.scss
@ -4,3 +4,4 @@
@import "src/_print-styles.scss";
@import "src/_forms.scss";
@import "src/_buttons.scss";
+@import "src/_settings-popup.scss";
--- a/src/App.vue
+++ b/src/App.vue
@ -20,8 +20,11 @@ provide('activeTab', activeTab);
 // Page interaction state
 const hoveredPage = ref(null);
 const selectedPages = ref([]); // Pages with active border (when popup is open)
+const hoveredElement = ref(null); // Currently hovered content element
+const selectedElement = ref(null); // Selected element (when popup is open)
 const EDGE_THRESHOLD = 30; // px from edge to trigger hover
 const PAGE_HIGHLIGHT_COLOR = '#ff8a50';
+const ELEMENT_HIGHLIGHT_COLOR = '#7136ff';

 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
@ -67,6 +70,7 @@ const handleIframeMouseMove = (event) => {
  const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
  let foundPage = null;

+  // Check if hovering near page edge
  for (const page of pages) {
    if (isNearPageEdge(page, event.clientX, event.clientY)) {
      foundPage = page;
@ -74,7 +78,7 @@ const handleIframeMouseMove = (event) => {
    }
  }

-  // Update hover state
+  // Update page hover state
  if (foundPage !== hoveredPage.value) {
    // Remove highlight from previous page (only if not in selectedPages)
    if (hoveredPage.value && !selectedPages.value.includes(hoveredPage.value)) {
@ -88,6 +92,31 @@ const handleIframeMouseMove = (event) => {

    hoveredPage.value = foundPage;
  }
+
+  // If not near page edge, check for content element hover
+  if (!foundPage) {
+    const contentElement = getContentElement(event.target);
+
+    if (contentElement !== hoveredElement.value) {
+      // Remove highlight from previous element (only if not selected)
+      if (hoveredElement.value && hoveredElement.value !== selectedElement.value) {
+        hoveredElement.value.style.outline = '';
+      }
+
+      // Add highlight to new element (only if not already selected)
+      if (contentElement && contentElement !== selectedElement.value) {
+        contentElement.style.outline = `2px dashed ${ELEMENT_HIGHLIGHT_COLOR}`;
+      }
+
+      hoveredElement.value = contentElement;
+    }
+  } else {
+    // Clear element hover when hovering page edge
+    if (hoveredElement.value && hoveredElement.value !== selectedElement.value) {
+      hoveredElement.value.style.outline = '';
+      hoveredElement.value = null;
+    }
+  }
 };

 // Clear selection highlight from all selected pages
@ -121,6 +150,22 @@ const getContentElement = (element) => {
  return null;
 };

+// Clear selected element highlight
+const clearSelectedElement = () => {
+  if (selectedElement.value) {
+    selectedElement.value.style.outline = '';
+    selectedElement.value.style.backgroundColor = '';
+    selectedElement.value = null;
+  }
+};
+
+// Get count of similar elements (same tag)
+const getSimilarElementsCount = (element, doc) => {
+  const tagName = element.tagName;
+  const allElements = doc.querySelectorAll(tagName);
+  return allElements.length;
+};
+
 // Handle click in iframe
 const handleIframeClick = (event) => {
  const element = event.target;
@ -129,8 +174,9 @@ const handleIframeClick = (event) => {
  if (hoveredPage.value) {
    event.stopPropagation();

-    // Clear previous selection
+    // Clear previous selections
    clearSelectedPages();
+    clearSelectedElement();

    // Get all pages with same template and highlight them
    const doc = event.target.ownerDocument;
@ -149,6 +195,7 @@ const handleIframeClick = (event) => {
  const isInsidePage = element.closest('.pagedjs_page');
  if (!isInsidePage) {
    clearSelectedPages();
+    clearSelectedElement();
    elementPopup.value.close();
    pagePopup.value.close();
    return;
@ -158,13 +205,28 @@ const handleIframeClick = (event) => {
  const contentElement = getContentElement(element);
  if (!contentElement) {
    clearSelectedPages();
+    clearSelectedElement();
    elementPopup.value.close();
    pagePopup.value.close();
    return;
  }

+  // Clear page selections
  clearSelectedPages();
-  elementPopup.value.handleIframeClick(event, contentElement);
+
+  // Clear previous element selection
+  clearSelectedElement();
+
+  // Select the new element
+  selectedElement.value = contentElement;
+  contentElement.style.outline = '';
+  contentElement.style.backgroundColor = `${ELEMENT_HIGHLIGHT_COLOR}4D`; // 30% opacity
+
+  // Get count of similar elements
+  const doc = event.target.ownerDocument;
+  const count = getSimilarElementsCount(contentElement, doc);
+
+  elementPopup.value.handleIframeClick(event, contentElement, count);
  pagePopup.value.close();
 };

@ -173,6 +235,11 @@ const handlePagePopupClose = () => {
  clearSelectedPages();
 };

+// Handle ElementPopup close
+const handleElementPopupClose = () => {
+  clearSelectedElement();
+};
+
 const renderPreview = async (shouldReloadFromFile = false) => {
  if (isTransitioning.value) return;
  isTransitioning.value = true;
@ -356,7 +423,7 @@ onMounted(() => renderPreview(true));

  <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />

-  <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
+  <ElementPopup ref="elementPopup" :iframeRef="activeFrame" @close="handleElementPopupClose" />
  <PagePopup ref="pagePopup" :iframeRef="activeFrame" @close="handlePagePopupClose" />

  <button class="print-btn" @click="printPreview" title="Imprimer">
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@ -2,6 +2,7 @@
  <div
    v-if="visible"
    id="element-popup"
+    class="settings-popup"
    :style="{ top: position.y + 'px', left: position.x + 'px' }"
  >
    <div class="popup-header">
@ -287,6 +288,8 @@ const props = defineProps({
  iframeRef: Object,
 });

+const emit = defineEmits(['close']);
+
 const POPUP_WIDTH = 800;
 const POPUP_HEIGHT = 600;

@ -296,6 +299,7 @@ const visible = ref(false);
 const position = ref({ x: 0, y: 0 });
 const selector = ref('');
 const selectedElement = ref(null);
+const elementInstanceCount = ref(0); // Count of similar elements
 const isEditable = ref(false);
 const inheritanceLocked = ref(true);
 const colorInput = ref(null);
@ -358,7 +362,7 @@ const selectorTag = computed(() => {
 });

 const instanceCount = computed(() => {
-  return getInstanceCount(selector.value);
+  return elementInstanceCount.value;
 });

 const elementCss = computed(() => {
@ -590,11 +594,14 @@ const loadValuesFromStylesheet = () => {
  }
 };

-const open = (element, event) => {
+const open = (element, event, count = null) => {
  selectedElement.value = element;
  selector.value = getSelectorFromElement(element);
  position.value = calculatePosition(event);

+  // Store instance count if provided, otherwise calculate it
+  elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
+
  // Load values from stylesheet
  loadValuesFromStylesheet();

@ -637,9 +644,10 @@ const close = () => {
  isEditable.value = false;
  selector.value = '';
  selectedElement.value = null;
+  emit('close');
 };

-const handleIframeClick = (event, targetElement = null) => {
+const handleIframeClick = (event, targetElement = null, elementCount = null) => {
  const element = targetElement || event.target;

  if (element.tagName === 'BODY' || element.tagName === 'HTML') {
@ -653,7 +661,7 @@ const handleIframeClick = (event, targetElement = null) => {
    return;
  }

-  open(element, event);
+  open(element, event, elementCount);
 };

 const toggleInheritance = () => {
@ -665,35 +673,9 @@ defineExpose({ handleIframeClick, close, visible });
 </script>

 <style scoped>
-#element-popup {
-  position: fixed;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  z-index: 10000;
-  width: 800px;
-  max-height: 600px;
-  display: flex;
-  flex-direction: column;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #e0e0e0;
-  background: #f9f9f9;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
+/* ElementPopup-specific styles (purple theme) */
 .element-label {
-  background: #ff8a50;
+  background: var(--color-purple);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
@ -702,42 +684,10 @@ defineExpose({ handleIframeClick, close, visible });
 }

 .instance-count {
-  color: #ff8a50;
+  color: var(--color-purple);
  font-size: 0.875rem;
 }

-.close-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1.5rem;
-  line-height: 1;
-  padding: 0;
-  color: #666;
-}
-
-.popup-body {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.popup-controls {
-  flex: 1;
-  padding: 1rem;
-  overflow-y: auto;
-  background: white;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.settings-subsection h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
 .button-group {
  display: flex;
  gap: 0.25rem;
@ -776,151 +726,4 @@ defineExpose({ handleIframeClick, close, visible });
  margin: 0;
  cursor: pointer;
 }
-
-/* Label with CSS tooltip */
-.label-with-tooltip {
-  text-decoration: underline dotted;
-  text-underline-offset: 2px;
-  cursor: help;
-  position: relative;
-}
-
-.label-with-tooltip::after {
-  content: attr(data-css);
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  padding: 0.25rem 0.5rem;
-  background: var(--color-browngray-700, #3d3d3d);
-  color: var(--color-browngray-100, #f5f5f5);
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.75rem;
-  border-radius: 4px;
-  white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.15s ease, visibility 0.15s ease;
-  z-index: 10;
-}
-
-.label-with-tooltip:hover::after {
-  opacity: 1;
-  visibility: visible;
-}
-
-.inheritance-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: #666;
-  transition: color 0.2s;
-}
-
-.inheritance-btn:hover {
-  color: #333;
-}
-
-.inheritance-btn svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.popup-css {
-  flex: 1;
-  background: #f5f5f5;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid #e0e0e0;
-}
-
-.css-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  background: #e8e8e8;
-  border-bottom: 1px solid #d0d0d0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  font-size: 0.75rem;
-  font-weight: normal;
-  color: #666;
-}
-
-.toggle input[type='checkbox'] {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 18px;
-  background: #ccc;
-  border-radius: 18px;
-  transition: background 0.2s ease;
-}
-
-.toggle-switch::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.2s ease;
-}
-
-.toggle input[type='checkbox']:checked + .toggle-switch {
-  background: #61afef;
-}
-
-.toggle input[type='checkbox']:checked + .toggle-switch::after {
-  transform: translateX(18px);
-}
-
-.readonly {
-  flex: 1;
-  margin: 0;
-  padding: 0.75rem;
-  background: #1e1e1e;
-  color: #abb2bf;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  overflow-y: auto;
-  white-space: pre-wrap;
-}
-
-.popup-css textarea {
-  flex: 1;
-  width: 100%;
-  background: #1e1e1e;
-  color: #abb2bf;
-  border: none;
-  padding: 0.75rem;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  resize: none;
-  outline: none;
-}
 </style>
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@ -2,6 +2,7 @@
  <div
    v-if="visible"
    id="page-popup"
+    class="settings-popup"
    :style="{ top: position.y + 'px', left: position.x + 'px' }"
  >
    <div class="popup-header">
@ -651,33 +652,7 @@ defineExpose({ open, close, visible });
 </script>

 <style scoped>
-#page-popup {
-  position: fixed;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  z-index: 10000;
-  width: 800px;
-  max-height: 600px;
-  display: flex;
-  flex-direction: column;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #e0e0e0;
-  background: #f9f9f9;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
+/* PagePopup-specific styles (orange theme) */
 .page-label {
  background: var(--color-page-highlight);
  color: white;
@ -697,188 +672,9 @@ defineExpose({ open, close, visible });
  font-size: 0.875rem;
 }

-.close-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1.5rem;
-  line-height: 1;
-  padding: 0;
-  color: #666;
-}
-
-.popup-body {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.popup-controls {
-  flex: 1;
-  padding: 1rem;
-  overflow-y: auto;
-  background: white;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.settings-subsection h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
 .margin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
 }
-
-/* Label with CSS tooltip */
-.label-with-tooltip {
-  text-decoration: underline dotted;
-  text-underline-offset: 2px;
-  cursor: help;
-  position: relative;
-}
-
-.label-with-tooltip::after {
-  content: attr(data-css);
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  padding: 0.25rem 0.5rem;
-  background: var(--color-browngray-700, #3d3d3d);
-  color: var(--color-browngray-100, #f5f5f5);
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.75rem;
-  border-radius: 4px;
-  white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.15s ease, visibility 0.15s ease;
-  z-index: 10;
-}
-
-.label-with-tooltip:hover::after {
-  opacity: 1;
-  visibility: visible;
-}
-
-.inheritance-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: #666;
-  transition: color 0.2s;
-}
-
-.inheritance-btn:hover {
-  color: #333;
-}
-
-.inheritance-btn svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.popup-css {
-  flex: 1;
-  background: #f5f5f5;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid #e0e0e0;
-}
-
-.css-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  background: #e8e8e8;
-  border-bottom: 1px solid #d0d0d0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  font-size: 0.75rem;
-  font-weight: normal;
-  color: #666;
-}
-
-.toggle input[type='checkbox'] {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 18px;
-  background: #ccc;
-  border-radius: 18px;
-  transition: background 0.2s ease;
-}
-
-.toggle-switch::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.2s ease;
-}
-
-.toggle input[type='checkbox']:checked + .toggle-switch {
-  background: #61afef;
-}
-
-.toggle input[type='checkbox']:checked + .toggle-switch::after {
-  transform: translateX(18px);
-}
-
-.readonly {
-  flex: 1;
-  margin: 0;
-  padding: 0.75rem;
-  background: #1e1e1e;
-  color: #abb2bf;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  overflow-y: auto;
-  white-space: pre-wrap;
-}
-
-.popup-css textarea {
-  flex: 1;
-  width: 100%;
-  background: #1e1e1e;
-  color: #abb2bf;
-  border: none;
-  padding: 0.75rem;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  resize: none;
-  outline: none;
-}
 </style>