Просмотр исходного кода

Center install header and update welcome logo

Topbar title is absolutely centered so Help on the right no longer shifts it. Replace the old ring logo with the unacms.com favicon mark at a crisp 64px.
Andrey Yasko 2 месяцев назад
Родитель
Сommit
8e3600197f
3 измененных файлов с 75 добавлено и 39 удалено
  1. 17 19
      install/css/styles.css
  2. 57 16
      install/img/logo.svg
  3. 1 4
      install/templates/_page.php

+ 17 - 19
install/css/styles.css

@@ -47,31 +47,22 @@ body.bx-install-body,
 }
 
 .bx-install-topbar-inner {
+    position: relative;
     max-width: 720px;
     margin: 0 auto;
     padding: 14px 20px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-}
-
-.bx-install-brand {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-}
-
-.bx-install-brand-mark {
-    width: 10px;
-    height: 10px;
-    border-radius: 999px;
-    background: var(--bx-inst-accent);
-    flex: 0 0 auto;
+    justify-content: flex-end;
+    min-height: 48px;
+    box-sizing: border-box;
 }
 
 .bx-install-brand-title {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
     font-size: 14px;
     font-weight: 600;
     letter-spacing: -0.01em;
@@ -79,9 +70,14 @@ body.bx-install-body,
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    max-width: calc(100% - 120px);
+    text-align: center;
+    pointer-events: none;
 }
 
 .bx-install-help {
+    position: relative;
+    z-index: 1;
     font-size: 13px;
     font-weight: 500;
     color: var(--bx-inst-accent);
@@ -218,8 +214,10 @@ a.bx-btn-disabled,
 .bx-install-initial img.bx-install-img {
     display: block;
     margin: 8px auto 24px;
-    width: 180px;
-    max-width: 55%;
+    width: 64px;
+    height: 64px;
+    max-width: 64px;
+    border-radius: 16px;
 }
 
 .bx-install-initial-langs {

+ 57 - 16
install/img/logo.svg

@@ -1,18 +1,59 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 520 520" style="enable-background:new 0 0 520 520;" xml:space="preserve">
-<style type="text/css">
-	.inner .p1 {fill:#4990E2;}
-	.inner .p2 {fill:#2AB191;}
-	.outer .p1, .outer .p2 {fill:#FF805F;}
-</style>
-<g class="colored">
-<g class="inner">
-<path class="p1" d="M152,260C152,260,152,260,152,260c0-59.8,48.4-108.4,108.1-108.4c43.3,0,80.9,25.6,97.9,62.4V107.3c-28-18.3-61.9-28.9-98.1-28.9C159.8,78.4,78.6,159.9,78.6,260c0,59.5,28.4,112.4,73.4,145.6V260z"/>
-<path class="p2" d="M368,114.4V260c0,59.8-48.4,108.4-108.1,108.4c-43.3,0-80.9-25.6-97.9-62.4v106.7c28,18.3,61.9,28.9,98.1,28.9c100.1,0,181.3-81.4,181.3-181.6C441.4,200.5,413,147.6,368,114.4z"/>
-</g>
-<g class="outer">
-<path class="p1" d="M146.9,106.7c-8.1-15-36.9-29.9-68.9-27.3v124.2C90,164.3,114.6,130.5,146.9,106.7z"/>
-<path class="p2" d="M373.1,413.3c8.1,15,36.7,29.9,68.9,27.3V316.4C429.8,355.7,405.4,389.5,373.1,413.3z"/>
-</g>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="12" fill="url(#paint0_linear_201_173)"/>
+<path d="M23.9997 6.66663C33.5725 6.66663 41.3335 14.4268 41.3337 23.9996C41.3337 33.5726 33.5726 41.3336 23.9997 41.3336C14.4269 41.3334 6.66669 33.5725 6.66669 23.9996C6.66686 14.427 14.427 6.6668 23.9997 6.66663ZM23.9997 17.3336C20.3181 17.3338 17.3339 20.318 17.3337 23.9996C17.3337 24.7903 17.4717 25.5488 17.7243 26.2526C19.6509 26.8298 21.1693 28.3485 21.7468 30.275C22.4506 30.5278 23.2089 30.6666 23.9997 30.6666C27.6816 30.6666 30.6667 27.6815 30.6667 23.9996C30.6666 23.2088 30.5279 22.4505 30.2751 21.7467C28.3485 21.1692 26.8298 19.6509 26.2526 17.7242C25.5489 17.4716 24.7904 17.3336 23.9997 17.3336Z" fill="black" fill-opacity="0.1"/>
+<circle cx="24" cy="24" r="22" stroke="white" stroke-opacity="0.1" stroke-width="0.5" stroke-linecap="round" stroke-dasharray="1 2"/>
+<circle cx="24" cy="24" r="20" stroke="white" stroke-opacity="0.1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.9 1.8"/>
+<g clip-path="url(#clip0_201_173)">
+<path d="M20.1429 33.6428C20.1429 36.4831 17.8404 38.7856 15 38.7856C12.1596 38.7856 9.85717 36.4831 9.85717 33.6428C9.85717 30.8025 12.1596 28.4999 15 28.4999C17.8404 28.4999 20.1429 30.8025 20.1429 33.6428Z" fill="black"/>
+<path d="M38.1429 15.6428C38.1429 18.4831 35.8404 20.7856 33 20.7856C30.1596 20.7856 27.8572 18.4831 27.8572 15.6428C27.8572 12.8025 30.1596 10.4999 33 10.4999C35.8404 10.4999 38.1429 12.8025 38.1429 15.6428Z" fill="black"/>
+<path d="M17.011 17.6053C18.8039 15.8246 21.2735 14.7244 24.0001 14.7244C24.285 14.7244 24.567 14.7364 24.8459 14.76C25.1147 14.7827 25.3599 14.5987 25.4188 14.3354C25.9821 11.8137 27.8256 9.77508 30.2316 8.9373C30.4562 8.85907 30.4793 8.53355 30.2574 8.44775C28.3162 7.69721 26.2062 7.28564 24.0001 7.28564C21.4493 7.28564 19.0271 7.83587 16.8456 8.82406C16.6712 8.90306 16.5613 9.07797 16.5613 9.26942V17.4266C16.5613 17.655 16.8489 17.7662 17.011 17.6053Z" fill="black"/>
+<path d="M34.3045 38.6115C34.1433 38.7306 33.9184 38.614 33.9184 38.4134V24.6428C33.9184 24.3579 33.9065 24.0758 33.8829 23.797C33.8601 23.5282 34.0441 23.2829 34.3074 23.2241C36.8292 22.6608 38.8677 20.8173 39.7055 18.4113C39.7836 18.1866 40.1092 18.1636 40.195 18.3855C40.9456 20.3267 41.3572 22.4367 41.3572 24.6428C41.3572 30.3706 38.5827 35.4503 34.3045 38.6115Z" fill="black"/>
+<path d="M8.29454 30.8742C8.21631 31.0989 7.89079 31.122 7.805 30.9C7.05445 28.9589 6.64288 26.8489 6.64288 24.6428C6.64288 18.915 9.41731 13.8353 13.6956 10.674C13.8568 10.5549 14.0817 10.6717 14.0817 10.8721V24.6428C14.0817 24.9277 14.0937 25.2098 14.1172 25.4886C14.1399 25.7574 13.956 26.0027 13.6927 26.0615C11.171 26.6248 9.13232 28.4683 8.29454 30.8742Z" fill="black"/>
+<path d="M31.1543 40.4616C31.3289 40.3825 31.4387 40.2077 31.4387 40.0163V31.8589C31.4387 31.6305 31.1511 31.5194 30.9889 31.6804C29.1962 33.461 26.7265 34.5612 23.9999 34.5612C23.715 34.5612 23.433 34.5493 23.1542 34.5257C22.8853 34.5029 22.6401 34.6869 22.5813 34.9502C22.018 37.472 20.1744 39.5104 17.7684 40.3483C17.5437 40.4266 17.5207 40.752 17.7426 40.8378C19.6839 41.5883 21.7938 41.9999 23.9999 41.9999C26.5507 41.9999 28.973 41.4497 31.1543 40.4616Z" fill="black"/>
+<path d="M20.1429 33C20.1429 35.8404 17.8405 38.1429 15 38.1429C12.1596 38.1429 9.85718 35.8404 9.85718 33C9.85718 30.1597 12.1596 27.8572 15 27.8572C17.8405 27.8572 20.1429 30.1597 20.1429 33Z" fill="url(#paint1_linear_201_173)"/>
+<path d="M38.1429 15C38.1429 17.8403 35.8404 20.1429 33 20.1429C30.1596 20.1429 27.8572 17.8403 27.8572 15C27.8572 12.1597 30.1596 9.85718 33 9.85718C35.8404 9.85718 38.1429 12.1597 38.1429 15Z" fill="url(#paint2_linear_201_173)"/>
+<path d="M17.011 16.9624C18.8039 15.1818 21.2735 14.0816 24.0001 14.0816C24.285 14.0816 24.567 14.0936 24.8459 14.1171C25.1147 14.1398 25.3599 13.9559 25.4188 13.6926C25.9821 11.1709 27.8256 9.13226 30.2316 8.29448C30.4562 8.21625 30.4793 7.89073 30.2574 7.80493C28.3162 7.05438 26.2062 6.64282 24.0001 6.64282C21.4493 6.64282 19.0271 7.19304 16.8456 8.18123C16.6712 8.26023 16.5613 8.43514 16.5613 8.62659V16.7838C16.5613 17.0122 16.8489 17.1234 17.011 16.9624Z" fill="url(#paint3_linear_201_173)" fill-opacity="0.8"/>
+<path d="M34.3045 37.9687C34.1433 38.0877 33.9184 37.9712 33.9184 37.7706V23.9999C33.9184 23.7151 33.9065 23.433 33.8829 23.1542C33.8601 22.8853 34.0441 22.6401 34.3074 22.5813C36.8292 22.018 38.8677 20.1745 39.7055 17.7684C39.7836 17.5438 40.1092 17.5208 40.195 17.7426C40.9456 19.6839 41.3572 21.7939 41.3572 23.9999C41.3572 29.7278 38.5827 34.8075 34.3045 37.9687Z" fill="url(#paint4_linear_201_173)" fill-opacity="0.8"/>
+<path d="M8.29454 30.2314C8.21631 30.4561 7.89079 30.4791 7.805 30.2572C7.05445 28.316 6.64288 26.2061 6.64288 24C6.64288 18.2722 9.41731 13.1924 13.6956 10.0312C13.8568 9.91208 14.0817 10.0288 14.0817 10.2293V24C14.0817 24.2849 14.0937 24.567 14.1172 24.8458C14.1399 25.1146 13.956 25.3599 13.6927 25.4187C11.171 25.982 9.13232 27.8255 8.29454 30.2314Z" fill="url(#paint5_linear_201_173)" fill-opacity="0.8"/>
+<path d="M31.1543 39.8188C31.3289 39.7397 31.4387 39.5649 31.4387 39.3734V31.2161C31.4387 30.9877 31.1511 30.8766 30.9889 31.0375C29.1962 32.8181 26.7265 33.9183 23.9999 33.9183C23.715 33.9183 23.433 33.9064 23.1542 33.8829C22.8853 33.8601 22.6401 34.0441 22.5813 34.3074C22.018 36.8291 20.1744 38.8676 17.7684 39.7055C17.5437 39.7838 17.5207 40.1091 17.7426 40.1949C19.6839 40.9455 21.7938 41.3571 23.9999 41.3571C26.5507 41.3571 28.973 40.8069 31.1543 39.8188Z" fill="url(#paint6_linear_201_173)" fill-opacity="0.8"/>
+<path d="M20.1429 33.6428C20.1429 36.4831 17.8404 38.7856 15 38.7856C12.1596 38.7856 9.85717 36.4831 9.85717 33.6428C9.85717 30.8025 12.1596 28.4999 15 28.4999C17.8404 28.4999 20.1429 30.8025 20.1429 33.6428Z" fill="black" fill-opacity="0.1"/>
+<path d="M38.1429 15.6428C38.1429 18.4831 35.8404 20.7856 33 20.7856C30.1596 20.7856 27.8572 18.4831 27.8572 15.6428C27.8572 12.8025 30.1596 10.4999 33 10.4999C35.8404 10.4999 38.1429 12.8025 38.1429 15.6428Z" fill="black" fill-opacity="0.1"/>
+<path d="M17.011 17.6053C18.8039 15.8246 21.2735 14.7244 24.0001 14.7244C24.285 14.7244 24.567 14.7364 24.8459 14.76C25.1147 14.7827 25.3599 14.5987 25.4188 14.3354C25.9821 11.8137 27.8256 9.77508 30.2316 8.9373C30.4562 8.85907 30.4793 8.53355 30.2574 8.44775C28.3162 7.69721 26.2062 7.28564 24.0001 7.28564C21.4493 7.28564 19.0271 7.83587 16.8456 8.82406C16.6712 8.90306 16.5613 9.07797 16.5613 9.26942V17.4266C16.5613 17.655 16.8489 17.7662 17.011 17.6053Z" fill="black" fill-opacity="0.1"/>
+<path d="M34.3045 38.6115C34.1433 38.7306 33.9184 38.614 33.9184 38.4134V24.6428C33.9184 24.3579 33.9065 24.0758 33.8829 23.797C33.8601 23.5282 34.0441 23.2829 34.3074 23.2241C36.8292 22.6608 38.8677 20.8173 39.7055 18.4113C39.7836 18.1866 40.1092 18.1636 40.195 18.3855C40.9456 20.3267 41.3572 22.4367 41.3572 24.6428C41.3572 30.3706 38.5827 35.4503 34.3045 38.6115Z" fill="black" fill-opacity="0.1"/>
+<path d="M8.29454 30.8742C8.21631 31.0989 7.89079 31.122 7.805 30.9C7.05445 28.9589 6.64288 26.8489 6.64288 24.6428C6.64288 18.915 9.41731 13.8353 13.6956 10.674C13.8568 10.5549 14.0817 10.6717 14.0817 10.8721V24.6428C14.0817 24.9277 14.0937 25.2098 14.1172 25.4886C14.1399 25.7574 13.956 26.0027 13.6927 26.0615C11.171 26.6248 9.13232 28.4683 8.29454 30.8742Z" fill="black" fill-opacity="0.1"/>
+<path d="M31.1543 40.4616C31.3289 40.3825 31.4387 40.2077 31.4387 40.0163V31.8589C31.4387 31.6305 31.1511 31.5194 30.9889 31.6804C29.1962 33.461 26.7265 34.5612 23.9999 34.5612C23.715 34.5612 23.433 34.5493 23.1542 34.5257C22.8853 34.5029 22.6401 34.6869 22.5813 34.9502C22.018 37.472 20.1744 39.5104 17.7684 40.3483C17.5437 40.4266 17.5207 40.752 17.7426 40.8378C19.6839 41.5883 21.7938 41.9999 23.9999 41.9999C26.5507 41.9999 28.973 41.4497 31.1543 40.4616Z" fill="black" fill-opacity="0.1"/>
 </g>
+<defs>
+<linearGradient id="paint0_linear_201_173" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
+<stop stop-color="#232120"/>
+<stop offset="1" stop-color="#131211"/>
+</linearGradient>
+<linearGradient id="paint1_linear_201_173" x1="15" y1="27.8572" x2="15" y2="38.1429" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_201_173" x1="33" y1="9.85718" x2="33" y2="20.1429" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_201_173" x1="24" y1="6.64282" x2="24" y2="41.3571" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint4_linear_201_173" x1="24" y1="6.64282" x2="24" y2="41.3571" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint5_linear_201_173" x1="24" y1="6.64282" x2="24" y2="41.3571" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint6_linear_201_173" x1="24" y1="6.64282" x2="24" y2="41.3571" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.8"/>
+</linearGradient>
+<clipPath id="clip0_201_173">
+<path d="M6 20.4C6 15.3595 6 12.8393 6.98094 10.9141C7.8438 9.22063 9.22063 7.8438 10.9141 6.98094C12.8393 6 15.3595 6 20.4 6H27.6C32.6405 6 35.1607 6 37.0859 6.98094C38.7794 7.8438 40.1562 9.22063 41.0191 10.9141C42 12.8393 42 15.3595 42 20.4V27.6C42 32.6405 42 35.1607 41.0191 37.0859C40.1562 38.7794 38.7794 40.1562 37.0859 41.0191C35.1607 42 32.6405 42 27.6 42H20.4C15.3595 42 12.8393 42 10.9141 41.0191C9.22063 40.1562 7.8438 38.7794 6.98094 37.0859C6 35.1607 6 32.6405 6 27.6V20.4Z" fill="white"/>
+</clipPath>
+</defs>
 </svg>

+ 1 - 4
install/templates/_page.php

@@ -16,10 +16,7 @@
 <div class="bx-install-shell">
     <header class="bx-install-topbar">
         <div class="bx-install-topbar-inner">
-            <div class="bx-install-brand">
-                <span class="bx-install-brand-mark" aria-hidden="true"></span>
-                <span class="bx-install-brand-title"><?=$sTitle; ?></span>
-            </div>
+            <span class="bx-install-brand-title"><?=$sTitle; ?></span>
             <?php if (!empty($aToolbarItem)): ?>
             <a class="bx-install-help" title="<?=$aToolbarItem['title']; ?>" href="<?=$aToolbarItem['link']; ?>" target="<?=$aToolbarItem['target']; ?>">
                 <?php echo _t('_sys_inst_help'); ?>