app/styles/_home.scss
.content-wrapper.home-view-content-wrapper {
opacity: 1;
transition: all 0.5s ease-in-out;
> .content-container {
z-index: 500;
position: relative;
transition: all 0.6s ease-in-out;
margin-left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
@media (min-width: 0px) and (max-width: 991px) {
margin-left: auto;
transform: translateX(0);
}
}
> .content-container.moved-right {
transition: all 0.6s ease-in-out 0.3s;
margin-left: 100%;
transform: translateX(-100%);
-ms-transform: translateX(-100%);
z-index: 499;
}
}
.content-wrapper.home-view-content-wrapper.ng-hide {
opacity: 0;
transition: all 0.5s ease-in-out;
}
/* Left user info */
.left-result-container {
@media (min-width: 992px) and (max-width: 1200px){
padding-left: 0;
padding-right: 20px;
}
@media (min-width: 0px) and (max-width: 991px) {
position: relative;
padding: 20px;
}
position: absolute;
padding: 10px 0 0 0;
left: 0;
transition: all 0.6s ease-in-out;
z-index: 501;
.home-user-info {
transition: all 0.3s ease-in-out;
}
}
.left-result-container.moved-right {
background: white;
transition: all .6s ease-in-out .3s;
left: calc(100% - 270px);
width: 270px;
padding: 7px;
.home-user-info {
border: 0px solid transparent;
transition: all 0.3s ease-in-out 0.6s;
margin-top: 10px;
}
.switch-to-map {
opacity: 0;
transition: all .3s ease-in-out;
span {
opacity: 0;
}
}
.switch-to-timeline-text {
opacity: 1;
transition: all 0.3s ease-in-out 0.9s;
span {
opacity: 1;
}
}
.followers-list-container {
opacity: 0;
transition: all .3s ease-in-out;
}
.home-user-info .blue-background-placeholder img {
height: 100%;
}
}
.home-user-info {
border: 1px solid #e1e8ed;
margin-top: 10px;
border-radius: 6px;
background: white;
.blue-background-placeholder {
position: relative;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
height: 90px;
background-color: $search-twitter-blue;
overflow: hidden;
img {
width: 100%;
}
}
.top-content {
position: relative;
margin-top: -20px;
margin-left: 10px;
img {
width: 80px;
height: 80px;
display: inline-block;
vertical-align: top;
border: 4px solid white;
border-radius: 9px;
margin-left:-2%;
}
.following-text {
float: right;
margin-right: 20px;
margin-top: 40px;
pointer-events: none;
}
.name-and-screen-name {
position: relative;
top: -5px;
display: inline-block;
vertical-align: bottom;
font-size:13px;
margin-left: 5px;
span {
display: block;
}
.home-user-screen-name {
margin-top: -5px;
display: inline-block;
font-size: 13px;
color: rgb(51, 51, 51);
}
.twitter-api-user-location {
display: inline-block;
margin-left: 4px;
font-size: 12px;
color: $search-grey;
}
.home-user-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 3px;
width: 160px;
box-sizing: border-box;
overflow: hidden;
color: rgb(51, 51, 51);
}
.home-user-follows-text {
color: #8899a6;
font-size: 11px;
font-weight: 400;
margin-left: 5px;
text-transform: uppercase;
float: right;
margin-top: 7px;
}
}
}
.bottom-content {
margin-top: 6px;
display: block;
> div {
display: inline-block;
width: 32%;
text-align: left;
overflow: hidden;
padding: 0 5px 0px 5px;
box-sizing: border-box;
&:first-child {
padding-left: 10px;
}
&:last-child {
padding-right: 10px;
}
a {
text-align: left;
font-size: 12px;
color: #8c9ca9;
text-transform: uppercase;
line-height: 22px;
span {
color: #2b7bb9;
font-size: 18px;
font-weight: 500;
position: relative;
top: -5px;
}
}
}
}
.user-info-text {
padding: 2px 10px 12px 10px;
font-size: 14px;
color: $search-grey;
line-height: 17px;
}
}
.home-user-trends {
border: 1px solid #e1e8ed;
margin-top: 10px;
background: white;
border-radius: 6px;
padding: 15px 14px;
.trend-title {
margin: 0;
color: #66757f;
font-size: 25px;
font-weight: 500;
}
#home-trend-list {
margin-top: 5px;
margin: 0;
padding: 10px 0 5px 0;
li {
margin: 0;
padding: 0;
a {
font-size: 15px;
display: inline-block;
margin-bottom: 4px;
}
}
}
}
.switchers {
position: relative;
height: 30px;
background: #55ACEE;
border-radius: 6px;
}
.switch-to-map {
border-radius: 6px;
width: 100%;
text-align: center;
transition: all .3s ease-in-out .6s;
opacity: 1;
display: inline-block;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 7px 6px;
background-color: #55ACEE;
color: white;
span {
opacity: 1;
font-size: 14px;
&:nth-child(2) {
margin-left: 10px;
}
}
&:hover {
cursor: pointer;
}
}
.switch-to-timeline-text {
border-radius: 6px;
width: 100%;
text-align: center;
transition: all .3s ease-in-out .6s;
opacity: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 7px 6px;
background-color: #55ACEE;
color: white;
span {
opacity: 0;
font-size: 14px;
&:nth-child(2) {
margin-left: 10px;
}
}
&:hover {
cursor: pointer;
}
}
.followers-list-container {
opacity: 1;
transition: all .3s ease-in-out .6s;
display: block;
padding: 10px;
background-color: white;
margin-top: 10px;
border-radius: 6px;
border: 1px solid #e1e8ed;
h2 {
font-size: 18px;
color: $search-grey;
margin-top: 2px;
margin-bottom: 10px;
text-transform: uppercase;
position: relative;
span {
float: right;
font-size: 15px;
color: $search-twitter-blue;
text-transform: initial;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
> div {
> a {
width: 25%;
@media (min-width: 769px) and (max-width: 992px) {
width: 8%;
}
@media (min-width: 0) and (max-width: 768px) {
width: 45px;
}
display: inline-block;
padding: 3px;
img {
width: 100%;
border-radius: 3px;
}
}
}
}
/* Center result */
.center-result-container {
z-index: 502;
transition: all 0.6s ease-in-out;
margin-left: 25%;
position: relative;
top: 0;
margin-top: 10px;
@media (min-width: 992px) and (max-width: 1200px){
padding-left: 0;
padding-right: 0;
margin-left: 33%
}
@media (min-width: 0px) and (max-width: 991px) {
margin-left: 0;
}
.cms-view {
transition: all 0.3s ease-in-out;
padding: 0 0 0 0;
}
}
.center-result-container.moved-right {
background-color: white;
transition: all .6s ease-in-out .3s;
margin-left: calc(100% - 255px);
position: relative;
top: 195px;
width: 270px;
> .cms-view {
transition: all 0.3s ease-in-out 0.6s;
margin: 0;
.main-result-container .statuses-container > div:first-child .item{
border-top: 1px solid #E1E8ED;
}
}
}
.main-result-container {
.statuses-container {
> div:first-child {
.item {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
}
padding: 0;
.item {
background-color: white;
padding: 15px 10px;
border-bottom: 1px solid #E1E8ED;
margin-bottom: 0;
.home-user-screen-name {
display: inline-block;
font-weight: 500;
color: grey;
font-size: 12px;
}
.friend-profile-img {
border: none;
padding: 0 !important;
}
.home-tweet-text {
padding-bottom: 0;
font-size: 13px;
line-height: 18px;
}
}
}
}
.timeline-more-result {
width: 100%;
background: #F5F8FA;
border: none;
border: 1px solid #E1E8ED;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
font-size: 15px;
text-align: center;
padding: 13px;
&:hover {
font-weight: bold;
color: $search-twitter-blue;
}
}
/* Right dashboard */
.right-result-container {
padding-left: 0;
@media (min-width: 992px) {
padding-right: 0;
}
opacity: 1;
transition: all .3s ease-in-out .6s;
position: absolute;
right: 0;
}
.right-result-container.moved-right {
transition: all .3s ease-in-out;
opacity: 0;
}
/* Anonymous content */
.map-view {
.anonymous-session-content {
margin-top: -96px;
}
}
.anonymous-session-content {
min-height: 100vh;
margin-top: -46px;
padding-top: 46px;
.blue-bar {
width: 100%;
padding: 14.5px;
font-weight: 300;
font-size: 26px;
color: white;
background-color: $search-twitter-blue;
text-align: center;
min-height: 55px;
box-sizing: border-box;
}
.anonymous-content-container
{
text-align: center;
.wassup-title {
margin: 65px 0 0 0;
text-align: center;
font-size: 43px;
}
> div {
text-align: center;
}
.search-form-wrapper {
position: relative;
width: 99%;
display: inline-block;
max-width: 650px;
> span {
position: absolute;
top: 17.5px;
right: 0;
display: inline-block;
font-size: 16px;
font-weight: 600;
color: white;
background-color: $search-twitter-blue;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.15));
border: 1px solid #3b88c3;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
padding: 9px 15px;
border-radius: 4px;
}
padding-right: 106px;
}
.global-search-container {
width: 100%;
margin-top: 10px;
#global-search-input {
width: 100%;
padding: 7px 9px;
font-size: 13px;
border-radius: 0px;
line-height: 20px;
background: white;
&:focus {
box-shadow: $search-twitter-blue 0px 0px 0px 1px inset;
}
}
i {
display: none;
}
}
.search-hints {
margin: 15px 0 0 0;
text-align: center;
.operator-hint, a {
color: $search-twitter-blue;
display: inline-block;
&:hover {
cursor: pointer;
}
}
}
.trend-container {
margin: 60px 0 0 0;
h4 {
color: $search-grey;
padding: 0;
font-size: 18px;
margin: 0;
}
#horizontal-trend-list {
display: block;
margin: 10px 0 0 0;
padding: 0;
text-align: center;
li {
display: inline-block;
&:not(:first-child) {
margin: 7px 0 0 22px;
}
}
}
}
}
.operator-overlay-container {
position: fixed;
background-color: rgba(1,1,1, 0.75);
width: 100%;
height: 100%;
top: 0;
z-index: 1031;
.operator-overlay {
border-radius: 8px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 80%;
max-width: 700px;
.header {
font-size: 18px;
width: 100%;
color: $search-grey;
margin: 0;
padding: 13px 0;
position: relative;
text-align: center;
.close-overlay {
position: absolute;
right: 17px;
top: 9px;
font-size: 24px;
color: $search-grey;
&:hover {
cursor: pointer;
}
}
border-bottom: 1.5px solid $search-grey-border;
}
.table-container {
width: 100%;
padding: 15px;
table, th, td {
border: 1px solid $search-grey-border;
}
table {
width: 100%;
th {
padding: 10px;
font-size: 17px;
color: black;
background-color: #F5F8FA;
}
td {
padding: 10px;
font-size: 15px;
color: $search-grey;
line-height: 18px;
vertical-align: top;
}
}
}
}
}
}
/* Credits */
.credits-container {
color: #8899a6;
background: white;
padding: 15px;
border: 1px solid rgb(225, 232, 237);
margin-bottom: 20px;
font-size: 15px;
position: absolute;
bottom: 0;
width: 92%;
left: 50%;
max-width: 1200px;
transform: translateX(-50%);
border-radius: 4px;
> div {
display: inline-block;
> span {
color: #8899a6;
display: inline-block;
position: relative;
top: -2px;
opacity: 0;
}
}
.left-credits, .right-credits {
float: left;
a {
color: #8899a6;
font-size: 12px;
&:first-child {
display: inline-block;
border-right: 1px solid #8899a6;
padding-right: 9px;
}
}
}
}
.right-result-container {
.credits-container {
padding: 13px;
position: initial;
transform: none;
width: 100%;
border-radius: 6px;
margin-top: 10px;
line-height: 17px;
a {
color: #8899a6;
font-size: 12px;
}
}
}
// Embed content
.home-debugged-link-container {
overflow: hidden;
.article-container {
> a {
display: block;
}
display: block;
.article-img-container {
width: 100%;
max-height: 285px;
overflow: hidden;
img {
width: 100%;
margin: 10px 0;
}
}
.article-title, .article-author {
margin-top: 10px;
color: black;
font-size: 15px;
text-transform: capitalize;
}
.article-author {
font-weight: 600;
margin: 10px 0;
}
}
}