mirror of https://github.com/zulip/zulip.git
css: Integrate newly designed header.
This commit is contained in:
Aman Agrawal
Tim Abbott
parent
f3db618cb5
commit
d564025d6a
|
|
@ -7,177 +7,261 @@
|
|||
{% endif %}
|
||||
|
||||
{% if not isolated_page %}
|
||||
<nav class="portico-header">
|
||||
<div class="content">
|
||||
<a class="brand logo" href="{{ root_domain_uri }}">
|
||||
<svg class="brand-logo" role="img" aria-label="{{ _('Zulip') }}" xmlns="http://www.w3.org/2000/svg" viewBox="68.96 55.62 1742.12 450.43" height="25">
|
||||
<path fill="hsl(0, 0%, 100%)" d="M473.09 122.97c0 22.69-10.19 42.85-25.72 55.08L296.61 312.69c-2.8 2.4-6.44-1.47-4.42-4.7l55.3-110.72c1.55-3.1-.46-6.91-3.64-6.91H129.36c-33.22 0-60.4-30.32-60.4-67.37 0-37.06 27.18-67.37 60.4-67.37h283.33c33.22-.02 60.4 30.3 60.4 67.35zM129.36 506.05h283.33c33.22 0 60.4-30.32 60.4-67.37 0-37.06-27.18-67.37-60.4-67.37H198.2c-3.18 0-5.19-3.81-3.64-6.91l55.3-110.72c2.02-3.23-1.62-7.1-4.42-4.7L94.68 383.6c-15.53 12.22-25.72 32.39-25.72 55.08 0 37.05 27.18 67.37 60.4 67.37zm522.5-124.15l124.78-179.6v-1.56H663.52v-48.98h190.09v34.21L731.55 363.24v1.56h124.01v48.98h-203.7V381.9zm338.98-230.14V302.6c0 45.09 17.1 68.03 47.43 68.03 31.1 0 48.2-21.77 48.2-68.03V151.76h59.09V298.7c0 80.86-40.82 119.34-109.24 119.34-66.09 0-104.96-36.54-104.96-120.12V151.76h59.48zm244.91 0h59.48v212.25h104.18v49.76h-163.66V151.76zm297 0v262.01h-59.48V151.76h59.48zm90.18 3.5c18.27-3.11 43.93-5.44 80.08-5.44 36.54 0 62.59 7 80.08 20.99 16.72 13.22 27.99 34.99 27.99 60.64 0 25.66-8.55 47.43-24.1 62.2-20.21 19.05-50.15 27.6-85.13 27.6-7.77 0-14.77-.39-20.21-1.17v93.69h-58.7V155.26zm58.7 118.96c5.05 1.17 11.27 1.55 19.83 1.55 31.49 0 50.92-15.94 50.92-42.76 0-24.1-16.72-38.49-46.26-38.49-12.05 0-20.21 1.17-24.49 2.33v77.37z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<ul>
|
||||
<div class="exit">×</div>
|
||||
<div class="dropdown nav-dropdown">
|
||||
<div class="dropdown-label first">Product<i class="fa fa-chevron-down"></i></div>
|
||||
<ul class="dropdown-list product-options">
|
||||
<li>
|
||||
<a href="https://zulip.com">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/why-zulip/">Why Zulip</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/features/">Features</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/self-hosting/">Self-hosting</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/security/">Security</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/integrations/">Integrations</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/api/">REST API</a>
|
||||
</li>
|
||||
</ul>
|
||||
<nav class="top-menu">
|
||||
<div class="top-menu-container">
|
||||
<a class="top-menu-logo nav-zulip-logo" href="https://zulip.com" tabindex="1"></a>
|
||||
<div class='top-menu-items-group-1'>
|
||||
<div class='top-menu-item top-menu-tab'>
|
||||
<div class="top-menu-tab-unselect"></div>
|
||||
<input type="radio" name="top-menu-tabs" class="top-menu-tab-input" id="top-menu-tab-product" />
|
||||
<label for="top-menu-tab-product" class="nav-menu-label" tabindex="0">Product</label>
|
||||
<div class="top-menu-submenu">
|
||||
<div class="top-menu-submenu-column">
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com">Home</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/why-zulip/">Why Zulip</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/features/">Features</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/security/">Security</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/integrations/">Integrations</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/apps/">Apps</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/try-zulip/">Try Zulip</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top-menu-submenu-column">
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/self-hosting/">Self-hosting</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/help/getting-your-organization-started-with-zulip">Moving to Zulip</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="/api/">API</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://github.com/zulip/zulip" target="_blank" rel="noopener noreferrer">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown nav-dropdown">
|
||||
<div class="dropdown-label">Solutions<i class="fa fa-chevron-down"></i></div>
|
||||
<ul class="dropdown-list solutions-options">
|
||||
<div class="dropdown-column">
|
||||
<li class="nav-header">Use cases</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/for/business/">Business</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/for/education/">Education</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/for/research/">Research</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/for/events/">Events and conferences</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/for/open-source/">Open source projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/for/communities/">Communities</a>
|
||||
</li>
|
||||
<div class='top-menu-item top-menu-tab'>
|
||||
<div class="top-menu-tab-unselect"></div>
|
||||
<input type="radio" name="top-menu-tabs" class="top-menu-tab-input" id="top-menu-tab-solutions" />
|
||||
<label for="top-menu-tab-solutions" class="nav-menu-label" tabindex="0">Solutions</label>
|
||||
<div class="top-menu-submenu">
|
||||
<div class="top-menu-submenu-column">
|
||||
<span class="top-menu-submenu-section">USE CASES</span>
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/business/">Business</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/education/">Education</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/research/">Research</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/events/">Events and conferences</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/open-source/">Open source projects</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/communities/">Communities</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<li class="nav-header">Customer stories</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/case-studies/idrift/">iDrift AS company</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/case-studies/end-point/">End Point Dev software consultancy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/case-studies/tum/">Technical University of Munich</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/case-studies/ucsd/">University of California San Diego</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/case-studies/lean/">Lean theorem prover community</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/case-studies/asciidoctor/">Asciidoctor open-source community</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/case-studies/rust/">Rust language community</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/case-studies/recurse-center/">Recurse Center</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/communities/">Open communities directory</a>
|
||||
</li>
|
||||
<div class="top-menu-submenu-column">
|
||||
<span class="top-menu-submenu-section">CUSTOMER STORIES</span>
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/idrift/">Efficient distributed team management at iDrift AS</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="/case-studies/end-point/">Managing hundreds of projects at End Point Dev</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/tum/">Organized chat for 1000s of students at TUM</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/ucsd/">Communication hub across 6 continents at UCSD</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/lean/">Research collaboration at scale in the Lean mathematical community</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/asciidoctor/">Inclusive discussion in the open-source Asciidoctor community</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/rust/">Faster decision-making in the Rust language community</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/recurse-center/">Platform for a worldwide community since 2013 at Recurse Center</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/communities/">Open communities directory</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<li data-on-page="plans">
|
||||
<a href="https://zulip.com/plans/">Pricing</a>
|
||||
</li>
|
||||
<div class="dropdown nav-dropdown">
|
||||
<div class="dropdown-label">Resources<i class="fa fa-chevron-down"></i></div>
|
||||
<ul class="dropdown-list resources-options">
|
||||
<div class="dropdown-column">
|
||||
<li class="nav-header">For users</li>
|
||||
<li>
|
||||
<a href="/help/getting-started-with-zulip">Getting started</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/help/">Help center</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.com/development-community/" target="_blank" rel="noopener noreferrer">
|
||||
Community chat
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/help/contact-support">Contact support</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.zulip.com/">Blog</a>
|
||||
</li>
|
||||
<div class='top-menu-item top-menu-tab'>
|
||||
<div class="top-menu-tab-unselect"></div>
|
||||
<input type="radio" name="top-menu-tabs" class="top-menu-tab-input" id="top-menu-tab-resources" />
|
||||
<label for="top-menu-tab-resources" class="nav-menu-label" tabindex="0">Resources</label>
|
||||
<div class="top-menu-submenu">
|
||||
<div class="top-menu-submenu-column">
|
||||
<span class="top-menu-submenu-section">FOR USERS</span>
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="/help/getting-started-with-zulip">Getting started</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="/help/">Help center</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/development-community/" target="_blank" rel="noopener noreferrer">Community chat</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/help/contact-support">Contact support</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<li class="nav-header">For administrators</li>
|
||||
<li>
|
||||
<a href="/help/getting-your-organization-started-with-zulip">
|
||||
Setting up your organization
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.readthedocs.io/en/stable/production/install.html">
|
||||
Installing a Zulip server
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zulip.readthedocs.io/en/stable/production/upgrade-or-modify.html">
|
||||
Upgrading a Zulip server
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/zulip/zulip" target="_blank" rel="noopener noreferrer">GitHub</a>
|
||||
</li>
|
||||
<div class="top-menu-submenu-column">
|
||||
<span class="top-menu-submenu-section">FOR ADMINISTRATORS</span>
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="/help/getting-your-organization-started-with-zulip">Setting up your organization</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.readthedocs.io/en/stable/production/install.html">Installing a Zulip server</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.readthedocs.io/en/stable/production/upgrade-or-modify.html">Upgrading a Zulip server</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://github.com/zulip/zulip" target="_blank" rel="noopener noreferrer">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<li data-on-page="apps">
|
||||
<a href="{{ apps_page_url }}">Download</a>
|
||||
</li>
|
||||
<a class='top-menu-item' href="https://zulip.com/plans/">Pricing</a>
|
||||
<a class='top-menu-item' href="https://zulip.com/apps/">Download</a>
|
||||
</div>
|
||||
<div class='top-menu-item-spacer'></div>
|
||||
<div class='top-menu-items-group-2'>
|
||||
<a class='top-menu-item' href="/new/">New organization</a>
|
||||
{% if user_is_authenticated %}
|
||||
{% include 'zerver/portico-header-dropdown.html' %}
|
||||
<div class='top-menu-item top-menu-tab'>
|
||||
<div class="top-menu-tab-unselect"></div>
|
||||
<input type="radio" name="top-menu-tabs" class="top-menu-tab-input" id="top-menu-tab-user" />
|
||||
<label class="top-menu-tab-user-label nav-menu-label" for="top-menu-tab-user" tabindex="0">
|
||||
<img class="top-menu-tab-user-img" src="{{ realm_icon }}" />
|
||||
<span>{{ realm_name }}</span>
|
||||
</label>
|
||||
<div class="top-menu-submenu singup-column">
|
||||
<div class="top-menu-submenu-column">
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item">
|
||||
<a href="/">Go to app</a>
|
||||
</li>
|
||||
<div class="hidden">
|
||||
<form id="logout_form" action="/accounts/logout/" method="POST">{{ csrf_input }}
|
||||
</form>
|
||||
</div>
|
||||
<li class="top-menu-submenu-list-item">
|
||||
<a class="logout_button">
|
||||
Log out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if login_link_disabled %}
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="/login/">Log in</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if register_link_disabled %}
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="/register/">Sign up</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if login_link_disabled %}
|
||||
{% else %}
|
||||
<a class='top-menu-item' href="/login/">Log in</a>
|
||||
{% endif %}
|
||||
{% if register_link_disabled %}
|
||||
{% else %}
|
||||
<a class='top-menu-item' href="/register/">Sign up</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if find_team_link_disabled %}
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="/accounts/find/">Find accounts</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/new/">New organization</a>
|
||||
</li>
|
||||
<a class='top-menu-item' href="/accounts/find/">Find accounts</a>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="clear-float"></div>
|
||||
</div>
|
||||
</div>
|
||||
<svg height="32px" class="hamburger" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
|
||||
<input type="radio" name="top-menu-tabs" class="top-menu-tab-input-unselect" id="top-menu-tab-close" checked />
|
||||
<div id='top-menu-submenu-backdrop' class="top-menu-submenu-backdrop"></div>
|
||||
<label class="top-menu-tab-label-unselect nav-menu-label" for="top-menu-tab-close" tabindex="0"></label>
|
||||
</nav>
|
||||
<details class="top-menu-mobile">
|
||||
<summary class="top-menu-mobile-summary">
|
||||
<a class="top-menu-logo nav-zulip-logo" href="https://zulip.com"></a>
|
||||
</summary>
|
||||
<div class="top-menu-mobile-items-group-1">
|
||||
<details>
|
||||
<summary class="top-menu-mobile-item-summary">Product</summary>
|
||||
<div class="top-menu-mobile-submenu">
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com">Home</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/why-zulip">Why Zulip</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/features/">Features</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/security/">Security</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/integrations/">Integrations</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/apps">Apps</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/try-zulip/">Try Zulip</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top-menu-mobile-submenu">
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/self-hosting/">Self-hosting</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/help/getting-your-organization-started-with-zulip">Moving to Zulip</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="/api/">API</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://github.com/zulip/zulip" target="_blank" rel="noopener noreferrer">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
<details>
|
||||
<summary class="top-menu-mobile-item-summary">Solutions</summary>
|
||||
<div class="top-menu-mobile-submenu">
|
||||
<span class="top-menu-mobile-submenu-section">USE CASES</span>
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/business/">Business</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/education/">Education</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/research/">Research</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/events/">Events and conferences</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/open-source/">Open source projects</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/for/communities/">Communities</a></li>
|
||||
</ul>
|
||||
<span class="top-menu-mobile-submenu-section">CUSTOMER STORIES</span>
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/idrift/">Efficient distributed team management at iDrift AS</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="/case-studies/end-point/">Managing hundreds of projects at End Point Dev</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/tum/">Organized chat for 1000s of students at TUM</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/ucsd/">Communication hub across 6 continents at UCSD</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/lean/">Research collaboration at scale in the Lean mathematical community</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/asciidoctor/">Inclusive discussion in the open-source Asciidoctor community</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/rust/">Faster decision-making in the Rust language community</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/case-studies/recurse-center/">Platform for a worldwide community since 2013 at Recurse Center</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/communities/">Open communities directory</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
<details>
|
||||
<summary class="top-menu-mobile-item-summary">Resources</summary>
|
||||
<div class="top-menu-mobile-submenu">
|
||||
<span class="top-menu-mobile-submenu-section">FOR USERS</span>
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="/help/getting-started-with-zulip">Getting started</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="/help">Help center</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/development-community/" target="_blank" rel="noopener noreferrer">Community chat</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.com/help/contact-support">Contact support</a></li>
|
||||
</ul>
|
||||
<span class="top-menu-mobile-submenu-section">FOR ADMINISTRATORS</span>
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item"><a href="/help/getting-your-organization-started-with-zulip">Setting up your organization</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.readthedocs.io/en/stable/production/install.html">Installing a Zulip server</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://zulip.readthedocs.io/en/stable/production/upgrade-or-modify.html">Upgrading a Zulip server</a></li>
|
||||
<li class="top-menu-submenu-list-item"><a href="https://github.com/zulip/zulip" target="_blank" rel="noopener noreferrer">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
<div class='top-menu-mobile-item'><a href="https://zulip.com/plans/">Pricing</a></div>
|
||||
<div class='top-menu-mobile-item'><a href="https://zulip.com/apps/">Download</a></div>
|
||||
</div>
|
||||
<div class="top-menu-mobile-items-group-2">
|
||||
<div class='top-menu-mobile-item'><a href="/new/">New organization</a></div>
|
||||
{% if user_is_authenticated %}
|
||||
<details>
|
||||
<summary class="top-menu-mobile-item-summary">
|
||||
<img class="top-menu-mobile-user-img"
|
||||
src="{{ realm_icon }}" />
|
||||
{{ realm_name }}
|
||||
</summary>
|
||||
<div class="top-menu-mobile-submenu">
|
||||
<ul class="top-menu-submenu-list">
|
||||
<li class="top-menu-submenu-list-item">
|
||||
<a href="/">Go to app</a>
|
||||
</li>
|
||||
<div class="hidden">
|
||||
<form id="logout_form" action="/accounts/logout/" method="POST">{{ csrf_input }}
|
||||
</form>
|
||||
</div>
|
||||
<li class="top-menu-submenu-list-item">
|
||||
<a class="logout_button">
|
||||
Log out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
{% else %}
|
||||
{% if login_link_disabled %}
|
||||
{% else %}
|
||||
<div class='top-menu-mobile-item'><a href="/login/">Log in</a></div>
|
||||
{% endif %}
|
||||
{% if register_link_disabled %}
|
||||
{% else %}
|
||||
<div class='top-menu-mobile-item'><a href="/register/">Sign up</a></div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if find_team_link_disabled %}
|
||||
{% else %}
|
||||
<div class='top-menu-mobile-item'><a href="/accounts/find/">Find accounts</a></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
import $ from "jquery";
|
||||
|
||||
$(() => {
|
||||
function on_tab_menu_selection_change(event) {
|
||||
// Pass event to open menu and if it is undefined, we close the menu.
|
||||
if (!event) {
|
||||
$("#top-menu-submenu-backdrop").css("height", "0px");
|
||||
return;
|
||||
}
|
||||
const el = event.target.parentElement.querySelector(".top-menu-submenu");
|
||||
if (el) {
|
||||
$("#top-menu-submenu-backdrop").css("height", Number(el.offsetHeight) + 16);
|
||||
} else {
|
||||
$("#top-menu-submenu-backdrop").css("height", 0);
|
||||
}
|
||||
}
|
||||
|
||||
function on_top_menu_tab_unselect_click() {
|
||||
// Close the menu.
|
||||
$("#top-menu-tab-close").prop("checked", true);
|
||||
on_tab_menu_selection_change();
|
||||
}
|
||||
|
||||
// In case user presses `back` with menu open.
|
||||
// See https://github.com/zulip/zulip/pull/24301#issuecomment-1418547337.
|
||||
if ($(".top-menu-tab-input:checked").length === 1) {
|
||||
const sub_menu_height = $(".top-menu-tab-input:checked ~ .top-menu-submenu").height() || 0;
|
||||
$("#top-menu-submenu-backdrop").css("height", sub_menu_height + 16);
|
||||
}
|
||||
|
||||
// Close navbar if already open when user clicks outside the navbar.
|
||||
$("body").on("click", (e) => {
|
||||
const is_navbar_expanded = $(".top-menu-tab-input:checked").length === 1;
|
||||
const is_click_outside_navbar = $(".top-menu").find(e.target).length === 0;
|
||||
if (is_navbar_expanded && is_click_outside_navbar) {
|
||||
on_top_menu_tab_unselect_click();
|
||||
}
|
||||
});
|
||||
|
||||
$(".logout_button").on("click", () => {
|
||||
$("#logout_form").trigger("submit");
|
||||
});
|
||||
|
||||
$(".top-menu-tab-input").on("click", (e) => {
|
||||
on_tab_menu_selection_change(e);
|
||||
});
|
||||
|
||||
$(".top-menu-tab-unselect").on("click", () => {
|
||||
on_top_menu_tab_unselect_click();
|
||||
});
|
||||
|
||||
$("#top-menu-tab-close").on("change", () => {
|
||||
on_tab_menu_selection_change();
|
||||
});
|
||||
|
||||
$("body").on("change", "top-menu-tab-input", (e) => {
|
||||
$("#top-menu-tab-close").prop("checked", true);
|
||||
on_tab_menu_selection_change(e);
|
||||
});
|
||||
|
||||
// Helps make the keyboard navigation work.
|
||||
$("body").on("keydown", ".nav-menu-label, .top-menu-tab-label-unselect", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const labelID = $(e.currentTarget).attr("for");
|
||||
$("#" + labelID).trigger("click");
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("click", ".top-menu-mobile", (e) => {
|
||||
if (e.target.open) {
|
||||
document.body.classList.add("_full-height-no-scroll");
|
||||
} else {
|
||||
document.body.classList.remove("_full-height-no-scroll");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
import $ from "jquery";
|
||||
|
||||
$(() => {
|
||||
$(".portico-header li.logout").on("click", () => {
|
||||
$("#logout_form").trigger("submit");
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".dropdown").on("click", (e) => {
|
||||
const $this = $(e.target);
|
||||
const dropdown_is_shown = $this.closest(".dropdown").hasClass("show");
|
||||
|
||||
if (!dropdown_is_shown) {
|
||||
$this.closest(".dropdown").addClass("show");
|
||||
} else if (dropdown_is_shown) {
|
||||
$this.closest(".dropdown").removeClass("show");
|
||||
}
|
||||
});
|
||||
|
||||
$(".nav-dropdown").on("mouseover", (e) => {
|
||||
const $this = $(e.target);
|
||||
// We switch to a vertical sidebar menu at width <= 1024px
|
||||
const in_vertical_orientation = window.matchMedia("(max-width: 1024px)").matches;
|
||||
// We only support mouseover events if we are in a horizontal
|
||||
// orientation (width > 1024px) and if the primary input mechanism
|
||||
// can hover over elements.
|
||||
const hover_supported = window.matchMedia("(hover: hover)").matches;
|
||||
const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
|
||||
|
||||
if (!dropdown_is_shown && !in_vertical_orientation && hover_supported) {
|
||||
$this.closest("ul .dropdown").addClass("show");
|
||||
}
|
||||
});
|
||||
|
||||
$(".nav-dropdown").on("mouseout", (e) => {
|
||||
const $this = $(e.target);
|
||||
// We switch to a vertical sidebar menu at width <= 1024px
|
||||
const in_vertical_orientation = window.matchMedia("(max-width: 1024px)").matches;
|
||||
// We only support mouseout events if we are in a horizontal
|
||||
// orientation (width > 1024px) and if the primary input mechanism
|
||||
// can hover over elements.
|
||||
const hover_supported = window.matchMedia("(hover: hover)").matches;
|
||||
const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
|
||||
|
||||
if (dropdown_is_shown && !in_vertical_orientation && hover_supported) {
|
||||
$this.closest("ul .dropdown").removeClass("show");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -194,185 +194,6 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
/* -- navbar styling -- */
|
||||
|
||||
nav {
|
||||
width: calc(100% - 80px);
|
||||
position: absolute;
|
||||
color: hsl(0deg 0% 100%);
|
||||
|
||||
padding: 40px;
|
||||
|
||||
z-index: 4;
|
||||
|
||||
.brand.logo {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.white {
|
||||
background-color: hsl(0deg 0% 100%);
|
||||
|
||||
& li {
|
||||
& a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: hsl(0deg 0% 27%);
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
& li {
|
||||
&.active {
|
||||
&::after {
|
||||
color: hsl(0deg 0% 27%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand.logo {
|
||||
& span {
|
||||
color: hsl(0deg 0% 27%);
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
fill: hsl(0deg 0% 27%);
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
fill: hsl(0deg 0% 100%);
|
||||
cursor: pointer;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 5px 0 10px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.logo {
|
||||
top: 7px;
|
||||
|
||||
& span {
|
||||
position: relative;
|
||||
left: 5px;
|
||||
top: 1px;
|
||||
color: hsl(0deg 0% 100%);
|
||||
font-weight: 600;
|
||||
vertical-align: top;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
float: right;
|
||||
list-style-type: none;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
outline: 1000px solid;
|
||||
outline-color: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
transition: outline-color 0.2s ease;
|
||||
|
||||
.exit {
|
||||
display: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
& li,
|
||||
div.dropdown-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
|
||||
color: hsl(0deg 0% 100%);
|
||||
|
||||
opacity: 0.7;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
content: "v";
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: calc(50% - 4px);
|
||||
font-weight: 100;
|
||||
transform: scaleX(2) scaleY(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
& i.fa-chevron-down {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
font-size: 0.6em;
|
||||
margin-left: 5px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
padding-bottom: 3px;
|
||||
|
||||
& ul {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
@media (width > 1024px) {
|
||||
& ul.product-options {
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
& ul.solutions-options {
|
||||
width: 450px;
|
||||
|
||||
& div.dropdown-column {
|
||||
float: left;
|
||||
|
||||
&:first-of-type {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& ul.resources-options {
|
||||
width: 350px;
|
||||
|
||||
& div.dropdown-column {
|
||||
float: left;
|
||||
|
||||
&:first-of-type {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& li {
|
||||
& a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: hsl(0deg 0% 100%);
|
||||
font-size: 1.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -- main panel styling -- */
|
||||
.main {
|
||||
width: calc(100% - 200px - 20px);
|
||||
|
|
@ -2895,30 +2716,6 @@ nav {
|
|||
padding-top: 170px;
|
||||
}
|
||||
|
||||
nav {
|
||||
&.white {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
& span {
|
||||
color: hsl(0deg 0% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.portico-landing.features-app {
|
||||
& section {
|
||||
&.messages {
|
||||
|
|
@ -3087,17 +2884,6 @@ nav {
|
|||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
nav {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
width: calc(100% - 100px);
|
||||
|
||||
.hamburger {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.portico-landing.hello .open-source {
|
||||
.flex {
|
||||
display: block;
|
||||
|
|
@ -3269,119 +3055,6 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
z-index: 11;
|
||||
|
||||
> ul.show {
|
||||
outline-color: hsl(203deg 43% 22% / 70%);
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
margin-top: 0;
|
||||
text-align: left;
|
||||
|
||||
position: fixed;
|
||||
float: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 300px;
|
||||
padding-left: 30px;
|
||||
|
||||
background-color: hsl(0deg 0% 100%);
|
||||
transform: translate(-350px, 0);
|
||||
|
||||
box-shadow: 0 0 80px hsl(0deg 0% 0% / 12%);
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
&.show {
|
||||
transform: translate(0, 0);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.exit {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 25px;
|
||||
|
||||
font-weight: 100;
|
||||
font-size: 3em;
|
||||
color: initial;
|
||||
}
|
||||
|
||||
& li,
|
||||
div.dropdown div.dropdown-label {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
|
||||
&.active {
|
||||
font-weight: 400;
|
||||
|
||||
&::after {
|
||||
content: ">";
|
||||
transform: scale(1, 1);
|
||||
bottom: auto;
|
||||
left: -25px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& div.dropdown div.dropdown-label.first {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
& div.dropdown ul.dropdown-list {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
padding-left: 10px;
|
||||
border: none;
|
||||
|
||||
& li {
|
||||
&:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
& ul.resources-options,
|
||||
ul.solutions-options {
|
||||
& div.dropdown-column {
|
||||
float: none;
|
||||
|
||||
&:first-child {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
& li.nav-header {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.portico-header {
|
||||
& div.content ul div.nav-dropdown {
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portico-header .content > ul::before {
|
||||
content: "Zulip";
|
||||
display: block;
|
||||
|
|
@ -3409,13 +3082,6 @@ nav {
|
|||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
nav ul li,
|
||||
nav ul li a,
|
||||
nav ul div.dropdown div.dropdown-label,
|
||||
.portico-header .dropdown-pill .realm-name {
|
||||
color: hsl(0deg 0% 27%) !important;
|
||||
}
|
||||
|
||||
.portico-landing.apps .main ul.sidebar {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,612 @@
|
|||
.nav-zulip-logo {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='108' height='28' viewBox='0 0 108 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_555_12341234)'%3E%3Cpath d='M25.0534 4.18667C25.0534 5.59714 24.4217 6.85034 23.4589 7.6106L14.1128 15.9802C13.9392 16.1294 13.7136 15.8888 13.8388 15.688L17.267 8.80536C17.3631 8.61266 17.2385 8.37582 17.0414 8.37582H3.7444C1.68498 8.37582 0 6.49104 0 4.18791C0 1.88416 1.68498 6.14715e-07 3.7444 6.14715e-07H21.309C23.3684 -0.00124264 25.0534 1.88353 25.0534 4.18667ZM3.7444 28H21.309C23.3684 28 25.0534 26.1152 25.0534 23.8121C25.0534 21.5083 23.3684 19.6242 21.309 19.6242H8.01203C7.81489 19.6242 7.69029 19.3873 7.78638 19.1946L11.2146 12.312C11.3398 12.1112 11.1142 11.8706 10.9406 12.0198L1.59447 20.3882C0.631713 21.1478 0 22.4016 0 23.8121C0 26.1152 1.68498 28 3.7444 28ZM36.136 20.2825L43.8715 9.11804V9.02107H36.8588V5.97633H48.6431V8.10292L41.0762 19.1225V19.2195H48.764V22.2642H36.136V20.2825V20.2825ZM57.1505 5.97633V15.353C57.1505 18.1559 58.2106 19.5819 60.0909 19.5819C62.0189 19.5819 63.0789 18.2286 63.0789 15.353V5.97633H66.7421V15.1105C66.7421 20.137 64.2116 22.5291 59.97 22.5291C55.8728 22.5291 53.4631 20.2576 53.4631 15.0621V5.97633H57.1505V5.97633ZM72.3333 5.97633H76.0207V19.1704H82.4792V22.2636H72.3333V5.97633ZM90.7454 5.97633V22.2636H87.058V5.97633H90.7454ZM96.3359 6.1939C97.4686 6.00058 99.0593 5.85574 101.3 5.85574C103.566 5.85574 105.181 6.29088 106.265 7.16054C107.301 7.98233 108 9.33561 108 10.9301C108 12.5252 107.47 13.8785 106.506 14.7966C105.253 15.9808 103.397 16.5123 101.228 16.5123C100.747 16.5123 100.313 16.4881 99.9756 16.4396V22.2636H96.3366V6.1939H96.3359ZM99.975 13.5888C100.288 13.6615 100.674 13.6851 101.204 13.6851C103.156 13.6851 104.361 12.6943 104.361 11.0271C104.361 9.52894 103.324 8.63442 101.493 8.63442C100.746 8.63442 100.24 8.70715 99.975 8.77926V13.5888V13.5888Z' fill='white'%3E%3C/path%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_555_12341234'%3E%3Crect width='108' height='28' fill='white'%3E%3C/rect%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
width: 108px;
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background: hsl(240deg 100% 10% / 60%);
|
||||
backdrop-filter: blur(10px);
|
||||
color: hsl(0deg 0% 100%);
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-menu-container {
|
||||
/* 1280px + 32px for paddings on the edges */
|
||||
max-width: 1312px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-menu-logo {
|
||||
overflow: hidden;
|
||||
opacity: 0.85;
|
||||
/* 14*2 = 28px = height of logo svg */
|
||||
padding: 14px;
|
||||
margin: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.top-menu-items-group-1,
|
||||
.top-menu-items-group-2 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.top-menu-items-group-1 {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.top-menu-item,
|
||||
.top-menu-mobile a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:visited {
|
||||
color: hsl(0deg 0% 100% / 80%);
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
padding: 14px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition-property: background, color;
|
||||
transition-duration: 0.05s;
|
||||
transition-timing-function: ease-out;
|
||||
color: hsl(0deg 0% 100% / 80%);
|
||||
}
|
||||
|
||||
.top-menu-item:hover {
|
||||
color: hsl(0deg 0% 100%);
|
||||
background: hsl(240deg 100% 10% / 10%);
|
||||
transition-duration: 0.05s;
|
||||
}
|
||||
|
||||
.top-menu-item:active {
|
||||
color: hsl(0deg 0% 100%);
|
||||
background: hsl(240deg 100% 10% / 20%);
|
||||
}
|
||||
|
||||
.top-menu-item.top-menu-tab,
|
||||
.top-menu-item.top-menu-tab:hover,
|
||||
.top-menu-item.top-menu-tab:active {
|
||||
opacity: 1;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.top-menu-item-spacer {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.top-menu-item input[type="radio"],
|
||||
.top-menu-tab-input-unselect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-menu-item.top-menu-tab {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.top-menu-tab-unselect {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-menu-tab-input:checked + label {
|
||||
transition: background, color 0.2s;
|
||||
background: hsl(240deg 100% 10% / 60%);
|
||||
color: hsl(0deg 0% 100%);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.top-menu-tab label {
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition-property: background, color;
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: ease-out;
|
||||
z-index: 5;
|
||||
color: hsl(0deg 0% 100% / 80%);
|
||||
|
||||
/* Override bootstrap */
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.top-menu-tab label::after {
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2c255%2c255%2c0.8)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-size: 16px;
|
||||
margin-left: 2px;
|
||||
margin-right: -8px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.top-menu-tab .top-menu-tab-input:checked + label::after {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.top-menu-tab .top-menu-tab-input:not(:checked) + label:hover {
|
||||
background: hsl(240deg 100% 10% / 10%);
|
||||
color: hsl(0deg 0% 100%);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
.top-menu-tab .top-menu-tab-input:not(:checked) + label:active {
|
||||
background: hsl(240deg 100% 10% / 20%);
|
||||
color: hsl(0deg 0% 100%);
|
||||
}
|
||||
|
||||
.top-menu-tab label.top-menu-tab-user-label::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-45%);
|
||||
}
|
||||
|
||||
.top-menu-tab
|
||||
.top-menu-tab-input:checked
|
||||
+ label.top-menu-tab-user-label::after {
|
||||
transform: translateY(-45%) rotate(-180deg);
|
||||
}
|
||||
|
||||
.top-menu-submenu-backdrop {
|
||||
background: hsl(240deg 100% 10%);
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
transition: all 0.05s;
|
||||
}
|
||||
|
||||
.top-menu-tab-input-unselect:not(:checked) + .top-menu-submenu-backdrop {
|
||||
height: 334px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.top-menu-tab-label-unselect {
|
||||
position: absolute;
|
||||
display: none;
|
||||
/* To account for scrollbar if any present. */
|
||||
right: 15px;
|
||||
top: 60px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-size: 32px;
|
||||
background-repeat: no-repeat;
|
||||
/* Close menu icon */
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,1)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.top-menu-tab-label-unselect:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.top-menu-tab-label-unselect:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.top-menu-tab-input-unselect:not(:checked) ~ .top-menu-tab-label-unselect {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-menu-submenu {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.top-menu-tab .top-menu-tab-user-label {
|
||||
max-width: 140px;
|
||||
padding-right: 28px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.top-menu-tab-user-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.top-menu-mobile-user-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline;
|
||||
vertical-align: text-top;
|
||||
border-radius: 3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.top-menu-submenu.singup-column {
|
||||
justify-content: flex-end;
|
||||
right: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1170px) {
|
||||
.top-menu-tab .top-menu-tab-user-label {
|
||||
max-width: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.top-menu-tab .top-menu-tab-user-label {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.top-menu-tab .top-menu-tab-user-label span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu-tab-input:checked ~ .top-menu-submenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.top-menu-submenu-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 16px;
|
||||
flex-shrink: 0;
|
||||
max-width: 420px;
|
||||
|
||||
.top-menu-submenu-list {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
.top-menu-submenu-list-item {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
color: hsl(0deg 0% 100% / 90%);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: hsl(0deg 0% 100% / 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(0deg 0% 100% / 20%);
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
padding: 6px 16px;
|
||||
text-decoration: none;
|
||||
line-height: 125%;
|
||||
color: hsl(0deg 0% 100% / 90%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu-mobile .top-menu-mobile-item a {
|
||||
padding: 10px 10px 10px 53px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background: hsl(0deg 0% 100% / 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(0deg 0% 100% / 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu-submenu-section {
|
||||
padding-left: 16px;
|
||||
font-size: 17px;
|
||||
opacity: 0.6;
|
||||
margin-bottom: 4px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.top-menu-mobile {
|
||||
display: none;
|
||||
background: hsl(240deg 100% 10% / 40%);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 20;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
|
||||
overflow: auto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.02em;
|
||||
font-feature-settings: "pnum" on, "lnum" on;
|
||||
color: hsl(0deg 0% 100% / 80%);
|
||||
|
||||
transition: all 0.2;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.top-menu-mobile[open] {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: hsl(240deg 100% 5.9% / 80%);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.top-menu-mobile-items-group-1,
|
||||
.top-menu-mobile-items-group-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.top-menu-mobile-items-group-1 summary,
|
||||
.top-menu-mobile-items-group-1 a,
|
||||
.top-menu-mobile-items-group-2 summary,
|
||||
.top-menu-mobile-items-group-2 a {
|
||||
cursor: pointer;
|
||||
transition: background 0.4s ease-out;
|
||||
}
|
||||
|
||||
.top-menu-mobile-items-group-1 summary,
|
||||
.top-menu-mobile-items-group-2 summary {
|
||||
padding: 10px 10px 10px 23px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.top-menu-mobile-items-group-1 a,
|
||||
.top-menu-mobile-items-group-2 a {
|
||||
padding-left: 53px;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.top-menu-mobile-items-group-1 summary:hover,
|
||||
.top-menu-mobile-items-group-2 summary:hover {
|
||||
background: hsl(0deg 0% 100% / 10%);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu-mobile-items-group-1 summary:active,
|
||||
.top-menu-mobile-items-group-2 summary:active {
|
||||
background: hsl(0deg 0% 100% / 10%);
|
||||
}
|
||||
|
||||
.top-menu-mobile-item-summary::marker {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.top-menu-mobile-item-summary::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -4px;
|
||||
margin-right: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2c255%2c255%2c0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
transition: transform 0.12s ease-out;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.top-menu-mobile details[open] > summary::before {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.top-menu-mobile-submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
margin-bottom: 18px;
|
||||
|
||||
.top-menu-submenu-list {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
.top-menu-submenu-list-item {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
color: hsl(0deg 0% 100% / 90%);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: hsl(0deg 0% 100% / 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(0deg 0% 100% / 20%);
|
||||
}
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
padding: 5px 0 5px 53px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu-mobile-submenu-section {
|
||||
letter-spacing: 0.1em;
|
||||
color: hsl(0deg 0% 100% / 40%);
|
||||
opacity: 0.8;
|
||||
text-transform: uppercase;
|
||||
margin-top: 8px;
|
||||
font-size: 17px;
|
||||
padding-left: 53px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.top-menu-mobile-summary {
|
||||
cursor: pointer;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
transition: all 0.3s;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-menu-mobile-summary:active {
|
||||
background: hsl(229deg 47% 17% / 80%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.top-menu-mobile[open] > .top-menu-mobile-summary {
|
||||
background: hsl(229deg 47% 17% / 80%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* For browsers which don't support blur */
|
||||
@supports not (
|
||||
(backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))
|
||||
) {
|
||||
.top-menu {
|
||||
background: hsl(240deg 100% 10% / 80%);
|
||||
}
|
||||
|
||||
.top-menu-mobile {
|
||||
background: hsl(240deg 100% 10% / 80%);
|
||||
}
|
||||
|
||||
.top-menu-mobile[open] {
|
||||
background: hsl(240deg 100% 5.9% / 100%);
|
||||
}
|
||||
|
||||
.top-menu-mobile-summary:active {
|
||||
background: hsl(229deg 47% 17% / 95%);
|
||||
}
|
||||
|
||||
.top-menu-mobile[open] > .top-menu-mobile-summary {
|
||||
background: hsl(229deg 47% 17% / 95%);
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu-mobile[open] > .top-menu-mobile-summary:active {
|
||||
background: hsl(229deg 47% 20% / 100%);
|
||||
}
|
||||
|
||||
.top-menu-mobile-summary::marker {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-menu-mobile-summary::after {
|
||||
display: block;
|
||||
height: 32px;
|
||||
float: right;
|
||||
content: "MENU";
|
||||
line-height: 32px;
|
||||
color: hsl(0deg 0% 100% / 80%);
|
||||
padding-right: 38px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
margin-right: 16px;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='3' y1='12' x2='21' y2='12'%3e%3c/line%3e%3cline x1='3' y1='6' x2='21' y2='6'%3e%3c/line%3e%3cline x1='3' y1='18' x2='21' y2='18'%3e%3c/line%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px;
|
||||
background-position: right;
|
||||
transition: background, letter-spacing 0.2s;
|
||||
}
|
||||
|
||||
.top-menu-mobile-summary:active::after {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.top-menu-mobile[open] > summary::after {
|
||||
content: "Close";
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.top-menu-mobile-summary:hover {
|
||||
background: hsl(229deg 47% 18% / 100%);
|
||||
}
|
||||
|
||||
.top-menu-mobile[open] > .top-menu-mobile-summary:hover {
|
||||
background: hsl(229deg 47% 18% / 100%);
|
||||
}
|
||||
|
||||
.top-menu-mobile-summary:hover::after {
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* menu responsivity */
|
||||
@media (max-width: 1311px) {
|
||||
.top-menu {
|
||||
background: hsl(240deg 100% 10% / 50%);
|
||||
}
|
||||
|
||||
.top-menu-logo {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.top-menu-item {
|
||||
padding: 16px 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 940px) {
|
||||
.top-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-menu-logo {
|
||||
margin-right: unset;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.top-menu-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,4 +2,5 @@
|
|||
@import url("portico.css");
|
||||
@import url("portico_signin.css");
|
||||
@import url("markdown.css");
|
||||
@import url("navbar.css");
|
||||
@import url("footer.css");
|
||||
|
|
|
|||
Loading…
Reference in New Issue