456 lines
11 KiB
CSS
456 lines
11 KiB
CSS
.aligncenter {
|
||
text-align: center;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
/* max-width: 320px; */
|
||
/* background: #bcc5c3; */
|
||
background: #16a085;
|
||
/* Максимальная ширина страницы в пикселах */
|
||
}
|
||
|
||
.no-select {
|
||
-webkit-touch-callout: none;
|
||
-moz-user-select: none;
|
||
-o-user-select: none;
|
||
-khtml-user-select: none;
|
||
-webkit-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.button {
|
||
width: 250px;
|
||
height: 70px;
|
||
padding: 15px 50px;
|
||
font-size: 24px;
|
||
text-align: center;
|
||
outline: 1px solid #666;
|
||
color: #fff;
|
||
background-color: #0ffa6d;
|
||
border: #0ffa6d;
|
||
border-radius: 5px;
|
||
-webkit-touch-callout: none;
|
||
-webkit-user-select: none;
|
||
-khtml-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||
}
|
||
|
||
.button:active {
|
||
background-color: #fa0f0f;
|
||
transform: translateY(2px);
|
||
}
|
||
|
||
.nav {
|
||
/* ширна произвольная, не стесняйтесь экспериментировать */
|
||
width: 320px;
|
||
min-width: 320px;
|
||
/* фиксируем и выставляем высоту панели на максимум */
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: 0;
|
||
/* сдвигаем (прячем) панель относительно левого края страницы */
|
||
left: -320px;
|
||
/* внутренние отступы */
|
||
padding: 15px 20px;
|
||
/* плавный переход смещения панели */
|
||
-webkit-transition: left 0.3s;
|
||
-moz-transition: left 0.3s;
|
||
transition: left 0.3s;
|
||
/* определяем цвет фона панели */
|
||
background: #16a085;
|
||
/* background: #bcc5c3; */
|
||
/* поверх других элементов */
|
||
z-index: 2000;
|
||
}
|
||
|
||
|
||
/**
|
||
* Кнопка переключения панели
|
||
* тег <label>
|
||
*/
|
||
|
||
.nav-toggle {
|
||
/* абсолютно позиционируем */
|
||
position: absolute;
|
||
/* относительно левого края панели */
|
||
left: 320px;
|
||
/* отступ от верхнего края панели */
|
||
top: 1em;
|
||
/* внутренние отступы */
|
||
padding: 0.5em;
|
||
/* определяем цвет фона переключателя
|
||
* чаще вчего в соответствии с цветом фона панели
|
||
*/
|
||
background: inherit;
|
||
/* цвет текста */
|
||
color: #dadada;
|
||
/* вид курсора */
|
||
cursor: pointer;
|
||
/* размер шрифта */
|
||
font-size: 1.2em;
|
||
line-height: 1;
|
||
/* всегда поверх других элементов страницы */
|
||
z-index: 2001;
|
||
/* анимируем цвет текста при наведении */
|
||
-webkit-transition: color .25s ease-in-out;
|
||
-moz-transition: color .25s ease-in-out;
|
||
transition: color .25s ease-in-out;
|
||
}
|
||
|
||
|
||
/* определяем текст кнопки
|
||
* символ Unicode (TRIGRAM FOR HEAVEN)
|
||
*/
|
||
|
||
.nav-toggle:after {
|
||
content: '\2630';
|
||
text-decoration: none;
|
||
}
|
||
|
||
|
||
/* цвет текста при наведении */
|
||
|
||
.nav-toggle:hover {
|
||
color: #f4f4f4;
|
||
}
|
||
|
||
|
||
/**
|
||
* Скрытый чекбокс (флажок)
|
||
* невидим и недоступен :)
|
||
* имя селектора атрибут флажка
|
||
*/
|
||
|
||
[id='nav-toggle'] {
|
||
position: absolute;
|
||
display: none;
|
||
}
|
||
|
||
|
||
/**
|
||
* изменение положения переключателя
|
||
* при просмотре на мобильных устройствах
|
||
* когда навигация раскрыта, распологаем внутри панели
|
||
*/
|
||
|
||
[id='nav-toggle']:checked~.nav>.nav-toggle {
|
||
left: auto;
|
||
right: 2px;
|
||
top: 1em;
|
||
}
|
||
|
||
|
||
/**
|
||
* Когда флажок установлен, открывается панель
|
||
* используем псевдокласс:checked
|
||
*/
|
||
|
||
[id='nav-toggle']:checked~.nav {
|
||
left: 0;
|
||
box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
|
||
-moz-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
|
||
-webkit-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
|
||
/*
|
||
* смещение контента страницы
|
||
* на размер ширины панели,
|
||
* фишка необязательная, на любителя
|
||
*/
|
||
|
||
[id='nav-toggle']:checked~main>article {
|
||
-webkit-transform: translateX(320px);
|
||
-moz-transform: translateX(320px);
|
||
transform: translateX(320px);
|
||
}
|
||
|
||
|
||
/*
|
||
* изменение символа переключателя,
|
||
* привычный крестик (MULTIPLICATION X),
|
||
* вы можете испльзовать любой другой значок
|
||
*/
|
||
|
||
[id='nav-toggle']:checked~.nav>.nav-toggle:after {
|
||
content: '\2715';
|
||
}
|
||
|
||
|
||
/**
|
||
* профиксим баг в Android <= 4.1.2
|
||
* см: http://timpietrusky.com/advanced-checkbox-hack
|
||
*/
|
||
|
||
/* body {
|
||
-webkit-animation: bugfix infinite 1s;
|
||
}
|
||
|
||
@-webkit-keyframes bugfix {
|
||
to {
|
||
padding: 0;
|
||
}
|
||
} */
|
||
|
||
|
||
/**
|
||
* позаботьтимся о средних и маленьких экранах
|
||
* мобильных устройств
|
||
*/
|
||
|
||
@media screen and (min-width: 320px) {
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
overflow-x: hidden;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 320px) {
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.nav {
|
||
width: 100%;
|
||
box-shadow: none
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* Формируем стиль заголовка (логотип) панели
|
||
*/
|
||
|
||
.nav h2 {
|
||
width: 90%;
|
||
padding: 0;
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
|
||
font-size: 1.3em;
|
||
line-height: 1.3em;
|
||
opacity: 0;
|
||
transform: scale(0.1, 0.1);
|
||
-ms-transform: scale(0.1, 0.1);
|
||
-moz-transform: scale(0.1, 0.1);
|
||
-webkit-transform: scale(0.1, 0.1);
|
||
transform-origin: 0% 0%;
|
||
-ms-transform-origin: 0% 0%;
|
||
-moz-transform-origin: 0% 0%;
|
||
-webkit-transform-origin: 0% 0%;
|
||
transition: opacity 0.8s, transform 0.8s;
|
||
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
|
||
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
|
||
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
|
||
}
|
||
|
||
.nav h2 a {
|
||
color: #dadada;
|
||
text-decoration: none;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
|
||
/*плавное появление заголовка (логотипа) при раскрытии панели */
|
||
|
||
[id='nav-toggle']:checked~.nav h2 {
|
||
opacity: 1;
|
||
transform: scale(1, 1);
|
||
-ms-transform: scale(1, 1);
|
||
-moz-transform: scale(1, 1);
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
|
||
|
||
/**
|
||
* формируем непосредственно само меню
|
||
* используем неупорядоченный список для пунктов меню
|
||
* прикрутим трансфомации и плавные переходы
|
||
*/
|
||
|
||
.nav>ul {
|
||
display: block;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav>ul>li {
|
||
line-height: 2.5;
|
||
opacity: 0;
|
||
-webkit-transform: translateX(-50%);
|
||
-moz-transform: translateX(-50%);
|
||
-ms-transform: translateX(-50%);
|
||
transform: translateX(-50%);
|
||
-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
|
||
-moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
|
||
-ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
|
||
transition: opacity .5s .1s, transform .5s .1s;
|
||
}
|
||
|
||
[id='nav-toggle']:checked~.nav>ul>li {
|
||
opacity: 1;
|
||
-webkit-transform: translateX(0);
|
||
-moz-transform: translateX(0);
|
||
-ms-transform: translateX(0);
|
||
transform: translateX(0);
|
||
}
|
||
|
||
|
||
/* определяем интервалы появления пунктов меню */
|
||
|
||
.nav>ul>li:nth-child(2) {
|
||
-webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
|
||
transition: opacity .5s .2s, transform .5s .2s;
|
||
}
|
||
|
||
.nav>ul>li:nth-child(3) {
|
||
-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
|
||
transition: opacity .5s .3s, transform .5s .3s;
|
||
}
|
||
|
||
.nav>ul>li:nth-child(4) {
|
||
-webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
|
||
transition: opacity .5s .4s, transform .5s .4s;
|
||
}
|
||
|
||
.nav>ul>li:nth-child(5) {
|
||
-webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
|
||
transition: opacity .5s .5s, transform .5s .5s;
|
||
}
|
||
|
||
.nav>ul>li:nth-child(6) {
|
||
-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
|
||
transition: opacity .5s .6s, transform .5s .6s;
|
||
}
|
||
|
||
.nav>ul>li:nth-child(7) {
|
||
-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
|
||
transition: opacity .5s .7s, transform .5s .7s;
|
||
}
|
||
|
||
|
||
/**
|
||
* оформление ссылок пунктов меню
|
||
*/
|
||
|
||
.nav>ul>li>a {
|
||
display: inline-block;
|
||
position: relative;
|
||
padding: 0;
|
||
font-family: 'Open Sans', sans-serif;
|
||
font-weight: 300;
|
||
font-size: 1.2em;
|
||
color: #dadada;
|
||
width: 100%;
|
||
text-decoration: none;
|
||
/* плавный переход */
|
||
-webkit-transition: color .5s ease, padding .5s ease;
|
||
-moz-transition: color .5s ease, padding .5s ease;
|
||
transition: color .5s ease, padding .5s ease;
|
||
}
|
||
|
||
|
||
/**
|
||
* состояние ссылок меню при наведении
|
||
*/
|
||
|
||
.nav>ul>li>a:hover,
|
||
.nav>ul>li>a:focus {
|
||
color: white;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
|
||
/**
|
||
* линия подчеркивания ссылок меню
|
||
*/
|
||
|
||
.nav>ul>li>a:before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 1px;
|
||
width: 100%;
|
||
-webkit-transition: width 0s ease;
|
||
transition: width 0s ease;
|
||
}
|
||
|
||
.nav>ul>li>a:after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
height: 1px;
|
||
width: 100%;
|
||
background: #3bc1a0;
|
||
-webkit-transition: width .5s ease;
|
||
transition: width .5s ease;
|
||
}
|
||
|
||
|
||
/**
|
||
* анимируем линию подчеркивания
|
||
* ссылок при наведении
|
||
*/
|
||
|
||
.nav>ul>li>a:hover:before {
|
||
width: 0%;
|
||
/* background: #3bc1a0; */
|
||
-webkit-transition: width .5s ease;
|
||
transition: width .5s ease;
|
||
}
|
||
|
||
.nav>ul>li>a:hover:after {
|
||
width: 0%;
|
||
background: transparent;
|
||
-webkit-transition: width 0s ease;
|
||
transition: width 0s ease;
|
||
}
|
||
|
||
|
||
/* фон затемнения на основной контент
|
||
* при этом элементы блокируютя
|
||
* спорная такая фича, если оно вам надо
|
||
* просто раскомментируйте
|
||
*/
|
||
|
||
|
||
.mask-content {
|
||
display: block;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1000;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
}
|
||
|
||
[id='nav-toggle']:checked~.mask-content {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
-webkit-transition: opacity .5s, visibility .5s;
|
||
transition: opacity .5s, visibility .5s;
|
||
} |