mobile anatomy illustration
This commit is contained in:
Lance Cummings
Родитель
b384eb2420
Коммит
519dfe5e0b
|
|
@ -7,7 +7,6 @@
|
|||
<link rel="shortcut icon" href="{{ "/favicon.ico" | relative_url }}">
|
||||
<link rel="stylesheet" href="{{ "/assets/slick/slick.css?ver=2018.11.15" | relative_url }}">
|
||||
<link rel="stylesheet" href="{{ "/assets/main.css?ver=2018.11.15" | relative_url }}">
|
||||
<link rel="stylesheet" href="https://i.icomoon.io/public/8a635fdcf6/FirefoxExtensionWorkshop/style.css">
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
{%- feed_meta -%}
|
||||
{%- if jekyll.environment == 'production' and site.google_analytics -%}
|
||||
|
|
|
|||
|
|
@ -121,14 +121,44 @@ An extension is a simple collection of files that modify the browser’s appeara
|
|||
{% include home/anatomy.svg %}
|
||||
<p class="manifest show-for-medium"><img src="{{ "/assets/img/icons/manifest.svg" | relative_url }}">Manifest.json</p>
|
||||
</div>
|
||||
<div class="anatomy-description">
|
||||
<svg id="anatomy-of-an-extension-graphic-mobile" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 270 424"><defs><filter id="dropshadow" name="dropshadow"><feGaussianBlur stdDeviation="6" in="SourceAlpha"/><feOffset result="offsetblur" dx="2" dy="3"/><feComponentTransfer><feFuncA type="linear" slope="0.3"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><clipPath id="clip-path"><polygon id="Interface" points="130.89 53.97 242.91 79.75 130.89 105.54 27.2 79.75 130.89 53.97" style="fill:none;clip-rule:evenodd"/></clipPath><clipPath id="clip-path-2"><polygon id="Interface-2" data-name="Interface" points="130.89 159.01 242.91 184.79 130.89 210.58 27.2 184.79 130.89 159.01" style="fill:none;clip-rule:evenodd"/></clipPath><clipPath id="clip-path-3"><polygon id="Interface-3" data-name="Interface" points="130.89 264.05 242.91 289.83 130.89 315.62 27.2 289.83 130.89 264.05" style="fill:none;clip-rule:evenodd"/></clipPath></defs><title>interactive_illustration_mobile</title><path id="Bottom-Back" d="M4.35,392.6a.25.25,0,0,1-.3-.2.25.25,0,0,1,.2-.29L130,366.32h.1l135.81,25.79a.25.25,0,1,1-.09.49L130,366.82Z" style="fill:#8d9fa6;opacity:0.5"/><path id="Bottom-Front" d="M265.78,392.11a.24.24,0,0,1,.29.2.25.25,0,0,1-.2.29L130.06,418.39H130L4.25,392.6a.25.25,0,1,1,.1-.49L130,417.88Z" style="fill:#8d9fa6"/><path id="Sides" d="M4.22,31.22h.5V392.35l-.5-24Zm261.24,0h.5V392.35l-.5-24Z" style="fill:#8d9fa6"/><g style="filter:url(#dropshadow)"><g style="clip-path:url(#clip-path)"><g id="Vqz7Av"><image id="Vqz7Av-2" data-name="Vqz7Av" width="216" height="52" transform="translate(27.2 53.75)" xlink:href="{{ "/assets/img/anatomy/interactive_illustration_mobile1.png" | relative_url }}"/></g></g></g><path id="Top" d="M130,5.69,5.54,31.22,130,56.75,264.48,31.22Zm.05-.5L265.87,31a.25.25,0,0,1,0,.49L130.06,57.25H130L4.25,31.46a.25.25,0,0,1,0-.49L130,5.19Z" style="fill:#8d9fa6"/><g style="filter:url(#dropshadow)"><g style="clip-path:url(#clip-path-2)"><g id="Vqz7Av-3" data-name="Vqz7Av"><image id="Vqz7Av-4" data-name="Vqz7Av" width="216" height="52" transform="translate(27.2 158.79)" xlink:href="{{ "/assets/img/anatomy/interactive_illustration_mobile2.png" | relative_url }}"/></g></g></g><g style="filter:url(#dropshadow)"><g style="clip-path:url(#clip-path-3)"><g id="Vqz7Av-5" data-name="Vqz7Av"><image id="Vqz7Av-6" data-name="Vqz7Av" width="216" height="52" transform="translate(27.2 263.83)" xlink:href="{{ "/assets/img/anatomy/interactive_illustration_mobile3.png" | relative_url }}"/></g></g></g></svg>
|
||||
<button classs="popup-panel" data-panel="anatomy-ui"><img src="{{ "/assets/img/icons/user-interface.svg" | relative_url }}">User Interface</button>
|
||||
<button classs="popup-panel" data-panel="anatomy-content"><img src="{{ "/assets/img/icons/content-script.svg" | relative_url }}">Content Scripts</button>
|
||||
<button classs="popup-panel" data-panel="anatomy-background"><img src="{{ "/assets/img/icons/background-scripts.svg" | relative_url }}">Background Scripts</button>
|
||||
<div id="anatomy-control" class="anatomy-description">
|
||||
{% include home/anatomy-mobile.svg %}
|
||||
<button class="popup-action" data-panel="anatomy-ui"><img src="{{ "/assets/img/icons/user-interface-link.svg" | relative_url }}">User Interface</button>
|
||||
<button class="popup-action" data-panel="anatomy-content"><img src="{{ "/assets/img/icons/content-script-link.svg" | relative_url }}">Content Scripts</button>
|
||||
<button class="popup-action" data-panel="anatomy-background"><img src="{{ "/assets/img/icons/background-scripts-link.svg" | relative_url }}">Background Scripts</button>
|
||||
</div>
|
||||
<p class="manifest show-for-small-only"><img src="{{ "/assets/img/icons/manifest.svg" | relative_url }}">Manifest.json</p>
|
||||
</div>
|
||||
<aside class="popup-panel" id="anatomy-ui" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### User Interface
|
||||
|
||||
Add toolbar buttons, menu choices, and—only in Firefox—sidebars to display additional content. Manage tab behavior and create pop-up windows that respond to user events.
|
||||
|
||||
<button class="close"></button>
|
||||
</aside>
|
||||
<aside class="popup-panel" id="anatomy-content" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### Content Scripts
|
||||
|
||||
Change webpage content. Remove ads, highlight key words, and reformat elements for readability.
|
||||
|
||||
<button class="close"></button>
|
||||
</aside>
|
||||
<aside class="popup-panel" id="anatomy-background" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### Background Scripts
|
||||
|
||||
Manage long-term configuration beyond the current tab, and respond to user events such as button clicks and menu selections.
|
||||
|
||||
<button class="close"></button>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<svg id="anatomy-of-an-extension-graphic-mobile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 270 424">
|
||||
<defs>
|
||||
<radialGradient id="radial-gradient" cx="133.87" cy="372.57" r="126.05" gradientTransform="matrix(1, 0, 0, -1, 0, 426)" gradientUnits="userSpaceOnUse"><stop offset="0.58" stop-color="#4030db" stop-opacity="0.1"/><stop offset="0.96" stop-color="#4030db" stop-opacity="0.92"/><stop offset="1" stop-color="#4030db"/></radialGradient>
|
||||
</defs>
|
||||
|
||||
<g id="mobile-box_bottom_back" data-name="box bottom back">
|
||||
<path d="M265.46,388.32a.49.49,0,0,1-.45-.41L130.14,356.73h0L5.17,387.91a.45.45,0,0,1-.45.41.44.44,0,0,1-.45-.36v-.09c0-.09,0-.14,0-.18a.84.84,0,0,1,.63-.63l125-31.18c.09-.05.18,0,.27,0h.14l134.92,31.18a.91.91,0,0,1,.63.63,1,1,0,0,1,0,.18V388A.53.53,0,0,1,265.46,388.32ZM5.17,387.87Zm124.88-31.59v.45h0v-.05Z" style="fill:#4030db"/>
|
||||
<path class="vert" d="M130.09,356.32a.41.41,0,0,1-.44-.44V7.1a.42.42,0,0,1,.44-.45.43.43,0,0,1,.45.45V355.88A.47.47,0,0,1,130.09,356.32Z" style="fill:#4030db"/>
|
||||
</g>
|
||||
|
||||
<g id="mobile-box_bottom_front" data-name="box bottom front"><path d="M130.05,419.91a.39.39,0,0,1-.23-.05L4.9,388.68a.83.83,0,0,1-.63-.81.43.43,0,0,1,.45-.45h0a.49.49,0,0,1,.45.4L130.09,419,265,387.82a.49.49,0,0,1,.45-.4h0a.45.45,0,0,1,.45.45.83.83,0,0,1-.63.81l-135,31.18A.36.36,0,0,1,130.05,419.91Z" style="fill:#4030db"/></g>
|
||||
|
||||
<g class="tile" id="mobile-background"><path d="M245.84,281.25a.43.43,0,0,0-.27-.27L129.06,254.05h-.18L21.12,281c-.14,0-.23.13-.23.27h0v9.9h.05a.26.26,0,0,0-.05.18.33.33,0,0,0,.27.32L129,318.58h.18l116.51-26.93a.4.4,0,0,0,.27-.32s-.05-.13-.05-.18h.05v-9.81l-.09-.09Z" style="fill:#4f42ff"/><path d="M245.57,281.65,129.06,308.58h-.18l-107.76-27a.38.38,0,0,1-.27-.32v9.82h0a.28.28,0,0,0,0,.18.32.32,0,0,0,.27.31l107.81,26.93h.18l116.5-26.93a.37.37,0,0,0,.27-.31c0-.05,0-.14,0-.18h0v-9.82A.42.42,0,0,1,245.57,281.65Z" style="fill:#3e3ee5"/><path d="M245.57,281,129.06,254.05h-.18L21.12,281c-.14,0-.23.13-.23.27v.09a.32.32,0,0,0,.27.31L129,308.58h.18l116.51-26.93a.39.39,0,0,0,.27-.31v-.09A1,1,0,0,0,245.57,281Z" style="fill:#4f42ff"/><path d="M126.6,258.4C97.79,265.7,68.93,272.65,40.12,280c-1.53.4-1.53,1,0,1.39,28.95,7.8,58.07,14.83,87.11,22.22a10.39,10.39,0,0,0,4.57-.09h0q47.12-11.09,94.32-21.77c1.3-.27,1.21-.76-.26-1.17h0c-31.42-7.79-63-15-94.55-22.31a10.19,10.19,0,0,0-4.66.18Zm-.49,1.79a8.35,8.35,0,0,1,3.18-.09c.89.22.94.58,0,.81a8.44,8.44,0,0,1-3.32,0c-.9-.18-.81-.54.14-.76Zm-5.61,1.43a7.82,7.82,0,0,1,3.36-.09c.9.23.9.59-.08.85a9.19,9.19,0,0,1-3.5.09c-.9-.22-.76-.62.22-.85ZM64,276.81c-1-.27-.89-.71.32-1h0c15.28-3.9,30.51-7.7,45.79-11.6A9.41,9.41,0,0,1,114,264a.32.32,0,0,1,.18,0c1,.22.94.67-.23,1-15.19,3.95-30.42,7.8-45.61,11.74a9.53,9.53,0,0,1-4.08.05h0A.57.57,0,0,0,64,276.81Zm-9.94,1.71a8,8,0,0,1,3.58,0c.94.26.94.67-.09.94a8.23,8.23,0,0,1-3.63,0c-.94-.27-.89-.68.14-.94ZM48.32,280a7.9,7.9,0,0,1,3.49,0c1,.27,1,.68,0,.95a8,8,0,0,1-3.54-.05h0C47.38,280.67,47.33,280.26,48.32,280Zm174.13.5c1.34.31,1.43.54.35.8-30.69,7.13-61.38,14.16-92,21.47a5.63,5.63,0,0,1-3.1,0c-25.22-6.41-50.45-12.68-75.63-19.23,28.81-7.79,57.75-15,86.52-22.8C166.52,267.22,194.53,273.63,222.45,280.49Z" style="fill:#ccf"/><path d="M152.45,282.68q-21.7,5.52-43.42,11.16a5.08,5.08,0,0,1-2,0c-.63-.14-.72-.41-.23-.54,14.39-3.81,28.81-7.49,43.24-11.16a6.77,6.77,0,0,1,2.29,0C153,282.28,153,282.55,152.45,282.68Zm4.17,2.38a6,6,0,0,0-2.24,0c-13.35,3.36-26.66,6.72-40,10.17-.49.13-.4.36.18.49a4.88,4.88,0,0,0,2,0c13.35-3.45,26.75-6.77,40.15-10.13C157.29,285.46,157.25,285.19,156.62,285.06Z" style="fill:#ccf"/><path d="M168.23,286.45q-22.39,5.44-44.68,11a4.58,4.58,0,0,1-1.88,0c-.54-.13-.63-.36-.09-.49,14.83-3.77,29.66-7.4,44.5-11.07a5.76,5.76,0,0,1,2.19,0C168.9,286,168.85,286.31,168.23,286.45Zm-7.85,4.88a4.83,4.83,0,0,0-2.1.05c-10,2.42-20,4.88-30.07,7.34-.49.14-.49.32,0,.45a4.08,4.08,0,0,0,1.84,0c10-2.46,20.12-4.88,30.16-7.3C160.83,291.69,160.92,291.47,160.38,291.33Z" style="fill:#ccf"/><path d="M108.67,274.57c-12.27,3.27-24.6,6.5-36.87,9.86a4.68,4.68,0,0,1-1.93,0c-.58-.14-.72-.36-.22-.5,12.27-3.36,24.55-6.58,36.83-9.81a5.7,5.7,0,0,1,2.1,0C109.21,274.21,109.26,274.44,108.67,274.57Zm17.84-1.34a5.55,5.55,0,0,0-2.15,0c-15.73,4.17-31.46,8.29-47.14,12.59-.49.13-.36.36.27.54a4.13,4.13,0,0,0,2,0c15.73-4.3,31.46-8.42,47.23-12.59C127.27,273.63,127.18,273.41,126.51,273.23Z" style="fill:#ccf"/><path d="M120,279.64c-10.89,2.86-21.78,5.73-32.67,8.73a5.13,5.13,0,0,1-2,0c-.62-.18-.76-.4-.31-.54,10.84-3,21.73-5.82,32.58-8.69a6,6,0,0,1,2.24,0C120.46,279.23,120.55,279.5,120,279.64Zm-5.92,5.15a5.26,5.26,0,0,0-2.19-.05c-6.32,1.66-12.6,3.37-18.91,5.07-.5.13-.36.36.31.54a4.63,4.63,0,0,0,2,0c6.31-1.7,12.63-3.36,19-5.06C114.81,285.19,114.72,284.92,114.05,284.79Z" style="fill:#ccf"/></g>
|
||||
|
||||
<g class="tile" id="mobile-content"><path d="M245.84,176.25a.3.3,0,0,0-.27-.31L129.06,149h-.18L21.12,175.9a.36.36,0,0,0-.27.31h0v9.86h0a.28.28,0,0,0,0,.18.32.32,0,0,0,.27.31l107.81,26.93h.18l116.5-26.93a.37.37,0,0,0,.27-.31,1,1,0,0,0,0-.18h0v-9.82Z" style="fill:#00c8d7"/><path d="M245.57,176.57,129.06,203.5h-.18L21.12,176.57a.38.38,0,0,1-.27-.32h0v9.86h0a.31.31,0,0,0,0,.18.33.33,0,0,0,.27.32l107.81,26.93h.18l116.5-26.93a.38.38,0,0,0,.27-.32c0-.09,0-.13,0-.18h0v-9.86h0A.44.44,0,0,1,245.57,176.57Z" style="fill:#00b2b2"/><path d="M21.12,176.57,128.93,203.5h.18l116.5-26.93a.38.38,0,0,0,.27-.32h0a.3.3,0,0,0-.27-.31L129.11,149h-.18L21.12,175.9a.36.36,0,0,0-.27.31h0A.39.39,0,0,0,21.12,176.57Z" style="fill:#00c8d7"/><path d="M164.6,171.64c-15.33,4.17-30.65,8.11-46,12.14a8,8,0,0,1-2.92,0c-.94-.23-1.16-.54-.49-.72,15.24-4,30.52-8,45.71-12.14a7.64,7.64,0,0,1,2.55.18C164.46,171.24,165,171.5,164.6,171.64Zm8.69,2.73a7.56,7.56,0,0,0-2.6-.13c-14.65,3.85-29.3,7.57-44,11.38-.67.18-.54.49.36.67a7.75,7.75,0,0,0,2.87.05c14.74-3.77,29.53-7.53,44.27-11.34C174.68,174.82,174.23,174.55,173.29,174.37Z" style="fill:#ccf4ff"/><path d="M188.21,176.57c-16,4.08-32,8.06-47.94,12.1a7,7,0,0,1-2.74,0c-.8-.18-.89-.5-.18-.68,15.91-4,31.82-8,47.72-12.09a7.06,7.06,0,0,1,2.29.13C188.21,176.21,188.61,176.43,188.21,176.57Zm-2.87,4.48a6.73,6.73,0,0,0-2.37,0q-18.09,4.5-36.16,9c-.72.18-.76.45-.09.63a6.86,6.86,0,0,0,2.51,0l36.29-9.09C186.15,181.45,186.06,181.23,185.34,181.05Z" style="fill:#ccf4ff"/><path d="M107.6,161.6c-13.17,3.63-26.35,7.17-39.52,10.76a5.45,5.45,0,0,1-2.2,0c-.58-.13-.54-.4.05-.54,13.22-3.54,26.48-7,39.65-10.62a5.15,5.15,0,0,1,1.84,0C108,161.24,108.09,161.47,107.6,161.6Zm15.41-.94a5,5,0,0,0-2-.09C105.45,165.19,89.68,169.4,74,173.7c-.63.18-.54.45.23.63a5.65,5.65,0,0,0,2.46,0c15.68-4.35,31.41-8.52,47-13.18C124.09,161.06,123.78,160.84,123,160.66Z" style="fill:#ccf4ff"/><path d="M122.74,166.62c-12,3.41-24,6.68-35.93,10a6.8,6.8,0,0,1-2.69,0c-.85-.18-1-.5-.4-.67,11.92-3.32,23.88-6.59,35.75-10A7.06,7.06,0,0,1,122,166C122.92,166.22,123.24,166.49,122.74,166.62Zm-2.46,5.6a6.72,6.72,0,0,0-2.82,0q-11.37,3.15-22.72,6.22c-.63.18-.4.5.49.68a6.73,6.73,0,0,0,2.82,0c7.62-2.1,15.24-4.17,22.9-6.27C121.53,172.76,121.22,172.45,120.28,172.22Z" style="fill:#ccf4ff"/><path d="M62.43,179.57c1.35-.4.45-.81-.67-1.08s-2.2-.49-3.23-.71-2.15-.45-3.22-.72c-3.54-.9-3.5-1.7-.81-2.42.22,0,.31-.09.54-.13,1,.27,1.52.4,2.64.67-.18,0-.27.09-.45.13-1.07.32-.44.68.94,1,.86.23,1.75.41,2.56.59l2.46.53c2.56.63,3.63,1.26,3,1.84h.08a22.43,22.43,0,0,1,7.49.72c.89.22,1.79.45,2.78.72s1.79.49,2.77.71a10.8,10.8,0,0,0,4.84.36c.14,0,.23,0,.36-.09,1.57.36,2.33.54,3.9.94a3.22,3.22,0,0,0-.58.18c-3.54.9-7.4.36-10.85-.49-1.3-.32-2.46-.63-3.63-.94s-2.28-.63-3.45-.9a9.15,9.15,0,0,0-4.16-.13C64.45,180.06,63.78,179.88,62.43,179.57Z" style="fill:#ccf4ff"/><path d="M191.84,170.2c-1.75.5-.72,1,.36,1.17s2.51.54,3.81.81,2.69.53,4,.85c5.1,1.21,4.75,2.24,2.19,3-.27.08-.4.08-.67.17-1.57-.35-2.38-.53-3.94-.94l.4-.09c1.21-.44.13-.85-1.61-1.3-1-.22-2.06-.44-3.05-.67s-2.11-.45-3-.67c-3.09-.72-4-1.39-3.09-2h-.09a21,21,0,0,1-7.4-.54c-.8-.18-1.48-.4-2.19-.63s-1.44-.44-2.29-.62a8.46,8.46,0,0,0-4.08-.14l-.44.14c-1.08-.27-1.62-.41-2.6-.68.22,0,.31-.09.53-.13a19.54,19.54,0,0,1,9.64-.09c1,.27,1.88.49,2.78.81s1.74.53,2.86.8a8.75,8.75,0,0,0,4.44,0C189.73,169.71,190.45,169.85,191.84,170.2Z" style="fill:#ccf4ff"/></g>
|
||||
|
||||
<g class="tile" id="mobile-interface"><path d="M247.14,71.21a.3.3,0,0,0-.27-.31L130.36,44h-.18L22.37,70.9a.4.4,0,0,0-.27.31h0v9.86h0a.26.26,0,0,0,0,.18.33.33,0,0,0,.27.32l107.86,27h.18l116.5-26.93a.37.37,0,0,0,.27-.31,1,1,0,0,0,0-.18h0V71.21Z" style="fill:#ccf4ff"/><path d="M246.87,71.53,130.36,98.46h-.18L22.37,71.53a.4.4,0,0,1-.27-.32h0v9.86h0a.26.26,0,0,0,0,.18.33.33,0,0,0,.27.32l107.86,27h.18l116.5-26.93a.37.37,0,0,0,.27-.31,1,1,0,0,0,0-.18h0V71.26h0A.39.39,0,0,1,246.87,71.53Z" style="fill:#badde5"/><path d="M22.37,71.53,130.18,98.46h.18L246.87,71.53a.4.4,0,0,0,.27-.32h0a.3.3,0,0,0-.27-.31L130.36,44h-.18L22.37,70.9a.4.4,0,0,0-.27.31h0C22.15,71.39,22.24,71.53,22.37,71.53Z" style="fill:#ccf4ff"/><path d="M171.23,62.92c1.57.32,1.79.86.45,1.21a13.93,13.93,0,0,1-5.29.14c-1.57-.32-1.75-.85-.4-1.21A12.92,12.92,0,0,1,171.23,62.92Z" style="fill:#00c8d7"/><path d="M163.12,61.36c1.57.31,1.75.85.45,1.21a13.93,13.93,0,0,1-5.25.13c-1.57-.31-1.74-.85-.4-1.21A12.53,12.53,0,0,1,163.12,61.36Z" style="fill:#00c8d7"/><path d="M152.41,59.61c2,0,3.76.31,3.94.76s-1.34.9-3.36.94-3.76-.27-3.94-.76S150.39,59.65,152.41,59.61Z" style="fill:#00c8d7"/><path d="M148.33,82.82c-7.62,1.84-11.47,2.78-19.36,4.66a20.88,20.88,0,0,1-8.11-.27l-5.78-1.34c-2.55-.59-3.09-1.44-1.21-1.89,7.84-1.88,11.7-2.82,19.27-4.66a21.48,21.48,0,0,1,8,.27l5.82,1.35C149.5,81.52,150.17,82.37,148.33,82.82Z" style="fill:#00feff"/><path d="M146.81,79.5c6.32,1.44,7.88,3.5,3.4,4.53s-13.26.76-19.53-.67-7.67-3.45-3.23-4.53S140.49,78,146.81,79.5Z" style="fill:#00c8d7"/><path d="M118.53,51.81c-1.21,0-2.19.23-2.19.49s1,.5,2.19.5c5.33,0,8,0,13.4,0-7.17,1.62-10.84,2.47-18.33,4.12-.89.18-.94.54,0,.72a7.41,7.41,0,0,0,3.18,0c7.48-1.66,11.16-2.51,18.33-4.12,0,1.25,0,1.84.09,3.09,0,.27,1,.54,2.24.54a7.6,7.6,0,0,0,1.57-.14c.4-.09.62-.22.62-.35,0-1.75-.09-2.6-.22-4.35,0-.27-1-.49-2.24-.54Z" style="fill:#00c8d7"/><path d="M193.9,65.75c-.63.13-.49.4.27.58,1.34.31,2,.45,3.41.76a44.09,44.09,0,0,0-11.74.54c-4.48,1.07-3.86,3,1.56,4.21s13.67,1.39,18.2.36c2.19-.49,3.18-1.25,2.82-2-.09-.22-1-.44-2-.44s-1.74.13-1.61.4c.27.58-.45,1.07-2,1.43a34.45,34.45,0,0,1-13-.27c-3.9-.89-4.35-2.24-1.17-3a32.33,32.33,0,0,1,9.5-.27c-1.16.27-1.74.41-3,.72-.63.13-.54.4.27.58a7.1,7.1,0,0,0,2.55,0L203.76,68c.63-.13.49-.4-.27-.58-2.82-.63-4.26-1-7-1.61A7,7,0,0,0,193.9,65.75Z" style="fill:#00c8d7"/><path d="M79,66.11c-7.89,2-11.74,3-19.41,5a5.22,5.22,0,0,1-2.1-.13c-.72-.18-.9-.41-.45-.54,7.66-2,11.52-3,19.45-5a5,5,0,0,1,2.1.09C79.28,65.75,79.46,66,79,66.11Zm5.33,2.46a5,5,0,0,0-2.11-.09c-6.58,1.7-9.86,2.55-16.31,4.26-.45.13-.22.36.49.54a6.12,6.12,0,0,0,2.11.13c6.45-1.7,9.68-2.55,16.31-4.26C85.24,69,85,68.75,84.3,68.57Z" style="fill:#00c8d7"/><path d="M106,72.11a5.18,5.18,0,0,0-2.15-.09c-8.12,2.15-12.06,3.18-20,5.29-.45.13-.22.36.49.54a6.11,6.11,0,0,0,2.15.13c7.89-2.11,11.88-3.18,20-5.29C107,72.51,106.75,72.29,106,72.11Z" style="fill:#00c8d7"/><path d="M111.45,75.38a6.14,6.14,0,0,0-2.15-.13C102.71,77,99.49,77.85,93,79.59c-.45.14-.23.36.53.54a6.14,6.14,0,0,0,2.15.14c6.46-1.75,9.73-2.6,16.32-4.35C112.39,75.78,112.17,75.56,111.45,75.38Z" style="fill:#00c8d7"/></g>
|
||||
|
||||
<g id="mobile-box_sides" data-name="box sides"><path d="M265.46,387.91c-.54,0-.45-.44-.45-1.07V38.46c0-.67,0-.89.45-.89s.45,0,.45.89V386.84C265.87,387.64,265.91,387.91,265.46,387.91Z" style="fill:#4030db"/><path d="M4.72,387.78a.43.43,0,0,1-.45-.45V38.06a.43.43,0,0,1,.45-.45.43.43,0,0,1,.45.45V387.33A.43.43,0,0,1,4.72,387.78Z" style="fill:#4030db"/></g>
|
||||
|
||||
<g id="mobile-box_top_back" data-name="box top back"><path d="M265.46,38.46a.49.49,0,0,1-.45-.4L130.14,6.87h0L5.17,38.06a.45.45,0,0,1-.45.4.43.43,0,0,1-.45-.36V38c0-.09,0-.13,0-.18a.82.82,0,0,1,.63-.62L129.91,6c.09,0,.18,0,.27,0h.14l135,31.19a.9.9,0,0,1,.63.62c0,.05,0,.09,0,.18v.09A.76.76,0,0,1,265.46,38.46ZM5.17,38ZM130,6.87h0Z" style="fill:#4030db"/></g>
|
||||
|
||||
<g id="mobile-box_top_front_transparent" data-name="box top front"><path d="M130.05,70.05a.47.47,0,0,1-.23,0L4.9,38.82A.82.82,0,0,1,4.27,38a.42.42,0,0,1,.45-.44h0a.48.48,0,0,1,.45.4L130.09,69.16,265,38a.48.48,0,0,1,.45-.4h0a.45.45,0,0,1,.45.44.82.82,0,0,1-.63.81L130.27,70A.43.43,0,0,1,130.05,70.05Z" style="fill:url(#radial-gradient)"/></g>
|
||||
|
||||
<g id="mobile-box_top_front_solid" data-name="box top front solid"><path d="M129.82,70.05a.43.43,0,0,1-.22,0L4.63,38.82A.82.82,0,0,1,4,38a.42.42,0,0,1,.45-.44h0a.48.48,0,0,1,.45.4L129.82,69.16,264.75,38a.46.46,0,0,1,.44-.4h0a.45.45,0,0,1,.45.44.82.82,0,0,1-.63.81L130,70A.37.37,0,0,1,129.82,70.05Z" style="fill:#4030db"/></g>
|
||||
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 12 KiB |
|
|
@ -613,6 +613,37 @@ html {height: 100%;}
|
|||
|
||||
|
||||
|
||||
// Popup Panel
|
||||
// ------
|
||||
|
||||
.popup-panel {display: none; position: fixed; z-index: 9; padding: rem-calc(20 26) !important; margin: rem-calc(8 0); color: $body-font-color;
|
||||
&:before {content:""; display: block; position: absolute; left: rem-calc(6); width: calc(100% - #{rem-calc(12)}); top: 0; height: 100%; background-color: $white; border-radius: $global-radius; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1);}
|
||||
|
||||
> * {position: relative; z-index: 2;
|
||||
&:first-child {display: none;}
|
||||
&:nth-last-child(2) {margin-bottom: 0;}
|
||||
&:last-child {position: absolute; top: rem-calc(12); right: rem-calc(20);
|
||||
button {color: $medium-gray; font-size: rem-calc(24); cursor: pointer;
|
||||
&:before {@include icon_font($char: $icon-close);}
|
||||
&:hover {color: $primary-color;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) { padding: rem-calc(24 34 30) !important; margin: rem-calc(12 0);
|
||||
&:before {left: rem-calc(12); width: calc(100% - #{rem-calc(24)});}
|
||||
|
||||
> *:not(:last-child) {width: calc(100% - #{rem-calc(50)}); margin-right: 0; margin-left: auto;
|
||||
&:first-child {display: block; position: absolute; width: rem-calc(32); top: rem-calc(24); left: rem-calc(34);
|
||||
img {width: rem-calc(32);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Mobile slideshow tiles
|
||||
// ------
|
||||
|
||||
|
|
@ -767,7 +798,7 @@ html {height: 100%;}
|
|||
.anatomy-description {position: relative; display: flex; flex-flow: column nowrap; justify-content: center;
|
||||
#anatomy-of-an-extension-graphic-mobile {display: none;}
|
||||
|
||||
button {position: relative; display: block; padding: rem-calc(16 24); margin: rem-calc(15 0); text-align: left; color: $primary-color; cursor: pointer;
|
||||
button {position: relative; display: block; padding: rem-calc(16 24); text-align: left; color: $primary-color; cursor: pointer;
|
||||
|
||||
&:after {display: inline-block; margin-left: .3em; font-size: .8em; transition: margin .2s ease-in-out;
|
||||
@include icon_font($char: $icon-arrow-right);
|
||||
|
|
@ -813,14 +844,19 @@ html {height: 100%;}
|
|||
}
|
||||
}
|
||||
}
|
||||
.anatomy-description {flex: 0 0 30%;
|
||||
#anatomy-of-an-extension-graphic-mobile {display: none;}
|
||||
.anatomy-description {flex: 0 0 30%;
|
||||
button {margin: rem-calc(15 0);}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small down) {
|
||||
.anatomy-description {min-height: calc(157.037037037037vw - 24px); padding: 39.2592592592593% 0; margin: rem-calc(16 0 8); align-items: center; justify-content: space-between;
|
||||
#anatomy-of-an-extension-graphic-mobile {display: block; position: absolute; left: 0; top: 0;}
|
||||
.anatomy-description {height: calc(157.037037037037vw - 24px); padding: 36.5% 0; margin: rem-calc(16 0 8); align-items: center; justify-content: space-between;
|
||||
#anatomy-of-an-extension-graphic-mobile {display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
|
||||
#mobile-box_bottom_back {opacity: .2;}
|
||||
#mobile-box_top_front_solid {opacity: .2;}
|
||||
}
|
||||
|
||||
button {margin: rem-calc(0 0 -20);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,6 +65,18 @@ $print-transparent-backgrounds: true;
|
|||
// 2. Icons
|
||||
// ------
|
||||
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('icomoon/fonts/icomoon.eot?iq7x1r');
|
||||
src: url('icomoon/fonts/icomoon.eot?iq7x1r#iefix') format('embedded-opentype'),
|
||||
url('icomoon/fonts/icomoon.woff2?iq7x1r') format('woff2'),
|
||||
url('icomoon/fonts/icomoon.ttf?iq7x1r') format('truetype'),
|
||||
url('icomoon/fonts/icomoon.woff?iq7x1r') format('woff'),
|
||||
url('icomoon/fonts/icomoon.svg?iq7x1r#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@mixin icon_font($char:"") {font-family:'icomoon'; content: $char; speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
|
||||
|
||||
$icon-play: "\e900";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||
|
||||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
|
||||
|
||||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||
|
||||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
small {
|
||||
font-size: .66666667em;
|
||||
}
|
||||
a {
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
box-shadow: 0 1px #e74c3c;
|
||||
}
|
||||
.bshadow0, input {
|
||||
box-shadow: inset 0 -2px #e7e7e7;
|
||||
}
|
||||
input:hover {
|
||||
box-shadow: inset 0 -2px #ccc;
|
||||
}
|
||||
input, fieldset {
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
padding: .25em 0;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 -2px #449fdb;
|
||||
}
|
||||
.glyph {
|
||||
font-size: 16px;
|
||||
width: 15em;
|
||||
padding-bottom: 1em;
|
||||
margin-right: 4em;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.liga {
|
||||
width: 80%;
|
||||
width: calc(100% - 2.5em);
|
||||
}
|
||||
.talign-right {
|
||||
text-align: right;
|
||||
}
|
||||
.talign-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bgc1 {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fgc1 {
|
||||
color: #999;
|
||||
}
|
||||
.fgc0 {
|
||||
color: #000;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.mvm {
|
||||
margin-top: .75em;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
.mtn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mtl, .mal {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mbl, .mal {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.mal, .mhl {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.mhmm {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.mls {
|
||||
margin-left: .25em;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
.pbs, .pvs {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
.pvs, .pts {
|
||||
padding-top: .25em;
|
||||
}
|
||||
.unit {
|
||||
float: left;
|
||||
}
|
||||
.unitRight {
|
||||
float: right;
|
||||
}
|
||||
.size1of2 {
|
||||
width: 50%;
|
||||
}
|
||||
.size1of1 {
|
||||
width: 100%;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hidden-true {
|
||||
display: none;
|
||||
}
|
||||
.textbox0 {
|
||||
width: 3em;
|
||||
background: #f1f1f1;
|
||||
padding: .25em .5em;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
}
|
||||
#testDrive {
|
||||
display: block;
|
||||
padding-top: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fs0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.fs2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.fs3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IcoMoon Demo</title>
|
||||
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="demo-files/demo.css">
|
||||
<link rel="stylesheet" href="style.css"></head>
|
||||
<body>
|
||||
<div class="bgc1 clearfix">
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 12)</small></h1>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: 24</h1>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-close">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-close</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e909" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-play">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-play</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e900" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-download">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-download</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e901" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-arrow-up">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-arrow-up</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e902" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-arrow-down">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-arrow-down</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90b" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-arrow-left">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-arrow-left</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e903" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-arrow-right">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-arrow-right</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90a" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-irc">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-irc</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e904" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-mail">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-mail</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e905" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: 14</h1>
|
||||
<div class="glyph fs3">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-github">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-github</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e908" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs3">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-telegram">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-telegram</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e906" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs3">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-twitter">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-twitter</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e907" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--[if gt IE 8]><!-->
|
||||
<div class="mhl clearfix mbl">
|
||||
<h1>Font Test Drive</h1>
|
||||
<label>
|
||||
Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
|
||||
min="8" value="48" />
|
||||
px
|
||||
</label>
|
||||
<input id="testText" type="text" class="phl size1of1 mvl"
|
||||
placeholder="Type some text to test..." value=""/>
|
||||
<div id="testDrive" class="icon-">
|
||||
</div>
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
<div class="bgc1 clearfix">
|
||||
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
|
||||
</div>
|
||||
|
||||
<script src="demo-files/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Двоичный файл не отображается.
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="play" horiz-adv-x="878" d="M253.194 815.906c-9.346 5.91-20.716 9.42-32.91 9.42s-23.564-3.512-33.164-9.569l0.254 0.149c-19.983-12.239-33.11-33.952-33.11-58.737 0-0.080 0-0.155 0-0.238v0.014-711.532c-0.001-0.133-0.002-0.292-0.002-0.451 0-24.719 13.137-46.359 32.813-58.336l0.298-0.173c9.346-5.91 20.716-9.42 32.91-9.42s23.564 3.512 33.164 9.569l-0.254-0.149 594.832 354.151c19.967 12.431 33.062 34.27 33.062 59.16s-13.095 46.727-32.773 58.987l-0.292 0.173z" />
|
||||
<glyph unicode="" glyph-name="download" d="M554.667 832c0 23.564-19.103 42.667-42.667 42.667s-42.667-19.103-42.667-42.667v0-494.507l-183.040 183.467c-7.753 7.753-18.463 12.548-30.293 12.548-23.661 0-42.841-19.181-42.841-42.841 0-11.83 4.795-22.541 12.548-30.293l256-256c7.733-7.795 18.45-12.621 30.293-12.621s22.56 4.826 30.291 12.618l256.003 256.003c7.753 7.753 12.548 18.463 12.548 30.293 0 23.661-19.181 42.841-42.841 42.841-11.83 0-22.541-4.795-30.293-12.548v0l-183.040-183.467zM213.333 64c0 23.564 19.103 42.667 42.667 42.667v0h512c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667v0h-512c-23.564 0-42.667 19.103-42.667 42.667v0z" />
|
||||
<glyph unicode="" glyph-name="arrow-up" d="M79.787 228.267c-9.692 9.33-15.713 22.415-15.713 36.907s6.020 27.577 15.697 36.891l0.016 0.016 373.333 365.227c9.832 9.287 23.129 14.995 37.76 14.995s27.928-5.709 37.786-15.020l-0.026 0.025 373.333-365.227c9.431-9.292 15.274-22.204 15.274-36.48s-5.843-27.188-15.268-36.474l-0.006-0.006c-9.698-9.233-22.853-14.913-37.333-14.913s-27.635 5.68-37.356 14.934l0.022-0.021-335.787 328.107-335.787-328.107c-9.815-9.861-23.399-15.963-38.408-15.963-14.581 0-27.817 5.759-37.557 15.126l0.018-0.017z" />
|
||||
<glyph unicode="" glyph-name="arrow-left" d="M709.973 37.12c-9.33-9.692-22.415-15.713-36.907-15.713s-27.577 6.020-36.891 15.697l-0.016 0.016-364.8 373.333c-9.478 9.747-15.323 23.071-15.323 37.76s5.845 28.013 15.335 37.773l-0.012-0.013 364.8 373.333c9.408 9.352 22.376 15.132 36.693 15.132s27.285-5.78 36.696-15.135l-0.003 0.003c9.329-9.656 15.077-22.823 15.077-37.333s-5.748-27.677-15.092-37.349l0.015 0.015-327.68-336.64 328.107-335.787c9.453-9.68 15.284-22.932 15.284-37.547s-5.831-27.867-15.295-37.557l0.010 0.011z" />
|
||||
<glyph unicode="" glyph-name="irc" d="M273.92 746.667h476.16c56.928-0.241 103.012-46.325 103.253-103.23v-262.85c-0.241-56.928-46.325-103.012-103.23-103.253h-249.196l-128-154.88c-7.884-9.611-19.762-15.694-33.060-15.694-5.127 0-10.043 0.904-14.597 2.562l0.297-0.094c-15.885 6.449-26.883 21.76-26.883 39.64 0 0.164 0.001 0.328 0.003 0.492v-0.025 128h-24.747c-56.928 0.241-103.012 46.325-103.253 103.23v262.85c0.241 56.928 46.325 103.012 103.23 103.253h0.023zM256 380.587c-0.003-0.129-0.005-0.28-0.005-0.432 0-9.661 7.832-17.493 17.493-17.493 0.152 0 0.303 0.002 0.454 0.006h67.391c23.564 0 42.667-19.103 42.667-42.667v0-50.773l63.573 77.653c7.885 9.665 19.795 15.787 33.135 15.787 0.051 0 0.102 0 0.153 0h269.219c0.129-0.003 0.28-0.005 0.432-0.005 9.661 0 17.493 7.832 17.493 17.493 0 0.152-0.002 0.303-0.006 0.454v-0.022 262.827c0 9.897-8.023 17.92-17.92 17.92v0h-476.16c-9.897 0-17.92-8.023-17.92-17.92v0z" />
|
||||
<glyph unicode="" glyph-name="mail" d="M725.333 704h-426.667c-70.692 0-128-57.308-128-128v0-256c0-70.692 57.308-128 128-128v0h426.667c70.692 0 128 57.308 128 128v0 256c0 70.692-57.308 128-128 128v0zM725.333 618.667c0.566 0.072 1.222 0.113 1.887 0.113 4.237 0 8.084-1.669 10.919-4.385l-0.006 0.005h-4.267l-221.867-162.133-221.867 162.133h-4.267c2.83 2.711 6.677 4.38 10.913 4.38 0.665 0 1.32-0.041 1.964-0.121l-0.077 0.008zM768 320c0.056-0.792 0.087-1.716 0.087-2.647 0-22.15-17.956-40.107-40.107-40.107-0.932 0-1.856 0.032-2.771 0.094l0.124-0.007h-426.667c-0.792-0.056-1.716-0.087-2.647-0.087-22.15 0-40.107 17.956-40.107 40.107 0 0.932 0.032 1.856 0.094 2.771l-0.007-0.124v264.533c0-4.267 4.267-4.267 8.533-4.267l234.667-170.667c3.521-2.664 7.973-4.267 12.8-4.267s9.279 1.603 12.854 4.306l-0.054-0.039 234.667 170.667c4.267 0 4.267 4.267 4.267 8.533 2.711-2.83 4.38-6.677 4.38-10.913 0-0.665-0.041-1.32-0.121-1.964l0.008 0.077z" />
|
||||
<glyph unicode="" glyph-name="telegram" d="M679.429 204l84 396c7.429 34.857-12.571 48.571-35.429 40l-493.714-190.286c-33.714-13.143-33.143-32-5.714-40.571l126.286-39.429 293.143 184.571c13.714 9.143 26.286 4 16-5.143l-237.143-214.286-9.143-130.286c13.143 0 18.857 5.714 25.714 12.571l61.714 59.429 128-94.286c23.429-13.143 40-6.286 46.286 21.714zM1024 438.857c0-282.857-229.143-512-512-512s-512 229.143-512 512 229.143 512 512 512 512-229.143 512-512z" />
|
||||
<glyph unicode="" glyph-name="twitter" horiz-adv-x="951" d="M925.714 717.714c-25.143-36.571-56.571-69.143-92.571-95.429 0.571-8 0.571-16 0.571-24 0-244-185.714-525.143-525.143-525.143-104.571 0-201.714 30.286-283.429 82.857 14.857-1.714 29.143-2.286 44.571-2.286 86.286 0 165.714 29.143 229.143 78.857-81.143 1.714-149.143 54.857-172.571 128 11.429-1.714 22.857-2.857 34.857-2.857 16.571 0 33.143 2.286 48.571 6.286-84.571 17.143-148 91.429-148 181.143v2.286c24.571-13.714 53.143-22.286 83.429-23.429-49.714 33.143-82.286 89.714-82.286 153.714 0 34.286 9.143 65.714 25.143 93.143 90.857-112 227.429-185.143 380.571-193.143-2.857 13.714-4.571 28-4.571 42.286 0 101.714 82.286 184.571 184.571 184.571 53.143 0 101.143-22.286 134.857-58.286 41.714 8 81.714 23.429 117.143 44.571-13.714-42.857-42.857-78.857-81.143-101.714 37.143 4 73.143 14.286 106.286 28.571z" />
|
||||
<glyph unicode="" glyph-name="github" horiz-adv-x="878" d="M438.857 877.714c242.286 0 438.857-196.571 438.857-438.857 0-193.714-125.714-358.286-300-416.571-22.286-4-30.286 9.714-30.286 21.143 0 14.286 0.571 61.714 0.571 120.571 0 41.143-13.714 67.429-29.714 81.143 97.714 10.857 200.571 48 200.571 216.571 0 48-17.143 86.857-45.143 117.714 4.571 11.429 19.429 56-4.571 116.571-36.571 11.429-120.571-45.143-120.571-45.143-34.857 9.714-72.571 14.857-109.714 14.857s-74.857-5.143-109.714-14.857c0 0-84 56.571-120.571 45.143-24-60.571-9.143-105.143-4.571-116.571-28-30.857-45.143-69.714-45.143-117.714 0-168 102.286-205.714 200-216.571-12.571-11.429-24-30.857-28-58.857-25.143-11.429-89.143-30.857-127.429 36.571-24 41.714-67.429 45.143-67.429 45.143-42.857 0.571-2.857-26.857-2.857-26.857 28.571-13.143 48.571-64 48.571-64 25.714-78.286 148-52 148-52 0-36.571 0.571-70.857 0.571-81.714 0-11.429-8-25.143-30.286-21.143-174.286 58.286-300 222.857-300 416.571 0 242.286 196.571 438.857 438.857 438.857zM166.286 247.428c1.143 2.286-0.571 5.143-4 6.857-3.429 1.143-6.286 0.571-7.429-1.143-1.143-2.286 0.571-5.143 4-6.857 2.857-1.714 6.286-1.143 7.429 1.143zM184 228c2.286 1.714 1.714 5.714-1.143 9.143-2.857 2.857-6.857 4-9.143 1.714-2.286-1.714-1.714-5.714 1.143-9.143 2.857-2.857 6.857-4 9.143-1.714zM201.143 202.286c2.857 2.286 2.857 6.857 0 10.857-2.286 4-6.857 5.714-9.714 3.429-2.857-1.714-2.857-6.286 0-10.286s7.429-5.714 9.714-4zM225.143 178.286c2.286 2.286 1.143 7.429-2.286 10.857-4 4-9.143 4.571-11.429 1.714-2.857-2.286-1.714-7.429 2.286-10.857 4-4 9.143-4.571 11.429-1.714zM257.714 164c1.143 3.429-2.286 7.429-7.429 9.143-4.571 1.143-9.714-0.571-10.857-4s2.286-7.429 7.429-8.571c4.571-1.714 9.714 0 10.857 3.429zM293.714 161.143c0 4-4.571 6.857-9.714 6.286-5.143 0-9.143-2.857-9.143-6.286 0-4 4-6.857 9.714-6.286 5.143 0 9.143 2.857 9.143 6.286zM326.857 166.857c-0.571 3.429-5.143 5.714-10.286 5.143-5.143-1.143-8.571-4.571-8-8.571 0.571-3.429 5.143-5.714 10.286-4.571s8.571 4.571 8 8z" />
|
||||
<glyph unicode="" glyph-name="close" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
|
||||
<glyph unicode="" glyph-name="arrow-right" d="M314.027 858.88c9.33 9.692 22.415 15.713 36.907 15.713s27.577-6.020 36.891-15.697l0.016-0.016 364.8-373.333c9.478-9.747 15.323-23.071 15.323-37.76s-5.845-28.013-15.335-37.773l0.012 0.013-364.8-373.333c-9.408-9.352-22.376-15.132-36.693-15.132s-27.285 5.78-36.696 15.135l0.003-0.003c-9.329 9.656-15.077 22.823-15.077 37.333s5.748 27.677 15.092 37.349l-0.015-0.015 327.68 336.64-328.107 335.787c-9.453 9.68-15.284 22.932-15.284 37.547s5.831 27.867 15.295 37.557l-0.010-0.011z" />
|
||||
<glyph unicode="" glyph-name="arrow-down" d="M944.213 667.733c9.692-9.33 15.713-22.415 15.713-36.907s-6.020-27.577-15.697-36.891l-0.016-0.016-373.333-365.227c-9.832-9.287-23.129-14.995-37.76-14.995s-27.928 5.709-37.786 15.020l0.026-0.025-373.333 365.227c-9.431 9.292-15.274 22.204-15.274 36.48s5.843 27.188 15.268 36.474l0.006 0.006c9.698 9.233 22.853 14.913 37.333 14.913s27.635-5.68 37.356-14.934l-0.022 0.021 335.787-328.107 335.787 328.107c9.815 9.861 23.399 15.963 38.408 15.963 14.581 0 27.817-5.759 37.557-15.126l-0.018 0.017z" />
|
||||
</font></defs></svg>
|
||||
|
После Ширина: | Высота: | Размер: 8.9 KiB |
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,63 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?iq7x1r');
|
||||
src: url('fonts/icomoon.eot?iq7x1r#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.woff2?iq7x1r') format('woff2'),
|
||||
url('fonts/icomoon.ttf?iq7x1r') format('truetype'),
|
||||
url('fonts/icomoon.woff?iq7x1r') format('woff'),
|
||||
url('fonts/icomoon.svg?iq7x1r#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-close:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-play:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-download:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-arrow-up:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-arrow-down:before {
|
||||
content: "\e90b";
|
||||
}
|
||||
.icon-arrow-left:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-arrow-right:before {
|
||||
content: "\e90a";
|
||||
}
|
||||
.icon-irc:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-mail:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-github:before {
|
||||
content: "\e908";
|
||||
}
|
||||
.icon-telegram:before {
|
||||
content: "\e906";
|
||||
}
|
||||
.icon-twitter:before {
|
||||
content: "\e907";
|
||||
}
|
||||
Двоичные данные
assets/img/content_video_thumbnail.png
Двоичные данные
assets/img/content_video_thumbnail.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 48 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<path id="background-scripts-a" d="M19,4 L5,4 C3.89,4 3,4.9 3,6 L3,18 C3,19.1 3.89,20 5,20 L19,20 C20.1,20 21,19.1 21,18 L21,6 C21,4.9 20.11,4 19,4 Z M19,18 L5,18 L5,8 L19,8 L19,18 Z M15.9998732,17 C16.0050975,17 16.0103217,16.9999584 16.0155453,16.9998752 C16.5591057,16.9912198 16.9927319,16.5435604 16.9840764,16 C16.9752414,15.4451583 16.5229381,15 15.9680261,15 L13,15 C12.4477153,15 12,15.4477153 12,16 C12,16.5522847 12.4477153,17 13,17 L15.9998732,17 Z M8.82842712,13.3284271 L6.62132034,15.5355339 C6.23079605,15.9260582 6.23079605,16.5592232 6.62132034,16.9497475 C7.01184464,17.3402718 7.64500961,17.3402718 8.03553391,16.9497475 L10.863961,14.1213203 C11.0810624,13.904219 11.1774721,13.6121295 11.1531903,13.3284271 C11.1774721,13.0447247 11.0810624,12.7526353 10.863961,12.5355339 L8.03553391,9.70710678 C7.64500961,9.31658249 7.01184464,9.31658249 6.62132034,9.70710678 C6.23079605,10.0976311 6.23079605,10.7307961 6.62132034,11.1213203 L8.82842712,13.3284271 Z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<mask id="background-scripts-b" fill="#fff">
|
||||
<use xlink:href="#background-scripts-a"/>
|
||||
</mask>
|
||||
<use fill="#0060DF" fill-rule="nonzero" xlink:href="#background-scripts-a"/>
|
||||
<g fill="#0060DF" fill-rule="nonzero" mask="url(#background-scripts-b)">
|
||||
<rect width="24" height="24"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.5 KiB |
|
|
@ -6,8 +6,8 @@
|
|||
<mask id="background-scripts-b" fill="#fff">
|
||||
<use xlink:href="#background-scripts-a"/>
|
||||
</mask>
|
||||
<use fill="#0060DF" fill-rule="nonzero" xlink:href="#background-scripts-a"/>
|
||||
<g fill="#0060DF" fill-rule="nonzero" mask="url(#background-scripts-b)">
|
||||
<use fill="#0a0a0a" fill-rule="nonzero" xlink:href="#background-scripts-a"/>
|
||||
<g fill="#0a0a0a" fill-rule="nonzero" mask="url(#background-scripts-b)">
|
||||
<rect width="24" height="24"/>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 1.5 KiB После Ширина: | Высота: | Размер: 1.5 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<path id="content-script-a" d="M0.5,11 L0.5,10.3131646 L1.5,10.3131646 L1.5,10.3131769 C2.01605451,10.3131769 2.27027153,10.0776526 2.41256899,9.32429901 L2.41256899,4.75280329 C2.41256899,2.99685023 3.76483207,2.07918564 5.95970989,2.00065182 C6.51164145,1.98090344 6.97507961,2.41232314 6.99482799,2.9642547 C7.01457638,3.51618626 6.58315667,3.97962442 6.03122511,3.99937281 C4.78223826,4.04406217 4.41256899,4.2949249 4.41256899,4.75280329 L4.41256899,9.41317702 L4.39829795,9.58151723 C4.24471349,10.4808427 3.89135203,11.1874952 3.36205371,11.6565823 C3.89135203,12.1256693 4.24471349,12.8323218 4.39829795,13.7316473 L4.41256899,13.8999876 L4.41256899,18.5603613 C4.41256899,19.0182397 4.78223826,19.2691024 6.03122511,19.3137918 C6.58315667,19.3335401 7.01457638,19.7969783 6.99482799,20.3489099 C6.97507961,20.9008414 6.51164145,21.3322611 5.95970989,21.3125127 C3.76483207,21.2339789 2.41256899,20.3163143 2.41256899,18.5603613 L2.41256899,13.9888656 C2.27027153,13.235512 2.01605451,12.9999877 1.5,12.9999877 L1.5,13 L0.5,13 L0.5,11 Z M23.4954798,11 L23.4954798,13 L22.4954798,13 L22.4954798,12.9999877 C21.9794253,12.9999877 21.7252083,13.235512 21.5829108,13.9888656 L21.5829108,18.5603613 C21.5829108,20.3163143 20.2306477,21.2339789 18.0357699,21.3125127 C17.4838384,21.3322611 17.0204002,20.9008414 17.0006518,20.3489099 C16.9809034,19.7969783 17.4123231,19.3335401 17.9642547,19.3137918 C19.2132416,19.2691024 19.5829108,19.0182397 19.5829108,18.5603613 L19.5829108,13.8999876 L19.5971819,13.7316473 C19.7507663,12.8323218 20.1041278,12.1256693 20.6334261,11.6565823 C20.1041278,11.1874952 19.7507663,10.4808427 19.5971819,9.58151723 L19.5829108,9.41317702 L19.5829108,4.75280329 C19.5829108,4.2949249 19.2132416,4.04406217 17.9642547,3.99937281 C17.4123231,3.97962442 16.9809034,3.51618626 17.0006518,2.9642547 C17.0204002,2.41232314 17.4838384,1.98090344 18.0357699,2.00065182 C20.2306477,2.07918564 21.5829108,2.99685023 21.5829108,4.75280329 L21.5829108,9.32429901 C21.7252083,10.0776526 21.9794253,10.3131769 22.4954798,10.3131769 L22.4954798,10.3131646 L23.4954798,10.3131646 L23.4954798,11 Z M12,13 C11.4477153,13 11,12.5522847 11,12 C11,11.4477153 11.4477153,11 12,11 C12.5522847,11 13,11.4477153 13,12 C13,12.5522847 12.5522847,13 12,13 Z M8,13 C7.44771525,13 7,12.5522847 7,12 C7,11.4477153 7.44771525,11 8,11 C8.55228475,11 9,11.4477153 9,12 C9,12.5522847 8.55228475,13 8,13 Z M16,13 C15.4477153,13 15,12.5522847 15,12 C15,11.4477153 15.4477153,11 16,11 C16.5522847,11 17,11.4477153 17,12 C17,12.5522847 16.5522847,13 16,13 Z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<mask id="content-script-b" fill="#fff">
|
||||
<use xlink:href="#content-script-a"/>
|
||||
</mask>
|
||||
<use fill="#0060DF" fill-rule="nonzero" xlink:href="#content-script-a"/>
|
||||
<g fill="#0060DF" fill-rule="nonzero" mask="url(#content-script-b)">
|
||||
<rect width="24" height="24"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 3.0 KiB |
|
|
@ -6,8 +6,8 @@
|
|||
<mask id="content-script-b" fill="#fff">
|
||||
<use xlink:href="#content-script-a"/>
|
||||
</mask>
|
||||
<use fill="#0060DF" fill-rule="nonzero" xlink:href="#content-script-a"/>
|
||||
<g fill="#0060DF" fill-rule="nonzero" mask="url(#content-script-b)">
|
||||
<use fill="#0a0a0a" fill-rule="nonzero" xlink:href="#content-script-a"/>
|
||||
<g fill="#0a0a0a" fill-rule="nonzero" mask="url(#content-script-b)">
|
||||
<rect width="24" height="24"/>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 3.0 KiB После Ширина: | Высота: | Размер: 3.0 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<path id="user-interface-a" d="M20,12 L20,18 C20,19.1045695 19.1045695,20 18,20 L6,20 C4.8954305,20 4,19.1045695 4,18 L4,6 C4,4.8954305 4.8954305,4 6,4 L13,4 C13.5522847,4 14,4.44771525 14,5 C14,5.55228475 13.5522847,6 13,6 L6,6 L6,18 L18,18 L18,12 C18,11.4477153 18.4477153,11 19,11 C19.5522847,11 20,11.4477153 20,12 Z M13.25,10.75 L16,12 L13.25,13.25 L12,16 L10.75,13.25 L8,12 L10.75,10.75 L12,8 L13.25,10.75 Z M18.9375,6.0625 L21,7 L18.9375,7.9375 L18,10 L17.0625,7.9375 L15,7 L17.0625,6.0625 L18,4 L18.9375,6.0625 Z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<mask id="user-interface-b" fill="#fff">
|
||||
<use xlink:href="#user-interface-a"/>
|
||||
</mask>
|
||||
<use fill="#0060DF" fill-rule="nonzero" xlink:href="#user-interface-a"/>
|
||||
<g fill="#0060DF" fill-rule="nonzero" mask="url(#user-interface-b)">
|
||||
<rect width="24" height="24"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1023 B |
|
|
@ -6,8 +6,8 @@
|
|||
<mask id="user-interface-b" fill="#fff">
|
||||
<use xlink:href="#user-interface-a"/>
|
||||
</mask>
|
||||
<use fill="#0060DF" fill-rule="nonzero" xlink:href="#user-interface-a"/>
|
||||
<g fill="#0060DF" fill-rule="nonzero" mask="url(#user-interface-b)">
|
||||
<use fill="#0a0a0a" fill-rule="nonzero" xlink:href="#user-interface-a"/>
|
||||
<g fill="#0a0a0a" fill-rule="nonzero" mask="url(#user-interface-b)">
|
||||
<rect width="24" height="24"/>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 1023 B После Ширина: | Высота: | Размер: 1023 B |
|
|
@ -555,7 +555,10 @@ jQuery(document).ready(function($) {
|
|||
// 8. Anatomy of an extenstion
|
||||
// ------
|
||||
|
||||
$.fn.extenstionAnatomy = function() {
|
||||
$.fn.extenstionAnatomy = function(options) {
|
||||
var settings = $.extend( {
|
||||
control: $('#anatomy-control'),
|
||||
}, options);
|
||||
var $this = this;
|
||||
var first = true;
|
||||
var timer1 = null;
|
||||
|
|
@ -598,6 +601,21 @@ jQuery(document).ready(function($) {
|
|||
$this.removeClass('step-one step-two');
|
||||
}
|
||||
});
|
||||
|
||||
settings.control.on('mouseenter', 'button', function() {
|
||||
var panel = $(this).data('panel');
|
||||
if (panel == 'anatomy-ui') {
|
||||
$tile_interface.addClass('hover');
|
||||
} else if (panel == 'anatomy-content') {
|
||||
$tile_content.addClass('hover');
|
||||
} else if (panel == 'anatomy-background') {
|
||||
$tile_background.addClass('hover');
|
||||
}
|
||||
}).on('mouseleave', 'button', function() {
|
||||
$tile_interface.removeClass('hover');
|
||||
$tile_content.removeClass('hover');
|
||||
$tile_background.removeClass('hover');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Загрузка…
Ссылка в новой задаче