split styles

main.js

@@ -1383,9 +1383,342 @@
     }
   }
 
+  function addPrettifyEditPageCss() {
+    addStylesToHead(`
+      #content-wrapper {
+        display: flex;
+        gap: 20px;
+      
+        #props {
+          width: unset !important;
+        }
+
+        form {
+          width: 50%;
+        }
+
+        #map-wrapper {
+          width: 50%;
+        }
+
+        #map {
+          width: unset !important;
+        }
+
+        #new {
+          display: flex;
+          flex-direction: column;
+
+          & > :not(:first-child) {
+            padding-top: 5px;
+            border-top: 1px solid #ddd;
+          }
+
+          & > :not(:last-child) {
+            padding-bottom: 5px;
+          }
+
+          .map-icon {
+            width: 15px;
+            height: 15px;
+          }
+
+          .copy-button {
+            all: unset;
+            cursor: pointer;
+          }
+
+          .copy-button img {
+            width: 15px;
+            heigth: 15px;
+          }
+
+          input[type=radio], input[type=checkbox] {
+            margin: 0;
+          }
+
+          input[type=radio] {
+            margin-right: 5px;
+          }
+
+          input[type="file"] {
+            display: none;
+          }
+
+          div > input[type="checkbox"] {
+            display: flex;
+            align-items: center;
+          }
+
+          input#cp_number {
+            width: 3em;
+          }
+
+          select#cps_main {
+            width: 6em;
+          }
+
+          input:is(#lat, #lng) {
+            width: 5.5em;
+          }
+
+          input[name="cp[name_int]"] {
+            width: 34em;
+          }
+        }
+
+        #cps_main {
+          width: 150px;
+        }
+
+        input[type=submit] {
+          width: fit-content;
+        }
+
+        .desc-icon-container {
+          display: flex;
+          align-items: center;
+        }
+
+        .desc-icon {
+          width: 15px;
+          height: 15px;
+          cursor: help;
+        }
+
+        button, input[type=submit] {
+          cursor: pointer;
+        }
+        
+        .buttons-row__content-wrapper {
+          display: flex;
+          justify-content: center;
+          gap: 10px;
+          font-weight: normal;
+        }
+
+        .custom-file-upload {
+          display: block;
+          width: fit-content;
+          border: 1px solid black;
+          padding: 5px 14px;
+          border-radius: 5px;
+          box-shadow: 0 1px 3px #ddd;
+          background: linear-gradient(white, #ddd);
+        }
+
+        .buttons > * > * {
+          display: flex;
+          gap: 10px;
+        }
+
+        .always-prettify-container {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+        }
+
+        .header > * {
+          display: flex;
+          gap: 5px;
+        }
+
+        :is(.header, .options) input {
+          width: unset;
+        }
+          
+        .header {
+          display: flex;
+          gap: 30px;
+          align-items: start;
+        }
+
+        .options {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 10px;
+        }
+
+        .options > * {
+          display: flex;
+          gap: 5px;
+          align-items: center;
+        }
+
+        .legend-container {
+          display: flex;
+        }
+
+        .legend-container > :not(:last-child) {
+          padding-right: 15px;
+          border-right: 1px solid #ddd;
+        }
+
+        .legend-container > :not(:first-child) {
+          padding-left: 15px;
+        }
+
+        .legend-container > * {
+          display: flex;
+          flex-direction: column;
+          flex: 0 1 48%;
+          gap: 5px;
+        }
+
+        .legend-container__desc-header {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+          justify-content: end;
+        }
+
+        .legend-desc {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+        }
+
+        .collapsed, .hidden {
+          display: none;
+        }
+
+        .collapse-button::after {
+          content: "Свернуть"
+        }
+
+        .collapsed + * > .collapse-button::after {
+          content: "Развернуть"
+        }
+        
+        :is(.comment, .legend-desc) > * {
+          display: flex;
+          gap: 5px;
+        }
+
+        :is(.comment, .legend-desc) label {
+          display: block;
+          width: 10em;
+        }
+
+        :is(.comment, .legend-desc) > * > :nth-child(2) {
+          flex: 1 1 auto;
+        }
+
+        textarea {
+          width: 100%;
+        }
+      }
+
+      .files-container input[type=radio][value="c"] {
+        display: none;
+      }
+
+      .file-list-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 5px;
+      }
+
+      .file-container {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+
+      .file-container img.preview {
+        width: 120px;
+      }
+
+      .file-container img.preview-small {
+        width: 60px;
+      }
+
+      .file-container img:is(.preview, .preview-small) {
+        cursor: zoom-in;
+      }
+
+      dialog .preview,
+      .swiper {
+        max-width: 1000px;
+        width: 100%;
+        max-height: 500px;
+        height: 100%;
+      }
+
+      .swiper-button-next,
+      .swiper-button-prev {
+        user-select: none;
+        -webkit-user-select: none;
+      }
+
+      .swiper-wrapper {
+        align-items: center;
+      }
+
+      .swiper-wrapper > .swiper-slide {
+        width: 100%;
+        max-height: 500px;
+        height: 100%;
+      }
+
+      .swiper-slide img {
+        width: 100%;
+        max-height: 500px;
+        height: 100%;
+        object-fit: contain;
+        object-position: center;
+      }
+
+      .swiper-download-link {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        background: white;
+        padding: 5px 10px;
+        margin: 5px;
+        border: 1px solid #ccc;
+        border-radius: 7.5px;
+      }
+
+      button.button-delete {
+        padding: 0;
+        border: 0;
+        margin: 0;
+        background: none;
+        font-size: 18px;
+      }
+
+      .admin-files-container {
+        display: flex;
+      }
+
+      .admin-files-container > :not(:last-child) {
+        padding-right: 10px;
+        border-right: 1px solid #ddd;
+      }
+
+      .admin-files-container > :not(:first-child) {
+        padding-left: 10px;
+      }
+
+      dialog img.preview {
+        width: auto;
+      }
+
+      .file-buttons-container {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+    `)
+  }
+
   function prettifyEditCpPage() {
     addCss("https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css")
     addCss("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css")
+    addPrettifyEditPageCss()
 
     /* NEW DEFALUT VALUES */
 
@@ -1500,7 +1833,7 @@
     let to = rows.findIndex(el => el.querySelector("th")?.textContent.trim() == "Бонусы")
     toggleRows(rows, 3, to, 8, showIndex)
     toggleRows(rows, to, rows.length, 1, [])
-}
+  }
 
   function prettifyRouteStagesPage() {
     let styles = `
@@ -1528,361 +1861,35 @@
     addStylesToHead(styles)
   }
 
-  let styles = `
+  function addCommonStyles() {
-    .sticky-menu {
+    addStylesToHead(`
-      position: sticky;
+      .sticky-menu {
-      top: 0;
+        position: sticky;
-      z-index: 9999;
+        top: 0;
+        z-index: 9999;
       
-      menu {
+        menu {
-        display: flex;
+          display: flex;
-        gap: .3rem;
+          gap: .3rem;
-        background: white;
+          background: white;
-        font-size: 1.2rem;
+          font-size: 1.2rem;
-        padding-left: 10px;
+          padding-left: 10px;
 
-        li {
+          li {
-          list-style-type: none;
+            list-style-type: none;
 
-          &:not(:last-child)::after {
+            &:not(:last-child)::after {
-            content: " | "
+              content: " | "
+            }
           }
         }
       }
-    }
 
-    #content h1 {
+      #content h1 {
-      margin-bottom: 0;
+        margin-bottom: 0;
-    }
-
-    #content-wrapper {
-      display: flex;
-      gap: 20px;
-    
-      #props {
-        width: unset !important;
       }
-
+    `)
-      form {
+  }
-        width: 50%;
-      }
-
-      #map-wrapper {
-        width: 50%;
-      }
-
-      #map {
-        width: unset !important;
-      }
-
-      #new {
-        display: flex;
-        flex-direction: column;
-
-        & > :not(:first-child) {
-          padding-top: 5px;
-          border-top: 1px solid #ddd;
-        }
-
-        & > :not(:last-child) {
-          padding-bottom: 5px;
-        }
-
-        .map-icon {
-          width: 15px;
-          height: 15px;
-        }
-
-        .copy-button {
-          all: unset;
-          cursor: pointer;
-        }
-
-        .copy-button img {
-          width: 15px;
-          heigth: 15px;
-        }
-
-        input[type=radio], input[type=checkbox] {
-          margin: 0;
-        }
-
-        input[type=radio] {
-          margin-right: 5px;
-        }
-
-        input[type="file"] {
-          display: none;
-        }
-
-        div > input[type="checkbox"] {
-          display: flex;
-          align-items: center;
-        }
-
-        input#cp_number {
-          width: 3em;
-        }
-
-        select#cps_main {
-          width: 6em;
-        }
-
-        input:is(#lat, #lng) {
-          width: 5.5em;
-        }
-
-        input[name="cp[name_int]"] {
-          width: 34em;
-        }
-      }
-
-      #cps_main {
-        width: 150px;
-      }
-
-      input[type=submit] {
-        width: fit-content;
-      }
-
-      .desc-icon-container {
-        display: flex;
-        align-items: center;
-      }
-
-      .desc-icon {
-        width: 15px;
-        height: 15px;
-        cursor: help;
-      }
-
-      button, input[type=submit] {
-        cursor: pointer;
-      }
-      
-      .buttons-row__content-wrapper {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
-        font-weight: normal;
-      }
-
-      .custom-file-upload {
-        display: block;
-        width: fit-content;
-        border: 1px solid black;
-        padding: 5px 14px;
-        border-radius: 5px;
-        box-shadow: 0 1px 3px #ddd;
-        background: linear-gradient(white, #ddd);
-      }
-
-      .buttons > * > * {
-        display: flex;
-        gap: 10px;
-      }
-
-      .always-prettify-container {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-      }
-
-      .header > * {
-        display: flex;
-        gap: 5px;
-      }
-
-      :is(.header, .options) input {
-        width: unset;
-      }
-        
-      .header {
-        display: flex;
-        gap: 30px;
-        align-items: start;
-      }
-
-      .options {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-      }
-
-      .options > * {
-        display: flex;
-        gap: 5px;
-        align-items: center;
-      }
-
-      .legend-container {
-        display: flex;
-      }
-
-      .legend-container > :not(:last-child) {
-        padding-right: 15px;
-        border-right: 1px solid #ddd;
-      }
-
-      .legend-container > :not(:first-child) {
-        padding-left: 15px;
-      }
-
-      .legend-container > * {
-        display: flex;
-        flex-direction: column;
-        flex: 0 1 48%;
-        gap: 5px;
-      }
-
-      .legend-container__desc-header {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        justify-content: end;
-      }
-
-      .legend-desc {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
-
-      .collapsed, .hidden {
-        display: none;
-      }
-
-      .collapse-button::after {
-        content: "Свернуть"
-      }
-
-      .collapsed + * > .collapse-button::after {
-        content: "Развернуть"
-      }
-      
-      :is(.comment, .legend-desc) > * {
-        display: flex;
-        gap: 5px;
-      }
-
-      :is(.comment, .legend-desc) label {
-        display: block;
-        width: 10em;
-      }
-
-      :is(.comment, .legend-desc) > * > :nth-child(2) {
-        flex: 1 1 auto;
-      }
-
-      textarea {
-        width: 100%;
-      }
-    }
-
-    .files-container input[type=radio][value="c"] {
-      display: none;
-    }
-
-    .file-list-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-top: 5px;
-    }
-
-    .file-container {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-    }
-
-    .file-container img.preview {
-      width: 120px;
-    }
-
-    .file-container img.preview-small {
-      width: 60px;
-    }
-
-    .file-container img:is(.preview, .preview-small) {
-      cursor: zoom-in;
-    }
-
-    dialog .preview,
-    .swiper {
-      max-width: 1000px;
-      width: 100%;
-      max-height: 500px;
-      height: 100%;
-    }
-
-    .swiper-button-next,
-    .swiper-button-prev {
-      user-select: none;
-      -webkit-user-select: none;
-    }
-
-    .swiper-wrapper {
-      align-items: center;
-    }
-
-    .swiper-wrapper > .swiper-slide {
-      width: 100%;
-      max-height: 500px;
-      height: 100%;
-    }
-
-    .swiper-slide img {
-      width: 100%;
-      max-height: 500px;
-      height: 100%;
-      object-fit: contain;
-      object-position: center;
-    }
-
-    .swiper-download-link {
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 0;
-      background: white;
-      padding: 5px 10px;
-      margin: 5px;
-      border: 1px solid #ccc;
-      border-radius: 7.5px;
-    }
-
-    button.button-delete {
-      padding: 0;
-      border: 0;
-      margin: 0;
-      background: none;
-      font-size: 18px;
-    }
-
-    .admin-files-container {
-      display: flex;
-    }
-
-    .admin-files-container > :not(:last-child) {
-      padding-right: 10px;
-      border-right: 1px solid #ddd;
-    }
-
-    .admin-files-container > :not(:first-child) {
-      padding-left: 10px;
-    }
-
-    dialog img.preview {
-      width: auto;
-    }
-
-    .file-buttons-container {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-  `
 
   /* REDIRECTS */
 
@@ -1890,7 +1897,7 @@
 
   /* HEAD */
 
-  addStylesToHead(styles)
+  addCommonStyles()
 
   /* SWITCH FOR DIFFERENT PAGES */