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. 194
      css/style.css
  3. 2
      home.html

8
css/profile.css

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

194
css/style.css

@ -809,9 +809,9 @@ ol.toptrends-list { @@ -809,9 +809,9 @@ ol.toptrends-list {
font-variant: small-caps;
border-bottom: solid 1px rgba( 69, 71, 77, .1 );
margin: 0 0 5px 0;
padding-left: 5px;
padding-left: 10px;
background: #e34f42;
width: 513px;
width: 100%;
}
.postboard h2.fixed
{
@ -1253,12 +1253,24 @@ ol.toptrends-list { @@ -1253,12 +1253,24 @@ ol.toptrends-list {
}
.modal-wrapper
{
width: 580px;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
background: rgba( 255, 255, 255, 1.0 );
box-shadow: 0 0 30px rgba( 0, 0, 0, .6 );
top:10%;
left: 50%;
height: 80%;
margin-left: -290px;
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
{
position: relative;
@ -1314,73 +1326,10 @@ ol.toptrends-list { @@ -1314,73 +1326,10 @@ ol.toptrends-list {
{
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
**************************************/
.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
{
display: none;
@ -1500,19 +1449,8 @@ ol.toptrends-list { @@ -1500,19 +1449,8 @@ ol.toptrends-list {
}
/*************************************
****************** 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
{
display: none;
@ -1523,21 +1461,8 @@ ol.toptrends-list { @@ -1523,21 +1461,8 @@ ol.toptrends-list {
}
/*************************************
****************** 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
{
display: none;
@ -1548,20 +1473,8 @@ ol.toptrends-list { @@ -1548,20 +1473,8 @@ ol.toptrends-list {
}
/*************************************
****************** 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
{
display: none;
@ -1588,20 +1501,7 @@ ol.toptrends-list { @@ -1588,20 +1501,7 @@ ol.toptrends-list {
}
/*************************************
******************* 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
{
display: none;
@ -1653,6 +1553,48 @@ ol.toptrends-list { @@ -1653,6 +1553,48 @@ ol.toptrends-list {
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 ************

2
home.html

@ -491,7 +491,7 @@ @@ -491,7 +491,7 @@
<button class="postboard-news" style="display:none;"></button>
</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>

Loading…
Cancel
Save