Полная таблица стилей css для внешнего интерфейса
css/стиль.css
/*******************************************/
/* REUSABLE CSS */
/*******************************************/
body {
}
.clearfix {
clear:both;
display:block;
content: "";
}
.move {
animation: mymove 5s;
}
/* Standard syntax */
@keyframes mymove {
from {padding-bottom: 0px;}
to {padding-top: 20px;}
}
.show {
display: block;
}
.hidden {
display: none;
}
.padding-l {
padding-left: 15px;
}
/*******************************************/
/* HOME PAGE BLOGS -START */
/*******************************************/
.p-relative {
position: relative;
}
.padding {
padding: 20px 40px;
}
.margin-b {
margin-bottom: 30px !important;
}
h6 {
color: #a1a1a1;
}
p {
font-family: 'Muli', sans-serif;
color: #878787;
}
.dancing-font {
font-family: 'Dancing Script', cursive;
}
.nsj {
font-family: 'Noto Serif JP', sans-serif;
}
.search-lightbox {
position: fixed !important;
height: 100vh !important;
width: 100%;
content: '.';
background-color: black !important;
z-index: 100 !important;
}
/*******************************************/
/* HOME PAGE BLOGS -END */
/*******************************************/
/*******************************************/
/* REUSABLE CSS */
/*******************************************/
/*******************************************/
/* SOCIAL LINKS START */
/*******************************************/
.white {
color: white;
}
.slide-down-message {
list-style: none;
position: absolute;
top: 120;
left: 0;
padding-left: 15px;
}
.slide-down-message li {
text-transform: uppercase;
font-size: 80%;
}
.social-links {
list-style: none;
float: left;
margin-top: 50px;
padding-left: 0;
}
.social-links li {
display: inline-block;
margin-right: 10px;
font-size: 80%;
}
.social-links li a {
color: black;
}
.box {
padding-top: 5px;
}
.mask {
overflow: hidden;
height: 20px;
content: '.';
width: 100%;
}
.popover-body {
height: 200px;
}
#myPopover {
min-width: 200px;
}
.profile-img {
width: 100px;
height: 100px;
overflow: hidden;
margin: 0 auto;
}
.popover-btn {
width: 100%;
}
#myPopover ul {
list-style: none;
padding-left: 0;
}
#myPopover ul li {
display: block;
}
#myPopover ul li:first-child {
}
#myPopover ul li:last-child {
}
#myPopover ul li button {
font-size: 0.9em !important;
width: 100%;
}
/* Make the badge float in the top right corner of the button */
.button__badge {
background-color: #fa3e3e;
border-radius: 0;
color: white;
`z-index: -1;
padding: 0px 4px;
font-size: 10px;
position: absolute; /* Position the badge within the relatively positioned button */
top: -15px;
left: 5px;
}
/*******************************************/
/* SOCIAL LINKS END */
/*******************************************/
/*******************************************/
/* SEARCH FORM DIV START */
/*******************************************/
.search-form-div{
width: 90%;
margin: 0 5%;
height: auto;
}
.search-text-field {
width: 70%;
float: left;
height: auto;
margin: 0 0 0 10%;
}
.search-icon {
width: 10%;
float: right;
padding-top: 5px;
margin-left: 5%;
}
.search-icon i {
display: inline-block;border-radius: 50%;background-color: black;height: 35px; width: 35px;
text-align: center;
padding-top: 7.5px;
color: white;
}
.default {
width: 0%;
display: none;
}
.search-field{
margin-bottom: 0 !important;
}
/* When the input field gets focus, change its width to 100% */
.animated-search-icon {
padding: 10px 10px;
width: 100%;
height: auto;
display: block;
transition: width 1s;
}
/*******************************************/
/* SEARCH FORM DIV END */
/*******************************************/
/*******************************************/
/* BLOG HHEADING START */
/*******************************************/
.h1-style {
font-family: 'Indie Flower', cursive;
}
.blog-title {
font-size: 2.5em;
}
.blog-desc {
font-size: 0.8em;
}
/*******************************************/
/* BLOG HEADING END */
/*******************************************/
/*******************************************/
/* RESPONSIVE NAVIGATION START */
/*******************************************/
.button-primary {
padding: 10px 30px;
background-color: black;
color: white;
font-weight: bold;
font-size: 0.8em;
display: inline-block;
float: left;
}
.button-primary:hover {
text-decoration: none;
background-color: white;
color: black;
border: 1px solid black;
transition: background-color 0.2s;
}
nav {
width: 100%;
position: relative;
}
.nav-area {
padding: 25px 25px;
width: 100%;
height: 100px;
}
/*Animated burgher menu icon*/
.responsive-menu-icon {
display: inline-block;
cursor: pointer;
float: right;
margin-right: 0;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
border-right: 1px solid black;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 0.9em;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.resp-navbar {
background-color: #bbc6ce;
width: 100%;
padding-left: 0;
}
.resp-navbar a:hover {
color: black;
}
/*1 st level menu */
.resp-navbar > li {
border-bottom: 1px solid white;
}
/*2nd level menu */
.resp-navbar > li > ul > li {
border-bottom: 1px solid #ced7dc;
}
/*3rd level menu */
.resp-navbar > li > ul > li > ul > li {
border-bottom: 1px solid #ced7dc;
}
/*4th level menu */
.resp-navbar > li > ul > li > ul > li >ul > li{
border-bottom: 1px solid #ced7dc;
}
.resp-navbar li {
list-style: none; /*hides list style of all li elements*/
width: 100%;
}
.resp-navbar li > ul > li > ul > li >ul > li {
width: 100%; /*give the level 4 menu a width of 100% otherwise default width is forcing a line break*/
}
/* level 2 menu */
.resp-navbar >li >ul {
display: none;/*hide level 2 submenu on page load*/
background-color: #fff;
padding-left: 0;
}
/*1 st level menu */
.resp-navbar > li > a {
padding-left: 10px !important;
}
/*2nd level menu */
.resp-navbar > li > ul > li > a {
padding-left: 40px !important;
}
/*3rd level menu */
.resp-navbar > li > ul > li > ul > li > a {
padding-left: 70px;
}
/*4th level menu */
.resp-navbar > li > ul > li > ul > li > ul > li > a {
padding-left: 100px;
}
/*level 3 and 4 drop down */
.resp-navbar >li >ul >li >ul,
.resp-navbar >li >ul >li >ul>li>ul {
display: none;/*hide level 2 submenu on start up*//*if this is block all menus level 2 and 3 and 4 are diplayed at once with rotatig effect on level 3 and 4 sub menus only */
z-index: 2;
background-color: #fff;
padding-left: 0;
}
/*when mouseover (hover) a li element that has a child ul then diplay the child ul */
.resp-navbar >li:hover >ul,/*level 2 drop down li element that has a child ul (display the child ul)*/
.resp-navbar >li >ul >li:hover >ul,/*level 3 drop down li element that has a child ul (display the child ul)*/
.resp-navbar >li >ul >li>ul>li:hover ul { /*level 4 drop down li element that has a child ul (display the child ul)*/
display: block;
}
/*******************************************/
/* RESPONSIVE NAV END */
/*******************************************/
/*******************************************/
/* REGULAR NAV START */
/*******************************************/
/*https://www.coderomeos.org/create-multi-level-drop-down-menu-with-html-and-css3 */
.regular-navbar {
float: right;/*move entire regular nav bar to the right*/
list-style: none; /* Rmove list styles*/
padding-left: 0;
}
/*make horizontal nav li items appear next to each other*/
.regular-navbar >li {
display: inline-block;
}
.regular-navbar li >a {
display: block;
position: relative;
padding: 10px 15px;
border-bottom: 1px solid #ccc;/*give all menu anchor tags a black under line */
min-width: 96px;
background: #f0f0f0;
color: #555;
text-align: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 0.7em;/*reduce font size of all nav bar elements*/
}
/* level 2 dropdown */
.regular-navbar >li >ul {
position: absolute;
border: 1px solid black;
list-style: none;
padding-left: 0;
}
/* level 2 dropdown */
.regular-navbar >li >ul {
display: none;/*hide level 2 submenu on start up*/
z-index: 10;
}
/*level 3 and 4 drop down */
.regular-navbar >li >ul >li >ul,
.regular-navbar >li >ul >li >ul>li>ul {
position: absolute;
display: none;/*hide level 2 submenu on start up*//*if this is block all menus level 2 and 3 and 4 are diplayed at once with rotatig effect on level 3 and 4 sub menus only */
z-index: 10;
border: 1px solid black;
list-style: none;
padding-left: 0;
}
nav li {
position: relative;
}
/* target level 2, 3 and 4 dropdown submenu li elements */
.regular-navbar >li >ul >li, /*level 2*/
nav >ul >li >ul >li >ul >li, /*level 3*/
nav >ul >li >ul >li >ul>li>ul >li /*level 4*/
{
width: 138px; /*give level 2, 3 and 4 dropdown submenus a width of 138 px or the right border of level 3 and 4 sub menus remains hidden */
}
/*when mouseover (hover) a li element that has a child ul then diplay the child ul */
.regular-navbar >li:hover >ul,/*level 2 drop down li element that has a child ul (display the child ul)*/
.regular-navbar >li >ul >li:hover >ul,/*level 3 drop down li element that has a child ul (display the child ul)*/
.regular-navbar >li >ul >li>ul>li:hover ul { /*level 4 drop down li element that has a child ul (display the child ul)*/
display: block;
}
/*make a underline appear below (1st level menu )horizontal menu when hovering over it (in this state the under line is invisible)*/
.regular-navbar >li:after {
content: '';
height: 2px;
width: 2px;
background: #000;
color: #fff;
opacity: 0;
bottom: 0px;
left: 0px;
position: absolute;
}
/*make the above mentioned underline effect visible in 0.5 seconds*/
.regular-navbar >li:hover:after {
content: '';
opacity: 1;
height: 2px;
width: 100%;
transition: 0.5s;
}
/*-- Animation--*/
/*apply a 4 animation effects (rotating, fade in, move to left and move up) in 6 stages to level 3 and 4 submenus only*/
@keyframes threeD {
0% {/*1st stage */
transform: perspective( 400px) rotateY( 0deg);/*rotate the sub menus on the y axis - 0deg means to add a slight twist to the submenu when it first becomes visible*/
opacity: 0;/*give them a fade in effect*/
left: 150%;/*move to the left*/
top: 150%;/*move up*/
}
20% {/*2nd stage */
transform: perspective( 400px) rotateY( -45deg);/*keep it rotated at -45 degrees*/
opacity: 0.2;
left: 140%;
top: 140%;
}
40% {/*3rd stage */
transform: perspective( 400px) rotateY( -45deg);/*keep it rotated at -45 degrees*/
opacity: 0.4;
left: 130%;
top: 130%;
}
60% {/*4th stage */
transform: perspective( 400px) rotateY( -45deg);/*keep it rotated at -45 degrees*/
opacity: 0.6;
left: 120%;
top: 120%;
}
80% {/*5th stage */
transform: perspective( 400px) rotateY( -45deg);/*keep it rotated at -45 degrees*/
opacity: 0.8;
left: 110%;
top: 110%;
}
100% {/*6th stage */
transform: perspective( 400px) rotateY( -45deg);/*keep it rotated at -45 degrees*/
left: 100%;
top: 100%;
opacity: 1;
}
}
/*apply the animation to level 3 and 4 drop down menus only*/
.regular-navbar >li >ul >li >ul,
.regular-navbar >li >ul >li >ul>li>ul {
position: absolute;
left: 100%;/*if this is zero then level 3 and 4 menus appear one on top of the other*/
width: 140px;/*give level 3 and 4 menus a width of 140 px*/
top: 0px;/*Very Important makes level 3 and 4 sub menus appear at the same level as the level 2 menu*/
display: threeD;/*Animation is applied here*/
z-index: 2;
-webkit-animation: threeD 5s;
/* Chrome, Safari, Opera */
animation: threeD 0.1s;/*animation timing - play around with the timing. Increase it to say 5s to see the rotating effect more clearly */
}
/*******************************************/
/* REGULAR NAV END */
/*******************************************/
/****************************************************/
/* SLIDE SHOW - START */
/****************************************************/
.wrap, .slider, .slide-content, .slide {
margin: 0;
padding: 0;
width: 100%;
height: 80vh;
overflow-x: hidden;
overflow-y: hidden;/*********************************IMPORTANT this was added to stop the slide show from scrolling vertically when the mouse wheel was rotated*******************************/
}
.wrap {
position: relative;
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slide-content span {
font-size: 5em;
color: #fff;
}
#color {
color: white;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #fff transparent transparent;
left: 20px;
}
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent #fff;
right: 20px;
}
/****************************************************/
/* SLIDE SHOW - END */
/****************************************************/
/****************************************************/
/* SECTION-INTRO - START */
/****************************************************/
.section-intro {
padding: 60px 50px;
text-align: center;
background-color: #f3f7f7;
}
.section-intro h6, h3, p {
margin-top: 20px;
font-family: 'Slabo 27px', serif;
}
/****************************************************/
/* SECTION-INTRO - END */
/****************************************************/
/****************************************************/
/* BLOG POSTS START */
/****************************************************/
.line {
width: 4%;
height: 2px;
content: '';
background-color: #c8c8c8;
}
.l-center {
margin-left: 48%;
}
.l-left {
margin-right: 96%;
}
.image {
height: auto;
width: 100%;
}
.post-date {
background-color: #fff;
padding: 10px;
position: absolute;
top: 10px;
left: 40px;
width: 20%;
border: 1px solid black;
text-align: center;
}
.post-date h6, p {
margin-top: 0;
margin-bottom: 0;
}
.blog-image {
width: 50%;
float: left;
display: inline-block;
}
.blog-info {
width: 50%;
float: left;
display: inline-block;
}
.full-width-blog-image {
width: 100%;
height: 300px;/*ADD COMMENTS*/
display: block;
overflow-y: hidden;/*ADD COMMENTS*/
}
.full-width-blog-info {
width: 100%;
display: block;
}
.blog-more-info {
margin-top: 30px;
list-style: none;
padding-left: 0;
}
.blog-more-info li {
color: #a1a1a1;
font-size: 0.6em;
float: left;
display: inline-block;
margin-right: 4em;
}
.post-container {
margin-bottom: 40px;
}
/****************************************************/
/* BLOG POSTS END */
/****************************************************/
/****************************************************/
/* LATEST POSTS START */
/****************************************************/
.latest-posts-panel {
margin-bottom: 30px !important;
}
.thumbnail img {
width: 50%;
height: auto;
float: left;
display: inline-block;
}
.post-content {
width: 50%;
height: auto;
float: left;
display: inline-block;
padding-left: 15px;
}
.post-content h6 {
font-size: 0.7em;
}
.post-content h3 {
font-size: 0.9em;
margin-top: 0;
}
/****************************************************/
/* LATEST POSTS END */
/****************************************************/
/****************************************************/
/* FOOTER START */
/****************************************************/
footer {
background-color: #f5ddd8;
background: linear-gradient(rgba(5, 79, 158, 0.5), rgba(0,123,255,.25)), url('../img/homepage/footer-img.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 60px 0;
}
.instagram {
width: 100%;
text-align: center;
padding: 0 0 30px 0 !important;
}
#api-photos {
margin: 50px 0;
width: 100%;
height: 250px;
position: relative;
}
.slider {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow-x: hidden;
}
.photo {
width: 100%;
overflow: hidden;
}
/*http://www.kodhus.com/kodnest/codify/BtKTxS/layout/0*/
.slide-container {
width: 100%;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.slider1 {
width: 100%;
height: 350px;
margin-top: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.slider1 .thumbs {
position: relative;
height: 450px;
width: 5000px;
counter-reset: subsection;
transition: transform 2s;
}
.slider1 .thumbs div {
width: 380px;
height: 330px;
box-shadow: 0 0 4px rgba(0, 0, 0, .12), 0 4px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
border-radius: 3px;
float: left;
position: relative;
transition: all 2s;
overflow: hidden;
}
.thumbs img {
height: auto;
width: 130%;
}
.form-container {
width: 90%;
margin: 0 5%;
text-align: center;
}
form {
width: 90%;
margin: 0 5%;
display: block !important;
}
input[type="email"] {
width: 100%;
display: block;
margin: 5px 0;
}
button {
width: 100%;
display: block;
margin: 5px 0 !important;
}
.newsletter {
margin: 50px auto 20px auto;
}
#newsletter-btn {
width: 40% !important;
margin: 5px 30% !important;
}
.newsletter-form{
list-style: none;
width: 60%;
margin: 20px 20%;
padding-left: 0;
}
.newsletter-form li{
display: inline-block;
}
.ending {
width: 80%;
margin: 0 10%;
text-align: center;
}
.footer-social-links {
list-style: : none;
padding-left: 0;
}
.footer-social-links li{
display: inline-block;
margin-right: 1.5em;
}
/****************************************************/
/* FOOTER END */
/****************************************************/
/**********************************************************************************************/
/* LOGIN_REGISTER START */
/**********************************************************************************************/
.hero-title {
position: absolute;
top: 40%;
left: 40%;
padding: 20px 40px;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-left: 1px solid black;
border-bottom: 1px solid black;
background-color: #ffffff70;
}
.section-login-register {
padding-bottom: 40px;
}
.panel {
width: 100%;
/*background-color: #4c649124;*/
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
border-radius: 5px;
}
.login-register-title {
width: 100%;
padding: 30px 0;
text-align: center;
}
.login-form {
width: 90%;
margin: 0 5%;
}
#login-form {
margin: 0;
}
.form-top {
width: 100%;
}
.form-top-left, .form-top-right {
display: inline-block;
float: left;
}
.form-top-left {
padding-top: 30px;
}
.form-top-right {
font-size: 4em;
padding-top: 30px;
padding-left: 70px;
width: 100%;
text-align: right;
}
.form-top-right {
width: 20%;
}
input[type="text"]{
margin-bottom: 20px;
}
input[type="email"]{
margin-bottom: 20px;
}
.social-login {
text-align: center;
}
.custom {
width: 30%;
background-color: #142992c4;
border: 1px solid white;
margin-bottom: 20px;
margin-right: 5%;
}
/**********************************************************************************************/
/* LOGIN_REGISTER END */
/**********************************************************************************************/
/**********************************************************************************************/
/* MY ACCOUNT START */
/**********************************************************************************************/
.image-container{
height: auto;
width: 100%;
content: '.';
padding-top: 5%;
margin-bottom: 20px;
}
.image-container h2 img {
margin: 30px 0 !important;
}
.panel1 .btn {
width: 20%;
}
.my-account {
width: 100%;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel1 {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel1 h3 {
font-family: 'Noto Serif JP', sans-serif;
font-size: 1em;
}
input[type="password"] {
margin-bottom: 10px;
}
input[type="file"] {
margin-bottom: 10px;
}
textarea {
margin-bottom: 20px;
}
.user-actions {
padding-left: 0;
list-style: none;
}
.user-actions li {
margin-bottom: 15px;
}
.user-actions li a{
color: black;
}
.progress {
margin-bottom: 40px;
}
/**********************************************************************************************/
/* MY ACCOUNT END */
/**********************************************************************************************/
/**********************************************************************************************/
/* MY PROFILE START */
/**********************************************************************************************/
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .user{
position: absolute;
top: 15px;
left: 0;
right: 0;
}
.card.hovercard .user img {
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info .card-title {
padding:0 5px;
font-size: 20px;
line-height: 1;
color: #262626;
background-color: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.card.hovercard .card-info {
overflow: hidden;
font-size: 12px;
line-height: 20px;
color: #737373;
text-overflow: ellipsis;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
.card-header {
margin-bottom: 10px;
}
.card-body {
padding: 0;
}
.my-social-links {
display: block;
width: 100%;
}
.my-social-links ul {
list-style: none;
padding-left: 0;
}
.my-social-links ul li {
display: inline-block;
float: left;
margin-right: 0.9em;
font-size: 1.5em;
}
/**********************************************************************************************/
/* MY PROFILE END */
/**********************************************************************************************/
/**********************************************************************************************/
/* SINGLE POST START */
/**********************************************************************************************/
.full-width-image {
height: 500px;
width: 100%;
overflow: hidden;
position: relative;
}
.full-width-image img {
filter: blur(5px) !important;
}
.post-content {
width: 100%;
}
.comment img {
float: left;
width: 10%;
display: inline-block;
}
.comment-info {
float: left;
width: 90%;
display: inline-block;
}
/**********************************************************************************************/
/* SINGLE POST END */
/**********************************************************************************************/
