@ -1,53 +1,3 @@
. columns-area {
display : flex ;
flex : 1 1 auto ;
flex-direction : row ;
justify-content : flex-start ;
position : relative ;
& __panels {
display : flex ;
justify-content : center ;
width : 100 % ;
height : 100 % ;
& __pane {
height : 100 % ;
pointer-events : none ;
display : flex ;
justify-content : flex-end ;
padding-top : 15 px ;
& - - start {
justify-content : flex-start ;
}
& __inner {
width : 265 px ;
pointer-events : auto ;
height : 100 % ;
}
}
& __main {
display : flex ;
flex-direction : column ;
box-sizing : border-box ;
width : 100 % ;
max-width : 600 px ;
padding : 0 20 px ;
@media screen and ( max-width : 580 px ) {
padding : 0 ;
}
@media screen and ( min-width : 896 px ) {
margin : 0 20 px ;
padding : 0 ;
}
}
}
}
. column {
width : 350 px ;
@ -59,10 +9,6 @@
}
@media screen and ( min-width : 631 px ) {
. columns-area {
padding : 0 ;
}
. column {
flex : 0 0 auto ;
padding : 10 px ;
@ -77,154 +23,6 @@
padding-right : 10 px ;
}
}
. columns-area > div {
. column {
padding-left : 5 px ;
padding-right : 5 px ;
}
}
}
. columns-area {
display : block ;
flex-direction : column ;
width : 100 % ;
margin : 0 auto ;
padding-top : 15 px ;
@media screen and ( max-width : 580 px ) {
padding-top : 0 ;
}
. column {
width : 100 % ;
padding : 0 ;
}
. search__input {
line-height : 18 px ;
font-size : 16 px ;
padding : 15 px ;
padding-right : 30 px ;
border-radius : 0 ;
background-color : var ( -- foreground-color ) ;
}
. search__icon . fa {
top : 15 px ;
}
@media ( max-width : 580 px ) {
. timeline-compose-block {
border-radius : 0 ;
margin-top : 10 px ;
}
}
@media screen and ( min-width : 630 px ) {
. detailed-status {
padding : 15 px ;
. media-gallery ,
. video-player {
margin-top : 15 px ;
}
}
. compose-form {
padding : 15 px ;
}
. status {
padding : 15 px 15 px 15 px ( 48 px + 15 px * 2 ) ;
min-height : 48 px + 2 px ;
& __avatar {
left : 15 px ;
top : 17 px ;
}
& __content {
padding-top : 5 px ;
}
& __prepend {
margin-left : 48 px + 15 px * 2 ;
padding-top : 15 px ;
}
& __prepend-icon-wrapper {
left : - 32 px ;
}
. media-gallery ,
. video-player {
margin-top : 10 px ;
}
}
. account {
padding : 15 px 10 px ;
}
. notification {
& __message {
margin-left : 48 px + 15 px * 2 ;
padding-top : 15 px ;
}
& __favourite-icon-wrapper {
left : - 32 px ;
}
. status {
padding-top : 8 px ;
}
. account {
padding-top : 8 px ;
}
. account__avatar-wrapper {
margin-left : 17 px ;
margin-right : 15 px ;
}
}
}
}
/ / This controls where the left column breaks .
@media screen and ( max-width : 600 px + ( 285 px * 1 ) + ( 10 px * 1 )) {
. columns-area__panels__pane--left {
display : none ;
}
}
@media screen and ( max-width : 600 px + ( 285 px * 2 ) + ( 10 px * 2 )) {
. columns-area__panels__pane--right {
display : none ;
}
}
. column-back-button {
background : var ( -- accent-color--faint ) ;
color : var ( -- highlight-text-color ) ;
cursor : pointer ;
flex : 0 0 auto ;
font-size : 16 px ;
line-height : inherit ;
border : 0 ;
text-align : unset ;
padding : 15 px ;
margin : 0 ;
z-index : 3 ;
outline : 0 ;
& : hover ,
& : focus {
text-decoration : underline ;
}
}
. column-link {
@ -289,24 +87,6 @@
cursor : default ;
}
. columns-area . column {
@include standard-panel ;
& - - transparent {
background : transparent ;
border-radius : 0 ;
box-shadow : none ;
}
@media screen and ( max-width : 580 px ) {
border-radius : 0 ;
. material-status__status {
border-radius : 0 ;
}
}
}
. column-header__wrapper {
position : relative ;
flex : 0 0 auto ;
@ -611,10 +391,6 @@
}
}
. column-link--transparent . icon-with-badge__badge {
border-color : var ( -- background-color ) ;
}
. column__switch . audio-toggle {
position : absolute ;
z-index : 4 ;
@ -663,79 +439,3 @@
}
}
}
. column-title {
text-align : center ;
padding : 40 px ;
. logo {
fill : var ( -- primary-text-color ) ;
width : 50 px ;
margin : 0 auto ;
margin-bottom : 40 px ;
}
h3 {
font-size : 24 px ;
line-height : 1 .5 ;
font-weight : 700 ;
margin-bottom : 10 px ;
}
p {
font-size : 16 px ;
line-height : 24 px ;
font-weight : 400 ;
color : var ( -- primary-text-color--faint ) ;
}
}
. column-actions {
display : flex ;
align-items : center ;
justify-content : center ;
padding : 40 px ;
padding-top : 40 px ;
& __background {
position : absolute ;
left : 0 ;
bottom : 0 ;
height : 220 px ;
width : auto ;
}
}
. column-list {
position : relative ;
& __empty-message {
padding : 0 20 px ;
}
}
. follow_subhead {
margin : 50 px 0 ;
font-size : 20 px ;
}
/ / Pull to refresh
. columns-area . column {
. ptr ,
. ptr__children {
background : var ( -- foreground-color ) ;
border-bottom-left-radius : 10 px ;
border-bottom-right-radius : 10 px ;
@media screen and ( max-width : 580 px ) {
border-radius : 0 ;
}
}
& - - transparent {
. ptr ,
. ptr__children {
background : transparent ;
}
}
}