File: //home/madepabj/gamepointpk.com/wp-content/themes/groovy/assets/scss/base/_widgets.scss
/* Sidebar Widgets */
.widget{
padding: 30px 25px;
padding-top: 45px;
position: relative;
z-index: 2;
.widget-title{
letter-spacing: 0.25px;
position: absolute;
left: 25px;
top: -20px;
z-index: 2;
font-family: $sidebar-title-font-family;
font-weight: $sidebar-title-font-weight;
.border{
display: none;
}
}
&:last-child{
&:after{ display: none; }
}
select{
font-size: 15px;
background: $white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAAA3NCSVQICAjb4U/gAAAAD1BMVEX///8AAAAAAAAAAAAAAABRO2rwAAAABXRSTlMAESIzRJTdRHwAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAY0lEQVQYlVXOyRGAIBBE0QYNgIMBWJYBcDAAFvOPSYRZ5zL1Tv3xvPY6dueC4JyA27AB2IzzMIx/4hDW6Sg+p8EJfVESCpkTEpkSGpMSshg6DkmoxlHHOaFbjoTiHHR83UX/A5M3KIMZPyPWAAAAAElFTkSuQmCC') no-repeat 97% center !important;
background-size: 9px 6px !important;
}
}
// Default Text Widget
.widget_text{
font-size: 14px;
.textwidget{
margin-top: -9px;
}
p{ margin-bottom: 20px; }
a{ font-weight: 500; }
p:last-of-type{ margin-bottom: 0; }
}
// Default Search Widget
.widget_search{
.search-field, .wp-block-search__input{
padding-left: 15px;
font-size: 13px !important;
background: $white;
margin-bottom: 0;
}
.wp-block-search__button{
padding: 0px 25px;
}
form .submit{
right: 10px;
}
}
// Standard widgets
.widget_recent_entries, .widget_categories, .widget_archive, .widget_recent_comments, .widget_meta, .widget_nav_menu, .widget_pages, .widget_rss{
label{ display: none; }
ul > li{ // Archives, categories, menus
display: block;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid $border-color;
a{
font-size: 14px;
display: inline-block;
}
&:last-of-type{ margin-bottom: 0 !important; border-bottom: 0; padding-bottom: 0; }
ul.children, ul.sub-menu{
clear: both;
padding: 10px 0 0 0;
margin-top: 10px;
border-top: 1px solid $border-color;
li{
padding-left: $grid-gap;
}
}
}
}
.widget_recent_comments, .widget_categories, .widget_archive, .widget_recent_entries, .widget_rss{
> ul > li{
position: relative;
z-index: 1;
font-size: 16px;
.comment-author-link{ font-weight: 700; }
}
}
.widget_recent_comments ul > li a{ display: inline; }
.widget_recent_entries > ul > li:before{
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+CiAgICAgICAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMCAyMkg0YTEgMSAwIDAgMS0xLTFWM2ExIDEgMCAwIDEgMS0xaDE2YTEgMSAwIDAgMSAxIDF2MThhMSAxIDAgMCAxLTEgMXptLTEtMlY0SDV2MTZoMTR6TTggN2g4djJIOFY3em0wIDRoOHYySDh2LTJ6bTAgNGg4djJIOHYtMnoiLz4KICAgIDwvZz4KPC9zdmc+")
}
.widget_archive > ul > li:before{
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE3IDNoNGExIDEgMCAwIDEgMSAxdjE2YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMWg0VjFoMnYyaDZWMWgydjJ6bS0yIDJIOXYySDdWNUg0djRoMTZWNWgtM3YyaC0yVjV6bTUgNkg0djhoMTZ2LTh6IiBmaWxsPSJyZ2JhKDM2LDM1LDM1LDEpIi8+PC9zdmc+");
}
.widget_recent_comments > ul > li{ padding-left: 27px; }
.widget_recent_comments > ul > li:before{
content: '';
position: absolute;
left: 0;
top: 7px;
width: 16px;
height: 16px;
background-size: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M7.291 20.824L2 22l1.176-5.291A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.956 9.956 0 0 1-4.709-1.176zm.29-2.113l.653.35A7.955 7.955 0 0 0 12 20a8 8 0 1 0-8-8c0 1.334.325 2.618.94 3.766l.349.653-.655 2.947 2.947-.655z' fill='rgba(255,72,106,1)'/%3E%3C/svg%3E");
}
.widget_rss > ul > li:before{
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+CiAgICAgICAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zIDNjOS45NDEgMCAxOCA4LjA1OSAxOCAxOGgtM2MwLTguMjg0LTYuNzE2LTE1LTE1LTE1VjN6bTAgN2M2LjA3NSAwIDExIDQuOTI1IDExIDExaC0zYTggOCAwIDAgMC04LTh2LTN6bTAgN2E0IDQgMCAwIDEgNCA0SDN2LTR6Ii8+CiAgICA8L2c+Cjwvc3ZnPg==")
}
.widget_categories > ul > li{
padding-left: 0;
&:before{
display: none;
}
}
.widget_categories > ul > li:before{ content: '\f02b'; }
.widget_archive, .widget_categories{
ul li{
text-align: right;
background: none;
line-height: 30px;
margin-bottom: 8px;
padding-bottom: 8px;
&:last-of-type{ margin-bottom: 0 !important; border-bottom: 0; padding-bottom: 0; border-image: none; }
&:after{
content: '';
display: block;
clear: both;
}
}
// Counter
ul li span{
display: inline-block;
padding: 0;
color: $white;
background: $main-color;
font-family: $title-font-family;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
font-weight: 700;
font-size: 13px;
box-sizing: border-box;
top: -2px;
position: relative;
border-radius: 50%;
}
ul > li{
clear: both;
a{
float: left;
}
}
}
// Tag Cloud
.widget_tag_cloud, .widget_epcl_tag_cloud, .wp-block-tag-cloud{
@extend div.tags;
display: block;
a{
font-size: 14px !important;
margin-bottom: 12px;
margin-right: 10px;
}
}
// Recent Entries
.widget_recent_entries{
.post-date{
font-size: 13px;
display: block;
color: $text-color;
}
}
// Audio
.widget_media_audio{
a:before{ display: none; }
}
// Calendar
.widget_calendar{
table{
width: 100%;
border-collapse: separate;
caption{ margin-bottom: 10px; font-weight: 600; }
thead{ background: $black; color: #fff; }
th{ font-weight: 600; border: 0; }
td{
border-top: 1px solid $border-color;
text-align: center;
a{
font-weight: 700;
}
}
th, td{ padding: 5px; }
#today{ font-weight: bold; }
#prev{ text-align: left; }
#next{ text-align: right; }
}
.wp-calendar-nav-next{ float: right; }
}
// Single image
.widget_media_image{
a{
display: inline-block;
padding: 0;
img{ display: block; width: auto; }
}
a:before{ display: none; }
img{ border-radius: 15px; }
}
// Gallery
.widget_media_gallery{
.gallery-item{ margin-top: 0 !important; }
a{
display: inline-block;
vertical-align: top;
padding: 0px 5px;
img{
border: 1px solid $border-color !important;
border-radius: $small-border-radius;
@include transition($transition-time-bezier, 'bezier');
}
&:hover img{
box-shadow: $small-shadow;
transform: translate(-2px, -2px);
}
}
}
// RSS
.widget_rss{
.widget-title a{
padding-bottom: 0;
img{ display: none; }
&:before{ display: none; }
}
ul li{ font-size: 13px; }
.rss-date{
display: block;
margin-top: 10px;
}
.rsswidget{
font-family: $title-font-family;
font-weight: 700;
color: $black;
&:hover{
color: $main-color;
}
}
cite{ font-weight: 700; }
.rssSummary, cite{ display: block; padding-top: 15px; }
}
/* Custom Widgets */
// About me
.widget_epcl_about{
.avatar{
float: left;
width: 80px;
height: 80px;
margin-right: 20px;
font-size: 38px !important;
a{
display: block;
border-radius: 50%;
overflow: hidden;
}
img{ display: block; }
}
.founder{
margin-top: 0px;
margin-bottom: 5px;
font-size: 14px;
}
.info{
float: left;
}
.social{
text-align: center;
float: left;
a{
margin-right: 10px;
font-size: 16px;
transform: none;
color: $main-color;
&.facebook{
color: $facebook-color;
}
&.twitter{
color: $twitter-color;
}
}
}
p{ margin-top: 15px; font-size: 14px; }
}
// Recent Posts with image
.widget_epcl_posts_thumbs, .widget_epcl_featured_category, .widget_epcl_related_articles{
.info{ display: flex; }
.item{
margin-bottom: 20px;
position: relative;
padding-left: 75px;
display: flex;
flex-flow: row wrap;
align-items: center;
min-height: 70px;
&.no-thumb{
padding: 0 !important;
}
.right{
}
.title{
margin-bottom: -3px;
}
.thumb{
width: 60px;
height: 64px;
min-height: 52px;
overflow: inherit;
position: absolute;
left: 0;
top: 1px;
padding: 0;
border-radius: $small-border-radius;
.fullimage{
display: block;
border-radius: $small-border-radius;
border: 1px solid $border-color;
}
&:hover .fullimage{
box-shadow: $small-shadow;
}
}
.epcl-dropcap{
width: 60px;
height: 64px;
font-size: 28px;
.fake-layout{
line-height: 64px !important;
&:before{
left: 1px;
top: 1px;
right: 1px;
bottom: 1px;
}
}
}
time{
font-size: 12px;
}
&:last-of-type{ margin-bottom: 0; }
}
}
// EP Flickr Widget
.widget_epcl_flickr{
div.loading{ text-align: center; padding: 20px 0; }
&.loaded .loading{ display: none; }
ul{ margin: 0 -3px; }
ul li{
display: block; padding: 0 2px 4px;
.wrapper{
overflow: hidden;
}
a{
display: block;
overflow: hidden;
width: 100%;
position: relative;
z-index: 1;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 95%;
&:hover:before{
opacity: 1;
visibility: visible;
transform: scale(1);
}
span.cover{
height: 100%;
width: 101%;
position: absolute;
left: 0;
top: 0;
}
}
}
}
// Custom: Advertise
.widget_epcl_ads_125{
.epcl-banner-wrapper{
margin: 0 half(-$grid-gap);
}
.epcl-banner{
display: block;
float: left;
max-width: 50%;
box-sizing: border-box;
padding: 0 half($grid-gap) $grid-gap;
a > img{ display: block; max-width: 100%; height: auto; }
}
}
.epcl-banner-wrapper a:before{ display: none; }
.widget_ep_ads_fluid .epcl-a{ overflow: hidden; }
// Custom: Tweets
section.widget_epcl_tweets{
p{
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font-size: 14px;
line-height: 2;
a{
font-weight: 600;
color: $black;
}
small{
font-size: 11px;
padding-top: 5px;
display: block;
}
i.fa-twitter{
font-size: 21px;
position: absolute;
left: 0;
top: 5px;
color: $twitter-color;
}
&:last-of-type{ margin-bottom: 0; }
}
}
// Custom: Social Profiles
.widget_epcl_social{
div.icons a{
display: block;
margin-bottom: 10px;
.icon{
display: inline-block;
width: 42px;
height: 42px;
border-radius: 50%;
text-align: center;
line-height: 42px;
vertical-align: middle;
font-size: 21px;
background-color: $white;
color: $black;
border: 1px solid $border-color;
@include transition($transition-time-bezier, 'bezier');
&.dribbble{ color: $dribbble-bg-color; }
&.facebook{ color: $facebook-bg-color; }
&.twitter{ color: $twitter-bg-color; }
&.instagram{ color: $instagram-bg-color; }
&.linkedin{ color: $linkedin-bg-color; }
&.pinterest{ color: $pinterest-bg-color; }
&.tumblr{ color: $tumblr-bg-color; }
&.youtube{ color: $youtube-bg-color; }
&.flickr{ color: $flickr-bg-color; }
&.twitch{ color: $twitch-bg-color; }
&.vk{ color: $vk-bg-color; }
&.telegram{ color: $telegram-bg-color; }
&.rss{ color: $rss-bg-color; }
&.tiktok svg{ fill: $tiktok-bg-color; }
}
.name{
font-family: $title-font-family;
font-size: 18px;
font-weight: 700;
margin-left: 10px;
vertical-align: middle;
padding-bottom: 5px;
background-image: linear-gradient(to right, rgba($black, 1) 0%, rgba($black, 1) 100%);
background-size: 0% 4%;
background-repeat: no-repeat;
background-position: left 80%;
@include transition;
}
&:hover{
.name{
color: $black !important;
background-size: 100% 4%;
}
.icon{
box-shadow: $small-shadow;
transform: translate(-2px, -2px);
}
}
svg{
width: 21px;
height: 21px;
fill: $black;
vertical-align: middle;
}
p{ display: none; padding-top: 7px; letter-spacing: 0.5px; }
p span{
display: block;
font-size: 12px;
font-weight: 400;
margin-top: -1px;
font-family: $font-family;
}
}
}
/* @end */