767 lines
13 KiB
SCSS
767 lines
13 KiB
SCSS
.post-content .mpp-profile-wrap,
|
|
.post-content .mpp-enhanced-profile-wrap {
|
|
h1, h2 , h3, h4 , h5, h6 {
|
|
clear: none;
|
|
}
|
|
h2 {
|
|
margin: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
p {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.mpp-profile-wrap {
|
|
margin: 0 auto;
|
|
padding: 3%;
|
|
border-radius: 5px;
|
|
margin-bottom: 1.2em;
|
|
margin-bottom: 20px;
|
|
line-height: 1.3;
|
|
&.round .mpp-profile-image-wrapper {
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
&.round .mpp-profile-image-wrapper img {
|
|
border-radius: 50%;
|
|
}
|
|
h1,h2,h3,h4,h5,h6 {
|
|
clear: none;
|
|
}
|
|
h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
h2:before {
|
|
display: none;
|
|
}
|
|
.mpp-profile-image-wrapper {
|
|
position: relative;
|
|
float: left;
|
|
line-height: 1.1;
|
|
z-index: 1000;
|
|
background: #ddd;
|
|
position: relative;
|
|
min-width: 150px;
|
|
min-height: 150px;
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
width: 100%;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
button {
|
|
position: relative;
|
|
min-width: 150px;
|
|
min-height: 150px;
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
z-index: 1000;
|
|
}
|
|
.mpp-profile-image-square {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 5;
|
|
}
|
|
.mpp-profile-image-square img {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
.mpp-content-wrap {
|
|
display: block;
|
|
padding: 0 15px 0 15px;
|
|
-ms-flex: 3 0 0px;
|
|
flex: 3 0 0;
|
|
}
|
|
.mpp-profile-name {
|
|
font: 1.4em;
|
|
line-height: 1.2;
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
flex: auto;
|
|
}
|
|
}
|
|
.mpp-gutenberg-view-posts {
|
|
clear: both;
|
|
padding-top: 20px;
|
|
}
|
|
.mpp-profile-view-posts {
|
|
clear: both;
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 10px 20px;
|
|
background-color: #cf6d38;
|
|
color: #FFF;
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mpp-enhanced-profile-wrap.regular {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
line-height: 1.5;
|
|
&.round .mpp-profile-image-wrapper {
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
&.round .mpp-profile-image-wrapper img {
|
|
border-radius: 50%;
|
|
}
|
|
h1,h2,h3,h4,h5,h6 {
|
|
clear: none;
|
|
}
|
|
h2:before {
|
|
display: none;
|
|
}
|
|
.mpp-profile-image-wrapper {
|
|
position: relative;
|
|
float: left;
|
|
line-height: 1.1;
|
|
z-index: 1000;
|
|
background: #ddd;
|
|
position: relative;
|
|
min-width: 150px;
|
|
min-height: 150px;
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
width: 100%;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
@media only screen and (max-width: 400px) {
|
|
float: none;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
button {
|
|
position: relative;
|
|
min-width: 150px;
|
|
min-height: 150px;
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
z-index: 1000;
|
|
}
|
|
.mpp-profile-image-square {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 5;
|
|
|
|
}
|
|
.mpp-profile-image-square img {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
.mpp-content-wrap {
|
|
display: block;
|
|
padding: 0 15px 0 15px;
|
|
-ms-flex: 3 0 0px;
|
|
flex: 3 0 0;
|
|
@media only screen and (max-width: 400px) {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.mpp-profile-name {
|
|
font: 1.4em;
|
|
line-height: 1.2;
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
flex: auto;
|
|
}
|
|
}
|
|
.mpp-content-wrap {
|
|
@media only screen and (max-width: 400px) {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.mpp-gutenberg-view-posts {
|
|
clear: both;
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.mpp-profile-view-posts {
|
|
clear: both;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
padding: 10px 20px;
|
|
margin-top: 20px;
|
|
margin-right: 20px;
|
|
background-color: #cf6d38;
|
|
color: #FFF;
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
@media only screen and (max-width: 400px) {
|
|
display: block;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.mpp-profile-view-website {
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
padding: 10px 20px;
|
|
margin-top: 20px;
|
|
background-color: #333;
|
|
color: #FFF;
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
@media only screen and (max-width: 400px) {
|
|
display: block;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Icon Sizes */
|
|
$sizes: 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24;
|
|
@each $size in $sizes {
|
|
.mpp-profile-wrap.mt-font-size-#{$size},
|
|
.mpp-enhanced-profile-wrap.regular .mt-font-size-#{$size},
|
|
.mpp-enhanced-profile-wrap.profile .mt-font-size-#{$size},
|
|
.mpp-enhanced-profile-wrap.compact .mt-font-size-#{$size},
|
|
.mpp-profile-text.mt-font-size-#{$size} {
|
|
font-size: #{$size}px;
|
|
p,
|
|
div {
|
|
font-size: #{$size}px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
/* For Social Media */
|
|
.mpp-social {
|
|
margin-top: 15px;
|
|
svg {
|
|
max-width: 32px;
|
|
max-height: 32px;
|
|
margin-right: 10px;
|
|
}
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
/* Social Media Colors */
|
|
$colors: twitter #00aced,
|
|
amazon #000000,
|
|
behance #0692e9,
|
|
blogger #fb8f3d,
|
|
codepen #000000,
|
|
dribble #F46899,
|
|
dropbox #018BD3,
|
|
eventbrite #f6682F,
|
|
facebook #3b5998,
|
|
flickr #ff0084,
|
|
foursquare #0072b1,
|
|
ghost #000000,
|
|
github #070709,
|
|
google-plus #CF3D2E,
|
|
instagram #A1755C,
|
|
linkedin #0085AE,
|
|
feed #f26522,
|
|
medium #000000,
|
|
path #000000,
|
|
pinterest #CC2127,
|
|
pocket #000000,
|
|
polldaddy #bc0b0b,
|
|
reddit #000000,
|
|
skype #01AEF2,
|
|
spotify #1ed760,
|
|
squarespace #000000,
|
|
stumbleupon #EB4823,
|
|
telegram #000000,
|
|
tumblr-alt #314E6C,
|
|
twitch #4b367c,
|
|
twitter-alt #00aced,
|
|
vimeo #1ab7ea,
|
|
wordpress #21759b,
|
|
youtube #bb0000
|
|
;
|
|
.mpp-social {
|
|
clear: both;
|
|
}
|
|
.mpp-social svg {
|
|
@each $color in $colors {
|
|
&.icon-#{nth($color,1)} {
|
|
fill: #{nth($color,2)};
|
|
}
|
|
}
|
|
}
|
|
|
|
.mpp-enhanced-profile-wrap.profile {
|
|
padding: 10px;
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
margin-bottom: 5px;
|
|
&:before {
|
|
display: none;
|
|
}
|
|
@media only screen and (max-width: 400px) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
&.round .profile-avatar {
|
|
border-radius: 50%;
|
|
}
|
|
.mpp-profile-image-wrapper {
|
|
position: relative;
|
|
float: left;
|
|
line-height: 1.0;
|
|
z-index: 1000;
|
|
min-width: 150px;
|
|
min-height: 150px;
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
margin-right: 15px;
|
|
|
|
@media only screen and (max-width: 400px) {
|
|
float: none;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.mpp-profile-meta {
|
|
clear: both;
|
|
margin: 10px 0;
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
.alignleft {
|
|
max-width: none;
|
|
float: left;
|
|
@media only screen and (max-width: 400px) {
|
|
float: none;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.alignright {
|
|
max-width: none;
|
|
@media only screen and (max-width: 400px) {
|
|
float: none;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* For Tabbed Theme */
|
|
.mpp-author-tabbed {
|
|
padding: 10px;
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.mpp-social {
|
|
margin-top: 0;
|
|
}
|
|
.mpp-author-social-wrapper {
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
margin-bottom: 10px;
|
|
}
|
|
h1, h2, h3, h4, h5 , h6 {
|
|
clear: none;
|
|
}
|
|
h2 {
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
margin-bottom: 5px;
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
.mpp-tab-wrapper {
|
|
clear: both;
|
|
}
|
|
.mpp-author-heading {
|
|
float: left;
|
|
@media only screen and (max-width: 600px) {
|
|
float: none;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
width: 90%;
|
|
}
|
|
}
|
|
.mpp-author-social {
|
|
float: right;
|
|
@media only screen and (max-width: 600px) {
|
|
float: none;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.mpp-author-heading .mpp-author-profile-heading {
|
|
display: inline-block;
|
|
background: #42737b;
|
|
color: #FFF;
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
@media only screen and (max-width: 600px) {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.mpp-author-profile-sub-heading {
|
|
font-size: 14px;
|
|
line-height: 1.1;
|
|
max-width: 150px;
|
|
text-align: center;
|
|
}
|
|
&.round .profile-avatar {
|
|
border-radius: 50%;
|
|
}
|
|
.mpp-profile-image-wrapper {
|
|
clear: both;
|
|
position: relative;
|
|
float: left;
|
|
line-height: 1.0;
|
|
z-index: 1000;
|
|
margin-right: 30px;
|
|
img {
|
|
min-width: 150px;
|
|
min-height: 150px;
|
|
max-height: 150px;
|
|
max-width: 150px;
|
|
}
|
|
|
|
|
|
}
|
|
.mpp-profile-meta {
|
|
clear: both;
|
|
margin: 10px 0;
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
.mpp-author-profile-title {
|
|
color: gray;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
}
|
|
.mpp-tabbed-profile-information {
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
.mpp-tab {
|
|
display: none;
|
|
}
|
|
.mpp-tab-active {
|
|
display: block;
|
|
}
|
|
ul.mpp-author-tabs {
|
|
position:relative;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
|
|
li {
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: inline-block;
|
|
min-width: 200px;
|
|
background: #42737b;
|
|
margin: 0 5px 0 0;
|
|
text-align: center;
|
|
margin-right: 10px;
|
|
color: #FFF;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
@media only screen and (max-width: 500px) {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
&.active:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: calc(50% - 10px);
|
|
border-top: 10px solid #42737b;
|
|
border-top-color: #42737b;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
@media only screen and (max-width: 500px) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
li.mpp-tab-posts {
|
|
background: #30424b;
|
|
&.active:after {
|
|
border-top: 10px solid #30424b;
|
|
border-top-color: #30424b;
|
|
}
|
|
}
|
|
}
|
|
ul.mpp-author-tab-content {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
li {
|
|
margin: 0;
|
|
}
|
|
&.white {
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
background: #FFFFFF;
|
|
border: 1px solid darken(#FFFFFF, 5%);
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
a:hover {
|
|
background: darken(#FFFFFF, 5%);
|
|
}
|
|
}
|
|
&.light {
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
background: #f7f7f7;
|
|
border: 1px solid darken(#f7f7f7, 10%);
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
a:hover {
|
|
background: darken(#f7f7f7, 10%);
|
|
}
|
|
}
|
|
&.black {
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
background: #333;
|
|
color: #FFF;
|
|
border: 1px solid darken(#333, 10%);
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
background: darken(#333, 10%);
|
|
}
|
|
}
|
|
&.magenta {
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
background: #FF00FF;
|
|
color: #FFF;
|
|
border: 1px solid darken(#FF00FF, 10%);
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
background: darken(#FF00FF, 10%);
|
|
}
|
|
}
|
|
&.blue {
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
background: #0009c1;
|
|
color: #FFF;
|
|
border: 1px solid darken(#0009c1, 10%);
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
background: darken(#0009c1, 10%);
|
|
}
|
|
}
|
|
&.green {
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
background: #03ac27;
|
|
color: #FFF;
|
|
border: 1px solid darken(#03ac27, 10%);
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
background: darken(#03ac27, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* For Compact Theme */
|
|
.mpp-enhanced-profile-wrap.compact {
|
|
text-align: center;
|
|
padding: 10px;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
line-height: 1.1;
|
|
&.center {
|
|
margin: 0 auto;
|
|
}
|
|
&.left {
|
|
margin-left: 0;
|
|
}
|
|
&.right {
|
|
margin-right: 0;
|
|
}
|
|
.mpp-social svg {
|
|
margin-right: 0;
|
|
}
|
|
h2 {
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
margin-bottom: 5px;
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
&.round .profile-avatar {
|
|
border-radius: 50%;
|
|
}
|
|
.mpp-profile-image-wrapper {
|
|
position: relative;
|
|
text-align: center;
|
|
line-height: 1.0;
|
|
z-index: 1000;
|
|
min-width: 150px;
|
|
min-height: 150px;
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
margin: 0 auto;
|
|
}
|
|
.mpp-profile-text {
|
|
line-height: 1.1;
|
|
}
|
|
.mpp-compact-meta {
|
|
clear: both;
|
|
margin: 10px 0;
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
.mpp-profile-view-posts {
|
|
clear: both;
|
|
display: block;
|
|
text-align: center;
|
|
padding: 10px 20px;
|
|
margin-top: 20px;
|
|
margin-right: 20px;
|
|
background-color: #cf6d38;
|
|
color: #FFF;
|
|
margin-bottom: 10px;
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.mpp-profile-view-website {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 10px 20px;
|
|
margin-top: 20px;
|
|
background-color: #333;
|
|
color: #FFF;
|
|
a,
|
|
a:hover,
|
|
a:visited {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
} |