| @@ -1,352 +1,1056 @@ | ||
| 1 | - | |
| 2 | -/* Add an element box */ | |
| 3 | -.pagelayer-add-ele{ | |
| 4 | -width:100%; | |
| 5 | -display:block; | |
| 6 | -vertical-align:middle; | |
| 7 | -text-align:center; | |
| 8 | -border:1px dashed #4a4949; | |
| 9 | -min-height:60px; | |
| 10 | -padding:5px; | |
| 11 | -} | |
| 12 | - | |
| 13 | -.pagelayer-add-ele .fa{ | |
| 14 | -font-size:15px; | |
| 15 | -color:#4a4949; | |
| 16 | -cursor:pointer; | |
| 17 | -} | |
| 18 | - | |
| 19 | -.pagelayer-add-ele .fa:hover:before{ | |
| 20 | -color:#3e8ef7; | |
| 21 | -} | |
| 22 | - | |
| 23 | -.pagelayer-add-ele span, | |
| 24 | -.pagelayer-add-widget-area p{ | |
| 25 | -font-family: "Open Sans", Arial,Helvetica,sans-serif; | |
| 26 | -} | |
| 27 | - | |
| 28 | -.pagelayer-empty-col{ | |
| 29 | -display:table-cell; | |
| 30 | -} | |
| 31 | - | |
| 32 | -/*.pagelayer-col{ | |
| 33 | -min-height:100px; | |
| 34 | -}*/ | |
| 35 | - | |
| 36 | -.pagelayer-row{ | |
| 37 | -min-height:20px; | |
| 38 | -} | |
| 39 | - | |
| 40 | -/* Since we have a wrap, we set the cols to the wrap. Hence we need to make the width of the real thing to 100% */ | |
| 41 | -.pagelayer-ele-wrap>.pagelayer-col{ | |
| 42 | -width:100%; | |
| 43 | -} | |
| 44 | - | |
| 45 | -.pagelayer-ele-wrap{ | |
| 46 | -position: relative; | |
| 47 | -} | |
| 48 | - | |
| 49 | -.pagelayer-ele-overlay{ | |
| 50 | -position: absolute; | |
| 51 | -width: 100%; | |
| 52 | -height: 100%; | |
| 53 | -right: 0px; | |
| 54 | -top: 0px; | |
| 55 | -z-index: 10; | |
| 56 | -pointer-events:none; | |
| 57 | -} | |
| 58 | - | |
| 59 | -.pagelayer-ele-hover, .pagelayer-drag-ele-hover{/* Both classes are same. but its just that during drag, we use the later */ | |
| 60 | -outline:1px solid #277CF9; | |
| 61 | -} | |
| 62 | - | |
| 63 | -.pagelayer-active{ | |
| 64 | -outline:1px solid #7460EE; | |
| 65 | -} | |
| 66 | - | |
| 67 | -.pagelayer-hide-active{ | |
| 68 | -outline: transparent !important; | |
| 69 | -} | |
| 70 | - | |
| 71 | -.pagelayer-row-hover{ | |
| 72 | -outline-color:#41A85F; | |
| 73 | -outline-width:1px; | |
| 74 | -} | |
| 75 | - | |
| 76 | -.pagelayer-col-hover{ | |
| 77 | -outline-color:#905101; | |
| 78 | -outline-width:1px; | |
| 79 | -} | |
| 80 | - | |
| 81 | -.pagelayer-ele-option, | |
| 82 | -.pagelayer-row-option, | |
| 83 | -.pagelayer-col-option{ | |
| 84 | -position: absolute; | |
| 85 | -top:0px; | |
| 86 | -right:0px; | |
| 87 | -z-index: 20; | |
| 88 | -padding:0px; | |
| 89 | -margin:0px; | |
| 90 | -line-height: 0; | |
| 91 | -pointer-events:auto; | |
| 92 | -} | |
| 93 | - | |
| 94 | -.pagelayer-eoi{ | |
| 95 | -display:inline-block !important; | |
| 96 | -font-size:12px !important; | |
| 97 | -padding:4px !important; | |
| 98 | -background:#277CF9; | |
| 99 | -color:#fff ; | |
| 100 | -} | |
| 101 | - | |
| 102 | -.pagelayer-eoi:hover{ | |
| 103 | -background:#1c59b3; | |
| 104 | -cursor: pointer; | |
| 105 | -} | |
| 106 | - | |
| 107 | -.pagelayer-row-option{ | |
| 108 | -top:-20px; | |
| 109 | -left:calc(50% - 63px/2); | |
| 110 | -z-index: 30; | |
| 111 | -} | |
| 112 | - | |
| 113 | -.pagelayer-row-option .pagelayer-eoi{ | |
| 114 | -background:#41A85F; | |
| 115 | -} | |
| 116 | - | |
| 117 | -.pagelayer-row-option .pagelayer-eoi:hover{ | |
| 118 | -background:#27713d; | |
| 119 | -} | |
| 120 | - | |
| 121 | -.pagelayer-col-option .pagelayer-eoi{ | |
| 122 | -background:#905101; | |
| 123 | -} | |
| 124 | - | |
| 125 | -.pagelayer-col-option .pagelayer-eoi:hover{ | |
| 126 | -background:#5a3401; | |
| 127 | -} | |
| 128 | - | |
| 129 | -.pagelayer-col-option{ | |
| 130 | -top:0px; | |
| 131 | -left:0px; | |
| 132 | -z-index: 30; | |
| 133 | -width: 21px; | |
| 134 | -} | |
| 135 | - | |
| 136 | -.pagelayer-splash{ | |
| 137 | -background-image:url(../images/splash.png); | |
| 138 | -height:30px; | |
| 139 | -background-position: center center; | |
| 140 | -background-repeat: no-repeat; | |
| 141 | -background-size: cover; | |
| 142 | -} | |
| 143 | - | |
| 144 | -.pagelayer-space-holder{ | |
| 145 | -background:url(../images/space.png); | |
| 146 | -background-repeat:repeat; | |
| 147 | -} | |
| 148 | - | |
| 149 | -.pagelayer-anchor{ | |
| 150 | -background-image:url(../images/anchor.png); | |
| 151 | -height:30px; | |
| 152 | -background-position: center center; | |
| 153 | -background-repeat: no-repeat; | |
| 154 | -background-size: cover; | |
| 155 | -} | |
| 156 | - | |
| 157 | - | |
| 158 | -/* Right Click */ | |
| 159 | -.pagelayer-right-click-options{ | |
| 160 | -position:absolute; | |
| 161 | -background:#e9eaea; | |
| 162 | -border-radius: 2px; | |
| 163 | -box-shadow: 0 0 5px rgba(0,0,0,0.1); | |
| 164 | -z-index: 10; | |
| 165 | -border: 1px solid rgba(0,0,0,0.2); | |
| 166 | -width:135px; | |
| 167 | -} | |
| 168 | - | |
| 169 | -.pagelayer-right-click-options ul{ | |
| 170 | -list-style: none; | |
| 171 | -margin: 0; | |
| 172 | -padding: 0; | |
| 173 | -} | |
| 174 | - | |
| 175 | -.pagelayer-right-click-options a{ | |
| 176 | -color: #4a4949; | |
| 177 | -padding: 8px 10px; | |
| 178 | -width: 100%; | |
| 179 | -display: block; | |
| 180 | -transition: all 0.2s; | |
| 181 | -} | |
| 182 | - | |
| 183 | -.pagelayer-right-click-options a .fa{ | |
| 184 | -margin-right: 5px; | |
| 185 | -} | |
| 186 | - | |
| 187 | -.pagelayer-right-click-options a:hover{ | |
| 188 | -background: #449D44; | |
| 189 | -color:#fff; | |
| 190 | -} | |
| 191 | - | |
| 192 | -.pagelayer-right-click-options li{ | |
| 193 | -border-bottom: 1px solid rgb(236, 236, 236); | |
| 194 | -font-size: 12px; | |
| 195 | -font-family: Opensans, arial; | |
| 196 | -cursor:pointer; | |
| 197 | -} | |
| 198 | - | |
| 199 | -.pagelayer-right-click-options .pagelayer-right-delete:hover { | |
| 200 | -background:#EF4D4D; | |
| 201 | -} | |
| 202 | - | |
| 203 | -@media (min-width: 769px){ | |
| 204 | - .pagelayer-hide-desktop{ | |
| 205 | - display:initial; | |
| 206 | - filter:blur(3px); | |
| 207 | - } | |
| 208 | -} | |
| 209 | - | |
| 210 | -@media (max-width: 768px) and (min-width: 361px){ | |
| 211 | - .pagelayer-hide-tablet{ | |
| 212 | - display:initial; | |
| 213 | - filter:blur(3px); | |
| 214 | - } | |
| 215 | -} | |
| 216 | - | |
| 217 | -@media (max-width: 360px){ | |
| 218 | - .pagelayer-hide-mobile{ | |
| 219 | - display:initial; | |
| 220 | - filter:blur(3px); | |
| 221 | - } | |
| 222 | -} | |
| 223 | - | |
| 224 | -/* Pagelayer add section area */ | |
| 225 | - | |
| 226 | -.pagelayer-add-widget-area{ | |
| 227 | -padding: 10px; | |
| 228 | -width:100%; | |
| 229 | -text-align: center; | |
| 230 | -border: 2px #3e8ef7; | |
| 231 | -border-style: dashed; | |
| 232 | -position:relative; | |
| 233 | -font-family: "Open Sans", Arial,Helvetica,sans-serif; | |
| 234 | -margin:20px 0px; | |
| 235 | -} | |
| 236 | - | |
| 237 | -.pagelayer-add-widget-area .pagelayer-add-button{ | |
| 238 | -font-size: 14px; | |
| 239 | -font-weight: bold; | |
| 240 | -border: 1px solid #007bff; | |
| 241 | -background-color: #007bff; | |
| 242 | -color:#fff; | |
| 243 | -border-radius:5px; | |
| 244 | -padding:9px; | |
| 245 | -margin-right:5px; | |
| 246 | -cursor:pointer; | |
| 247 | -display:inline-block; | |
| 248 | -} | |
| 249 | - | |
| 250 | -.pagelayer-add-widget-area .pagelayer-add-button:hover{ | |
| 251 | -border: 1px solid #0069d9; | |
| 252 | -background-color: #0069d9; | |
| 253 | -} | |
| 254 | - | |
| 255 | -.pagelayer-add-widget-area .pagelayer-add-section{ | |
| 256 | -border: 1px solid #17a2b8; | |
| 257 | -background-color: #17a2b8; | |
| 258 | -} | |
| 259 | - | |
| 260 | -.pagelayer-add-widget-area .pagelayer-add-section:hover{ | |
| 261 | -border: 1px solid #138496; | |
| 262 | -background-color: #138496; | |
| 263 | -} | |
| 264 | - | |
| 265 | -.pagelayer-add-widget-area p{ | |
| 266 | -margin: 0px !important; | |
| 267 | -} | |
| 268 | - | |
| 269 | -.pagelayer-add-widget-drag{ | |
| 270 | -border-color: #111111; | |
| 271 | -background: #c4d2de; | |
| 272 | -} | |
| 273 | - | |
| 274 | -/* Pagelayer Drag stuff */ | |
| 275 | - | |
| 276 | -.pagelayer-is-dragging{ | |
| 277 | -opacity: 0.33; | |
| 278 | -transition:0.1s; | |
| 279 | -} | |
| 280 | - | |
| 281 | -.pagelayer-drag-show{ | |
| 282 | -position:absolute; | |
| 283 | -top:0px; | |
| 284 | -left:0px; | |
| 285 | -display:none; | |
| 286 | -background: blue; | |
| 287 | -z-index:1000; | |
| 288 | -} | |
| 289 | - | |
| 290 | -.pagelayer-drag-prospect{ | |
| 291 | -height:1px; | |
| 292 | -background:#00BCD4; | |
| 293 | -z-index: 1000; | |
| 294 | -} | |
| 295 | - | |
| 296 | -.pagelayer-drag-prospect-col{ | |
| 297 | -position: absolute; | |
| 298 | -top: 0px; | |
| 299 | -width: 1px; | |
| 300 | -height: 100% !important; | |
| 301 | -} | |
| 302 | - | |
| 303 | -/* Column resize handler icon */ | |
| 304 | -.pagelayer-resize-handler{ | |
| 305 | -position:absolute; | |
| 306 | -top:50%; | |
| 307 | -left:100%; | |
| 308 | -transform: translate(-43%, -50%); | |
| 309 | -color: #fff; | |
| 310 | -font-size: 11px; | |
| 311 | -z-index: 99; | |
| 312 | -cursor:ew-resize; | |
| 313 | -display:none; | |
| 314 | -pointer-events: all; | |
| 315 | -} | |
| 316 | - | |
| 317 | -.pagelayer-resize-icon{ | |
| 318 | -background-color: #905101; | |
| 319 | -padding: 3px; | |
| 320 | -border-radius: 4px; | |
| 321 | -height:30px; | |
| 322 | -display:inline-block; | |
| 323 | -} | |
| 324 | - | |
| 325 | -.pagelayer-resize-handler:before{ | |
| 326 | -content:attr(pre-width); | |
| 327 | -background: #4f4f4f; | |
| 328 | -position: absolute; | |
| 329 | -right: 120%; | |
| 330 | -top: 50%; | |
| 331 | -transform: translateY(-50%); | |
| 332 | -padding: 0 6px; | |
| 333 | -border-radius:100%; | |
| 334 | -} | |
| 335 | - | |
| 336 | -.pagelayer-resize-handler:after{ | |
| 337 | -content:attr(next-width); | |
| 338 | -background: #4f4f4f; | |
| 339 | -position: absolute; | |
| 340 | -left: 120%; | |
| 341 | -top: 50%; | |
| 342 | -transform: translateY(-50%); | |
| 343 | -padding: 0 6px; | |
| 344 | -border-radius:100%; | |
| 345 | -} | |
| 346 | - | |
| 347 | -/* Hide resize handler icon from last child*/ | |
| 348 | -.pagelayer-wrap-col:not(:last-child):hover > .pagelayer-ele-hover .pagelayer-resize-handler{ | |
| 349 | -display:block; | |
| 350 | -} | |
| 351 | - | |
| 352 | -/* Column resize handler icon end */ | |
| 1 | + | |
| 2 | +/* Add an element box */ | |
| 3 | +.pagelayer-add-ele{ | |
| 4 | +display:block; | |
| 5 | +vertical-align:middle; | |
| 6 | +text-align:center; | |
| 7 | +border:1px dashed #4a4949; | |
| 8 | +min-height:60px; | |
| 9 | +padding:5px; | |
| 10 | +color:#4f4f4f; | |
| 11 | +font-size: 16px; | |
| 12 | +line-height: 1.5; | |
| 13 | +position: relative; | |
| 14 | +} | |
| 15 | + | |
| 16 | +.pagelayer-add-ele .fas{ | |
| 17 | +font-size:15px; | |
| 18 | +color:#4a4949; | |
| 19 | +cursor:pointer; | |
| 20 | +} | |
| 21 | + | |
| 22 | +.pagelayer-add-ele .fas:hover:before{ | |
| 23 | +color:#3e8ef7; | |
| 24 | +} | |
| 25 | + | |
| 26 | +.pagelayer-add-ele span, | |
| 27 | +.pagelayer-add-widget-area p{ | |
| 28 | +font-family: "Open Sans", Arial, Helvetica, sans-serif; | |
| 29 | +} | |
| 30 | + | |
| 31 | +.pagelayer-empty-col{ | |
| 32 | +display:table-cell; | |
| 33 | +} | |
| 34 | + | |
| 35 | +.pagelayer-row{ | |
| 36 | +min-height:20px; | |
| 37 | +} | |
| 38 | + | |
| 39 | +/* Since we have a wrap, we set the cols to the wrap. Hence we need to make the width of the real thing to 100% */ | |
| 40 | +.pagelayer-ele-wrap>.pagelayer-col{ | |
| 41 | +width:100%; | |
| 42 | +} | |
| 43 | + | |
| 44 | +.pagelayer-ele-wrap{ | |
| 45 | +position: relative; | |
| 46 | +} | |
| 47 | + | |
| 48 | +/*.pagelayer-ele-option{ | |
| 49 | +min-height: 10px; | |
| 50 | +} */ | |
| 51 | + | |
| 52 | +.pagelayer-wrap-col{ | |
| 53 | +align-content: unset !important; | |
| 54 | +} | |
| 55 | + | |
| 56 | +.pagelayer-ele-overlay{ | |
| 57 | +position: absolute; | |
| 58 | +width: 100%; | |
| 59 | +height: 100%; | |
| 60 | +right: 0px; | |
| 61 | +top: 0px; | |
| 62 | +z-index: 10; | |
| 63 | +pointer-events:none; | |
| 64 | +opacity: 0%; | |
| 65 | +outline-width:0px; | |
| 66 | +transition: outline 0.1s ease, opacity 0.1s ease; | |
| 67 | +} | |
| 68 | + | |
| 69 | +.pagelayer-ele-hover, .pagelayer-drag-ele-hover{ | |
| 70 | +outline: 2px dashed #2563eb !important; | |
| 71 | +opacity: 100% !important; | |
| 72 | +} | |
| 73 | + | |
| 74 | +.pagelayer-active{ | |
| 75 | +outline: 2px solid #2563eb !important; | |
| 76 | +opacity: 100% !important; | |
| 77 | +} | |
| 78 | + | |
| 79 | +.pagelayer-editor-hidden-element { | |
| 80 | +opacity: 0.45 !important; | |
| 81 | +outline: 1.5px dashed #ef4444 !important; | |
| 82 | +filter: grayscale(30%); | |
| 83 | +} | |
| 84 | + | |
| 85 | +.pagelayer-editor-locked-element { | |
| 86 | +outline: 1.5px solid #f59e0b !important; | |
| 87 | +cursor: not-allowed !important; | |
| 88 | +} | |
| 89 | + | |
| 90 | +.pagelayer-editor-locked-element [contenteditable="true"] { | |
| 91 | +pointer-events: none !important; | |
| 92 | +} | |
| 93 | + | |
| 94 | +.pagelayer-hide-active>.pagelayer-ele-overlay{ | |
| 95 | +outline: transparent !important; | |
| 96 | +opacity: 0 !important; | |
| 97 | +} | |
| 98 | + | |
| 99 | +.pagelayer-row-hover{ | |
| 100 | +outline:1px solid #277CF9; | |
| 101 | +} | |
| 102 | + | |
| 103 | +.pagelayer-col-hover{ | |
| 104 | +outline:1px solid #42ADE1; | |
| 105 | +} | |
| 106 | + | |
| 107 | +.pagelayer-ele-option, | |
| 108 | +.pagelayer-row-option, | |
| 109 | +.pagelayer-col-option{ | |
| 110 | +position: absolute; | |
| 111 | +top:0px; | |
| 112 | +right:0px; | |
| 113 | +z-index: 20; | |
| 114 | +padding:0px; | |
| 115 | +margin:0px; | |
| 116 | +line-height: 0; | |
| 117 | +pointer-events:auto; | |
| 118 | +} | |
| 119 | + | |
| 120 | +.pagelayer-eoi{ | |
| 121 | +display:inline-block !important; | |
| 122 | +font-size:12px !important; | |
| 123 | +padding:4px !important; | |
| 124 | +background:#444; | |
| 125 | +color:#fff; | |
| 126 | +} | |
| 127 | + | |
| 128 | +.pagelayer-eoi:hover{ | |
| 129 | +background:#222; | |
| 130 | +cursor: pointer; | |
| 131 | +} | |
| 132 | + | |
| 133 | +.pagelayer-row-option{ | |
| 134 | +top:-20px; | |
| 135 | +left:calc(50% - 63px/2); | |
| 136 | +z-index: 30; | |
| 137 | +} | |
| 138 | + | |
| 139 | +.pagelayer-row-option-zero>.pagelayer-wrap-row:nth-child(1 of .pagelayer-wrap-row)>.pagelayer-ele-overlay .pagelayer-row-option{ | |
| 140 | +top:0; | |
| 141 | +} | |
| 142 | + | |
| 143 | +.pagelayer-row-option .pagelayer-eoi{ | |
| 144 | +background:#277CF9; | |
| 145 | +} | |
| 146 | + | |
| 147 | +.pagelayer-row-option .pagelayer-eoi:hover{ | |
| 148 | +background:#1c59b3; | |
| 149 | +} | |
| 150 | + | |
| 151 | +.pagelayer-wrap-row > .pagelayer-ele-overlay .pagelayer-move-up, | |
| 152 | +.pagelayer-col-holder > .pagelayer-wrap-inner-row:first-child > .pagelayer-ele-overlay .pagelayer-move-up, | |
| 153 | +.pagelayer-col-holder > .pagelayer-wrap-ele:first-child > .pagelayer-ele-overlay .pagelayer-move-up{ | |
| 154 | +display:none !important; | |
| 155 | +} | |
| 156 | + | |
| 157 | +.pagelayer-wrap-row ~ .pagelayer-wrap-row > .pagelayer-ele-overlay .pagelayer-move-up{ | |
| 158 | +display:inline-block !important; | |
| 159 | +} | |
| 160 | + | |
| 161 | +.pagelayer-wrap-row:nth-last-of-type(2) > .pagelayer-ele-overlay .pagelayer-move-down, | |
| 162 | +.pagelayer-col-holder > .pagelayer-wrap-inner-row:last-child > .pagelayer-ele-overlay .pagelayer-move-down, | |
| 163 | +.pagelayer-col-holder > .pagelayer-wrap-ele:last-child > .pagelayer-ele-overlay .pagelayer-move-down{ | |
| 164 | +display:none !important; | |
| 165 | +} | |
| 166 | + | |
| 167 | +.pagelayer-col-option .pagelayer-eoi{ | |
| 168 | +background:#42ADE1; | |
| 169 | +} | |
| 170 | + | |
| 171 | +.pagelayer-col-option .pagelayer-eoi:hover{ | |
| 172 | +background:#1070AA; | |
| 173 | +} | |
| 174 | + | |
| 175 | +.pagelayer-col-option{ | |
| 176 | +top:0px; | |
| 177 | +left:0px; | |
| 178 | +z-index: 30; | |
| 179 | +width: 21px; | |
| 180 | +} | |
| 181 | + | |
| 182 | +.pagelayer-splash{ | |
| 183 | +background-image:url(../images/splash.png); | |
| 184 | +height:30px; | |
| 185 | +background-position: center center; | |
| 186 | +background-repeat: no-repeat; | |
| 187 | +background-size: cover; | |
| 188 | +} | |
| 189 | + | |
| 190 | +.pagelayer-space-holder{ | |
| 191 | +background:url(../images/space.png); | |
| 192 | +background-repeat:repeat; | |
| 193 | +} | |
| 194 | + | |
| 195 | +.pagelayer-anchor{ | |
| 196 | +background-image:url(../images/anchor.png); | |
| 197 | +height:30px; | |
| 198 | +background-position: center center; | |
| 199 | +background-repeat: no-repeat; | |
| 200 | +background-size: cover; | |
| 201 | +} | |
| 202 | + | |
| 203 | +/* Right Click */ | |
| 204 | +.pagelayer-right-click-options{ | |
| 205 | +position:fixed; | |
| 206 | +background:#e9eaea; | |
| 207 | +border-radius: 2px; | |
| 208 | +box-shadow: 0 0 5px rgba(0,0,0,0.1); | |
| 209 | +z-index: 99999; | |
| 210 | +border: 1px solid rgba(0,0,0,0.2); | |
| 211 | +min-width:135px; | |
| 212 | +} | |
| 213 | + | |
| 214 | +.pagelayer-right-click-options ul{ | |
| 215 | +list-style: none; | |
| 216 | +margin: 0; | |
| 217 | +padding: 0; | |
| 218 | +} | |
| 219 | + | |
| 220 | +.pagelayer-right-click-options a{ | |
| 221 | +color: #4a4949; | |
| 222 | +padding: 8px 10px; | |
| 223 | +width: 100%; | |
| 224 | +display: block; | |
| 225 | +box-sizing: border-box; | |
| 226 | +transition: all 0.2s; | |
| 227 | +white-space:nowrap; | |
| 228 | +} | |
| 229 | + | |
| 230 | +.pagelayer-right-click-options a .far{ | |
| 231 | +margin-right: 5px; | |
| 232 | +} | |
| 233 | + | |
| 234 | +.pagelayer-right-click-options a:hover{ | |
| 235 | +background: #449D44; | |
| 236 | +color:#fff; | |
| 237 | +} | |
| 238 | + | |
| 239 | +.pagelayer-right-click-options li{ | |
| 240 | +border-bottom: 1px solid rgb(236, 236, 236); | |
| 241 | +font-size: 12px; | |
| 242 | +font-family: Opensans, arial; | |
| 243 | +cursor:pointer; | |
| 244 | +} | |
| 245 | + | |
| 246 | +.pagelayer-right-click-options .pagelayer-right-delete:hover { | |
| 247 | +background:#EF4D4D; | |
| 248 | +} | |
| 249 | + | |
| 250 | +.pagelayer-context-disable{ | |
| 251 | +opacity: 0.5; | |
| 252 | +cursor: progress; | |
| 253 | +} | |
| 254 | + | |
| 255 | + | |
| 256 | +.pagelayer-add-widget-area .pagelayer-add-button{ | |
| 257 | +font-size: 14px; | |
| 258 | +font-weight: bold; | |
| 259 | +border: 1px solid #007bff; | |
| 260 | +background-color: #007bff; | |
| 261 | +color:#fff; | |
| 262 | +border-radius:5px; | |
| 263 | +padding:9px; | |
| 264 | +margin-right:5px; | |
| 265 | +cursor:pointer; | |
| 266 | +display:inline-block; | |
| 267 | +} | |
| 268 | + | |
| 269 | +.pagelayer-add-widget-area .pagelayer-add-button:hover{ | |
| 270 | +border: 1px solid #0069d9; | |
| 271 | +background-color: #0069d9; | |
| 272 | +} | |
| 273 | + | |
| 274 | +.pagelayer-add-widget-area .pagelayer-add-section{ | |
| 275 | +border: 1px solid #17a2b8; | |
| 276 | +background-color: #17a2b8; | |
| 277 | +} | |
| 278 | + | |
| 279 | +.pagelayer-add-widget-area .pagelayer-add-section:hover{ | |
| 280 | +border: 1px solid #138496; | |
| 281 | +background-color: #138496; | |
| 282 | +} | |
| 283 | + | |
| 284 | +.pagelayer-add-widget-area p{ | |
| 285 | +margin: 0px !important; | |
| 286 | +color:#4f4f4f; | |
| 287 | +font-size: 20px; | |
| 288 | +line-height: 1.8; | |
| 289 | +} | |
| 290 | + | |
| 291 | +.pagelayer-add-widget-drag{ | |
| 292 | +border-color: #111111; | |
| 293 | +background: #c4d2de; | |
| 294 | +} | |
| 295 | + | |
| 296 | +/* Pagelayer Drag stuff */ | |
| 297 | + | |
| 298 | +.pagelayer-is-dragging{ | |
| 299 | +opacity: 0.33; | |
| 300 | +transition:0.1s; | |
| 301 | +} | |
| 302 | + | |
| 303 | +.pagelayer-drag-show{ | |
| 304 | +position:absolute; | |
| 305 | +top:0px; | |
| 306 | +left:0px; | |
| 307 | +display:none; | |
| 308 | +background: blue; | |
| 309 | +z-index:1000; | |
| 310 | +} | |
| 311 | + | |
| 312 | +.pagelayer-drag-prospect{ | |
| 313 | +height: 4px !important; | |
| 314 | +background: #2563eb !important; | |
| 315 | +z-index: 1000; | |
| 316 | +width: 100%; | |
| 317 | +position: relative; | |
| 318 | +} | |
| 319 | + | |
| 320 | +.pagelayer-drag-prospect::before { | |
| 321 | +content: '' !important; | |
| 322 | +position: absolute !important; | |
| 323 | +left: 0 !important; | |
| 324 | +top: -4px !important; | |
| 325 | +width: 12px !important; | |
| 326 | +height: 12px !important; | |
| 327 | +border-radius: 50% !important; | |
| 328 | +background: #2563eb !important; | |
| 329 | +border: 2px solid #ffffff !important; | |
| 330 | +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; | |
| 331 | +} | |
| 332 | + | |
| 333 | +.pagelayer-drag-prospect-col{ | |
| 334 | +position: absolute; | |
| 335 | +top: 0px; | |
| 336 | +width: 4px !important; | |
| 337 | +height: 100% !important; | |
| 338 | +background: #2563eb !important; | |
| 339 | +position: relative; | |
| 340 | +} | |
| 341 | + | |
| 342 | +.pagelayer-drag-prospect-col::before { | |
| 343 | +content: '' !important; | |
| 344 | +position: absolute !important; | |
| 345 | +left: -4px !important; | |
| 346 | +top: 0 !important; | |
| 347 | +width: 12px !important; | |
| 348 | +height: 12px !important; | |
| 349 | +border-radius: 50% !important; | |
| 350 | +background: #2563eb !important; | |
| 351 | +border: 2px solid #ffffff !important; | |
| 352 | +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; | |
| 353 | +} | |
| 354 | + | |
| 355 | +/* Column resize handler icon */ | |
| 356 | +.pagelayer-resize-handler{ | |
| 357 | +position:absolute; | |
| 358 | +top:50%; | |
| 359 | +left:100%; | |
| 360 | +transform: translate(-43%, -50%); | |
| 361 | +color: #fff; | |
| 362 | +font-size: 11px; | |
| 363 | +z-index: 99; | |
| 364 | +cursor:ew-resize; | |
| 365 | +display:none; | |
| 366 | +pointer-events: all; | |
| 367 | +} | |
| 368 | + | |
| 369 | +.pagelayer-resize-icon{ | |
| 370 | +background-color: #42ADE1; | |
| 371 | +padding: 3px; | |
| 372 | +border-radius: 4px; | |
| 373 | +height:30px; | |
| 374 | +display:inline-block; | |
| 375 | +} | |
| 376 | + | |
| 377 | +.pagelayer-resize-handler:before{ | |
| 378 | +content:attr(pre-width); | |
| 379 | +background: #4f4f4f; | |
| 380 | +position: absolute; | |
| 381 | +right: 120%; | |
| 382 | +top: 50%; | |
| 383 | +transform: translateY(-50%); | |
| 384 | +padding: 0 6px; | |
| 385 | +border-radius:100%; | |
| 386 | +} | |
| 387 | + | |
| 388 | +.pagelayer-resize-handler:after{ | |
| 389 | +content:attr(next-width); | |
| 390 | +background: #4f4f4f; | |
| 391 | +position: absolute; | |
| 392 | +left: 120%; | |
| 393 | +top: 50%; | |
| 394 | +transform: translateY(-50%); | |
| 395 | +padding: 0 6px; | |
| 396 | +border-radius:100%; | |
| 397 | +} | |
| 398 | + | |
| 399 | +/* Hide resize handler icon from last child*/ | |
| 400 | +.pagelayer-wrap-col:not(:last-child):hover > .pagelayer-ele-hover .pagelayer-resize-handler{ | |
| 401 | +display:block; | |
| 402 | +} | |
| 403 | + | |
| 404 | +/* Column resize handler icon end */ | |
| 405 | + | |
| 406 | +/* WordPress media box CSS */ | |
| 407 | +[id^="__wp-uploader"] .screen-reader-text{ | |
| 408 | +display:none; | |
| 409 | +} | |
| 410 | + | |
| 411 | +[id^="__wp-uploader"] .media-button-select{ | |
| 412 | +text-transform: uppercase; | |
| 413 | +font-weight: 700; | |
| 414 | +letter-spacing: 0.046875em; | |
| 415 | +} | |
| 416 | +/* WordPress media box CSS end */ | |
| 417 | + | |
| 418 | + | |
| 419 | +/* image drop zone css start */ | |
| 420 | +.pagelayer-image-drop-zone{ | |
| 421 | +position:absolute; | |
| 422 | +text-align:center; | |
| 423 | +width:100%; | |
| 424 | +height:100%; | |
| 425 | +z-index:3; | |
| 426 | +background-color: rgba(37, 99, 235, 0.94); | |
| 427 | +display:none; | |
| 428 | +} | |
| 429 | + | |
| 430 | +.pagelayer-image-drop-zone *{ | |
| 431 | +pointer-events:none; | |
| 432 | +} | |
| 433 | + | |
| 434 | +.pagelayer-image-drop-zone > div{ | |
| 435 | +position: relative; | |
| 436 | +top: 50%; | |
| 437 | +-webkit-transform: translateY(-50%); | |
| 438 | +-ms-transform: translateY(-50%); | |
| 439 | +transform: translateY(-50%); | |
| 440 | +} | |
| 441 | + | |
| 442 | +.pagelayer-image-drop-zone div *{ | |
| 443 | +color: white !important; | |
| 444 | +line-height: 1; | |
| 445 | +} | |
| 446 | + | |
| 447 | +.pagelayer-image-drop-zone div i{ | |
| 448 | +font-size:50px; | |
| 449 | +} | |
| 450 | + | |
| 451 | +.pagelayer-image-drop-zone h4{ | |
| 452 | +margin: 20px; | |
| 453 | +} | |
| 454 | + | |
| 455 | +.pagelayer-img-up-progress { | |
| 456 | +width: 30%; | |
| 457 | +margin-left: auto; | |
| 458 | +margin-right: auto; | |
| 459 | +background-color: transparent; | |
| 460 | +border: 2px solid white; | |
| 461 | +border-radius: 30px; | |
| 462 | +padding: 3px; | |
| 463 | +} | |
| 464 | + | |
| 465 | +.pagelayer-img-up-bar { | |
| 466 | +width: 3%; | |
| 467 | +height: 7px; | |
| 468 | +background-color: white; | |
| 469 | +line-height: 7px; | |
| 470 | +text-align: center; | |
| 471 | +border-radius: 30px; | |
| 472 | +} | |
| 473 | + | |
| 474 | +@media screen and (max-width: 600px) { | |
| 475 | +.pagelayer-img-up-progress { | |
| 476 | +width: 54%; | |
| 477 | +} | |
| 478 | +} | |
| 479 | +/* image drop zone css start */ | |
| 480 | + | |
| 481 | +.pagelayer-pro-req{ | |
| 482 | +font-size: 10px; | |
| 483 | +padding: 2px 4px; | |
| 484 | +display: inline-block; | |
| 485 | +background-color: #e63131; | |
| 486 | +color: #fff; | |
| 487 | +margin-left: 4px; | |
| 488 | +border-radius: 2px; | |
| 489 | +cursor: pointer; | |
| 490 | +} | |
| 491 | + | |
| 492 | +/* Media upload box css */ | |
| 493 | +.media-modal .media-modal-content h1{ | |
| 494 | +font-size: 22px !important; | |
| 495 | +line-height: 2.27 !important; | |
| 496 | +} | |
| 497 | + | |
| 498 | +.media-modal .media-modal-content h2{ | |
| 499 | +font-size: 13px !important; | |
| 500 | +line-height: 1 !important; | |
| 501 | +} | |
| 502 | + | |
| 503 | +.media-modal .media-modal-content .uploader-inline h2{ | |
| 504 | +font-size: 20px !important; | |
| 505 | +line-height: 1.4 !important; | |
| 506 | +font-weight: 400 !important; | |
| 507 | +} | |
| 508 | +/* Media upload box css end */ | |
| 509 | + | |
| 510 | +/*Tooltip widget*/ | |
| 511 | +.pagelayer-service-details{ | |
| 512 | +position:relative; | |
| 513 | +z-index:9; | |
| 514 | +} | |
| 515 | + | |
| 516 | +.pagelayer-shortcode-plus{ | |
| 517 | +border: none; | |
| 518 | +margin: auto; | |
| 519 | +z-index: 11; | |
| 520 | +cursor: pointer; | |
| 521 | +font-size: 10px; | |
| 522 | +position: absolute; | |
| 523 | +left: 50%; | |
| 524 | +transform: translateX(-50%); | |
| 525 | +bottom: -7px; | |
| 526 | +text-align: center; | |
| 527 | +pointer-events: all; | |
| 528 | +display: none; | |
| 529 | +line-height:1 !important; | |
| 530 | +padding:0 !important; | |
| 531 | +} | |
| 532 | + | |
| 533 | +.pagelayer-show-wiget-list{ | |
| 534 | +opacity:100%; | |
| 535 | +} | |
| 536 | + | |
| 537 | +.pagelayer-show-wiget-list .pagelayer-shortcode-plus, | |
| 538 | +:not(.pagelayer-hide-active) > .pagelayer-ele-hover .pagelayer-shortcode-plus{ | |
| 539 | +display: block !important; | |
| 540 | +} | |
| 541 | + | |
| 542 | +.pagelayer-shortcode-plus .fas{ | |
| 543 | +display: inline-block !important; | |
| 544 | +font-size: 10px !important; | |
| 545 | +padding: 2px !important; | |
| 546 | +background: #444; | |
| 547 | +color: #fff; | |
| 548 | +} | |
| 549 | + | |
| 550 | +.pagelayer-shortcode-plus:hover .fas{ | |
| 551 | +background: #0069d9; | |
| 552 | +} | |
| 553 | + | |
| 554 | +[contenteditable]:focus{ | |
| 555 | +outline: 0px; | |
| 556 | +} | |
| 557 | + | |
| 558 | +[data-placeholder-text]::after{ | |
| 559 | +display:flex; | |
| 560 | +content: attr(data-placeholder-text); | |
| 561 | +position:absolute; | |
| 562 | +top: 50%; | |
| 563 | +transform: translateY(-50%); | |
| 564 | +left:3px; | |
| 565 | +pointer-events:none; | |
| 566 | +opacity:0.6; | |
| 567 | +user-select:none; | |
| 568 | +} | |
| 569 | + | |
| 570 | +.pagelayer-missing-message{ | |
| 571 | +border: 1px solid #434343; | |
| 572 | +background: #fff; | |
| 573 | +padding: 10px; | |
| 574 | +border-radius: 3px; | |
| 575 | +font-size: 13px; | |
| 576 | +} | |
| 577 | + | |
| 578 | +.pagelayer-row-not-found{ | |
| 579 | +padding: 6px; | |
| 580 | +margin: 10px 5px; | |
| 581 | +border: 1px dashed #5a5a5a; | |
| 582 | +} | |
| 583 | + | |
| 584 | +.pagelayer-row-not-found .pagelayer-click-add-row{ | |
| 585 | +cursor: pointer; | |
| 586 | +color: #007bff !important; | |
| 587 | +} | |
| 588 | + | |
| 589 | +/* Image map */ | |
| 590 | +.pagelayer-imgmap-toolbar, | |
| 591 | +.pagelayer-imgmap-navigator-item-drag, | |
| 592 | +.pagelayer-imgmap-navigator-title{ | |
| 593 | +display: flex; | |
| 594 | +} | |
| 595 | + | |
| 596 | +.pagelayer-imgmap-toolbar { | |
| 597 | +position: absolute !important; | |
| 598 | +left: 10px; | |
| 599 | +top: 0; | |
| 600 | +background: #ffffffb0; | |
| 601 | +border-radius: 6px; | |
| 602 | +padding: 4px; | |
| 603 | +} | |
| 604 | + | |
| 605 | +.pagelayer-imgmap-toolbar-item, | |
| 606 | +.pagelayer-map-navigator-trigger, | |
| 607 | +.pagelayer-map-list-trigger{ | |
| 608 | +width: 24px; | |
| 609 | +padding: 6px; | |
| 610 | +border: none; | |
| 611 | +color: #666161 !important; | |
| 612 | +cursor: pointer; | |
| 613 | +display: inline-block; | |
| 614 | +border-radius: 0; | |
| 615 | +background: transparent !important; | |
| 616 | +font-size: 12px; | |
| 617 | +margin: auto; | |
| 618 | +} | |
| 619 | + | |
| 620 | +.pagelayer-imgmap-toolbar-mover{ | |
| 621 | +padding: 2px; | |
| 622 | +background: gray; | |
| 623 | +border-radius: 10px; | |
| 624 | +cursor: move; | |
| 625 | +} | |
| 626 | + | |
| 627 | +.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_append, | |
| 628 | +.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_save, | |
| 629 | +.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_remove, | |
| 630 | +.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_href, | |
| 631 | +.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_edit, | |
| 632 | +.pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_append, | |
| 633 | +.pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_edit{ | |
| 634 | +display: none; | |
| 635 | +} | |
| 636 | + | |
| 637 | +.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_edit, | |
| 638 | +.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_remove{ | |
| 639 | +display: block; | |
| 640 | +} | |
| 641 | + | |
| 642 | +.pagelayer-imgmap-toolbar-link { | |
| 643 | +position: absolute; | |
| 644 | +width: max-content; | |
| 645 | +padding: 2px 5px 3px 5px; | |
| 646 | +background: #ffffffb0; | |
| 647 | +border-radius: 6px; | |
| 648 | +margin: 28px 0 0 0; | |
| 649 | +display: none; | |
| 650 | +} | |
| 651 | + | |
| 652 | +.pagelayer-imgmap-toolbar-link input { | |
| 653 | +width: 180px; | |
| 654 | +font-size: 12px; | |
| 655 | +padding: 2px !important; | |
| 656 | +} | |
| 657 | + | |
| 658 | +.pagelayer-imgmap-save-link { | |
| 659 | +padding: 4px 6px; | |
| 660 | +font-size: 12px; | |
| 661 | +font-weight: bold; | |
| 662 | +border-radius: 6px; | |
| 663 | +margin: 0 0 0 6px; | |
| 664 | +cursor: pointer; | |
| 665 | +} | |
| 666 | + | |
| 667 | +.pagelayer-imgmap-hover-active .pagelayer-imgmap-item { | |
| 668 | +cursor: pointer; | |
| 669 | +opacity: 0; | |
| 670 | +} | |
| 671 | + | |
| 672 | +.pagelayer-map-item-active_is_editable{ | |
| 673 | +opacity: 1; | |
| 674 | +} | |
| 675 | + | |
| 676 | +.pagelayer-imgmap-coord { | |
| 677 | +position: absolute; | |
| 678 | +background: #bfbfbf; | |
| 679 | +top: 0; | |
| 680 | +border-radius: 100%; | |
| 681 | +margin-top: -5px; | |
| 682 | +width: 10px; | |
| 683 | +height: 10px; | |
| 684 | +border: 2px solid #000000bf; | |
| 685 | +margin-left: -5px; | |
| 686 | +cursor: pointer; | |
| 687 | +display: none; | |
| 688 | +} | |
| 689 | + | |
| 690 | +span.pagelayer-imgmap-remove-cord { | |
| 691 | +padding: 5px 6px; | |
| 692 | +position: absolute; | |
| 693 | +top: 11px; | |
| 694 | +background: #fff; | |
| 695 | +font-size: 12px; | |
| 696 | +border-radius: 5px; | |
| 697 | +left: -8px; | |
| 698 | +color: gray; | |
| 699 | +cursor: pointer; | |
| 700 | +z-index: 999; | |
| 701 | +display: none; | |
| 702 | +} | |
| 703 | + | |
| 704 | +.pagelayer-imgmap-remove-cord::after { | |
| 705 | +content: ''; | |
| 706 | +padding: 4px; | |
| 707 | +position: absolute; | |
| 708 | +top: -4px; | |
| 709 | +background: inherit; | |
| 710 | +transform: rotate(47deg); | |
| 711 | +left: 7px; | |
| 712 | +} | |
| 713 | + | |
| 714 | +.pagelayer-imgmap-coord:hover > .pagelayer-imgmap-remove-cord, | |
| 715 | +.pagelayer-imgmap-coord.pagelayer-mapele-dragging{ | |
| 716 | +display: block; | |
| 717 | +} | |
| 718 | + | |
| 719 | +.pagelayer-imgmap-coord.pagelayer-mapele-dragging span{ | |
| 720 | +display: none !important; | |
| 721 | +} | |
| 722 | + | |
| 723 | +.pagelayer-imgmap-navigator { | |
| 724 | +position: absolute; | |
| 725 | +width: 245px; | |
| 726 | +background: #f6f6f8; | |
| 727 | +top: 38px; | |
| 728 | +border-radius: 2px; | |
| 729 | +padding: 1px 4px 6px 4px; | |
| 730 | +box-shadow: 0px 0px 4px -1px #666; | |
| 731 | +display: none; | |
| 732 | +} | |
| 733 | + | |
| 734 | +.pagelayer-imgmap-navigator-close { | |
| 735 | +position: absolute; | |
| 736 | +right: 12px; | |
| 737 | +top: 9px; | |
| 738 | +cursor: pointer; | |
| 739 | +} | |
| 740 | + | |
| 741 | +.pagelayer-imgmap-navigator-wrap { | |
| 742 | +height: 162px; | |
| 743 | +overflow-y: auto; | |
| 744 | +scrollbar-width: thin; | |
| 745 | +resize: vertical; | |
| 746 | +padding: 2px 0; | |
| 747 | +} | |
| 748 | + | |
| 749 | +.pagelayer-imgmap-navigator-item { | |
| 750 | +display: grid; | |
| 751 | +grid-template-columns: 30px auto 86px; | |
| 752 | +background: #fff; | |
| 753 | +color: #4f4f4f; | |
| 754 | +padding: 4px; | |
| 755 | +font-size: 12px; | |
| 756 | +margin: 6px 4px; | |
| 757 | +border-radius: 4px; | |
| 758 | +border: 1px solid #d9d9d9; | |
| 759 | +} | |
| 760 | + | |
| 761 | +.pagelayer-imgmap-navigator-item:first-child { | |
| 762 | +margin-top: 0; | |
| 763 | +} | |
| 764 | + | |
| 765 | +.pagelayer-imgmap-navigator-header { | |
| 766 | +text-align: left; | |
| 767 | +padding: 4px 6px; | |
| 768 | +font-size: 12px; | |
| 769 | +font-weight: bolder; | |
| 770 | +} | |
| 771 | + | |
| 772 | +.pagelayer-imgmap-navigator-title { | |
| 773 | +text-align: left; | |
| 774 | +} | |
| 775 | + | |
| 776 | +.pagelayer-imgmap-navigator-item-drag i{ | |
| 777 | +margin: auto; | |
| 778 | +} | |
| 779 | + | |
| 780 | +.pagelayer-imgmap-navigator-title{ | |
| 781 | +align-self: center; | |
| 782 | +} | |
| 783 | + | |
| 784 | +.pagelayer-map-navigator-trigger{ | |
| 785 | +width: 18px; | |
| 786 | +} | |
| 787 | + | |
| 788 | +.pagelayer-navigator-item-active { | |
| 789 | +outline: 1px solid #ff6b6b; | |
| 790 | +} | |
| 791 | +/* Image map end*/ | |
| 792 | + | |
| 793 | +/* Markdown start*/ | |
| 794 | +.pagelayer-markdown-editor-ui{ | |
| 795 | +padding: 2px; | |
| 796 | +text-align: center; | |
| 797 | +margin-top: 10px; | |
| 798 | +} | |
| 799 | + | |
| 800 | +.pagelayer-float-edit-btn{ | |
| 801 | +position: absolute; | |
| 802 | +left: 50%; | |
| 803 | +transform: translateX(-50%) !important; | |
| 804 | +z-index: 90; | |
| 805 | +opacity: 0; | |
| 806 | +visibility: hidden; | |
| 807 | +transition: all 0.3s ease; | |
| 808 | +color: #fff; | |
| 809 | +background-color: #7a36d9; | |
| 810 | +border: 2px solid #b98ef5; | |
| 811 | +border-radius: 20px; | |
| 812 | +font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| 813 | +font-size: 12px; | |
| 814 | +font-weight: 800; | |
| 815 | +padding: 5px 10px; | |
| 816 | +cursor: pointer; | |
| 817 | +line-height: normal; | |
| 818 | +box-shadow: 0 4px 10px rgba(0,0,0,0.15); | |
| 819 | +display: inline-flex; | |
| 820 | +align-items: center; | |
| 821 | +} | |
| 822 | + | |
| 823 | +.pagelayer-markdown-wrapper:hover .pagelayer-float-edit-btn{ | |
| 824 | +opacity: 1; | |
| 825 | +visibility: visible; | |
| 826 | +transform: translateY(0); | |
| 827 | +} | |
| 828 | + | |
| 829 | +.pagelayer-float-edit-btn:hover{ | |
| 830 | +background-color: #642bb3; | |
| 831 | +border-color: #a370e8; | |
| 832 | +} | |
| 833 | + | |
| 834 | +.pagelayer-float-edit-btn .dashicons{ | |
| 835 | +margin-left: 3px; | |
| 836 | +margin-right: 0; | |
| 837 | +font-size:16px; | |
| 838 | +font-weight:800; | |
| 839 | +display: inline-flex; | |
| 840 | +align-items: center; | |
| 841 | +} | |
| 842 | + | |
| 843 | +.pagelayer-markdown-modal{ | |
| 844 | +display:none; | |
| 845 | +position:fixed; | |
| 846 | +top:0; left:0; | |
| 847 | +width:100vw; | |
| 848 | +height:100vh; | |
| 849 | +background:rgba(0,0,0,0.85); | |
| 850 | +z-index:999999; | |
| 851 | +text-align:left; | |
| 852 | +} | |
| 853 | + | |
| 854 | +.pagelayer-mardown-modal-editor{ | |
| 855 | +position:relative; | |
| 856 | +width:90vw; | |
| 857 | +height:90vh; | |
| 858 | +margin:5vh auto; | |
| 859 | +background:#fff; | |
| 860 | +border-radius:6px; | |
| 861 | +display:flex; | |
| 862 | +flex-direction:column; | |
| 863 | +overflow:hidden; | |
| 864 | +box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| 865 | +} | |
| 866 | + | |
| 867 | +.pagelayer-markdown-modal-header{ | |
| 868 | +position: relative; | |
| 869 | +padding:15px 20px; | |
| 870 | +background:#fff; | |
| 871 | +border-bottom:1px solid #ddd; | |
| 872 | +display:flex; | |
| 873 | +justify-content:space-between; | |
| 874 | +align-items:center; | |
| 875 | +} | |
| 876 | + | |
| 877 | +.pagelayer-markdown-modal-header h3{ | |
| 878 | +font-size: 23px !important; | |
| 879 | +margin:0; | |
| 880 | +color:#333; | |
| 881 | +} | |
| 882 | + | |
| 883 | +.pagelayer-markdown-modal-header span:not(.pagelayer-markdown-close-btn){ | |
| 884 | +font-size: 14px; | |
| 885 | +font-weight: normal; | |
| 886 | +opacity: 0.7; | |
| 887 | +margin: 0 0 0 300px; | |
| 888 | +} | |
| 889 | + | |
| 890 | +.pagelayer-markdown-modal-header button{ | |
| 891 | +font-size: 13px; | |
| 892 | +font-weight: 600; | |
| 893 | +padding: 10px; | |
| 894 | +border: 1px solid #9ded9e; | |
| 895 | +border-radius: 20px; | |
| 896 | +margin-right: 40px; | |
| 897 | +} | |
| 898 | + | |
| 899 | +.pagelayer-markdown-close-btn{ | |
| 900 | +position: absolute; | |
| 901 | +top: 15px; | |
| 902 | +right: 20px; | |
| 903 | +font-size: 40px; | |
| 904 | +line-height: 1; | |
| 905 | +font-weight: bold; | |
| 906 | +color: #888; | |
| 907 | +cursor: pointer; | |
| 908 | +transition: color 0.2s ease-in-out; | |
| 909 | +margin: 0; | |
| 910 | +} | |
| 911 | + | |
| 912 | +.pagelayer-markdown-close-btn:hover{ | |
| 913 | +color: #dc3232; | |
| 914 | +} | |
| 915 | + | |
| 916 | +.pagelayer-markdown-modal-container{ | |
| 917 | +display:flex; | |
| 918 | +flex:1; | |
| 919 | +height:calc(100% - 60px); | |
| 920 | +} | |
| 921 | + | |
| 922 | +.pagelayer-markdown-modal-input-box{ | |
| 923 | +flex:1; | |
| 924 | +border-right:1px solid #ddd; | |
| 925 | +background:#282c34; | |
| 926 | +} | |
| 927 | + | |
| 928 | +.pagelayer-markdown-modal-input{ | |
| 929 | +width:100%; | |
| 930 | +height:100%; | |
| 931 | +padding:20px; | |
| 932 | +border:none; | |
| 933 | +resize:none; | |
| 934 | +font-size:14px; | |
| 935 | +background:transparent; | |
| 936 | +color:#abb2bf; | |
| 937 | +outline:none; | |
| 938 | +box-sizing:border-box; | |
| 939 | +} | |
| 940 | + | |
| 941 | +.pagelayer-markdown-modal-input:focus{ | |
| 942 | +color:#abb2bf; | |
| 943 | +} | |
| 944 | + | |
| 945 | +.pagelayer-markdown-modal-preview{ | |
| 946 | +flex:1; | |
| 947 | +padding:20px; | |
| 948 | +overflow-y:auto; | |
| 949 | +background:#fff; | |
| 950 | +color:#333; | |
| 951 | +box-sizing:border-box; | |
| 952 | +} | |
| 953 | + | |
| 954 | +.pagelayer-markdown-spinner{ | |
| 955 | +text-align: center; | |
| 956 | +padding: 20px; | |
| 957 | +} | |
| 958 | + | |
| 959 | +.pagelayer-markdown-error{ | |
| 960 | +color: red; | |
| 961 | +padding: 10px; | |
| 962 | +} | |
| 963 | +/* Markdown end*/ | |
| 964 | + | |
| 965 | +/*Drag and Drop Widget*/ | |
| 966 | +.pagelayer-add-widget-area { | |
| 967 | +padding: 20px 15px !important; | |
| 968 | +width: auto !important; | |
| 969 | +max-width: 90% !important; | |
| 970 | +text-align: center !important; | |
| 971 | +border: 1px dashed #c2cbd2 !important; | |
| 972 | +background-color: transparent !important; | |
| 973 | +border-radius: 4px !important; | |
| 974 | +margin: 30px auto !important; | |
| 975 | +font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; | |
| 976 | +cursor: default !important; | |
| 977 | +} | |
| 978 | + | |
| 979 | +.pagelayer-add-widget-area:hover { | |
| 980 | +border-color: #a4afb7 !important; | |
| 981 | +} | |
| 982 | + | |
| 983 | +.pagelayer-add-buttons-container { | |
| 984 | +display: flex !important; | |
| 985 | +justify-content: center !important; | |
| 986 | +align-items: center !important; | |
| 987 | +gap: 12px !important; | |
| 988 | +margin-bottom: 12px !important; | |
| 989 | +} | |
| 990 | + | |
| 991 | +.pagelayer-add-circle-btn { | |
| 992 | +width: 36px !important; | |
| 993 | +height: 36px !important; | |
| 994 | +border-radius: 50% !important; | |
| 995 | +border: none !important; | |
| 996 | +display: inline-flex !important; | |
| 997 | +align-items: center !important; | |
| 998 | +justify-content: center !important; | |
| 999 | +cursor: pointer !important; | |
| 1000 | +outline: none !important; | |
| 1001 | +padding: 0 !important; | |
| 1002 | +color: #ffffff !important; | |
| 1003 | +transition: background-color 0.2s ease, transform 0.2s ease !important; | |
| 1004 | +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; | |
| 1005 | +} | |
| 1006 | + | |
| 1007 | +.pagelayer-add-circle-btn:hover { | |
| 1008 | +transform: scale(1.08) !important; | |
| 1009 | +} | |
| 1010 | + | |
| 1011 | +.pagelayer-add-circle-btn i { | |
| 1012 | +font-size: 14px !important; | |
| 1013 | +} | |
| 1014 | + | |
| 1015 | +/* Specific colors from */ | |
| 1016 | +.pagelayer-add-circle-plus { | |
| 1017 | +background-color: #495157 !important; /* Dark slate-grey */ | |
| 1018 | +} | |
| 1019 | + | |
| 1020 | +.pagelayer-add-circle-plus:hover { | |
| 1021 | +background-color: #353a3d !important; | |
| 1022 | +} | |
| 1023 | + | |
| 1024 | +.pagelayer-add-circle-folder { | |
| 1025 | +background-color: #556068 !important; /* Slate-grey */ | |
| 1026 | +} | |
| 1027 | + | |
| 1028 | +.pagelayer-add-circle-folder:hover { | |
| 1029 | +background-color: #3f464b !important; | |
| 1030 | +} | |
| 1031 | + | |
| 1032 | +.pagelayer-add-circle-ai { | |
| 1033 | +background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; | |
| 1034 | +color: #ffffff !important; | |
| 1035 | +} | |
| 1036 | + | |
| 1037 | +.pagelayer-add-circle-ai:hover { | |
| 1038 | +background: linear-gradient(135deg, #4f46e5 0%, #7c3aed) !important; | |
| 1039 | +transform: scale(1.08) !important; | |
| 1040 | +box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45) !important; | |
| 1041 | +} | |
| 1042 | + | |
| 1043 | +.pagelayer-add-widget-text { | |
| 1044 | +margin: 0 !important; | |
| 1045 | +color: #7e8b96 !important; | |
| 1046 | +font-size: 13px !important; | |
| 1047 | +font-style: italic !important; | |
| 1048 | +font-family: inherit !important; | |
| 1049 | +line-height: normal !important; | |
| 1050 | +} | |
| 1051 | + | |
| 1052 | +.pagelayer-add-widget-drag { | |
| 1053 | +border-color: #2563eb !important; | |
| 1054 | +background: rgba(37, 99, 235, 0.05) !important; | |
| 1055 | +} | |
| 1056 | + | |
