From feea91f89e846d03fab6e1a83e6b84e6c1fc4b89 Mon Sep 17 00:00:00 2001 From: flashwave Date: Fri, 18 Jan 2019 17:00:34 +0100 Subject: [PATCH] Made new header public. --- assets/less/classes/headerv1.less | 288 ------------------------------ assets/less/main.less | 1 - templates/master.twig | 6 +- 3 files changed, 1 insertion(+), 294 deletions(-) delete mode 100644 assets/less/classes/headerv1.less diff --git a/assets/less/classes/headerv1.less b/assets/less/classes/headerv1.less deleted file mode 100644 index d02383eb..00000000 --- a/assets/less/classes/headerv1.less +++ /dev/null @@ -1,288 +0,0 @@ -.headerv1 { - --header-image-px: 60px; - flex: 0 0 auto; - transition: height .2s; - z-index: 500; - - &__background { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--background-pattern); - background-color: var(--header-accent-colour); - background-blend-mode: multiply; - mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%); - -webkit-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%); - } - - &__wrapper { - margin: 0 auto; - display: flex; - align-items: center; - padding: 4px; - max-width: var(--site-max-width); - height: var(--header-height-desktop); - transition: height .2s; - - @media (max-width: @site-mobile-width) { - flex-direction: column; - height: 100%; - height: var(--header-height-mobile); - } - } - - @media (max-width: @site-mobile-width) { - &__icons { - display: flex; - justify-content: space-between; - width: 100%; - } - } - - &__icon { - display: none; - cursor: pointer; - width: 40px; - height: 40px; - - &--menu { - font-size: 3em; - justify-content: center; - align-items: center; - } - - @media (max-width: @site-mobile-width) { - display: inline-flex; - } - } - - &__logo { - flex: 0 0 auto; - color: inherit; - text-decoration: none; - cursor: pointer; - display: block; - background: url('/images/logos/imouto-default.png') no-repeat center / cover; - width: var(--header-image-px); - height: var(--header-image-px); - font-size: 0; - transition: width .2s, height .2s; - - &--manage { - background-image: url('/images/logos/imouto-broom.png'); - } - - @media (max-width: @site-mobile-width) { - width: 40px; - height: 40px; - } - } - - &__menu { - flex: 1 1 auto; - margin: 0 6px; - list-style: none; - display: flex; - - &-toggle { - display: none; - } - - @media (max-width: @site-mobile-width) { - display: none; - font-size: 1.6em; - line-height: 1.5em; - margin-top: 4px; - width: 100%; - background: var(--header-accent-colour); - - &-toggle:checked ~ .headerv1__menu { - display: block; - } - - &__item:not(:last-child) { - border-bottom: 1px solid var(--header-accent-colour); - } - - &__link { - width: 100%; - display: block; - padding: 4px 8px; - color: inherit; - text-decoration: none; - } - } - - @media (min-width: @site-mobile-width) { - &__item { - text-align: center; - transition: background-color .2s, border-color .2s; - margin-right: 1px; - border: 1px solid transparent; - border-radius: 2px; - - &:hover, - &:active, - &:focus, - &:focus-within { - background-color: var(--background-colour-translucent-9); - border-color: var(--header-accent-colour); - - .headerv1__submenu { - transform: scaleY(1); - } - } - } - - &__link { - font-size: 1.2em; - color: inherit; - text-decoration: none; - display: block; - padding: 6px 4px; - min-width: 100px; - cursor: pointer; - } - } - } - - &__submenu { - list-style: none; - display: block; - - @media (max-width: @site-mobile-width) { - &__link { - padding: 2px 16px; - display: block; - width: 100%; - color: inherit; - text-decoration: none; - } - } - - @media (min-width: @site-mobile-width) { - position: absolute; // floating - left: -1px; - transform: scaleY(0); - transform-origin: center top 0; - background: var(--header-accent-colour); - overflow: hidden; - z-index: 100; - text-align: left; - box-shadow: 0 2px 2px var(--header-accent-colour); - transition: transform .2s; - padding: 1px; - border-radius: 2px; - - &:hover, - &:focus { - transform: scaleY(1); - } - - &__link { - color: inherit; - text-decoration: none; - display: block; - padding: 2px 6px; - min-width: 100px; - background-color: var(--background-colour-translucent-9); - transition: background-color .2s; - - &:hover, - &:focus { - background-color: var(--background-colour-translucent-7); - } - - &:active { - background-color: var(--background-colour-translucent-8); - } - } - } - } - - &__user { - flex: 0 0 auto; - display: flex; - order: 3; - align-items: center; - - @media (max-width: @site-mobile-width) { - justify-content: flex-end; - } - - &-toggle { - display: none; - } - - @media (max-width: @site-mobile-width) { - display: none; - width: 100%; - margin-top: 4px; - - &-toggle:checked ~ .headerv1__user { - display: flex; - } - } - - &__avatar { - width: var(--header-image-px); - height: var(--header-image-px); - margin-left: 5px; - transition: box-shadow .2s, width .2s, height .2s; - box-shadow: 0 0 4px #111; - - &:hover, - &:active, - &:focus { - box-shadow: 0 0 4px var(--header-accent-colour); - } - - @media (max-width: @site-mobile-width) { - display: none; - } - } - - &__button { - margin: 2px; - color: inherit; - text-decoration: none; - font-size: 1.5em; - line-height: 32px; - width: 32px; - height: 32px; - transition: background-color .2s; - border-radius: 4px; - text-align: center; - - &:hover, - &:focus { - background-color: fade(#fff, 20%); - } - - &:active { - background-color: fade(#fff, 10%); - } - - @media (max-width: @site-mobile-width) { - width: 40px; - height: 40px; - line-height: 40px; - font-size: 2em; - } - - &__count { - position: absolute; - bottom: 1px; - right: 1px; - font-size: 10px; - background-color: var(--header-accent-colour); - opacity: .9; - border-radius: 4px; - line-height: 12px; - padding: 2px 4px; - } - } - } -} diff --git a/assets/less/main.less b/assets/less/main.less index 61c5cb1e..04e59fd9 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -121,7 +121,6 @@ html { // Specific styles @import "classes/footer"; @import "classes/header"; -@import "classes/headerv1"; @import "classes/index"; @import "classes/permissions"; @import "classes/auth"; diff --git a/templates/master.twig b/templates/master.twig index 5cc145f8..58bd8e9c 100644 --- a/templates/master.twig +++ b/templates/master.twig @@ -26,11 +26,7 @@ - {% if constant('MSZ_DEBUG') or current_user.general_perms|default(0)|perms_check(constant('MSZ_PERM_GENERAL_TESTER')) %} - {% include '_layout/header.twig' %} - {% else %} - {% include '_layout/header-old.twig' %} - {% endif %} + {% include '_layout/header.twig' %}
{% if current_user.ban_expiration|default(0) > 0 or current_user.silence_expiration|default(0) > 0 %}