editor: UI polish - Etherpad brand as reconnect & loading animation
This commit is contained in:
John McLear
GitHub
parent
6023117d29
commit
086b59b30d
|
|
@ -70,3 +70,10 @@ input {
|
|||
@media (max-width: 800px) {
|
||||
.hide-for-mobile { display: none; }
|
||||
}
|
||||
|
||||
.etherpadBrand{
|
||||
width:20%;
|
||||
max-width:100px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,6 @@
|
|||
.buttonicon-microphone-alt-slash:before { content: '\e83e'; } /* '' */
|
||||
.buttonicon-compress:before { content: '\e83f'; } /* '' */
|
||||
.buttonicon-expand:before { content: '\e840'; } /* '' */
|
||||
.buttonicon-spin5:before { content: '\e841'; } /* '' */
|
||||
.buttonicon-eye-slash:before { content: '\e843'; } /* '' */
|
||||
.buttonicon-list-ol:before { content: '\e844'; } /* '' */
|
||||
.buttonicon-bold:before { content: '\e845'; } /* '' */
|
||||
|
|
@ -190,4 +189,4 @@
|
|||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="355px" height="355px" viewBox="0 0 355 355" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Group 10</title>
|
||||
<defs>
|
||||
<!-- top line -->
|
||||
<rect id="path-4" x="41" y="110" width="142" height="25" rx="12.5">
|
||||
<animate attributeName="width" from="0" to="142" dur="3s" fill="freeze"/>
|
||||
</rect>
|
||||
<filter x="-11.3%" y="-32.0%" width="122.5%" height="228.0%" filterUnits="objectBoundingBox" id="filter-5">
|
||||
<feOffset dx="0" dy="8" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0568181818 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
|
||||
<!-- middle line -->
|
||||
<rect id="path-2" x="42" y="167" width="168" height="27" rx="13.5">
|
||||
<animate attributeName="width" from="0" to="168" dur="5s" fill="freeze"/>
|
||||
</rect>
|
||||
<filter x="-9.5%" y="-29.6%" width="119.0%" height="218.5%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="0" dy="8" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0568181818 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
|
||||
<!-- bottom line -->
|
||||
<rect id="path-6" x="41" y="226" width="105" height="25" rx="12.5">
|
||||
<animate attributeName="width" from="0" to="105" dur="2s" fill="freeze"/>
|
||||
</rect>
|
||||
<filter x="-15.2%" y="-32.0%" width="130.5%" height="228.0%" filterUnits="objectBoundingBox" id="filter-7">
|
||||
<feOffset dx="0" dy="8" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0568181818 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group-5-Copy-2" transform="translate(-415.000000, -351.000000)">
|
||||
<g id="Group-10" transform="translate(415.000000, 351.000000)">
|
||||
<g id="Group-9" transform="translate(0.000000, 15.000000)">
|
||||
<!-- small radio wave -->
|
||||
<path d="M237.612214,138.157654 C234.725783,135.28192 230.051254,135.279644 227.164823,138.157654 C224.278392,141.035663 224.278392,145.698831 227.164823,148.57684 C234.93988,156.329214 239.222735,166.601382 239.222735,177.499403 C239.222735,188.397423 234.93988,198.669591 227.164823,206.424696 C224.278392,209.30043 224.278392,213.965873 227.164823,216.841607 C228.608267,218.280384 230.497251,219 232.388518,219 C234.277503,219 236.16877,218.280384 237.612214,216.841607 C248.18012,206.304532 254,192.334147 254,177.499403 C254,162.665114 248.18012,148.694728 237.612214,138.157654 Z" id="Path-Copy-26" fill-opacity="0.200482" fill="#000000" fill-rule="nonzero" opacity="0.754065225">
|
||||
<animate attributeName="opacity" from="0" to="1" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- large radio wave -->
|
||||
<path d="M267.333026,113.158661 C264.51049,110.280446 259.939438,110.280446 257.116902,113.158661 C254.294366,116.039154 254.294366,120.709078 257.116902,123.586837 C285.703837,152.763042 285.703837,200.237641 257.116902,229.413847 C254.294366,232.292061 254.294366,236.96153 257.116902,239.839744 C258.528393,241.280219 260.375562,242 262.224964,242 C264.074365,242 265.921535,241.279763 267.333026,239.837011 C301.555658,204.912576 301.555658,148.084007 267.333026,113.158661 Z" id="Path-Copy-27" fill-opacity="0.250565" fill="#131514" fill-rule="nonzero" opacity="0.754065225">
|
||||
<animate attributeName="opacity" from="0" to="1" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- top line -->
|
||||
<g id="Rectangle-Copy-56">
|
||||
<use fill="#000000" fill-opacity="0.200482" fill-rule="evenodd" xlink:href="#path-4"></use>
|
||||
</g>
|
||||
<!-- middle line -->
|
||||
<g id="Rectangle-Copy-55">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
|
||||
<use fill="#000000" fill-opacity="0.200482" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<!-- bottom line -->
|
||||
<g id="Rectangle-Copy-57">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
|
||||
<use fill="#000000" fill-opacity="0.200482" xlink:href="#path-6"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
|
|
@ -100,6 +100,7 @@
|
|||
<% e.end_block(); %>
|
||||
<% e.begin_block("loading"); %>
|
||||
<p data-l10n-id="pad.loading" id="loading" class="editorloadingbox-message">
|
||||
<img src='../static/img/brand.svg' class='etherpadBrand'><br/>
|
||||
Loading...
|
||||
</p>
|
||||
<% e.end_block(); %>
|
||||
|
|
@ -237,7 +238,9 @@
|
|||
</div>
|
||||
<div class="reconnecting">
|
||||
<h1 data-l10n-id="pad.modals.reconnecting"></h1>
|
||||
<i class='buttonicon buttonicon-spin5 icon-spin'></i>
|
||||
<i class='buttonicon buttonicon-spin5 icon-spin'>
|
||||
<img src='../static/img/brand.svg' class='etherpadBrand'><br/>
|
||||
</i>
|
||||
</div>
|
||||
<div class="userdup">
|
||||
<h1 data-l10n-id="pad.modals.userdup"></h1>
|
||||
|
|
|
|||
Loading…
Reference in New Issue