Apply the Umbraco logo to BackOffice (#11949)

* adding logo as text in replacement of umbraco_logo_white, this will enable existing configuration to continue to work and minimise the breaking change of this PR.

* adjust logo position to fit with logged-in logomark. Allowing for the logo and customised logo to be very wide.

* adding logomark in topbar of backoffice

* login box style

* correction of shadow

* Logo modal, to display more information about the product including linking to the website

* rename to modal

* stop hidden when mouse is out

* Version line without Umbraco

* focus link and use blur as the indication for closing.

* correcting to rgba

* focus and click outside needs a little help to work well

* use @zindexUmbOverlay to ensure right depth going forward.

* adding large logo svg

* append ;

* tidy logo svg file
This commit is contained in:
Niels Lyngsø
2022-02-08 10:35:06 +01:00
committed by nikolajlauridsen
parent 23803a44b7
commit b89cd86d85
8 changed files with 343 additions and 106 deletions

View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 530 627.8" style="enable-background:new 0 0 530 627.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3544B1;}
</style>
<path class="st0" d="M21.2,243.5C21.3,108.8,130.6-0.2,265.3,0S509,109.5,508.8,244.1S399.5,487.6,265,487.6
C130.3,487.5,21.1,378.3,21.2,243.5L21.2,243.5z M260,327c-18.9,0.6-37.8-1.1-56.3-5c-13.7-2.8-25.1-12-30.8-24.8
c-5.5-12.7-8.2-32.3-8-58.8c0.1-13.8,1-27.7,2.6-41.4c1.6-13.4,3.2-24.4,4.8-33.1l1.7-8.6c0-0.3,0-0.5,0-0.8c0-2.4-1.7-4.5-4.1-4.9
l-31.5-4.9h-0.7c-2.3,0-4.3,1.6-4.8,3.8c-0.5,2-0.9,3.5-1.8,8.3c-1.8,9.3-3.5,18.3-5.3,31.5c-1.9,14.3-3.1,28.7-3.5,43.1
c-0.7,10.1-0.7,20.1,0,30.2c0.7,26.7,5.3,48,13.7,63.9c8.4,16,22.7,27.4,42.8,34.4c20.1,7,48.1,10.4,84,10.3h4.5
c35.9,0.1,63.9-3.3,84-10.3s34.3-18.5,42.8-34.4c8.4-16,13-37.3,13.8-63.9c0.7-10.1,0.7-20.1,0-30.2c-0.4-14.4-1.6-28.8-3.5-43.1
c-1.8-13-3.5-22-5.3-31.5c-1-4.8-1.3-6.3-1.8-8.3c-0.5-2.2-2.5-3.8-4.8-3.8h-0.8l-31.5,4.9c-2.4,0.4-4.1,2.5-4.1,4.9
c0,0.3,0,0.5,0,0.8l1.7,8.6c1.6,8.7,3.2,19.7,4.8,33.1c1.6,13.8,2.5,27.6,2.6,41.4c0.3,26.5-2.4,46-8,58.8
c-5.6,12.7-17,22-30.6,24.8c-18.5,3.9-37.4,5.6-56.3,5.1L260,327z"/>
<g>
<path class="st0" d="M469.1,591.8c0-21.1,6-35.9,30.4-35.9s30.4,14.8,30.4,35.9s-6,35.9-30.4,35.9S469.1,612.9,469.1,591.8z
M514.4,591.8c0-14.7-1.9-23-14.9-23s-14.9,8.4-14.9,23s1.9,23,14.9,23S514.4,606.4,514.4,591.8z"/>
<path class="st0" d="M48,625c0.4,0.6,1,1,1.8,1h5.7c1.1,0,2-0.9,2-2v-64.4c0-1.1-0.9-2-2-2H44.1c-1.1,0-2,0.9-2,2v51.1
c-4.8,2.7-10.3,4.1-15.9,4c-7.2,0-10.8-3.2-10.8-10.1v-45c0-1.1-0.9-2-2-2H2c-1.1,0-2,0.9-2,2v46.3c0,13.1,6.2,21.8,23.5,21.8
c7.9-0.1,15.7-2.6,22.2-7.1l2,4.5L48,625z"/>
<path class="st0" d="M175.7,577.7c0-13-6.4-21.8-22.7-21.8c-7.8,0-15.4,2.4-21.9,6.8c-2.9-4.2-8.4-6.8-17.5-6.8
c-7.5,0.1-14.7,2.6-20.6,7.1l-2-4.5l0,0c-0.4-0.6-1-1-1.8-1h-5.7c-1.1,0-2,0.9-2,2v64.4c0,1.1,0.9,2,2,2h11.3c1.1,0,2-0.9,2-2v-51
c4.3-2.6,9.3-4,14.4-4c6.2,0,9.7,2.3,9.7,8.8V624c0,1.1,0.9,2,2,2h11.3c1.1,0,2-0.9,2-2v-51.1c4.3-2.7,9.3-4.1,14.4-4
c6,0,9.7,2.3,9.7,8.8V624c0,1.1,0.9,2,2,2h11.3c1.1,0,2-0.9,2-2L175.7,577.7z"/>
<path class="st0" d="M210.7,620.6c6.4,4.8,14.2,7.3,22.2,7.1c20,0,27.4-13.4,27.4-35.9s-7.4-35.9-27.4-35.9
c-6.5,0-12.9,1.9-18.4,5.3v-20.7c0-1.1-0.8-2-1.9-2.1c0,0,0,0-0.1,0h-11.4c-1.1,0-2,0.9-2,2V624c0,1.1,0.9,2,2,2h5.7
c0.7,0,1.4-0.4,1.8-1l0,0L210.7,620.6z M229.3,614.7c-5.2,0-10.3-1.4-14.8-4v-37.8c4.5-2.6,9.6-4,14.8-4
c13.4,0,15.5,10.3,15.5,22.9S242.8,614.7,229.3,614.7L229.3,614.7z"/>
<path class="st0" d="M317,569.4c-1.8-0.2-3.5-0.4-5.3-0.3c-6.1-0.3-12.2,1.2-17.5,4.1V624c0,1.1-0.9,2-2,2h-11.3c-1.1,0-2-0.9-2-2
v-64.4c0-1.1,0.9-2,2-2h5.7c0.7,0,1.4,0.4,1.8,1l0,0l2,4.5c6.2-4.7,13.8-7.2,21.6-7.1c1.8,0,3.6,0.2,5.4,0.5l0,0
c1,0,1.9,1.7,1.9,2.8v8.2c0,1.1-0.9,2-2,2L317,569.4"/>
<path class="st0" d="M356.2,594.4c-6.8,0.8-10.8,3.4-10.8,10.5c0,5.2,2.3,10.1,10.5,10.1c5.2,0,10.4-1.5,14.7-4.5v-17.7
L356.2,594.4z M374.4,620.6c-5.9,4.6-13.2,7.1-20.7,7.1c-17.7,0-23.5-10.9-23.5-21.9c0-14.8,9.6-21.1,25.1-22.3l15.3-1.2v-3.4
c0-7-3.3-9.7-13.4-9.7c-6.4,0-12.7,1.1-18.7,3.1c-0.2,0-0.4,0-0.6,0c-1.1,0-2-0.9-2-2v-9.1c0-0.9,0.5-1.6,1.3-1.9l0,0
c6.8-2.3,14-3.4,21.1-3.4c22.5,0,27.6,9.8,27.6,24.4v43.7c0,1.1-0.9,2-2,2h-5.7c-0.7,0-1.4-0.4-1.8-1l0,0L374.4,620.6z"/>
<path class="st0" d="M452.4,611.9c0.2,0,0.4,0,0.6,0c1.1,0,2,0.9,2,2v9.1c0,0.8-0.5,1.6-1.2,1.9l0,0c-5.7,2-11.6,3-17.6,2.9
c-24.2,0-31.7-14.5-31.7-35.9s7.4-35.9,31.7-35.9c6-0.2,11.9,0.8,17.5,2.8l0,0c0.8,0.3,1.3,1.1,1.3,1.9v9.1c0,1.1-0.9,2-2,2
c-0.2,0-0.4,0-0.7,0l0,0c-4.9-1.6-10.1-2.3-15.3-2.2c-13.3,0-17.1,9.1-17.1,22.3s3.8,22.3,17.1,22.3c5.2,0.1,10.3-0.7,15.3-2.3"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@@ -1,3 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 315.89 315.89">
<path fill="#ffffff" d="M0,157.74A157.95,157.95,0,1,1,158,315.89,157.95,157.95,0,0,1,0,157.74Zm154.74,54.09a155.41,155.41,0,0,1-36.5-3.29,27.92,27.92,0,0,1-19.94-16q-5.35-12.34-5.21-38.1a243,243,0,0,1,1.69-26.84q1.55-13,3.09-21.46l1.07-5.59a2,2,0,0,0,0-.49,3.2,3.2,0,0,0-2.65-3.17L75.92,93.67h-.44a3.19,3.19,0,0,0-3.11,2.48c-.35,1.31-.56,2.27-1.17,5.38-1.16,6-2.24,11.85-3.43,20.38a264.17,264.17,0,0,0-2.3,27.94,145.24,145.24,0,0,0,0,19.57q.72,25.94,8.9,41.42t27.72,22.3q19.53,6.81,54.43,6.66h2.91q34.94.15,54.41-6.66t27.71-22.3q8.17-15.53,8.91-41.42a145.24,145.24,0,0,0,0-19.57,266.84,266.84,0,0,0-2.3-27.94c-1.2-8.44-2.27-14.26-3.44-20.38-.61-3.11-.81-4.07-1.16-5.38a3.21,3.21,0,0,0-3.12-2.48h-.52l-20.38,3.18a3.2,3.2,0,0,0-2.68,3.17,4,4,0,0,0,0,.49l1.08,5.59q1.55,8.48,3.12,21.46a245.68,245.68,0,0,1,1.65,26.84q.27,25.69-5.21,38.07a27.9,27.9,0,0,1-19.76,16.07,155.19,155.19,0,0,1-36.48,3.29Z"/>
</svg>
<?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 1180 316" style="enable-background:new 0 0 1180 316;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M0.2,157.8C0.3,70.6,71.1-0.1,158.3,0.1S316.2,71,316.1,158.2s-70.8,157.7-157.9,157.7
C70.8,315.9,0.1,245.1,0.2,157.8L0.2,157.8z M154.9,211.9c-12.3,0.4-24.5-0.7-36.5-3.3c-8.8-1.8-16.3-7.8-19.9-16
c-3.6-8.2-5.3-20.9-5.2-38.1c0.1-9,0.6-17.9,1.7-26.8c1-8.7,2.1-15.8,3.1-21.5l1.1-5.6c0-0.2,0-0.3,0-0.5c0-1.6-1.1-2.9-2.6-3.2
l-20.4-3.2h-0.4c-1.5,0-2.8,1-3.1,2.5c-0.3,1.3-0.6,2.3-1.2,5.4c-1.2,6-2.2,11.8-3.4,20.4c-1.3,9.3-2,18.6-2.3,27.9
c-0.4,6.5-0.4,13,0,19.6c0.5,17.3,3.4,31.1,8.9,41.4c5.5,10.3,14.7,17.8,27.7,22.3c13,4.5,31.2,6.8,54.4,6.7h2.9
c23.3,0.1,41.4-2.1,54.4-6.7c13-4.5,22.2-12,27.7-22.3c5.5-10.3,8.4-24.1,8.9-41.4c0.4-6.5,0.4-13,0-19.6
c-0.3-9.3-1-18.7-2.3-27.9c-1.2-8.4-2.3-14.3-3.4-20.4c-0.6-3.1-0.8-4.1-1.2-5.4c-0.3-1.4-1.6-2.5-3.1-2.5h-0.5l-20.4,3.2
c-1.6,0.3-2.7,1.6-2.7,3.2c0,0.2,0,0.3,0,0.5l1.1,5.6c1,5.6,2.1,12.8,3.1,21.5c1,8.9,1.6,17.9,1.7,26.8
c0.2,17.1-1.6,29.8-5.2,38.1c-3.6,8.2-11,14.2-19.8,16.1c-12,2.5-24.2,3.6-36.5,3.3L154.9,211.9z"/>
<path class="st0" d="M1087.2,168c0-30.4,8.6-51.7,43.8-51.7s43.8,21.3,43.8,51.7s-8.6,51.7-43.8,51.7S1087.2,198.4,1087.2,168
L1087.2,168z M1152.5,168c0-21.1-2.7-33.1-21.5-33.1s-21.5,12-21.5,33.1s2.8,33.1,21.5,33.1C1149.8,201.1,1152.5,189.1,1152.5,168
z"/>
<path class="st0" d="M480.4,215.8c0.5,0.9,1.5,1.5,2.5,1.4h8.2c1.6,0,2.9-1.3,2.9-2.9v-92.7c0-1.6-1.3-2.9-2.9-2.9h-16.3
c-1.6,0-2.9,1.3-2.9,2.9v73.6c-7,3.9-14.9,5.9-22.8,5.8c-10.4,0-15.6-4.5-15.6-14.6v-64.8c0-1.6-1.3-2.9-2.9-2.9h-16.4
c-1.6,0-2.9,1.3-2.9,2.9v66.7c0,18.9,8.9,31.3,33.9,31.3c11.4-0.1,22.6-3.7,32-10.2l2.9,6.5L480.4,215.8z"/>
<path class="st0" d="M664.5,147.7c0-18.7-9.3-31.4-32.6-31.4c-11.3,0-22.3,3.4-31.6,9.8c-4.1-6.1-12-9.8-25.3-9.8
c-10.7,0.2-21.1,3.8-29.7,10.2l-2.9-6.5c-0.5-0.9-1.5-1.5-2.5-1.4h-8.3c-1.6,0-2.9,1.3-2.9,2.9v92.8c0,1.6,1.3,2.9,2.9,2.9h16.3
c1.6,0,2.9-1.3,2.9-2.9v-73.5c6.2-3.8,13.4-5.8,20.7-5.8c8.9,0,14,3.3,14,12.6v66.7c0,1.6,1.3,2.9,2.9,2.9h16.3
c1.6,0,2.9-1.3,2.9-2.9v-73.6c6.2-3.9,13.4-5.9,20.7-5.8c8.6,0,14,3.3,14,12.6v66.7c0,1.6,1.3,2.9,2.9,2.9h16.3
c1.6,0,2.9-1.3,2.9-2.9L664.5,147.7z"/>
<path class="st0" d="M714.9,209.4c9.3,6.9,20.5,10.5,32,10.2c28.8,0,39.4-19.3,39.4-51.7s-10.7-51.7-39.4-51.7
c-9.4,0-18.5,2.7-26.4,7.7V94.2c0-1.6-1.2-2.9-2.8-3c0,0-0.1,0-0.1,0h-16.5c-1.6,0-2.9,1.3-2.9,2.9v120.3c0,1.6,1.3,2.9,2.9,2.9
h8.2c1,0,2-0.5,2.5-1.4L714.9,209.4z M741.7,200.9c-7.5,0-14.8-2-21.3-5.8v-54.4c6.5-3.8,13.8-5.8,21.3-5.8
c19.3,0,22.3,14.8,22.3,32.9S761.2,200.9,741.7,200.9L741.7,200.9z"/>
<path class="st0" d="M868,135.7c-2.5-0.3-5.1-0.5-7.7-0.5c-8.8-0.4-17.5,1.7-25.3,5.9v73.2c0,1.6-1.3,2.9-2.9,2.9h-16.3
c-1.6,0-2.9-1.3-2.9-2.9v-92.7c0-1.6,1.3-2.9,2.9-2.9h8.2c1,0,2,0.5,2.5,1.4l2.9,6.5c8.9-6.8,19.9-10.4,31.2-10.2
c2.6,0,5.2,0.2,7.7,0.6c1.4,0,2.7,2.4,2.7,4v11.8c0,1.6-1.3,2.9-2.9,2.9h-0.2"/>
<path class="st0" d="M924.6,171.8c-9.8,1.2-15.6,4.9-15.6,15.2c0,7.5,3.3,14.6,15.2,14.6c7.5,0.1,14.9-2.2,21.1-6.5v-25.5
L924.6,171.8z M950.7,209.4c-8.5,6.7-19,10.3-29.8,10.2c-25.5,0-33.9-15.8-33.9-31.6c0-21.3,13.8-30.4,36.1-32.1l22.1-1.8v-4.9
c0-10.1-4.7-14-19.3-14c-9.2,0-18.3,1.5-26.9,4.5c-0.3,0-0.6,0-0.9,0c-1.6,0-2.9-1.3-2.9-2.9v-13.1c0-1.2,0.7-2.4,1.9-2.8
c9.8-3.3,20.1-5,30.5-4.9c32.3,0,39.8,14.2,39.8,35.1v62.9c0,1.6-1.3,2.9-2.9,2.9h-8.2c-1,0-2-0.5-2.5-1.4L950.7,209.4z"/>
<path class="st0" d="M1063,197c0.3,0,0.6,0,0.9,0c1.6,0,2.9,1.3,2.9,2.9v13.1c0,1.2-0.7,2.3-1.8,2.7c-8.1,2.9-16.7,4.3-25.4,4.1
c-34.9,0-45.7-20.9-45.7-51.7s10.7-51.7,45.7-51.7c8.6-0.2,17.1,1.1,25.2,4c1.1,0.4,1.9,1.5,1.8,2.7v13.1c0,1.6-1.3,2.9-2.9,2.9
c-0.3,0-0.6,0-0.9,0c-7.1-2.2-14.6-3.3-22-3.1c-19.1,0-24.7,13.1-24.7,32.2s5.5,32.1,24.7,32.1c7.5,0.1,14.9-1,22-3.3"/>
</svg>

Before

Width:  |  Height:  |  Size: 976 B

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 315.89 315.89">
<path fill="#ffffff" d="M0,157.74A157.95,157.95,0,1,1,158,315.89,157.95,157.95,0,0,1,0,157.74Zm154.74,54.09a155.41,155.41,0,0,1-36.5-3.29,27.92,27.92,0,0,1-19.94-16q-5.35-12.34-5.21-38.1a243,243,0,0,1,1.69-26.84q1.55-13,3.09-21.46l1.07-5.59a2,2,0,0,0,0-.49,3.2,3.2,0,0,0-2.65-3.17L75.92,93.67h-.44a3.19,3.19,0,0,0-3.11,2.48c-.35,1.31-.56,2.27-1.17,5.38-1.16,6-2.24,11.85-3.43,20.38a264.17,264.17,0,0,0-2.3,27.94,145.24,145.24,0,0,0,0,19.57q.72,25.94,8.9,41.42t27.72,22.3q19.53,6.81,54.43,6.66h2.91q34.94.15,54.41-6.66t27.71-22.3q8.17-15.53,8.91-41.42a145.24,145.24,0,0,0,0-19.57,266.84,266.84,0,0,0-2.3-27.94c-1.2-8.44-2.27-14.26-3.44-20.38-.61-3.11-.81-4.07-1.16-5.38a3.21,3.21,0,0,0-3.12-2.48h-.52l-20.38,3.18a3.2,3.2,0,0,0-2.68,3.17,4,4,0,0,0,0,.49l1.08,5.59q1.55,8.48,3.12,21.46a245.68,245.68,0,0,1,1.65,26.84q.27,25.69-5.21,38.07a27.9,27.9,0,0,1-19.76,16.07,155.19,155.19,0,0,1-36.48,3.29Z"/>
</svg>

After

Width:  |  Height:  |  Size: 976 B

View File

@@ -1,9 +1,9 @@
(function () {
"use strict";
function AppHeaderDirective(eventsService, appState, userService, focusService, backdropService, overlayService) {
function AppHeaderDirective(eventsService, appState, userService, focusService, overlayService, $timeout) {
function link(scope, el, attr, ctrl) {
function link(scope, element) {
var evts = [];
@@ -84,6 +84,35 @@
overlayService.open(dialog);
};
scope.logoModal = {
show: false,
text: "",
timer: null
};
scope.showLogoModal = function() {
$timeout.cancel(scope.logoModal.timer);
scope.logoModal.show = true;
scope.logoModal.text = "version "+Umbraco.Sys.ServerVariables.application.version;
$timeout(function () {
const anchorLink = element[0].querySelector('.umb-app-header__logo-modal');
if(anchorLink) {
anchorLink.focus();
}
});
};
scope.keepLogoModal = function() {
$timeout.cancel(scope.logoModal.timer);
};
scope.hideLogoModal = function() {
$timeout.cancel(scope.logoModal.timer);
scope.logoModal.timer = $timeout(function () {
scope.logoModal.show = false;
}, 100);
};
scope.stopClickEvent = function($event) {
$event.stopPropagation();
};
}
var directive = {

View File

@@ -2,12 +2,65 @@
background: @blueExtraDark;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
height: @appHeaderHeight;
padding: 0 20px;
}
.umb-app-header__logo {
margin-right: 30px;
button {
img {
height: 30px;
}
}
}
.umb-app-header__logo-modal {
position: absolute;
z-index: @zindexUmbOverlay;
top: 50px;
left: 17px;
font-size: 13px;
border-radius: 6px;
width: 160px;
padding: 20px 20px;
background-color:@white;
color: @blueExtraDark;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .14), 0 1px 6px 1px rgba(0, 0, 0, .14);
text-decoration: none;
text-align: center;
&::before {
content:'';
position: absolute;
transform: rotate(45deg);
background-color:@white;
top: -4px;
left: 14px;
width: 8px;
height: 8px;
}
img {
display: block;
height: auto;
width: 120px;
margin-left: auto;
margin-right: auto;
margin-bottom: 3px;
}
}
.umb-app-header__right {
display: flex;
align-items: center;
margin-left: auto;
}
.umb-app-header__actions {
display: flex;
list-style: none;

View File

@@ -28,14 +28,14 @@
.login-overlay__logo {
position: absolute;
top: 22px;
left: 25px;
top: 12.5px;
left: 20px;
right: 25px;
height: 30px;
z-index: 1;
}
.login-overlay__logo > img {
max-height:100%;
.login-overlay__logo img {
height: 100%;
}
.login-overlay .umb-modalcolumn {
@@ -69,7 +69,8 @@
margin-right: 25px;
margin-top: auto;
margin-bottom: auto;
border-radius: @baseBorderRadius;
border-radius: @doubleBorderRadius;
box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.12);
}
.login-overlay .form input[type="text"],

View File

@@ -1,34 +1,99 @@
<div>
<div class="umb-app-header">
<umb-sections
ng-if="authenticated"
sections="sections">
</umb-sections>
<div class="umb-app-header__logo">
<button type="button" class="btn-reset" ng-click="showLogoModal()">
<img
src="assets/img/application/umbraco_logomark_white.svg"
alt="Umbraco"
/>
</button>
<div
tabindex="0"
on-outside-click="hideLogoModal()"
ng-click="stopClickEvent($event)"
ng-focus="keepLogoModal()"
ng-blur="hideLogoModal()"
class="umb-app-header__logo-modal"
ng-if="logoModal.show"
>
<img
src="assets/img/application/umbraco_logo_large_blue.svg"
alt="Umbraco — The Friendly CMS"
/>
<small> {{logoModal.text}} </small>
<br /><br />
<a
href="https://umbraco.com"
title="Umbraco website"
target="_blank"
rel="noopener"
ng-focus="keepLogoModal()"
ng-blur="hideLogoModal()"
>Umbraco.com</a
>
</div>
</div>
<div class="flex items-center">
<umb-sections ng-if="authenticated" sections="sections"> </umb-sections>
<div class="umb-app-header__right">
<ul class="umb-app-header__actions">
<li data-element="global-search" class="umb-app-header__action">
<button type="button" class="umb-app-header__button btn-reset" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" localize="title" title="@general_search">
<button
type="button"
class="umb-app-header__button btn-reset"
hotkey="ctrl+space"
ng-click="searchClick()"
ng-mousedown="rememberFocus()"
localize="title"
title="@general_search"
>
<span class="sr-only">
<localize key="visuallyHiddenTexts_openBackofficeSearch">Open backoffice search</localize>...
<localize
key="visuallyHiddenTexts_openBackofficeSearch"
>Open backoffice search</localize
>...
</span>
<umb-icon icon="icon-search" class="umb-app-header__action-icon"></umb-icon>
<umb-icon
icon="icon-search"
class="umb-app-header__action-icon"
></umb-icon>
</button>
</li>
<li data-element="global-help" class="umb-app-header__action">
<button type="button" class="umb-app-header__button btn-reset" hotkey="ctrl+shift+h" ng-click="helpClick()" localize="title" title="@general_help">
<button
type="button"
class="umb-app-header__button btn-reset"
hotkey="ctrl+shift+h"
ng-click="helpClick()"
localize="title"
title="@general_help"
>
<span class="sr-only">
<localize key="visuallyHiddenTexts_openCloseBackofficeHelp">Open/Close backoffice help</localize>...
<localize
key="visuallyHiddenTexts_openCloseBackofficeHelp"
>Open/Close backoffice help</localize
>...
</span>
<umb-icon icon="icon-help-alt" class="umb-app-header__action-icon"></umb-icon>
<umb-icon
icon="icon-help-alt"
class="umb-app-header__action-icon"
></umb-icon>
</button>
</li>
<li data-element="global-user" class="umb-app-header__action">
<button type="button" class="umb-app-header__button btn-reset" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}">
<button
type="button"
class="umb-app-header__button btn-reset"
ng-click="avatarClick()"
hotkey="ctrl+shift+u"
title="{{user.name}}"
>
<span class="sr-only">
<localize key="visuallyHiddenTexts_openCloseBackofficeProfileOptions">Open/Close your profile options</localize>...
<localize
key="visuallyHiddenTexts_openCloseBackofficeProfileOptions"
>Open/Close your profile options</localize
>...
</span>
<umb-avatar
class="umb-app-header__action-icon"
@@ -36,13 +101,12 @@
color="secondary"
name="{{user.name}}"
img-src="{{avatar[0].value}}"
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x"
>
</umb-avatar>
</button>
</li>
</ul>
</div>
</div>
</div>

View File

@@ -1,79 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boot Failed</title>
<style>
@font-face {
font-family: Lato;
src: local("LatoLatin Regular"), local("LatoLatin-Regular"),
url(/umbraco/assets/fonts/lato/LatoLatin-Regular.woff2) format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
text-rendering: optimizeLegibility;
}
@font-face {
font-family: Lato;
src: local("LatoLatin Bold"), local("LatoLatin-Bold"),
url(/umbraco/assets/fonts/lato/LatoLatin-Bold.woff2) format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
text-rendering: optimizeLegibility;
}
body {
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-image: url(/umbraco/assets/img/login.jpg);
margin: 0;
padding: 0;
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color: #000;
background-color: #f3f3f5;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.logo {
position: absolute;
top: 22px;
left: 25px;
width: 30px;
height: 30px;
z-index: 1;
}
.error-container {
display: grid;
justify-content: center;
align-content: center;
height: 100vh;
}
.error {
background: #fff;
padding: 30px;
max-width: 500px;
margin: auto 25px;
border-radius: 3px;
}
.error h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
</style>
</head>
<body>
<main class="error-container">
<img src="/umbraco/assets/img/application/umbraco_logo_white.svg" class="logo">
<div class="error">
<h1>Boot Failed</h1>
<p>Umbraco failed to boot, if you are the owner of the website please see the log file for more details.</p>
</div>
</main>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Boot Failed</title>
<style>
@font-face {
font-family: Lato;
src: local("LatoLatin Regular"), local("LatoLatin-Regular"),
url(/umbraco/assets/fonts/lato/LatoLatin-Regular.woff2)
format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
text-rendering: optimizeLegibility;
}
@font-face {
font-family: Lato;
src: local("LatoLatin Bold"), local("LatoLatin-Bold"),
url(/umbraco/assets/fonts/lato/LatoLatin-Bold.woff2)
format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
text-rendering: optimizeLegibility;
}
body {
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-image: url(/umbraco/assets/img/login.jpg);
margin: 0;
padding: 0;
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color: #000;
background-color: #f3f3f5;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.logo {
position: absolute;
top: 22px;
left: 25px;
width: 30px;
height: 30px;
z-index: 1;
}
.error-container {
display: grid;
justify-content: center;
align-content: center;
height: 100vh;
}
.error {
background: #fff;
padding: 30px;
max-width: 500px;
margin: auto 25px;
border-radius: 3px;
}
.error h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
</style>
</head>
<body>
<main class="error-container">
<img
src="/umbraco/assets/img/application/umbraco_logomark_white.svg"
class="logo"
/>
<div class="error">
<h1>Boot Failed</h1>
<p>
Umbraco failed to boot, if you are the owner of the website
please see the log file for more details.
</p>
</div>
</main>
</body>
</html>