| @import url('https://fonts.googleapis.com/css?family=Lora|Playfair+Display:400,700&subset=latin-ext');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
/*--------------------------------------------------------------
Default
--------------------------------------------------------------*/
*{
box-sizing: border-box;
}
html {
overflow-y: scroll;
overflow-x: auto;
-ms-overflow-style: scrollbar;
}
body {
background-color: #fff;
background-repeat: repeat-x;
font: 400 14px/1.8 "Lora", serif;
color: #666;
-webkit-font-smoothing: antialiased;
}
p{
color: #666 !important;
line-height: 24px !important;
font-size: 14px !important;
text-align: justify;
padding: 10px 0;
}
img {
max-width: 100%;
}
blockquote {
border-left: 7px solid #FF0099 !important;
background-color: #fff;
border: 1px solid #f8f8f8;
padding: 10px;
font-size: 16px !important;
font-style: italic;
}
ul{
list-style: none;
}
ul li{
line-height: 28px;
}
/* Szivecske ikon a listáknál */
ul li::before{
content: '\f08a';
font-family: FontAwesome;
padding-right: 10px;
}
a{
color: #FF0099;
transition: all .3s ease-in-out;
}
a:hover{
color: #000;
text-decoration: none;
}
strong, b{
color: #FF0099;
}
.txtbold,
.txtnormal,
.txtmini{
font-weight: normal !important;
font-size: 12px !important;
}
div[style="border: solid; padding: 4px; width: 360px"]{
width: 100% !important;
padding: 10px !important;
}
input[style="background-color: red; font-weight: bold"]{
color: #fff !important;
}
/* Captcha image fix */
#chkimg{
max-width: none !important;
}
.btn-primary,
input[type="submit" i]{
background-color: #ff0099;
color: #fff !important;
transition: all .4s ease-in-out;
font-family: 'Playfair Display', serif;
border: 1px solid transparent;
}
input[type="radio"],
input[type="checkbox"]{
vertical-align: middle;
}
.btn-primary:hover{
background-color: #fff;
color: #ff0099;
border: 1px solid #ff0099;
}
input,
input.form-control,
select{
width: auto;
display: inline-block;
border-radius: 0!important;
border: 1px solid #eee!important;
color: #aaa;
margin: 5px 0!important;
padding: 5px 10px!important;
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.0)!important;
box-shadow: inset 0 0px 0px rgba(0,0,0,.0)!important;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: #fff;
opacity: 1;
}
input:focus{
border: 1px solid #ff0099;
}
table.table tr:hover{
background-color: #f8f8f8;
}
td.light{
padding: 10px !important;
border-top: 0 !important;
border-bottom: 1px solid #eee;
}
::selection{
background-color: #ff0099;
color: #fff;
}
.fa{
padding: 0 5px;
transition: all .3s ease-in-out;
}
.fa:hover{
color: #ff0099;
}
form[name="mainmoduleform"] td[class^="list"],
form[name="leftmoduleform"] td[class^="list"],
form[name="rightmoduleform"] td[class^="list"]{
padding: 0 5px;
width: auto !important;
font-size: 12px;
}
form[name="mainmoduleform"] td[class^="list"] input,
form[name="mainmoduleform"] td[class^="list"] select,
form[name="leftmoduleform"] td[class^="list"] input,
form[name="leftmoduleform"] td[class^="list"] select,
form[name="rightmoduleform"] td[class^="list"] input,
form[name="rightmoduleform"] td[class^="list"] select
{
max-width: 150px;
overflow: hidden;
font-size: 12px;
}
/*--------------------------------------------------------------
Site
--------------------------------------------------------------*/
.site{
width: 1180px !important;
margin: auto;
}
.main-content{
width: 70% !important;
}
/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
div.header{
text-align: center;
}
/*--------------------------------------------------------------
Oldalad címe
--------------------------------------------------------------*/
div.header h1{
font-family: 'Playfair Display', serif;
text-transform: uppercase;
font-weight: 700;
color: #ff0099;
display: inline-block;
padding: 20px 35px;
position: relative;
margin: 30px auto;
}
/*--------------------------------------------------------------
Oldal címe feletti kép
--------------------------------------------------------------*/
div.header h1::before{
position: absolute;
content: url('http://nikkiiworld.hu/demo/theme/felso.png');
width: 100%;
top: -25px;
left: 0px;
opacity: .10;
}
/*--------------------------------------------------------------
Oldal címe alatti kép
--------------------------------------------------------------*/
div.header h1::after{
position: absolute;
content: url('http://nikkiiworld.hu/demo/theme/also.png');
width: 100%;
bottom: -25px;
left: 0px;
opacity: .10;
}
/*--------------------------------------------------------------
Oldal leírása
--------------------------------------------------------------*/
div.header h3{
font-family: 'Lora', serif;
font-weight: 400 !important;
font-size: 16px;
line-height: 24px;
font-style: italic;
padding: 20px 20px;
position: relative;
display: inline-block;
margin: 30px auto;
}
/*--------------------------------------------------------------
Oldal leírása mellett balra a sarok
--------------------------------------------------------------*/
div.header h3::before{
position: absolute;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-left: 1px solid #000;
border-top: 1px solid #000;
content: '';
}
/*--------------------------------------------------------------
Oldal leírása mellett jobbra a sarok
--------------------------------------------------------------*/
div.header h3::after{
position: absolute;
bottom: -10px;
right: -10px;
width: 20px;
height: 20px;
border-right: 1px solid #ff0099;
border-bottom: 1px solid #ff0099;
content: '';
}
/*--------------------------------------------------------------
Menü elem
--------------------------------------------------------------*/
div.header .menu li{
display: inline-block;
padding: 5px 15px;
margin: 10px 15px;
}
/*--------------------------------------------------------------
Szivecske elrejtése a menü elemek elől
--------------------------------------------------------------*/
div.header .menu li::before{
content: '' !important;
display: none;
}
/*--------------------------------------------------------------
Menü link
--------------------------------------------------------------*/
div.header .menu li a{
position: relative;
}
/*--------------------------------------------------------------
Rózsaszín négyzet a link után
--------------------------------------------------------------*/
div.header .menu li a::after{
content: '';
width: 10px;
height: 10px;
position: absolute;
bottom: 15px;
right: -15px;
background: #ff0099;
z-index: -1;
}
/*--------------------------------------------------------------
Szürke négyzet a link előtt
--------------------------------------------------------------*/
div.header .menu li a::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
bottom: 0px;
left: -15px;
background: #eee;
z-index: -1;
}
/*--------------------------------------------------------------
Sidebar
--------------------------------------------------------------*/
.sidebar,
.left-sidebar,
.right-sidebar {
width: 30% !important;
}
.sidebar .column_side{
width: 100% !important;
}
.sidebar .column_side_td .module{
border: 1px solid #eee;
margin: 15px 0;
}
.sidebar .column_side_td .module > tbody > tr:first-of-type{
text-align: center;
}
/* Oldalmodul címe */
.sidebar .column_side_td .module .top_middle{
font-family: 'Playfair Display', serif;
font-size: 18px !important;
font-weight: 700;
text-align: center;
color: #000000;
padding-top: 15px;
position: relative;
display: inline-block;
z-index: 200;
}
/* Oldalmodul címe melleti rózsaszín négyzet */
.sidebar .column_side_td .module .top_middle::after{
content: '';
width: 10px;
height: 10px;
position: absolute;
bottom: 15px;
right: -15px;
background: #ff0099;
z-index: -1;
}
/* Oldalmodul címe melleti szürke négyzet */
.sidebar .column_side_td .module .top_middle::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
bottom: 0px;
left: -15px;
background: #eee;
z-index: -1;
}
/* Oldalmodul tartalma */
.sidebar .column_side_td .module .modbody{
padding: 15px;
}
/* Legújabb bejegyzés blokk (egyenként) */
.sidebar .latestposts .latestpost{
padding: 0 5px;
border: 1px solid #f8f8f8;
margin: 10px 0;
position: relative;
height: 85px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* Legújabb bejegyzés blokk (egyenként) ha ráviszed az egeret */
.sidebar .latestposts .latestpost:hover{
background-color: #ff0099;
color: #fff !important;
transition: all .4s ease-in-out;
padding-left: 10px;
}
.sidebar .latestposts .latestpost:hover .txtmini,
.sidebar .latestposts .latestpost:hover a{
color: #fff;
}
/* Friss bejegyzések cím */
.sidebar .latestposts .latestposts-title .listheader{
font-family: 'Playfair Display', serif;
font-size: 16px !important;
font-weight: 400;
text-align: left;
}
/* Friss bejegyzések melletti ikon */
.sidebar .latestposts .latestposts-title .listheader .fa{
font-size: 14px !important;
padding: 7px;
}
/* Legújabb bejegyzés - Nincs kép -> szürke karika */
.sidebar .latestposts div.featimg{
width: 60px;
height: 60px;
border-radius: 50%;
padding: 5px;
background-color: #eee;
}
/* Legújabb bejegyzés - Kép a poszt előtt */
.sidebar .latestposts .featimg{
width: 60px;
height: 60px;
border-radius: 50%;
padding: 5px;
}
/* Legújabb bejegyzés - címet és dátumot tartalmazó elem */
.sidebar .latestposts .post-meta{
padding: 0 5px;
}
/* Legújabb bejegyzés - cím */
.sidebar .latestposts .post-meta a{
font-family: 'Playfair Display', serif;
font-size: 14px !important;
font-weight: 400;
color: #000000;
}
.sidebar .latestposts .post-meta a:hover{
color: #fff;
}
/* Legújabb bejegyzés - dátum */
.sidebar .latestposts .post-meta .txtmini{
padding-top: 5px;
}
/* Legújabb bejegyzés - Ugrás a blogra */
.sidebar .latestposts .txtnormal a{
position: relative;
}
/* Legújabb bejegyzés - Ugrás a blogra előtti nyíl */
.sidebar .latestposts .txtnormal a::before{
content: '\f177 ';
font-family: FontAwesome;
position: absolute;
left: -20px;
top: -3px;
}
/* Legújabb hozzászólások - komment blokk */
.sidebar .lastcomments .txtnormal{
padding: 10px;
margin: 10px 0;
}
/* Legújabb hozzászólások - név */
.sidebar .lastcomments .txtnormal span{
text-transform: uppercase;
font-weight: 400 !important;
font-family: 'Playfair Display', serif;
}
/* Legújabb hozzászólások - név előtti ikon */
.sidebar .lastcomments .txtnormal span::before{
content: '\f1fa';
font-family: FontAwesome;
padding: 0 5px;
font-size: 11px;
font-weight: 400;
}
/* Legújabb hozzászólások - páros blokk */
.sidebar .lastcomments .txtnormal:nth-child(odd){
background-color: #f8f8f8;
}
/* Legújabb hozzászólások - páratlan blokk */
.sidebar .lastcomments .txtnormal:nth-child(even){
background-color: #fff;
}
/* Legújabb hozzászólások - komment blokk ha ráviszed az egeret */
.sidebar .lastcomments .txtnormal:hover{
background-color: #ff0099;
color: #fff !important;
transition: all .4s ease-in-out;
}
.sidebar .lastcomments .txtnormal:hover a{
color: #fff !important;
}
/* Teljes blogpluszban szereplő tagekre vonatkozik */
.sidebar .modbody .txtmini{
font-family: 'Lora', serif;
font-size: 12px !important;
font-weight: 400;
color: #666;
font-style: normal !important;
}
.sidebar .modbody .txtnormal{
font-family: 'Lora', serif;
font-size: 12px !important;
font-weight: 400;
color: #666;
font-style: normal !important;
}
.sidebar .modbody .txtbold a{
text-decoration: none;
color: #000000;
}
/* Oldal tetejére link (blog alján is) */
.topofpage a{
position: relative;
}
/* Oldal tetejére link előtti nyíl (blog alján is) */
.topofpage a::before{
content: '\f176 ' !important;
font-family: FontAwesome;
position: absolute;
left: -10px;
top: -5px;
padding: 0 !important;
}
/* Archívum */
.sidebar .archive{
padding: 5px;
}
/* Archívum elem */
.sidebar .archive .txtnormal a{
position: relative;
}
/* Archívum elem előtti mappa */
.sidebar .archive .txtnormal a::before{
content: '\f115 ';
font-family: FontAwesome;
padding: 0 5px;
}
/*--------------------------------------------------------------
Blog modul
--------------------------------------------------------------*/
/* Blogmodul nevének elrejtése */
table[module_id="37134940"] .top_middle{
display: none;
}
/* Blog poszt */
div[id^="post_"]{
position: relative;
}
/* Blog poszt fejrésze */
div[id^="post_"] .post-head{
text-align: center !important;
}
/* Blog poszt kiemelt kép */
div[id^="post_"] .featuredImage{
width: 100%;
height: 300px;
margin: 15px 0;
background-size: cover;
}
/* Blog poszt cím */
div[id^="post_"] .post-head > a{
text-decoration: none;
text-align: center !important;
display: block !important;
}
/* Blog poszt cím */
div[id^="post_"] .post-head > a > h2
{
display: inline-block;
position: relative;
}
/* Blog poszt cím előtti szürke négyzet */
div[id^="post_"] .post-head > a > h2::after{
content: '';
width: 10px;
height: 10px;
position: absolute;
bottom: -2px;
right: -15px;
background: #eee;
z-index: -1;
}
/* Blog poszt cím előtti rózsaszín négyzet */
div[id^="post_"] .post-head > a > h2::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
bottom: 10px;
left: -15px;
background: #ff0099;
z-index: -1;
}
/* Blog poszt - Dátum, címkék */
div[id^="post_"] .post-head .txtmini,
div[id^="post_"] .post-head .blogtags
{
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 12px !important;
font-style: normal !important;
margin: 10px 0;
display: inline-block;
padding: 5px 0px;
width: calc(50% - 5px);
}
/* Blog poszt - Dátum */
div[id^="post_"] .post-head .txtmini{
text-align: right;
border-right: 1px solid #eee;
padding-right: 10px;
}
/* Blog poszt - Dátum előtti óra */
div[id^="post_"] .post-head .txtmini::before{
content: '\f017';
font-family: FontAwesome;
padding: 5px;
}
/* Blog poszt - címkék */
div[id^="post_"] .post-head .blogtags{
text-align: left;
padding-left: 10px;
font-size: 0px !important;
}
/* Blog poszt - egy-egy címke */
div[id^="post_"] .post-head .blogtags a{
background-color: #FF0099;
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 5px;
font-size: 11px !important;
margin: 0 5px;
}
/* Blog poszt - címke előtti ikon */
div[id^="post_"] .post-head .blogtags a::before{
content: '\f02b';
font-family: FontAwesome;
padding: 5px;
}
/* Blog poszt - Cím */
div[id^="post_"] .post-head h2{
font-family: 'Playfair Display', serif;
font-size: 18px !important;
font-weight: 700;
color: #000000;
text-align: center;
}
/* A poszt utolsó bekezdése (középreigazítja az utolsó sort) */
div[id^="post_"] .post-content p:last-of-type{
text-align-last: center;
}
/* Posztban szereplő képek */
div[id^="post_"] .post-content img{
margin: 2px 10px 5px 10px;
border: 5px double #eee;
}
/* Blog poszt - Iniciálé */
div[id^="post_"] .post-content > p:first-of-type:first-letter{
font-size: 48px;
padding: 10px 15px 5px 15px;
margin-right: 10px;
float: left;
color: #FF0099;
font-style: italic;
font-family: 'Playfair Display', serif;
font-weight: 700;
}
/* Blog poszt - Tovább olvas gomb tárolója */
div[id^="post_"] .blogmorelink{
display: block;
text-align: center;
padding: 15px;
}
/* Blog poszt - Tovább olvas gomb */
div[id^="post_"] .blogmorelink a{
background-color: #FF0099;
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 10px 15px;
font-size: 11px !important;
}
/* Blog poszt - Alsó sáv */
div[id^="post_"] .list1.blogcommentcount{
border: 1px solid #eee;
padding: 10px 15px;
display: flex;
justify-content: flex-end; /* Ha a megosztás gombok be vannak kapcsolva, flex-end helyett használj space-between -t */
}
/* Alsó sáv: felesleges ikon eltüntetése */
div[id^="post_"] .list1.blogcommentcount > .fa{
display: none;
}
/* Blog poszt - Közösségi megosztás */
div[id^="post_"] .pageshare{
text-align: left;
}
/* Blog poszt - Közösségi megosztás ronda fb gomb */
div[id^="post_"] .pageshare iframe{
display: none !important;
}
/* Blog poszt - Közösségi megosztás ikonok */
div[id^="post_"] .pageshare .fa{
padding: 0 10px;
}
/* Blog poszt - Mit szólsz hozzá link tárolója/ közösségi linkek tárolója */
div[id^="post_"] .list1.blogcommentcount > div
{
display: inline-block;
float: none !important;
}
/* Blog poszt - Alsó sávban lévő linkek */
div[id^="post_"] .list1.blogcommentcount div a{
font-family: 'Playfair Display', serif;
font-size: 14px !important;
font-weight: 400;
color: #000000;
text-decoration: none;
}
/* Blog poszt - Mit szólsz hozzá link előtti ikon */
div[id^="post_"] .list1.blogcommentcount div[style="vertical-align:middle;float:right;margin-left:4px;"] a::before{
content: '\f0e5';
font-family: FontAwesome;
padding: 0 5px;
}
/* Blog poszt - Alsó sáv kép ikon elrejtése */
div[id^="post_"] .list1.blogcommentcount img{
display: none;
}
/*--------------------------------------------------------------
Lapozó a blog alján
--------------------------------------------------------------*/
.bloglistend{
text-align: center;
}
/* Lapozó elem */
#gp_pagenavi li{
margin: 0 5px;
display: inline-block !important;
}
/* Szivecske eltüntetése, ami alapból rákerül */
#gp_pagenavi li::before{
content: '';
display: none !important;
}
/* Oldalak kinézete */
#gp_pagenavi li a{
background: #fff;
border: 1px solid #eee;
color: #bbb;
}
/* Aktuális oldal, link ha ráviszed a kezed */
#gp_pagenavi li.active a,
#gp_pagenavi li a:hover{
background: #ff0099;
color: #fff;
}
/*--------------------------------------------------------------
Komment rész
--------------------------------------------------------------*/
#commentContainer{}
/* X hozzászólás */
#commentContainer > table:first-of-type{
}
/* FontAwesome ikonok */
#commentContainer .fa{
padding: 0px 10px;
}
#commentContainer table:nth-of-type(2) {
padding: 5px;
}
/* Egyes hozzászólások */
#commentContainer table:nth-of-type(2) tr{
margin: 20px 0;
display: block;
}
/* Egyes hozzászólások - páros */
#commentContainer table:nth-of-type(2) .list1 {
background-color: #f8f8f8;
border: 1px solid #fff;
}
/* Egyes hozzászólások - páratlan*/
#commentContainer table:nth-of-type(2) .list2 {
border: 1px solid #eee;
}
/* Hozzászólás fejrész */
#commentContainer .comment-meta{}
/* Hozzászólás fejrész - Avatar */
#commentContainer .comment-meta .gpavatarimg{
height: 40px;
width: auto;
padding: 5px;
}
/* Hozzászólás - dátum */
#commentContainer .comment-meta div[style="float:right;font-style:italic;"]{
font-size: 12px;
font-family: 'Playfair Display', serif;
}
/* Hozzászólás - név */
#commentContainer .comment-meta .txtbold{
text-transform: uppercase;
}
/* Hozzászólás */
#commentContainer .commenttext{}
/* Hozzászólás - Válasz elválasztó vonal */
#commentContainer .commenttext hr {}
/* Válasz hozzászólás */
#commentContainer .commenttext > div {
width: auto;
margin-left: 20px;
}
/* Válasz hozzászólás - dátum */
#commentContainer .commenttext > div > div[style="float:right;"] {
font-size: 12px;
font-family: 'Playfair Display', serif;
}
/* Válasz hozzászólás - dátum előtti ikon */
#commentContainer .commenttext > div > div[style="float:right;"]::before{
content: '\f017';
font-family: FontAwesome;
padding: 0 5px;
}
/* Válasz hozzászólás - név */
#commentContainer .commenttext > div > div[style="font-weight:bold;"] {
font-size: 12px;
text-transform: uppercase;
}
/* Válasz hozzászólás - név előtti ikon */
#commentContainer .commenttext > div > div[style="font-weight:bold;"]::before{
content: '\f0e5';
font-family: FontAwesome;
padding: 0 5px;
}
/* Válasz hozzászólás - komment */
#commentContainer .commenttext > div > div[style="font-style:italic;"] p {
font-size: 11px !important;
}
/*--------------------------------------------------------------
Login form
--------------------------------------------------------------*/
form[name="loginform"] br{
display: none;
}
form[name="loginform"] input{
width: 100%;
}
/*--------------------------------------------------------------
Preloader
--------------------------------------------------------------*/
.page-loader {
position: fixed;
background: #fff; /* Oldal háttere a preloader alatt */
bottom: 0;
right: 0;
left: 0;
top: 0;
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
border-left: 2px solid #ff0099; /* Rózsazsín kis szelet */
border-top: 2px solid rgba(0, 0, 0, 0.1); /* Szürke rész */
border-right: 2px solid rgba(0, 0, 0, 0.1); /* Szürke rész */
border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Szürke rész */
height: 46px; /* Karika magassága */
width: 46px; /* Karika szélessége */
font-size: 0px; /* felirat elrejtése */
z-index: 9999;
-webkit-animation: load 0.8s infinite linear;
-moz-animation: load 0.8s infinite linear;
ms-animation: load 0.8s infinite linear;
o-animation: load 0.8s infinite linear;
animation: load 0.8s infinite linear;
}
.loader,
.loader:after {
border-radius: 50%; /*kör alak*/
width: 46px;
height: 46px;
}
/* Pörgés animáció */
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@media screen and (max-width: 780px) {
.site{
width: 100% !important;
display: flex;
flex-basis: 1;
}
.main-content, .sidebar{
width: 100% !important;
display: block;
}
} |
|
AJÁNLOM AZ OLDALT