// Variables
@import "ipcmd/data/colors";
@import "ipcmd/data/variables-b4";
@import "ipcmd/data/variables";
//Global
@import "ipcmd/global";
$font-size: 15px;
$line-height: 2;
$lines-to-show: 1;
.main-content-wraper {
// margin: 0px 10px 0 10px;
// @media only screen and (max-width: 992px){
// margin: 0px 0 0;
// }
}
.top-action-icons {
float: right;
a{
font-weight: bold;
padding: 0px 5px;
margin: 0px 2px;
display:inline-block;
opacity: 0.3;
&:hover{
background: #fff;
box-shadow: 2px 5px 5px rgba(0,0,0,0.2);
opacity: 1;
}
.material-icons{
vertical-align: middle;
}
}
}
.user-statistics {
position: relative;
.card{
&:hover{
@extend .z-depth-2;
transition: box-shadow .45s;
}
.card-block {
clear: both;
padding: 0.5rem;
.material-icons{
float: left;
width: 40px;
height: 40px;
font-size: 30px;
line-height: 41px;
color: #fff;
text-align: center;
margin-right: 10px;
border-radius: 4px;
}
h3.number{
font-size: 22px;
font-weight: 600;
color: lighten($primary-color,40%);
display: block;
margin: 0;
}
h4.text{
font-size: 13px;
font-weight: 600;
color: lighten($primary-color,25%);
margin: 0;
}
.notes, .bookmarks, .heighlights{
float: left;
padding: 0 4px;
h3.number, h4.text{
text-align: center;
float: none;
}
}
.bookmarks {
margin: 0 5px;
border-left:1px solid lighten($primary-color,70%);
border-right:1px solid lighten($primary-color,70%);
}
.login-data{
display: inline-block;
color: lighten($primary-color,40%);
font-size: 0.8rem;
}
}
}
}
.my-activities{
background: #fff;
margin: 0;
.nav-tabs{
border-bottom: 0;
.nav-link {
border: 0;
font-size: 1.1rem;
font-weight: bold;
&.active{
color: $link-hover-color;
}
}
}
.actions {
float: right;
a{
margin: 2px 2px 0 0;
padding: 5px 7px 0 5px;
display: inline-block;
&:hover, &.active{
background:rgba(lighten($md-color,50%),.3);
border-radius: 2px;
color:$secondary-color;
}
}
.sort-dropdown {
display: inline-block;
vertical-align: middle;
background: #fff;
border-radius: 2px;
border: 1px solid lighten($primary-color,65%);
a {
padding:2px 4px 0 4px;
border-radius: 2px;
.material-icons {
font-size: 1.2rem;
color:lighten($primary-color,40%);
}
}
&:hover a, a.active {
background: #fff;
}
.dropdown-menu {
border:1px solid lighten($primary-color,65%);
padding:0;
box-shadow: 1px 1px 15px 0px rgba(0, 0, 0, 0.1), 1px 1px 15px 0px rgba(0, 0, 0, 0.1);
h3.title{
background:lighten($primary-color,60%);
font-size: 14px;
font-weight: bold;
padding: 7px;
margin: 0;
}
label{
display: block;
padding: 5px 5px 5px 30px;
margin: 0;
line-height: 20px;
&:nth-child(odd) {
border-top:1px solid lighten($primary-color,72%);
border-bottom:1px solid lighten($primary-color,72%);
}
.c-indicator {
left:7px;
top: 7px;
width: 1.2rem;
height: 1.2rem;
background-color: #fff;
border:1px solid rgba($primary-color,0.1);
box-shadow: none;
border-radius: 50%;
}
input:checked ~ .c-indicator {
background-color: $secondary-color;
border:1px solid rgba($secondary-color,0.1);
}
input:checked ~ .text {
font-weight: bold;
}
&:hover{
background: lighten($primary-color,65%);
}
}
}
}
}
.tab-content {
min-height: 500px;
position: relative;
overflow: hidden;
.nav-tabs{
border-bottom: 1px solid #eee;
position: relative;
.nav-link {
border: 0;
padding: 0.7rem 1.2rem;
font-size: 0.85rem;
font-weight: bold;
text-transform: uppercase;
color: lighten($primary-color, 15%);
&:hover {
color:$secondary-color;
}
&.active{
border-bottom: 2px solid $secondary-color;
color: $link-hover-color;
.label{
background:$secondary-color;
&::before {
border-right-color:$secondary-color;
}
}
}
.label{
background: lighten($primary-color,30%);
border-radius:2px;
position: relative;
font-size: 12px;
font-weight: normal;
margin-left: 3px;
vertical-align: middle;
@extend .z-depth-1-half;
&::before {
right: 100%;
top: 45%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-right-color:lighten($primary-color,30%);
border-width: 5px;
margin-top: -5px;
}
}
}
}
.toolbar-wrapper{
background: lighten($primary-color,73%);
.tab-title{
color: lighten($primary-color,60%);
float: left;
margin: 0.5rem;
font-size: 13px;
.title, .category, .shelf, .collection{
padding: 2px 2px 0px 5px;
line-height: 15px;
}
.category, .shelf{
color: $secondary-color;
background: #fff;
border-radius: 2px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
display: none;
a.close-selected{
font-weight: normal;
padding:0px 5px 2px;
color:#fff;
display: inline-block;
margin:0 0 2px 5px;
border-radius: 2px;
background: $secondary-color;
&:hover {
background: lighten($primary-color,40%);
}
}
}
.shelf{
display: inline-block;
}
.collection{
color: lighten($primary-color,5%);
font-weight: bold;
}
}
.actions{
.category-select-wrap {
padding:0.4rem 0;
float: left;
position: relative;
}
.shelf-select-wrap {
padding:0.4rem 0;
position: relative;
float: left;
}
.search-sort-wrap {
padding:0.44rem ;
display: inline-block;
position: relative;
}
a{
margin: 0px;
}
}
.btn {
line-height: 1.6rem;
}
}
&.stack-view{
.card-columns {
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
padding: 20px;
-moz-column-gap: 1.5rem;
-webkit-column-gap:1.5rem;
column-gap: 1.5rem;
.card{
padding: 5px;
text-align: left;
position: relative;
cursor: pointer;
overflow: hidden;
.cover-img{
position: relative;
img {
max-width: 100%;
width: auto;
height: auto;
margin: auto;
display: block;
}
}
.more-details{
display: none;
}
}
}
}
&.list-view{
.card-columns {
@media (min-width: 990px) {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
padding: 2%;
-moz-column-gap: 1rem;
-webkit-column-gap: 1rem;
column-gap: 1rem;
.card{
padding: 5px;
text-align: left;
position: relative;
cursor: pointer;
border: 1px solid lighten($primary-color,72%);
box-shadow: none;
&:hover{
box-shadow: 1px 1px 15px rgba(0,0,0,0.2);
}
@media (max-width: 552px) {
float: left;
}
.cover-img{
float: left;
margin-right: 1rem;
img {
height: 100px;
}
}
.title{
font-size: 16px;
font-weight: bold;
margin: 5px 0px 5px;
}
.more-details{
background: #fff;
font-size: 12px;
display: block;
.info{
float: left;
clear: right;
min-width: 70%;
}
.author-name{
font-size: 12px;
}
.sub-title, .author-name, .format{
display: block;
padding: 3px 0;
}
.btn {
margin: 0px;
font-size: 13px;
}
hr{
margin: 0.5rem 0;
display: none;
}
.action-items {
float: left;
a{
color:$secondary-color;
padding: 0 4px 0 3px;
border-right:1px solid lighten($md-color, 55%);
&:hover, &.active{
color: lighten($md-color, 15%);
}
&.icon-link {
position: absolute;
right: 0px;
top: 0px;
padding: 2px 5px 0;
margin:0 5px;
display: inline-block;
color: lighten($md-color, 15%);
border-right: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s, opacity 0.2s linear;
.material-icons{
font-size: 1.2rem;
line-height: 16px;
}
&+.icon-link{
top:30px;
transition: visibility 0.6s, opacity 0.6s linear;
visibility: hidden;
opacity: 0;
}
&+.icon-link+.icon-link{
top:60px;
transition: visibility 0.8s, opacity 0.8s linear;
visibility: hidden;
opacity: 0;
}
&+.icon-link+.icon-link+.icon-link{
top:90px;
visibility: hidden;
opacity: 0;
}
&:hover, &.active{
background:rgba(lighten($md-color,50%),.3);
border-radius: 2px;
color:$secondary-color;
}
}
}
}
}
&:hover{
.action-items{
a.icon-link {
visibility: visible;
opacity: 1;
&+.icon-link{
visibility: visible;
opacity: 1;
}
&+.icon-link+.icon-link{
visibility: visible;
opacity: 1;
}
&+.icon-link+.icon-link+.icon-link{
visibility: visible;
opacity: 1;
}
}
}
}
}
}
.recent-activity, .shared-with-me{
.cover-img{
img{
height: 120px !important;
}
}
.action-items{
.activity-text, .shared-by{
display: block;
font-size:13px;
font-weight: bold;
margin-top: 5px;
span {
color: lighten($primary-color,20%);
}
}
}
}
}
&.title-view{
.card-columns {
@media (min-width: 990px) {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
padding: 2%;
-moz-column-gap: 0px;
-webkit-column-gap: 0px;
column-gap: 0px;
.card{
padding: 10px;
text-align: left;
position: relative;
cursor: pointer;
border: 1px solid lighten($primary-color,72%);
box-shadow: none;
border-bottom:0px;
margin: -10px 0 0 0;
&:first-child{
margin: 0;
}
&:last-child{
border: 1px solid lighten($primary-color,72%);
}
&:hover{
background: lighten($primary-color,72%);
}
@media (max-width: 552px) {
float: left;
}
.cover-img{
display: none;
}
.title{
font-size: 16px;
font-weight: bold;
margin: 0px;
}
.more-details{
background: #fff;
font-size: 12px;
display: block;
hr{
display: none;
}
.info{
float: left;
}
.author-name{
display: none;
}
.sub-title, .format{
display: block;
padding: 3px 0;
}
.btn {
margin: 0px;
font-size: 13px;
}
hr{
margin: 0.5rem 0;
}
.action-items {
float: right;
vertical-align: middle;
a{
color:$secondary-color;
padding: 0 4px 0 3px;
border-right:1px solid lighten($md-color, 55%);
vertical-align: middle;
&:hover, &.active{
color: lighten($md-color, 15%);
}
&.icon-link {
padding: 2px 5px 0;
margin:0 2px;
display: inline-block;
color: lighten($md-color, 15%);
border-right: 0;
.material-icons{
font-size: 1.2rem;
}
&:hover, &.active{
background:rgba(lighten($md-color,50%),.3);
border-radius: 2px;
color:$secondary-color;
}
}
}
}
}
&:hover{
.action-items{
a.icon-link {
visibility: visible;
opacity: 1;
&+.icon-link{
visibility: visible;
opacity: 1;
}
&+.icon-link+.icon-link{
visibility: visible;
opacity: 1;
}
&+.icon-link+.icon-link+.icon-link{
visibility: visible;
opacity: 1;
}
}
}
}
}
}
.recent-activity, .shared-with-me{
.action-items{
.activity-text, .shared-by{
font-size: 13px;
font-weight: bold;
float: left;
padding: 3px 20px 0 0;
span {
color: lighten($primary-color,20%);
}
}
}
}
}
.my-favorites {
.empty-view-content-favorites{
font-size: 1.2rem;
font-weight: bold;
display: none;
text-align: center;
}
}
}
.collections {
.card {
position: relative;
}
.view-collections-btn {
display: none;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 0;
bottom: 0;
height: auto;
width: 100%;
color:$md-color;
font-weight: bold;
border: 0;
background:transparent;
}
}
.view-collections {
display: none;
padding-top: 0px !important;
}
.back-to-collection {
vertical-align: middle;
display: none;
margin: 15px 0 10px 20px;
.material-icons{
vertical-align: middle;
}
}
.dropdown-menu {
.c-inputs-stacked{
label{
margin: 5px 0;
display: inline-block;
}
}
}
}
.modal-stack-view-details{
font-size: 13px;
.info{
img{
float:left;
margin: 0 25px 0 0;
}
.author-name{
font-size: 12px;
}
.sub-title, .author-name, .format{
display: block;
padding: 3px 0;
}
}
hr{
margin: 0.5rem 0;
}
.action-items {
a{
color:$secondary-color;
padding: 0 3px 0 3px;
border-right:1px solid lighten($md-color, 55%);
&:hover, &.active{
color: lighten($md-color, 15%);
}
&.icon-link {
padding: 2px 5px 0;
margin:0 2px;
display: inline-block;
color: lighten($md-color, 15%);
border-right: 0;
&:hover, &.active{
background:rgba(lighten($md-color,50%),.3);
border-radius: 2px;
color:$secondary-color;
}
}
}
.dropup{
display: inline-block;
.share-dropdown{
width: 185px;
left:-85px;
padding: 7px;
box-shadow: 2px 2px 35px rgba(0,0,0,0.5);
border:1px solid lighten($primary-color,45%);
h3{
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.md-form {
margin-bottom: 0px;
label{
font-size: 12px;
}
.form-control {
font-size: 12px;
background: lighten($primary-color,75%);
height: 20px;
}
textarea.md-textarea {
min-height: 1rem;
background: lighten($primary-color,75%);
padding: 5px 0;
font-size: 12px;
}
}
}
}
}
}