app/styles/layout/_sidebars.scss
.feed-sidebar {
background-color: rgba(255,255,255,0);
position: relative;
top: 0;
bottom: 0;
padding: 0 0 60px 15px;
width: 300px;
margin-right: -10px;
> .sidebar-item:first-child {
.panel-heading {
margin-top: 0;
}
}
.is-sticky {
max-width: 300px;
@media screen and (max-height: 800px) {
position: relative;
top: 0;
}
}
}
@media (max-width: 1200px) {
body:not(.cover-page) {
.feed-sidebar {
display: none;
}
}
}
.sidebar-footer {
.footer-applinks {
display: flex;
justify-content: space-between;
}
.footer-s0cial {
display: inline-block;
border-top: 1px solid $divider-color;
padding-top: 10px;
margin-top: 10px;
opacity: 0.6;
}
.kitsu-social {
svg {
fill: $body-text-color;
width: 20px;
transition: color .2s;
&:hover {
fill: $body-link-color;
}
}
}
.footer-links {
font-size: 12px;
.site-link {
margin-right: 5px;
color: $body-text-color;
}
}
}
.panel-heading {
font-size: 14px;
padding-bottom: 10px;
border-bottom: 1px solid darken($background-color,5);
margin-top: 30px;
}
.about-me-panel {
@include word-break();
font-size: 14px;
&:first-child .panel-heading {
margin-top: 0;
}
p {
white-space: pre-line;
}
}
.about-me-stats {
padding: 0;
margin: 0;
margin-bottom: 20px;
list-style-type: none;
font-size: 12px;
@media (max-width: 767px) {
margin-bottom: 0px;
}
}
.about-stat {
margin-bottom: 5px;
}
.waifu-wrapper {
width: 20px;
height: 20px;
display: inline-block;
overflow: hidden;
border-radius: 3px;
position: relative;
top: 5px;
}
.stat-icon {
width: 15px;
display: inline-block;
svg {
width: 10px;
position: relative;
path {
fill: $body-text-color;
}
}
}
.about--location {
svg {
position: relative;
top: 2px;
}
}
.about--cal {
top: 1px;
}
.favorite-placeholder {
display: inline-block;
width: 100%;
text-align: center;
font-size: 0.9em;
color: $body-text-color;
}
.panel-btn {
float: right;
font-weight: normal;
line-height: 1;
color: #333;
margin-left: 10px;
border: 1px solid #c5c5c5;
padding: 4px 5px;
position: relative;
top: -2px;
font-size: 12px;
}
.favorite-series-panel {
.nav {
text-align: center;
.active {
color: $body-text-color;
background: $divider-color;
border-color: $divider-color;
&:hover {
background: $divider-color;
border-color: $divider-color;
}
}
}
.nav-tabs {
background-color: $background-color;
border-bottom: 1px solid $divider-color;
}
a {
font-size: 12px;
}
}
.favorite-placeholder {
padding: 15px 15px 20px 15px;
margin-top: 20px;
.button {
font-size: 12px;
&:hover {
color: $white;
}
}
}
.favorite-media-grid {
margin: 15px -2px 0;
.button {
width: 100%;
display: block;
background: #fff1;
border: 1px solid $divider-color;
color: $body-text-color;
font-size: 12px;
&:hover {
color: $white;
}
}
}
.favorite-item {
padding: 0 .5rem .5rem 0;
a {
border-radius: 3px;
overflow: hidden;
display: inline;
}
img {
width: 100%;
}
}
.favorite-characters-panel, .media--related {
.favorite-item a {
width: 100%;
}
.favorite-placeholder {
margin-top: 10px;
}
a {
font-size: 12px;
}
}
.favorite-series-panel, .favorite-characters-panel {
margin-bottom: 20px;
.button--secondary {
width: 100%;
margin-top: 10px;
padding: 5px;
&:hover {
color: $white;
}
}
}
@media (max-width: 1199px) {
.cover-page {
.feed-stream {
width: 100%;
}
.feed-sidebar {
order: -1;
max-width: 100%;
min-width: 100%;
padding-bottom: 2rem;
}
.user-favorites {
.favorite-series-panel {
display: flex;
flex-wrap: wrap;
.panel-heading {
width: 60%;
}
.nav-tabs {
width: 40%;
align-self: flex-start;
justify-content: flex-end;
display: flex;
margin-top: -6px;
}
.tab-content {
flex-shrink: 0;
width: 100%;
margin-top: -10px;
}
}
.favorite-series-panel,
.favorite-characters-panel {
margin-bottom: 0;
.panel-heading {
margin-top: 0;
height: 26px;
}
}
}
.sidebar-footer {
display: none;
}
}
}
@media (max-width: 1199px) and (min-width: 768px) {
.cover-page {
.feed-stream {
max-width: calc(100% - 250px);
}
.feed-sidebar {
padding-bottom: 0px;
.about-me-panel {
display: flex;
flex-wrap: wrap;
flex-direction: row;
> h6 {
flex-shrink: 0;
width: 100%;
}
> p {
order: 2;
padding-left: 1rem;
}
> ul {
min-width: 300px;
max-width: 300px;
}
> p,
> ul {
display: inline-block;
margin: 0;
vertical-align: top;
flex: 1;
}
}
}
.user-stats {
display: flex;
flex-direction: row;
.user-stats-panel {
flex: 1;
&:nth-child(2) {
margin-left: 1rem;
}
}
}
.user-favorites {
display: flex;
flex-direction: row;
> div {
flex: 1;
}
.favorite-characters-panel {
margin-left: 1rem;
// Force character images to be same height as media posters as they are slightly taller.
img {
height: 151.2px;
width: auto;
@media (min-width: 992px) {
height: 109.55px;
}
}
}
}
}
}
@media (max-width: 991px) and (min-width: 768px) {
.cover-page {
.feed-stream {
max-width: 100%;
}
.about-me-panel {
padding-bottom: 1rem;
}
.user-favorites {
.favorite-characters-panel {
img {
height: 114.86px;
}
}
}
}
}
@media (max-width: 767px) {
.cover-page {
.feed-stream {
max-width: 100%;
}
.feed-sidebar {
padding-bottom: 1rem;
}
.user-stats {
.graph-legend {
width: 100%;
margin-left: 1rem;
td:last-of-type {
width: 100%;
.legend-bar-container {
width: 100%;
}
}
}
}
.user-favorites {
padding-bottom: 1rem;
.favorite-characters-panel {
.panel-heading {
margin-top: 1.25rem;
}
}
}
}
}
.group-about-me-panel {
@include word-break();
font-size: 14px;
p {
white-space: pre-line;
}
}
@media (max-width: 1199px) {
.onboarding-mobile {
.rc-progress-line-path {
stroke-width: 2;
}
}
}