"vier": Several design changes. New option for coloured network items.
This commit is contained in:
Michael Vogel
parent
37edb3079d
commit
2b5345323f
6 changed files with 58 additions and 46 deletions
|
|
@ -39,7 +39,8 @@ function theme_admin_post(&$a){
|
|||
function vier_form(&$a, $style){
|
||||
$styles = array(
|
||||
"shadow"=>"Shadow",
|
||||
"flat"=>"Flat"
|
||||
"flat"=>"Flat",
|
||||
"netcolour"=>"Coloured Networks"
|
||||
);
|
||||
$t = get_markup_template("theme_settings.tpl" );
|
||||
$o .= replace_macros($t, array(
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.icon.s10 {
|
||||
font-size: 1em;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.icon.s16 {
|
||||
font-size: 1.2em;
|
||||
|
|
|
|||
34
view/theme/vier/netcolour.css
Normal file
34
view/theme/vier/netcolour.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.tread-wrapper {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.twit {
|
||||
/* background-color: #FFFAFA; */
|
||||
background-color: #fafeff;
|
||||
}
|
||||
.pump {
|
||||
/* background-color: #FAFFFA; */
|
||||
background-color: #fcfffa;
|
||||
}
|
||||
.face {
|
||||
/* background-color: #FAFAFF; */
|
||||
background-color: #fafcff;
|
||||
}
|
||||
.feed {
|
||||
/* background-color: #FFFFFA; */
|
||||
background-color: #fffdfa;
|
||||
}
|
||||
.dspr {
|
||||
background-color: #FFFAFF;
|
||||
}
|
||||
.dfrn {
|
||||
background-color: #FAFAFA;
|
||||
}
|
||||
.stat {
|
||||
/* background-color: #FAFFFF; */
|
||||
background-color: #fffafd;
|
||||
}
|
||||
.mail {
|
||||
/* background-color: #FFFFF9; */
|
||||
background-color: #fffafa;
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +125,8 @@ img {
|
|||
background-repeat: no-repeat;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
/* display: block; */
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding: 1px;
|
||||
color: #999;
|
||||
|
|
@ -1116,18 +1117,18 @@ section.minimal {
|
|||
/* wall item */
|
||||
.tread-wrapper {
|
||||
/* border-bottom: 1px solid #BDCDD4; */
|
||||
border-bottom: 1px solid #D2D2D2;
|
||||
border-bottom: 1px solid #D2D2D2;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 1px 1px 6px -3px rgba(0, 0, 0, 0.7);
|
||||
background-color: #FAFaFa;
|
||||
background-color: #FFFFFF;
|
||||
/* width: 755px; */
|
||||
}
|
||||
.wall-item-decor {
|
||||
position: absolute;
|
||||
left: 755px;
|
||||
left: calc(100% - 7px);
|
||||
left: calc(100% - 16px);
|
||||
/* top: -10px; */
|
||||
width: 16px;
|
||||
}
|
||||
|
|
@ -1157,15 +1158,19 @@ border-bottom: 1px solid #D2D2D2;
|
|||
.wall-item-bottom {
|
||||
/* font-size: 14px; */
|
||||
}
|
||||
.wall-item-container .wall-item-bottom {
|
||||
opacity: 0;
|
||||
/* .wall-item-container .wall-item-bottom { */
|
||||
.wall-item-container .wall-item-links,
|
||||
.wall-item-container .wall-item-actions {
|
||||
opacity: 0.2;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
-ms-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.wall-item-container:hover .wall-item-bottom {
|
||||
/* .wall-item-container:hover .wall-item-bottom { */
|
||||
.wall-item-container:hover .wall-item-links,
|
||||
.wall-item-container:hover .wall-item-actions {
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
|
|
@ -1448,37 +1453,6 @@ border-bottom: 1px solid #D2D2D2;
|
|||
padding-right: 12px; */
|
||||
}
|
||||
|
||||
.twit {
|
||||
/* background-color: #FFFAFA; */
|
||||
background-color: #fafeff;
|
||||
}
|
||||
.pump {
|
||||
/* background-color: #FAFFFA; */
|
||||
background-color: #fcfffa;
|
||||
}
|
||||
.face {
|
||||
/* background-color: #FAFAFF; */
|
||||
background-color: #fafcff;
|
||||
}
|
||||
.feed {
|
||||
/* background-color: #FFFFFA; */
|
||||
background-color: #fffdfa;
|
||||
}
|
||||
.dspr {
|
||||
background-color: #FFFAFF;
|
||||
}
|
||||
.dfrn {
|
||||
background-color: #FAFAFA;
|
||||
}
|
||||
.stat {
|
||||
/* background-color: #FAFFFF; */
|
||||
background-color: #fffafd;
|
||||
}
|
||||
.mail {
|
||||
/* background-color: #FFFFF9; */
|
||||
background-color: #fffafa;
|
||||
}
|
||||
|
||||
#profile-jot-form {
|
||||
box-shadow: 1px 1px 6px -3px #666;
|
||||
background-color: #fafafa;
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@
|
|||
{{if $item.thread_level!=1}}<div class="children">{{/if}}
|
||||
|
||||
<div class="wall-item-decor">
|
||||
<span class="icon s22 star {{$item.isstarred}}" id="starred-{{$item.id}}" title="{{$item.star.starred}}">{{$item.star.starred}}</span>
|
||||
{{if $item.lock}}<span class="icon s22 lock fakelink" onclick="lockview(event,{{$item.id}});" title="{{$item.lock}}">{{$item.lock}}</span>{{/if}}
|
||||
<!-- <span class="icon s22 star {{$item.isstarred}}" id="starred-{{$item.id}}" title="{{$item.star.starred}}">{{$item.star.starred}}</span> -->
|
||||
<!-- {{if $item.lock}}<span class="icon s22 lock fakelink" onclick="lockview(event,{{$item.id}});" title="{{$item.lock}}">{{$item.lock}}</span>{{/if}} -->
|
||||
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
|
||||
</div>
|
||||
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a> <!-- {{$item.vwall}} -->{{/if}}
|
||||
<span class="wall-item-ago">
|
||||
{{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.href}}" style="color: #999">{{$item.created}}</a>{{else}} {{$item.created}} {{/if}}
|
||||
{{if $item.lock}}<span class="fakelink" style="color: #999" onclick="lockview(event,{{$item.id}});">{{$item.lock}}</span> {{/if}}
|
||||
</span>
|
||||
{{if $item.lock}}<span class="icon s10 lock fakelink" onclick="lockview(event,{{$item.id}});" title="{{$item.lock}}">{{$item.lock}}</span>{{/if}}
|
||||
<span class="wall-item-network" title="{{$item.app}}">
|
||||
{{$item.network_name}}
|
||||
</span>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
</div>
|
||||
<div class="wall-item-bottom">
|
||||
<div class="wall-item-links">
|
||||
{{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.href}}"><i class="icon-link icon-large"></i></a>{{/if}}
|
||||
{{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.orig}}"><i class="icon-link icon-large"></i></a>{{/if}}
|
||||
</div>
|
||||
<div class="wall-item-actions">
|
||||
<div class="wall-item-actions-social">
|
||||
|
|
@ -100,8 +100,9 @@
|
|||
<span id="comment-{{$item.id}}" class="fakelink togglecomment" onclick="openClose('item-comments-{{$item.id}}');"><i class="icon-comment"></i></span>
|
||||
{{/if}}{{/if}}
|
||||
{{if $item.vote}}
|
||||
{{if $item.vote.like}}
|
||||
<a href="#" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="dolike({{$item.id}},'like'); return false"><i class="icon-thumbs-up icon-large"></i></a>
|
||||
{{if $item.vote.dislike}}
|
||||
{{/if}}{{if $item.vote.dislike}}
|
||||
<a href="#" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="dolike({{$item.id}},'dislike'); return false"><i class="icon-thumbs-down icon-large"></i></a>
|
||||
{{/if}}
|
||||
{{if $item.vote.share}}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ $a->theme_info = array();
|
|||
$style = get_pconfig(local_user(), 'vier', 'style');
|
||||
if ($style == "flat")
|
||||
$a->page['htmlhead'] .= '<link rel="stylesheet" href="view/theme/vier/flat.css" type="text/css" media="screen"/>'."\n";
|
||||
else if ($style == "netcolour")
|
||||
$a->page['htmlhead'] .= '<link rel="stylesheet" href="view/theme/vier/netcolour.css" type="text/css" media="screen"/>'."\n";
|
||||
|
||||
$a->page['htmlhead'] .= <<< EOT
|
||||
<script type="text/javascript" src="$baseurl/view/theme/vier/js/jquery.divgrow-1.3.1.f1.min.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue