Browse Source

streamlindes themeing of modals (rounded corners and size)

master
Julian Steinwachs 10 years ago
parent
commit
52df03c99d
  1. 8
      css/profile.css
  2. 190
      css/style.css
  3. 2
      home.html

8
css/profile.css

@ -177,7 +177,7 @@
} }
/************************************* /*************************************
****************** PROFILE MODAL ****************** PROFILE MODAL
**************************************/ *************************************
.profile-modal .modal-wrapper .profile-modal .modal-wrapper
{ {
width: 580px; width: 580px;
@ -186,13 +186,13 @@
position: absolute; position: absolute;
top:10%; top:10%;
height: 80%; height: 80%;
margin-left: -300px; margin-left: -290px;
} }*/
.profile-modal .modal-content .profile-modal .modal-content
{ {
padding: 3px; padding: 3px;
height: 90%; height: 100%;
} }
#msngrswr { #msngrswr {
display: none; display: none;

190
css/style.css

@ -809,9 +809,9 @@ ol.toptrends-list {
font-variant: small-caps; font-variant: small-caps;
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); border-bottom: solid 1px rgba( 69, 71, 77, .1 );
margin: 0 0 5px 0; margin: 0 0 5px 0;
padding-left: 5px; padding-left: 10px;
background: #e34f42; background: #e34f42;
width: 513px; width: 100%;
} }
.postboard h2.fixed .postboard h2.fixed
{ {
@ -1253,12 +1253,24 @@ ol.toptrends-list {
} }
.modal-wrapper .modal-wrapper
{ {
width: 580px;
border-radius: 5px;
overflow: hidden;
position: absolute; position: absolute;
top: 50%; top:10%;
left: 50%; left: 50%;
background: rgba( 255, 255, 255, 1.0 ); height: 80%;
margin-left: -290px;
box-shadow: 0 0 30px rgba( 0, 0, 0, .6 ); box-shadow: 0 0 30px rgba( 0, 0, 0, .6 );
background: rgba( 255, 255,255, 1.0 );
z-index: 3;
}
.modal-content{
height: 100%;
overflow-y: auto;
} }
.modal-header .modal-header
{ {
position: relative; position: relative;
@ -1314,73 +1326,10 @@ ol.toptrends-list {
{ {
padding: 5px 20px; padding: 5px 20px;
} }
/*************************************
*************** FOLLOWING-CONFIG MODAL
**************************************/
.following-config-modal .modal-wrapper
{
top: 43%;
left: 25%;
width: 50%;
}
.following-config-modal .modal-content
{
padding: 10px;
text-align: center;
}
.following-config-modal .modal-buttons
{
display: none;
}
.following-config-method-buttons
{
padding: 10px;
}
/*************************************
****************** RETWIST POSTS MODAL
**************************************/
.reTwist .modal-wrapper
{
width: 520px;
margin: -100px 0 0 -260px;
}
.reTwist .post-expand,
.reTwist .post-interactions
{
display: none;
}
/*************************************
****************** REPLY POSTS MODAL
**************************************/
.reply .modal-wrapper
{
width: 520px;
margin: -100px 0 0 -260px;
}
.reply .modal-buttons
{
display: none;
}
.reply .post-expand,
.reply .post-interactions
{
display: none;
}
/************************************* /*************************************
****************** DIRECT MESSAGES MODAL ****************** DIRECT MESSAGES MODAL
**************************************/ **************************************/
.directMessages .modal-wrapper
{
width: 540px;
height: 470px;
margin: -200px 0 0 -280px;
overflow-x: hidden;
}
.directMessages .modal-content
{
overflow-y: auto;
height: 300px;
}
.directMessages .modal-buttons .directMessages .modal-buttons
{ {
display: none; display: none;
@ -1500,19 +1449,8 @@ ol.toptrends-list {
} }
/************************************* /*************************************
****************** HASHTAG MODAL ****************** HASHTAG MODAL
**************************************/ *************************************/
.hashtag-modal .modal-wrapper
{
width: 560px;
height: 470px;
margin: -200px 0 0 -280px;
overflow: hidden;
}
.hashtag-modal .modal-content
{
overflow-y: auto;
height: 440px;
}
.hashtag-modal .modal-buttons .hashtag-modal .modal-buttons
{ {
display: none; display: none;
@ -1523,21 +1461,8 @@ ol.toptrends-list {
} }
/************************************* /*************************************
****************** CONVERSATION MODAL ****************** CONVERSATION MODAL
**************************************/ *************************************/
.conversation-modal .modal-wrapper
{
position: absolute;
width: 560px;
height: 80%;
top: 10%;
margin: 0 0 0 -330px;
overflow: hidden;
}
.conversation-modal .modal-content
{
overflow-y: auto;
height: 90%;
}
.conversation-modal .modal-buttons .conversation-modal .modal-buttons
{ {
display: none; display: none;
@ -1548,20 +1473,8 @@ ol.toptrends-list {
} }
/************************************* /*************************************
****************** FOLLOWING MODAL ****************** FOLLOWING MODAL
**************************************/ ************************************/
.following-modal .modal-wrapper
{
width: 560px;
height: 470px;
margin: -200px 0 0 -280px;
overflow-x: hidden;
}
.following-modal .modal-content
{
padding: 15px;
height: 400px;
overflow-y: auto;
}
.following-modal .modal-buttons .following-modal .modal-buttons
{ {
display: none; display: none;
@ -1588,20 +1501,7 @@ ol.toptrends-list {
} }
/************************************* /*************************************
******************* WHO TO FOLLOW MODAL ******************* WHO TO FOLLOW MODAL
**************************************/ *************************************/
.who-to-follow-modal .modal-wrapper
{
width: 560px;
height: 470px;
margin: -200px 0 0 -280px;
overflow-x: hidden;
}
.who-to-follow-modal .modal-content
{
padding: 15px;
height: 400px;
overflow-y: auto;
}
.who-to-follow-modal .modal-buttons .who-to-follow-modal .modal-buttons
{ {
display: none; display: none;
@ -1653,6 +1553,48 @@ ol.toptrends-list {
margin-left:-300px; margin-left:-300px;
} }
/*************************************
*************** FOLLOWING-CONFIG PROMPT
**************************************/
.following-config-modal .modal-content
{
padding: 10px;
text-align: center;
}
.following-config-modal .modal-buttons
{
display: none;
}
.following-config-method-buttons
{
padding: 10px;
}
/*************************************
****************** RETWIST POSTS PROMPT
**************************************/
.reTwist .post-expand,
.reTwist .post-interactions
{
display: none;
}
/*************************************
****************** REPLY POSTS PROMPT
**************************************/
.reply .modal-buttons
{
display: none;
}
.reply .post-expand,
.reply .post-interactions
{
display: none;
}
/************************************* /*************************************
****************** LOADER ************ ****************** LOADER ************

2
home.html

@ -491,7 +491,7 @@
<button class="postboard-news" style="display:none;"></button> <button class="postboard-news" style="display:none;"></button>
</h2> </h2>
<span class="no-posts-found-message" style="display:none;">There aren't any posts with this hashtag.</span> <span class="no-posts-found-message" style="display:none;">Couldn't find any posts with this hashtag. Still searching.</span>
<ol id="profile-posts" class="postboard-posts"> <ol id="profile-posts" class="postboard-posts">
</ol> </ol>

Loading…
Cancel
Save