From edc44933a4f57c09ee1cfb93615d052a2b125d99 Mon Sep 17 00:00:00 2001 From: Michael Date: Sun, 26 Feb 2012 21:16:29 +0100 Subject: "Vier-Theme" Some more design stuff. --- view/theme/vier/search_item.tpl | 5 +- view/theme/vier/style.css | 634 ++++++++++++++++++-------------------- view/theme/vier/wall_item.tpl | 7 +- view/theme/vier/wallwall_item.tpl | 5 +- 4 files changed, 315 insertions(+), 336 deletions(-) (limited to 'view/theme') diff --git a/view/theme/vier/search_item.tpl b/view/theme/vier/search_item.tpl index 9cd3c8e2e..372e0d034 100755 --- a/view/theme/vier/search_item.tpl +++ b/view/theme/vier/search_item.tpl @@ -1,7 +1,7 @@
- $star.starred - {{ if $lock }}$lock{{ endif }} + $star.starred + {{ if $lock }}$lock{{ endif }}
@@ -25,6 +25,7 @@ $name -   {{ if $plink }}$ago{{ else }} $ago {{ endif }} + {{ if $lock }} - $lock {{ endif }}
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css index 61a3b06ab..5ffb02f48 100644 --- a/view/theme/vier/style.css +++ b/view/theme/vier/style.css @@ -334,11 +334,15 @@ h4 { font-size: 1.1em; } -a {color: #3e3e8c; -text-decoration: none; +a { + color: #36C; + /* color: #3e3e8c; */ + text-decoration: none; +} +a:hover { + /* color: blue; */ + text-decoration: underline } -a:hover {color: blue; -text-decoration: underline} .wall-item-name-link { /* float: left;*/ @@ -364,12 +368,13 @@ text-decoration: underline} clear: both; } .fakelink { - color: #3e3e8c; + color: #36c; + /* color: #3e3e8c; */ text-decoration: none; cursor: pointer; } .fakelink:hover { - color: blue; + /* color: blue; */ /*color: #005c94; */ text-decoration: underline; } @@ -402,6 +407,12 @@ code { .tool { height: auto; overflow: auto; + padding: 3px; +} +#saved-search-ul .tool:hover, +#nets-sidebar .tool:hover, +#sidebar-group-list .tool:hover { + background: #EEE; } .tool .label { float: left; @@ -409,6 +420,12 @@ code { .tool .action { float: right; } +.tool a { + color: #000; +} +.tool a:hover { + text-decoration: none; +} /* popup notifications */ div.jGrowl div.notice { background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center; @@ -496,7 +513,7 @@ nav ul { nav ul li { list-style: none; margin: 0px; - padding: 1px 1px 3px 1px; + /* padding: 1px 1px 3px 1px; */ float: left; } nav ul li .menu-popup { @@ -536,7 +553,8 @@ nav .nav-menu.selected { nav .nav-notify { display: none; position: absolute; - background-color: #19aeff; + background-color: #36c; + /* background-color: #19aeff; */ -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; @@ -573,14 +591,17 @@ nav #nav-apps-link.selected { } #nav-notifications-mark-all { - padding: 1px 1px 2px 1px; - border-bottom: 1px solid #364E59; - margin: 0px 0px 2px 26px; + /* padding: 1px 1px 2px 26px; */ + /* border-bottom: 1px solid #364E59; */ + margin: 0px 0px 2px 0px; + padding: 5px 10px; } #nav-notifications-see-all { - padding: 1px; - margin: 0px 0px 2px 26px; + /* padding: 1px 1px 2px 26px; */ + /* border-bottom: 1px solid #364E59; */ + margin: 0px 0px 2px 0px; + padding: 5px 10px; } ul.menu-popup { @@ -599,9 +620,9 @@ ul.menu-popup { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); } ul.menu-popup a { - /* display: block; */ + display: block; color: #2d2d2d; - /* padding: 5px 10px; */ + padding: 5px 10px; text-decoration: none; } ul.menu-popup a:hover { @@ -656,6 +677,15 @@ ul.menu-popup .empty { max-height: 550px; overflow: auto; } +#nav-notifications-menu a { + display: inline; + padding: 5px 0px; + margin: 0px 0px 2px 0px; +} +#nav-notifications-menu li:hover { + background-color: #bdcdd4; +} + #nav-notifications-menu img { float: left; margin-right: 5px; @@ -730,7 +760,8 @@ aside #dfrn-request-link { } aside #dfrn-request-link:hover { text-decoration: none; - background-color: #19aeff; + background-color: #36c; + /* background-color: #19aeff; */ } aside #profiles-menu { width: 20em; @@ -832,7 +863,7 @@ section { display: table-cell; vertical-align: top; width: 800px; - padding: 0px 20px 0px 10px; + padding: 0px 0px 0px 10px; } /* wall item */ .tread-wrapper { @@ -905,7 +936,7 @@ section { } .wall-item-container .wall-item-content img { - max-width: 710px; + max-width: 700px; } .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions { display: table-cell; @@ -1019,6 +1050,15 @@ section { padding: 0; margin: 10px 0; } + +.shiny { + /* border-right: 10px solid #fce94f; */ + border-right: 1px solid #A7C7F7; +} +#jot-preview-content .tread-wrapper { + background-color: #fce94f; +} + .wall-item-tags { padding-top: 1px; padding-bottom: 2px; @@ -1094,22 +1134,17 @@ section { left: 0px; top: 63px; } -.directory-item { - float: left; - width: 200px; - height: 200px; -} -.directory-item .contact-photo { - width: 175px; - height: 175px; +.contact-photo { + width: 48px; + height: 48px; } -.directory-item .contact-photo img { - width: 175px; - height: 175px; +.contact-photo img { + width: 48px; + height: 48px; } .contact-name { - text-align: center; - font-weight: bold; + /* text-align: center; */ + /*font-weight: bold;*/ font-size: 12px; } .contact-details { @@ -1580,397 +1615,338 @@ blockquote { #prof-separator { display: none;} */ -#prvmail-wrapper, .mail-conv-detail, .mail-list-detail { - position: relative; - width: 500px; - padding: 50px; - margin: 20px auto; - background-color: #fff; - -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); -} - -#prvmail-wrapper:before, #prvmail-wrapper:after, .mail-conv-detail:before, .mail-conv-detail:after, .mail-list-detail:before, .mail-list-detail:after { - position: absolute; - width: 40%; - height: 10px; - content: ' '; - left: 12px; - bottom: 12px; - background: transparent; - -webkit-transform: skew(-5deg) rotate(-5deg); - -moz-transform: skew(-5deg) rotate(-5deg); - -ms-transform: skew(-5deg) rotate(-5deg); - -o-transform: skew(-5deg) rotate(-5deg); - transform: skew(-5deg) rotate(-5deg); - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); - z-index: -1; -} - -#prvmail-wrapper:after, .mail-conv-detail:after, .mail-list-detail:after { - left: auto; - right: 12px; - -webkit-transform: skew(5deg) rotate(5deg); - -moz-transform: skew(5deg) rotate(5deg); - -ms-transform: skew(5deg) rotate(5deg); - -o-transform: skew(5deg) rotate(5deg); - transform: skew(5deg) rotate(5deg); -} - -.prvmail-text { - width: 100%; +#prvmail-to-label, #prvmail-subject-label, #prvmail-message-label { + margin-bottom: 10px; + margin-top: 20px; } -.mail-list-outside-wrapper { - margin-top: 20px; +#prvmail-submit { + float: left; + margin-top: 10px; + margin-right: 30px; +} +#prvmail-upload-wrapper, +#prvmail-link-wrapper, +#prvmail-rotator-wrapper { + float: left; + margin-top: 10px; + margin-right: 10px; + width: 24px; } -.mail-list-sender { - float: left; - padding: 5px; - background-color: #efefef; - border: 2px dotted #eeeeee; - -moz-box-shadow: 3px 3px 4px #959494; - -webkit-box-shadow: 3px 3px 4px #959494; - box-shadow: 3px 3px 4px #959494; +#prvmail-end { + clear: both; } +.mail-list-sender, .mail-list-detail { - margin-left: 100px; - width: 300px; - min-height: 70px; - padding: 20px; - padding-top:10px; - border: 1px solid #dddddd; - } - -.mail-list-sender-name { - font-size: 1.1em; - display: inline; - font-variant:small-caps; + float: left; } - -.mail-list-date { - float: right; - clear: block; - display: inline; - font-size: 0.9em; - padding-left: 10px; - font-stretch:ultra-condensed; - font-variant:small-caps; +.mail-list-detail { + margin-left: 20px; } .mail-list-subject { - clear: block; - font-size: 1.2em; - padding-top: 20px; - padding-right: 50px; + font-size: 1.1em; + margin-top: 10px; } - -.mail-list-subject a { - color: #626262; +a.mail-list-link { + display: block; + font-size: 1.3em; + padding: 4px 0; } -.mail-list-delete-wrapper { float: right;} +/* +*a.mail-list-link:hover { +* background-color: #15607B; +* color: #F5F6FB; +*} +*/ + .mail-list-outside-wrapper-end { - clear: both; + clear: both; } -.mail-conv-outside-wrapper { - margin-bottom: 10px; +.mail-list-outside-wrapper { + margin-top: 30px; } -.mail-conv-sender {float: left; margin: 0px 5px 5px 0px; } -.mail-conv-sender-photo { - width: 64px; - height: 64px; +.mail-list-delete-wrapper { + float: right; + margin-right: 30px; + margin-top: 15px; } -.mail-conv-sender-name { float: left; font-variant:small-caps; font-style: bold; } -.mail-conv-date { float: right; font-variant:small-caps; } -.mail-conv-subject { clear: right; font-weight: bold; font-size: 1.2em } -.mail-conv-body { - clear: both; +.mail-list-delete-icon { + border: none; } +.mail-conv-sender, .mail-conv-detail { - width: 500px; - padding: 30px; - padding-bottom: 10px; - margin-left: 20px; - margin-bottom: 0px; - vertical-align: middle; - margin: auto; - border: 1px solid #dddddd; -} -.mail-conv-break { display: none; border: none;} -.mail-conv-delete-wrapper { padding-top: 10px; width: 510px; text-align: right; } - -/* ========== */ -/* = Events = */ -/* ========== */ - -.clear { clear: both; } -.eventcal { float: left; - font-size: 20px; - padding: 20px; +} +.mail-conv-detail { + margin-left: 20px; + width: 500px; } -.vevent { - position: relative; - width: 400px; - padding: 20px; - padding-top: 10px; - margin: 0 0px; - margin-bottom: 10px; - background-color: #fff; - -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); -} - -.vevent:before, .vevent:after { - position: absolute; - width: 40%; - height: 10px; - content: ' '; - left: 12px; - bottom: 12px; - background: transparent; - -webkit-transform: skew(-5deg) rotate(-5deg); - -moz-transform: skew(-5deg) rotate(-5deg); - -ms-transform: skew(-5deg) rotate(-5deg); - -o-transform: skew(-5deg) rotate(-5deg); - transform: skew(-5deg) rotate(-5deg); - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); - z-index: -1; -} - -.vevent:after { - left: auto; - right: 12px; - -webkit-transform: skew(5deg) rotate(5deg); - -moz-transform: skew(5deg) rotate(5deg); - -ms-transform: skew(5deg) rotate(5deg); - -o-transform: skew(5deg) rotate(5deg); - transform: skew(5deg) rotate(5deg); -} - -.vevent .event-description { - margin-left: 10px; - margin-right: 10px; - text-align:center; - font-size: 1.2em; - font-weight:bolder; +.mail-conv-subject { + font-size: 1.4em; + margin: 10px 0; } - .vevent .event-location{ - margin-left: 10px; - margin-right: 10px; - font-size: 1em; - font-style: oblique; - text-align: center; - +.mail-conv-outside-wrapper-end { + clear: both; } -.vevent .event-start, .vevent .event-end { - margin-left: 20px; - margin-right: 20px; - margin-bottom: 2px; - margin-top: 2px; - font-size: 0.9em; - font-variant: small-caps; - text-align: left; +.mail-conv-outside-wrapper { + margin-top: 30px; } -#new-event-link{ - width: 130px; - padding: 7px; - margin-bottom: 10px; - margin-left: 170px; ; - -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf; - -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf; - box-shadow:inset 0px 1px 0px 0px #cfcfcf; - background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) ); - background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% ); - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2'); - background-color:#bdbdbd; - -moz-border-radius:5px; - -webkit-border-radius:5px; - border-radius:5px; - color: #efefef; +.mail-conv-delete-wrapper { + float: right; + margin-right: 30px; + margin-top: 15px; +} +.mail-conv-break { + clear: both; } -#new-event-link:hover { - color: #efefef; - background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) ); - background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% ); - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808'); - background-color:#b20202; +.mail-conv-delete-icon { + border: none; } -#new-event-link:active { - background-color: #b20202; - position:relative; - top:1px; +/* ========== */ +/* = Events = */ +/* ========== */ +.eventcal { + float: left; + font-size: 20px; } -#new-event-link a { - color: #efefef; - text-align: center; +.vevent { + border: 1px solid #CCCCCC; +} +.vevent .event-description, .vevent .event-location { + margin-left: 10px; + margin-right: 10px; +} +.vevent .event-start { + margin-left: 10px; + margin-right: 10px; +} + +#new-event-link { + margin-bottom: 10px; } .edit-event-link, .plink-event-link { - float: left; - margin-top: 4px; - margin-right: 4px; - margin-bottom: 15px; + float: left; + margin-top: 4px; + margin-right: 4px; + margin-bottom: 15px; } .event-description:before { - content: url('calendar.png'); - margin-right: 15px; - vertical-align: middle; + content: url('../../../images/calendar.png'); + margin-right: 15px; } .event-start, .event-end { - margin-left: 10px; - width: 330px; + margin-left: 10px; + width: 330px; + clear: both; } .event-start .dtstart, .event-end .dtend { - float: right; + float: right; } .event-list-date { - color: #626262; - margin-bottom: 10px; - font-variant:small-caps; - font-stretch:condensed; + margin-bottom: 10px; } .prevcal, .nextcal { - float: left; - margin-left: 32px; - margin-right: 32px; - margin-top: 64px; + float: left; + margin-left: 32px; + margin-right: 32px; + margin-top: 64px; } - .event-calendar-end { - clear: both; + clear: both; } + .calendar { - width: 300px; - font-family: Helvetica, Arial, sans-serif; - background-color: #f1f1f1; - border: 1px solid #dedede; - margin-bottom: 10px; - -moz-box-shadow: 5px 5px 8px #959494; - -webkit-box-shadow: 5px 5px 8px #959494; - box-shadow: 5px 5px 8px #959494; + font-family: Courier, monospace; +} +.today { + font-weight: bold; + color: #FF0000; } -.calendar caption{ - background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d60808), color-stop(1, #b20202) ); - background:-moz-linear-gradient( center top, #d60808 5%, #b20202 100% ); - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d60808', endColorstr='#b20202'); - background-color: #b20202; - padding: 10px 0px 10px 0px; - width: 300px; - color: #ffffff; - font-weight: bold; - text-align:center; - font-variant:small-caps; - -moz-box-shadow: 5px 2px 8px #959494; - -webkit-box-shadow: 5px 2px 8px #959494; - box-shadow: 5px 2px 8px #959494; +.settings-block { + border: 1px solid #AAA; + margin: 10px; + padding: 10px; } -tr { - border: 1px solid #eeeeee; +.app-title { + margin: 10px; } -.calendar td { - font-size: 14px; - text-align: center; - padding: 3px 0px; +#identity-manage-desc { + margin-top:15px; + margin-bottom: 15px; } -.calendar td > a { - background-color: #cdcdcd; - padding: 2px; - color: #000; +#identity-manage-choose { + margin-bottom: 15px; } -.calendar th { - font-size: 16px; +#identity-submit { + margin-top: 20px; } -.today { - font-weight: bold; - text-align: center; - background-color: #b20202; - color: #fff; +#photo-prev-link, #photo-next-link { + padding: 10px; + float: left; } - -#event-start-text, -#event-finish-text { - margin-top: 10px; - margin-bottom: 5px; + +#photo-photo { + float: left; } -#event-nofinish-checkbox, -#event-nofinish-text, -#event-adjust-checkbox, -#event-adjust-text, -#event-share-checkbox { - float: left; +#photo-photo-end { + clear: both; } -#event-datetime-break { - margin-bottom: 10px; +.profile-match-photo { + float: left; + text-align: center; + width: 120px; } -#event-nofinish-break, -#event-adjust-break, -#event-share-break { - clear: both; +.profile-match-name { + float: left; + text-align: center; + width: 120px; + overflow: hidden; } -#event-desc-text, -#event-location-text { - margin-top: 10px; - margin-bottom: 5px; +.profile-match-break, +.profile-match-end { + clear: both; } -#event-submit { - margin-top: 10px; +.profile-match-connect { + text-align: center; + font-weight: bold; +} + +.profile-match-wrapper { + float: left; + padding: 10px; + width: 120px; + height: 120px; + scroll: auto; +} +#profile-match-wrapper-end { + clear: both; } /* ============= */ /* = Directory = */ /* ============= */ - +/* contacts menu */ +.contact-photo-wrapper { + position: relative; +} +.contact-photo { + width: 48px; + height: 48px; + overflow: hidden; + display: block; +} +.contact-photo img { + width: 48px; + height: 48px; +} +.contact-photo-menu-button { + display: none; + /* position: absolute; */ + /* position: absolute; */ + left: -2px; + top: -20px; +} +.contact-wrapper { + float: left; + width: 90px; + height: 90px; + margin-bottom: 15px; +} +.contact-wrapper .contact-photo { + width: 80px; + height: 80px; +} +.contact-wrapper .contact-photo img { + width: 80px; + height: 80px; +} +.contact-wrapper .contact-photo-menu-button { + left: 0px; + top: 63px; +} .directory-item { - float: left; - margin: 50px 50px 0px 0px; + float: left; + width: 200px; + height: 200px; +} +.directory-item .contact-photo { + width: 175px; + height: 175px; +} +.directory-item .contact-photo img { + width: 175px; + height: 175px; +} +.contact-name { + text-align: center; + font-weight: bold; + font-size: 12px; +} +.contact-details { + color: #999999; +} + +.photo-top-image-wrapper { + position: relative; + float: left; + margin-top: 15px; + margin-right: 15px; + width: 200px; height: 200px; + overflow: hidden; +} +.photo-top-album-name { + width: 100%; + min-height: 2em; + position: absolute; + bottom: 0px; + padding: 0px 3px; + padding-top: 0.5em; + background-color: rgb(255, 255, 255); +} +#photo-top-end { + clear: both; } -.directory-details { - font-size: 0.9em; - font-variant: small-caps; - width: 160px; +#photo-top-links { + margin-bottom: 30px; + margin-left: 30px; } -.directory-name { - font-size: 1em; - font-variant: small-caps; - width: 150px; +#photos-upload-newalbum-div { + float: left; + width: 175px; } + diff --git a/view/theme/vier/wall_item.tpl b/view/theme/vier/wall_item.tpl index 03cbd4c0b..abd2862a1 100644 --- a/view/theme/vier/wall_item.tpl +++ b/view/theme/vier/wall_item.tpl @@ -1,7 +1,7 @@ {{ if $indent }}{{ else }}
- $star.starred - {{ if $lock }}$lock{{ endif }} + $star.starred + {{ if $lock }}$lock{{ endif }}
{{ endif }} @@ -23,8 +23,9 @@
$name - -   + - {{ if $plink }}$ago{{ else }} $ago {{ endif }} + {{ if $lock }} - $lock {{ endif }}
diff --git a/view/theme/vier/wallwall_item.tpl b/view/theme/vier/wallwall_item.tpl index 3357bd8e0..2301da1d1 100644 --- a/view/theme/vier/wallwall_item.tpl +++ b/view/theme/vier/wallwall_item.tpl @@ -1,7 +1,7 @@ {{ if $indent }}{{ else }}
- $star.starred - {{ if $lock }}$lock{{ endif }} + $star.starred + {{ if $lock }}$lock{{ endif }}
{{ endif }} @@ -32,6 +32,7 @@ $to $owner_name $vwall -   {{ if $plink }}$ago{{ else }} $ago {{ endif }} + {{ if $lock }} - $lock {{ endif }}
-- cgit v1.2.3