From d6116b6979fb3d0f706550e0e5ca91c18079b3fd Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Thu, 26 Apr 2012 16:14:42 -0400 Subject: announced dipsy change. re-tie your boots, we're in for a wee ride ;) Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 2878 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 2878 insertions(+) create mode 100644 view/theme/dispy/dark/style.less (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less new file mode 100644 index 000000000..6bab0109a --- /dev/null +++ b/view/theme/dispy/dark/style.less @@ -0,0 +1,2878 @@ +/* + * dispy-dark + * + * author, maintainer: simon + * + * Author's notes: + * A few things of note here. The less file is our working copy, + * and the CSS is *generated* from it. The CSS is the one that's + * included in the HTML, and not the less one. This is to save + * bandwidth and processing time. + */ +/* from html5boilerplate */ +/* these are to tell browsers they should be displayed a certain way */ + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { + display: block; } + +audio, canvas, video, time { + display: inline-block; + *display: inline; + *zoom: 1; } + +audio:not([controls]), [hidden] { + display: none; } + +/* + * Base + */ +/* + * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units + * 2. Force vertical scrollbar in non-IE + * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g + */ + +html { + font-size: 100%; + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + +body { + margin: 0; + font-size: 16px; + line-height: 1.1em; + font-family: sans-serif; + color: #eec; + background-color: #2e2f2e; } + +button, input, select, textarea { + font-family: sans-serif; + color: #eec; + background-color: #2e2f2e; } + +select { + border: 1px #555 dotted; + padding: 3px; + margin: 3px; + color: #eec; + background: #2e2f2e; } + +option { + padding: 3px; + color: #eec; + background: #2e2f2e; + &[selected="selected"] { + color: #2e2f2e; + background: #eec; } } + +ul, ol { + padding: 0; } + +/* remember to define focus styles! */ + +:focus { + outline: 0; } + +[disabled="disabled"] { + background: #4e4f4f; + color: #ddb; } + +/* remember to highlight inserts somehow! */ + +ins { + background-color: #2e302e; + color: #ff9; + text-decoration: none; } + +mark { + background-color: #2e302e; + color: #ff9; + font-style: italic; + font-weight: bold; } + +/* Redeclare monospace font family: h5bp.com/j */ + +pre, code, kbd, samp, .wall-item-body code { + font-family: monospace, monospace; + _font-family: monospace; + font-size: 1em; } + +/* Improve readability of pre-formatted text in all browsers */ + +pre, .wall-item-body code { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; } + +q { + quotes: none; + &:before, &:after { + content: ""; + content: none; } } + +small { + font-size: 85%; } + +/* Position subscript and superscript content without affecting line-height: h5bp.com/k */ + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +img { + border: 0 none; } + +a { + color: #88a9d2; + text-decoration: none; + margin-bottom: 1px; + &:hover img { + text-decoration: none; } } + +blockquote { + background: #444; + color: #eec; + text-indent: 5px; + padding: 5px; + border: 1px #aaa solid; + border-radius: 5px; } + +a:hover { + color: #729fcf; + border-bottom: 1px dotted #729fcf; } + +.required { + display: inline; + color: #ff0; + font-size: 16px; + font-weight: bold; + margin: 3px; } + +.fakelink, .lockview { + color: #729fcf; + cursor: pointer; } + +.fakelink:hover { + color: #729fcf; } + +.smalltext { + font-size: 0.7em; } + +#panel { + position: absolute; + font-size: 0.8em; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + border: 1px solid #fff; + background-color: #2e302e; + color: #eeeeec; + padding: 1em; } + +.pager { + margin-top: 60px; + display: block; + clear: both; + text-align: center; + span { + padding: 4px; + margin: 4px; } } + +.pager_current { + background-color: #729fcf; + color: #fff; } + +/** + * global + */ +/* .tool .action */ + +.action { + margin: 5px 0; } + +.tool { + margin: 5px 0; + list-style: none; } + +#articlemain { + width: 100%; + height: 100%; + margin: 0 auto; } + +/** + * login + */ + +#asidemain .field { + overflow: hidden; + width: 200px; } + +#login-extra-links { + overflow: auto !important; + padding-top: 60px !important; + width: 100% !important; + a { + margin-right: 20px; } } + +#login_standard { + display: block !important; + float: none !important; + height: 100% !important; + position: relative !important; + width: 100% !important; + .field label { + width: 200px !important; } + input { + margin: 0 0 8px !important; + width: 210px !important; + &[type="text"] { + margin: 0 0 8px !important; + width: 210px !important; } } } + +#login-submit-wrapper { + margin: 0 !important; } + +#login-submit-button { + margin-left: 0px !important; } + +#asidemain #login_openid { + position: relative !important; + float: none !important; + margin-left: 0px !important; + height: auto !important; + width: 200px !important; } + +#login_openid { + #id_openid_url { + width: 180px !important; + overflow: hidden !important; } + label { + width: 180px !important; } } + +/** + * nav + */ + +nav { + height: 60px; + background-color: #1d1f1d; + color: #eeeeec; + position: relative; + padding: 20px 20px 10px 95px; + a { + text-decoration: none; + color: #eeeeec; + border: 0px; + &:hover { + text-decoration: none; + color: #eeeeec; + border: 0px; } } + #banner { + display: block; + position: absolute; + left: 51px; + top: 25px; + #logo-text a { + font-size: 40px; + font-weight: bold; + margin-left: 3px; } } } + +ul#user-menu-popup { + display: none; + position: absolute; + background-color: #555753; + width: 100%; + padding: 10px 0px; + margin: 0px; + top: 20px; + left: 0; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; + box-shadow: 5px 10px 10px 0 #111; + z-index: 10000; + li { + display: block; + a { + display: block; + padding: 5px; + &:hover { + color: #2e302e; + background-color: #eeeeec; } + &.nav-sep { + border-top: 1px solid #eeeeec; } } } } + +nav .nav-link { + display: inline-block; + width: 22px; + height: 22px; + overflow: hidden; + margin: 0px 5px 5px; + text-indent: 50px; + background: transparent url(dark/icons.png) 0 0 no-repeat; } + +#nav-apps-link { + background-position: 0 -66px; + &:hover { + background-position: -22px -66px; } } + +#nav-community-link, #nav-contacts-link { + background-position: 0 -22px; + &:hover { + background-position: -22px -22px; } } + +#nav-directory-link { + background-position: -44px -154px; + &:hover { + background-position: -66px -154px; } } + +#nav-help-link { + background-position: 0 -110px; + &:hover { + background-position: -22px -110px; } } + +#nav-home-link { + background-position: -44px -132px; + &:hover { + background-position: -66px -132px; } } + +#nav-intro-link { + background-position: 0px -190px; + &:hover { + background-position: -44px -190px; } } + +#nav-login-link, #nav-logout-link { + background-position: 0 -88px; + &:hover { + background-position: -22px -88px; } } + +#nav-messages-link { + background-position: -44px -88px; + &:hover { + background-position: -66px -88px; } } + +#nav-notify-link, #nav-notifications-linkmenu { + background-position: -44px -110px; } + +#nav-notify-link:hover { + background-position: -66px -110px; } + +#nav-network-link { + background-position: 0px -177px; + &:hover { + background-position: -22px -177px; } } + +#nav-search-link { + background-position: 0 -44px; + &:hover { + background-position: -22px -44px; } } + +#profile-link, #profile-title, #wall-image-upload, #wall-file-upload, #profile-attach-wrapper, #profile-audio, #profile-link, #profile-location, #profile-nolocation, #profile-title, #jot-title, #profile-upload-wrapper, #profile-video, #profile-jot-submit, #wall-image-upload-div, #wall-file-upload-div, .icon, .hover, .focus, .pointer { + cursor: pointer; } + +/* popup notifications */ + +div.jGrowl div { + &.notice { + background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center; + color: #ffffff; + padding-left: 58px; } + &.info { + background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center; + color: #ffffff; + padding-left: 58px; } } + +#nav-notifications-menu { + margin: 30px 0 0 -20px; + width: 275px; + max-height: 300px; + overflow-y: auto; + font-size: 9pt; + .contactname { + font-weight: bold; + font-size: 0.9em; } + img { + float: left; + margin-right: 5px; } + .notif-when { + font-size: 0.8em; + display: block; } + li { + word-wrap: normal; + border-bottom: 1px solid #000; + &:hover { + color: black; } } + a:hover { + color: black; + text-decoration: underline; } } + +nav #nav-notifications-linkmenu { + &.on .icon.s22.notify, &.selected .icon.s22.notify { + background-image: url("../../../images/icons/22/notify_on.png"); } } + +.show { + display: block; } + +#notifications { + height: 20px; + width: 170px; + position: absolute; + top: -19px; + left: 4px; } + +#nav-floater { + position: fixed; + top: 20px; + right: 1%; + padding: 5px; + background: #1d1f1d; + color: transparent; + border-radius: 5px; + z-index: 100; + width: 300px; + height: 60px; } + +#nav-buttons { + clear: both; + list-style: none; + padding: 0px; + margin: 0px; + height: 25px; + > li { + padding: 0; + display: inline-block; + margin: 0px -4px 0px 0px; } } + +.floaterflip { + display: block; + position: fixed; + z-index: 110; + top: 56px; + right: 19px; + width: 22px; + height: 22px; + overflow: hidden; + margin: 0px; + background: transparent url(dark/icons.png) -190px -60px no-repeat; } + +.search-box { + display: inline-block; + margin: 5px; + position: fixed; + right: 0px; + bottom: 0px; + z-index: 100; + background: #1d1f1d; + border-radius: 5px; } + +#search-text { + border: 1px #eec solid; + background: #2e2f2e; + color: #eec; } + +.search-box #search-text { + margin: 8px; + width: 10em; + height: 14px; + color: #eec; } + +#scrollup { + position: fixed; + right: 5px; + bottom: 40px; + z-index: 100; + a:hover { + text-decoration: none; + border: 0; } } + +#user-menu { + box-shadow: 5px 0 10px 0 #111; + display: block; + width: 75%; + margin: 3px 0 0 0; + position: relative; + background-color: #555753; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + background: #555753 url("dark/menu-user-pin.jpg") 98% center no-repeat; + clear: both; + top: 4px; + left: 10px; + padding: 2px; + > a { + vertical-align: top; } } + +#user-menu-label { + font-size: 12px; + padding: 3px 20px 9px 5px; + height: 10px; } + +.nav-ajax-update, .nav-ajax-left { + width: 30px; + height: 19px; + background: transparent url(dark/notifications.png) 0 0 no-repeat; + color: #222; + font-weight: bold; + font-size: 0.8em; + padding-top: 0.2em; + text-align: center; + float: left; + margin: 0 -1px 0 3px; + display: block; + visibility: hidden; } + +.nav-ajax-update.show, .nav-ajax-left.show { + visibility: visible; } + +#net-update { + background-position: 0px 0px; } + +#mail-update { + background-position: -30px 0; } + +#notify-update { + background-position: -60px 0px; } + +#home-update { + background-position: -90px 0px; } + +#intro-update { + background-position: -120px 0px; } + +#lang-select-icon { + cursor: pointer; + position: fixed; + left: 28px; + bottom: 6px; + z-index: 10; } + +#language-selector { + position: fixed; + bottom: 2px; + left: 52px; + z-index: 10; } + +.menu-popup { + position: absolute; + display: none; + width: 11em; + background: #ffffff; + color: #2d2d2d; + margin: 0px; + padding: 0px; + list-style: none; + border: 3px solid #364e59; + z-index: 100000; + -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7); + -moz-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7); + box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7); + a { + display: block; + color: #2d2d2d; + padding: 5px 10px; + text-decoration: none; + &:hover { + background-color: #bdcdd4; } } + .menu-sep { + border-top: 1px solid #9eabb0; } + li { + float: none; + overflow: auto; + height: auto; + display: block; + img { + float: left; + width: 16px; + height: 16px; + padding-right: 5px; } } + .empty { + padding: 5px; + text-align: center; + color: #9eabb0; } } + +.notif-item { + font-size: small; + a { + vertical-align: middle; } } + +.notif-image { + width: 32px; + height: 32px; + padding: 7px 7px 0px 0px; } + +.notify-seen { + background: #ddd; } + +/** + * sysmsg + */ + +#sysmsg_info { + position: fixed; + bottom: 0; + -moz-box-shadow: 3px 3px 3px 10px 0 #000; + -webkit-box-shadow: 3px 3px 10px 0 #000; + box-shadow: 3px 3px 10px 0 #000; + padding: 10px; + background-color: #fcaf3e; + border: 2px solid #f8911b; + border-bottom: 0; + padding-bottom: 50px; + z-index: 1000; } + +#sysmsg { + position: fixed; + bottom: 0; + -moz-box-shadow: 3px 3px 10px 0 #000; + -webkit-box-shadow: 3px 3px 10px 0 #000; + box-shadow: 3px 3px 10px 0 #000; + padding: 10px; + background-color: #fcaf3e; + border: 2px solid #f8911b; + border-bottom: 0; + padding-bottom: 50px; + z-index: 1000; } + +#sysmsg_info br, #sysmsg br { + display: block; + margin: 2px 0px; + border-top: 1px solid #ccccce; } + +/** + * aside + */ + +#asidemain { + float: left; + font-size: smaller; + margin: 20px 0 20px 35px; + width: 25%; + display: inline; } + +/* for now, disappear these */ + +#asideright, #asideleft { + display: none; } + +.vcard { + .fn { + font-size: 1.7em; + font-weight: bold; + border-bottom: 1px solid #729fcf; + padding-bottom: 3px; } + #profile-photo-wrapper { + margin: 20px; + img { + box-shadow: 3px 3px 10px 0 #000; } } } + +/* http://css-tricks.com/snippets/css/css-box-shadow/ +* box-shadow: +* 1. The horizontal offset of the shadow, positive means +* the shadow will be on the right of the box, a negative +* offset will put the shadow on the left of the box. +* 2. The vertical offset of the shadow, a negative one +* means the box-shadow will be above the box, a +* positive one means the shadow will be below the box. +* 3. The blur radius (optional), if set to 0 the shadow +* will be sharp, the higher the number, the more blurred +* it will be. +* 4. The spread radius (optional), positive values increase +* the size of the shadow, negative values decrease the size. +* Default is 0 (the shadow is same size as blur). +* 5. Colo[u]r +*/ + +#asidemain { + h4 { + font-size: 1.2em; } + #viewcontacts { + text-align: right; } } + +.aprofile dt { + background: #eec; + color: #2e2f2e; + font-weight: bold; + box-shadow: 1px 1px 5px 0 #000; + margin: 15px 0 5px; + padding-left: 5px; } + +#profile-extra-links ul { + margin-left: 0px; + padding-left: 0px; + list-style: none; } + +#dfrn-request-link { + background: #3465a4 url(dark/connect.png) no-repeat 95% center; + border-radius: 5px 5px 5px 5px; + color: #eec; + display: block; + font-size: 1.2em; + padding: 0.2em 0.5em; } + +#wallmessage-link { + /*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/ + /*border-radius: 5px 5px 5px 5px;*/ + color: #eee; + display: block; + font-size: 1.2em; + padding: 0.2em 0.5em; } + +#netsearch-box { + margin: 20px 0px 30px; + width: 150px; + #search-submit { + margin: 5px 5px 0px 0px; } } + +.ttright { + margin: 0px 0px 0px 0px; } + +/** + * contacts block + */ + +.contact-block-div { + width: 50px; + height: 50px; + float: left; } + +.contact-block-textdiv { + width: 150px; + height: 34px; + float: left; } + +#contact-block-end { + clear: both; } + +/** + * jot + */ + +#jot { + /*width: 785px;*/ + margin: 10px 0 20px 0px; + width: 100%; + #jot-tools { + margin: 0px; + padding: 0px; + height: 35px; + overflow: none; + width: 100%; + /*background-color: #0e232e;*/ + /*border-bottom: 2px solid #9eabb0;*/ + span { + float: left; + margin: 10px 20px 2px 0px; + a { + display: block; } } + .perms { + float: right; + width: 40px; } + li.loading { + float: right; + background-color: #ffffff; + width: 20px; + vertical-align: center; + text-align: center; + border-top: 2px solid #9eabb0; + height: 38px; + img { + margin-top: 10px; } } } + #jot-title { + border: 1px solid #ccc; + margin: 0 0 5px; + height: 20px; + width: 90%; + font-weight: bold; + border-radius: 5px; + vertical-align: middle; } } + +#jot-category { + margin: 5px 0; + border-radius: 5px; + border: 1px #999 solid; + color: #aaa; + font-size: smaller; + &:focus { + color: #eee; } } + +#jot #character-counter { + width: 6%; + float: right; + text-align: right; + height: 15px; + line-height: 20px; + padding: 2px 20px 5px 0; } + +#profile-jot-text_parent { + box-shadow: 5px 0 10px 0 #111; } + +#profile-jot-text_tbl { + margin-bottom: 10px; + background: #777; } + +#profile-jot-text_ifr { + width: 99.900002% !important; } + +#profile-jot-text_toolbargroup, .mceCenter tr { + background: #777; } + +[id$="jot-text_ifr"] { + width: 99.900002% !important; + color: #2e2f2e; + background: #eec; + .mceContentBody { + color: #2e2f2e; + background: #eec; } } + +.defaultSkin { + tr.mceFirst { + background: #777; } + td { + &.mceFirst, &.mceLast { + background-color: #eec; } } + span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon { + background-color: #eec; } } + +#profile-attach-wrapper, #profile-audio-wrapper, #profile-link-wrapper, #profile-location-wrapper, #profile-nolocation-wrapper, #profile-title-wrapper, #profile-upload-wrapper, #profile-video-wrapper { + float: left; + margin: 0 20px 0 0; } + +#profile-rotator-wrapper { + float: right; } + +#profile-jot-tools-end, #profile-jot-banner-end { + clear: both; } + +#profile-jot-email-wrapper { + margin: 10px 10% 0; + border: 1px solid #555753; + border-bottom: 0; } + +#profile-jot-email-label { + background-color: #555753; + color: #ccccce; + padding: 5px; } + +#profile-jot-email { + width: 90%; + margin: 5px; } + +#profile-jot-networks { + margin: 0 10%; + border: 1px solid #555753; + border-top: 0; + border-bottom: 0; + padding: 5px; } + +#profile-jot-net { + margin: 5px 0; } + +#jot-preview-link { + margin: 0 0 0 10px; + border: 0; + text-decoration: none; + float: right; } + +.icon-text-preview { + margin: 0 0 -18px 0; + display: block; + width: 20px; + height: 20px; + background: url(dark/icons.png) no-repeat -128px -40px; + border: 0; + text-decoration: none; + float: right; + cursor: pointer; } + +#profile-jot-perms { + float: right; + background-color: #555753; + height: 22px; + width: 20px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + overflow: hidden; + border: 0px; + margin: 0 10px 0 10px; } + +#profile-jot-plugin-wrapper { + width: 1px; + margin: 10px 0 0 0; + float: right; } + +#profile-jot-submit-wrapper { + float: right; + width: 100%; + list-style: none; + margin: 10px 0 0 0; + padding: 0; } + +#profile-jot-submit { + height: auto; + background-color: #555753; + color: #eeeeec; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + border: 2px outset #222420; + margin: 0; + float: right; + text-shadow: 1px 1px #111; + width: auto; + &:active { + box-shadow: 0 0 0 0; } } + +#jot-perms-icon { + height: 22px; + width: 20px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + overflow: hidden; + border: 0; } + +#profile-jot-acl-wrapper { + margin: 0 10px; + border: 1px solid #555753; + border-top: 0; + display: block !important; } + +#group_allow_wrapper, #group_deny_wrapper, #acl-permit-outer-wrapper { + width: 47%; + float: left; } + +#contact_allow_wrapper, #contact_deny_wrapper, #acl-deny-outer-wrapper { + width: 47%; + float: right; } + +#acl-permit-text { + background-color: #555753; + color: #ccccce; + padding: 5px; + float: left; } + +#jot-public { + background-color: #555753; + color: #ff0000; + padding: 5px; + float: left; } + +#acl-deny-text { + background-color: #555753; + color: #ccccce; + padding: 5px; + float: left; } + +#acl-permit-text-end, #acl-deny-text-end { + clear: both; } + +#jot-title-desc { + color: #ccc; } + +#profile-jot-desc { + color: #ff2000; + margin: 5px 0; } + +#jot-title-wrapper { + margin-bottom: 5px; } + +#jot-title-display { + font-weight: bold; } + +.jothidden { + display: none; } + +#jot-preview-content { + background-color: #3e3f3e; + color: #eec; + border: 1px #eec solid; + border-radius: 5px; + padding: 3px 3px 6px 10px; + .wall-item-outside-wrapper { + border: 0; + border-radius: 0px; } } + +/** + * section + */ + +#sectionmain { + margin: 20px; + font-size: 0.8em; + min-width: 475px; + width: 67%; + float: left; + display: inline; } + +/** + * tabs + */ + +.tabs { + list-style: none; + margin: 10px 0; + padding: 0; + li { + display: inline; + font-size: smaller; + font-weight: bold; } } + +.tab { + border: 1px solid #729fcf; + padding: 4px; + &:hover, &.active:hover, &:active { + background: #88a9d2; + color: #2e2f2e; } + &.active { + background: #88a9d2; + color: #2e2f2e; + a { + color: #2e2f2e; } } + a { + border: 0; + text-decoration: none; } } + +/** + * items + */ + +.wall-item-outside-wrapper { + border: 1px solid #aaa; + border-radius: 5px; + box-shadow: 5px 0 10px 0 #111; + &.comment { + margin-top: 5px; } } + +.wall-item-outside-wrapper-end { + clear: both; } + +.wall-item-content-wrapper { + position: relative; + padding: 10px; + width: auto; } + +.wall-item-outside-wrapper .wall-item-comment-wrapper { + /*margin-left: 90px;*/ } + +.shiny { + background: #2e3436; + border-radius: 5px; } + +.wall-outside-wrapper .shiny { + border-radius: 5px; } + +.heart { + color: red; } + +.wall-item-content { + overflow-x: auto; + margin: 0px 15px 0px 5px; } + +/* removing it from here, vs. putting it in .wall-item-content +* might break things for people. we shall see ;) */ + +[id^="tread-wrapper"], [class^="tread-wrapper"] { + margin: 15px 0 0 0; + padding: 0px; + /*overflow-x: auto;*/ } + +.wall-item-photo-menu { + display: none; } + +.wall-item-photo-menu-button { + display: none; + text-indent: -99999px; + background: #555753 url(dark/menu-user-pin.jpg) no-repeat 75px center; + position: absolute; + overflow: hidden; + height: 20px; + width: 90px; + top: 85px; + left: 0; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; } + +.wall-item-info { + float: left; + width: 110px; } + +.wall-item-photo-wrapper { + width: 80px; + height: 80px; + position: relative; + padding: 5px; + background-color: #555753; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } + +[class^="wall-item-tools"] * { + /*margin: 0 0 5px 0;*/ + > * { + /*margin: 0 0 5px 0;*/ } } + +.wall-item-tools { + float: right; + opacity: 0.4; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; + &:hover { + opacity: 1; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; } } + +.wall-item-subtools1 { + height: 30px; + list-style: none outside none; + margin: 20px 0 30px -20px; + padding: 0; + width: 30px; } + +.wall-item-subtools2 { + height: 25px; + list-style: none outside none; + margin: -75px 0 0 5px; + padding: 0; + width: 25px; } + +.wall-item-title { + font-size: 1.2em; + font-weight: bold; + margin-bottom: 1em; } + +.wall-item-body { + margin: 20px 20px 10px 0px; + text-align: left; + overflow-x: auto; } + +.wall-item-lock-wrapper { + float: right; + height: 22px; + margin: 0 -5px 0 0; + width: 22px; + opacity: 1; } + +.wall-item-dislike, .wall-item-like { + clear: left; + font-size: 0.8em; + color: #878883; + margin: 5px 0 5px 120px; } + +.wall-item-author, .wall-item-actions-author { + clear: left; + font-size: 0.8em; + color: #878883; + margin: 20px 20px 0 110px; } + +.wall-item-ago { + display: inline; + padding-left: 10px; } + +.wall-item-wrapper-end { + clear: both; } + +.wall-item-location { + margin-top: 15px; + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + .icon { + float: left; } + > a, .smalltext { + margin-left: 25px; + font-size: 0.7em; + display: block; } + > br { + display: none; } } + +.wallwall { + .wwto { + left: 5px; + margin: 0; + position: absolute; + top: 75px; + width: 30px; + z-index: 10001; + width: 30px; + height: 30px; + img { + width: 30px !important; + height: 30px !important; } } + .wall-item-photo-end { + clear: both; } } + +.wall-item-arrowphoto-wrapper { + position: absolute; + left: 35px; + top: 80px; + z-index: 10002; } + +.wall-item-photo-menu { + min-width: 92px; + border: 2px solid #FFFFFF; + border-top: 0px; + background: #555753; + position: absolute; + left: -2px; + top: 101px; + display: none; + z-index: 10003; + -webkit-border-radius: 0px 5px 5px 5px; + -moz-border-radius: 0px 5px 5px 5px; + border-radius: 0px 5px 5px 5px; + ul { + margin: 0px; + padding: 0px; + list-style: none; } + li a { + white-space: nowrap; + display: block; + padding: 5px 2px; + color: #eeeeec; + &:hover { + color: #555753; + background: #eeeeec; } } } + +#item-delete-selected { + overflow: auto; + width: 100%; } + +#connect-services-header, #connect-services, #extra-help-header, #extra-help, #postit-header, #postit { + margin: 5px 0 0 0; } + +/** + * comment + */ + +.ccollapse-wrapper { + font-size: 0.9em; + margin-left: 80px; } + +.wall-item-outside-wrapper.comment { + margin-left: 80px; + .wall-item-photo { + width: 40px!important; + height: 40px!important; } + .wall-item-photo-wrapper { + width: 40px; + height: 40px; } + .wall-item-photo-menu-button { + width: 50px; + top: 45px; + background-position: 35px center; } + .wall-item-info { + width: 60px; } + .wall-item-body { + margin-left: 10px; } + .wall-item-author { + margin-left: 50px; } + .wall-item-photo-menu { + min-width: 50px; + top: 60px; } } + +.comment-wwedit-wrapper { + /*margin: 30px 0px 0px 80px;*/ } + +.comment-edit-wrapper { + border-top: 1px #aaa solid; } + +[class^="comment-edit-bb"] { + list-style: none; + display: none; + margin: -40px 0 5px 60px; + width: 75%; + > li { + display: inline-block; + margin: 0 10px 0 0; + visibility: none; } } + +.comment-wwedit-wrapper img, .comment-edit-wrapper img { + width: 20px; + height: 20px; } + +.comment-edit-photo-link, .comment-edit-photo { + margin-left: 10px; } + +.my-comment-photo { + width: 40px; + height: 40px; + padding: 5px; } + +[class^="comment-edit-text"] { + margin: 5px 0 10px 20px; + width: 84.5%; } + +.comment-edit-text-empty { + height: 20px; + border: 2px #c8bebe solid; + border-radius: 5px; + color: #c8bebe; + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + &:hover { + color: #999999; } } + +.comment-edit-text-full { + height: 10em; + border-radius: 5px; + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; } + +.comment-edit-submit-wrapper { + width: 90%; + margin: 5px 5px 10px 50px; + text-align: right; } + +.comment-edit-submit { + height: 22px; + background-color: #555753; + color: #eeeeec; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + border: 0; } + +/** + * item text style + */ + +.wall-item-body code { + display: block; + padding: 0 0 10px 5px; + border-color: #ccc; + border-style: solid; + border-width: 1px 1px 1px 10px; + background: #eee; + color: #2e2f2e; + width: 95%; } + +/** + * profile + */ + +div { + &[id$="text"] { + font-weight: bold; + border-bottom: 1px solid #ccc; } + &[id$="wrapper"] { + height: 100%; + margin-bottom: 1em; + br { + clear: left; } } } + +[id$="-end"], [class$="end"] { + clear: both; + margin: 0 0 10px 0; } + +#advanced-profile-with { + margin-left: 200px; } + +/** + * photos + */ + +.photos { + height: auto; + overflow: auto; } + +#photo-top-links { + margin-bottom: 30px; } + +.photo-album-image-wrapper, .photo-top-image-wrapper { + float: left; + -moz-box-shadow: 3px 3px 10px 0 #000; + -webkit-box-shadow: 3px 3px 10px 0 #000; + box-shadow: 3px 3px 10px 0 #000; + background-color: #222; + color: #2e2f2e; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + padding-bottom: 30px; + position: relative; + margin: 0 10px 10px 0; } + +#photo-photo { + max-width: 100%; + img { + max-width: 100%; } } + +.photo-top-image-wrapper a:hover, #photo-photo a:hover, .photo-album-image-wrapper a:hover { + border-bottom: 0; } + +.photo-top-photo, .photo-album-photo { + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } + +.photo-top-album-name { + position: absolute; + bottom: 0; + padding: 0 5px; } + +.caption { + position: absolute; + bottom: 0; + margin: 0 5px; } + +#photo-photo { + position: relative; + float: left; } + +#photo-prev-link, #photo-next-link { + position: absolute; + width: 30%; + height: 100%; + background-color: rgba(255, 255, 255, 0.5); + opacity: 0; + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; + background-position: center center; + background-repeat: no-repeat; } + +#photo-prev-link { + left: 0; + top: 0; + background-image: url(dark/prev.png); } + +#photo-next-link { + right: 0; + top: 0; + background-image: url(dark/next.png); } + +#photo-prev-link a, #photo-next-link a { + display: block; + width: 100%; + height: 100%; + overflow: hidden; + text-indent: -900000px; } + +#photo-prev-link:hover { + opacity: 1; + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + +#photo-next-link { + &:hover { + opacity: 1; + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + .icon { + display: none; } } + +#photo-prev-link .icon { + display: none; } + +#photos-upload-spacer, #photos-upload-new-wrapper, #photos-upload-exist-wrapper { + margin-bottom: 1em; } + +#photos-upload-existing-album-text, #photos-upload-newalbum-div { + background-color: #555753; + color: #eeeeec; + padding: 1px; } + +#photos-upload-album-select, #photos-upload-newalbum { + width: 99%; } + +#photos-upload-perms-menu { + text-align: right; } + +#photo-edit-caption, #photo-edit-newtag, #photo-edit-albumname { + float: left; + margin-bottom: 25px; } + +#photo-edit-link-wrap { + margin-bottom: 15px; } + +#photo-edit-caption, #photo-edit-newtag { + width: 100%; } + +#photo-like-div { + margin-bottom: 25px; } + +#photo-edit-caption-end, #photo-edit-tags-end, #photo-edit-albumname-end { + clear: both; } + +#photo-edit-delete-button { + margin-left: 200px; } + +#photo-edit-end { + margin-bottom: 35px; } + +#photo-caption { + font-size: 110%; + font-weight: bold; + margin-top: 15px; + margin-bottom: 15px; } + +/** + * message + */ + +.prvmail-text { + width: 100%; } + +#prvmail-subject { + width: 100%; + color: #2e2f2e; + background: #eec; } + +#prvmail-submit-wrapper { + margin-top: 10px; } + +#prvmail-submit { + float: right; + margin-top: 0; } + +#prvmail-submit-wrapper div { + margin-right: 5px; + float: left; } + +.mail-list-outside-wrapper { + margin-top: 20px; } + +.mail-list-sender { + float: left; } + +.mail-list-detail { + margin-left: 90px; } + +.mail-list-sender-name { + display: inline; + font-size: 1.1em; } + +.mail-list-date { + display: inline; + font-size: 0.9em; + padding-left: 10px; } + +.mail-list-sender-name, .mail-list-date { + font-style: italic; } + +.mail-list-subject { + font-size: 1.2em; } + +.mail-list-delete-wrapper { + float: right; } + +.mail-list-outside-wrapper-end { + clear: both; + border-bottom: 1px #eec dotted; } + +.mail-conv-sender { + float: left; + margin: 0px 5px 5px 0px; } + +.mail-conv-sender-photo { + width: 32px; + height: 32px; } + +.mail-conv-sender-name { + float: left; } + +.mail-conv-date { + float: right; } + +.mail-conv-subject { + clear: right; + font-weight: bold; + font-size: 1.2em; } + +.mail-conv-body { + clear: both; } + +.mail-conv-delete-wrapper { + margin-top: 5px; } + +/** + * contacts + */ + +.view-contact-wrapper, .contact-entry-wrapper { + float: left; + margin: 0 5px 40px 0; + width: 120px; + height: 120px; + padding: 3px; + position: relative; } + +.contact-direction-wrapper { + position: absolute; + top: 20px; } + +.contact-edit-links { + position: absolute; + top: 60px; } + +.contact-entry-photo-wrapper {} + +.contact-entry-photo { + margin-left: 20px; } + +.contact-entry-name { + width: 120px; + font-weight: bold; + /*overflow: hidden;*/ } + +.contact-entry-photo { + position: relative; } + +.contact-entry-edit-links .icon { + border: 1px solid #babdb6; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + background-color: #fff; } + +#contact-entry-url, [id^="contact-entry-url"] { + font-size: smaller; + /*overflow: scroll;*/ } + +#contact-entry-network, [id^="contact-entry-network"] { + font-size: smaller; + font-style: italic; } + +#contact-edit-banner-name { + font-size: 1.5em; } + +#contact-edit-photo-wrapper { + position: relative; + float: left; + padding: 20px; } + +#contact-edit-direction-icon { + position: absolute; + top: 60px; + left: 0; } + +#contact-edit-nav-wrapper { + margin-left: 0px; } + +#contact-edit-links { + margin-top: 23px; + ul { + list-style-type: none; } } + +#contact-drop-links { + margin-left: 5px; } + +#contact-edit-nav-wrapper .icon { + border: 1px solid #babdb6; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } + +#contact-edit-poll-wrapper { + margin-left: 0px; } + +#contact-edit-last-update-text { + margin-bottom: 15px; } + +#contact-edit-last-updated { + font-weight: bold; } + +#contact-edit-poll-text { + display: inline; } + +#contact-edit-info_tbl, #contact-edit-info_parent, .mceLayout { + width: 100%; } + +#contact-edit-end { + clear: both; + margin-bottom: 65px; } + +.contact-photo-menu-button { + position: absolute; + background-image: url("dark/photo-menu.jpg"); + background-position: top left; + background-repeat: no-repeat; + margin: 0px; + padding: 0px; + width: 16px; + height: 16px; + top: 64px; + left: 0px; + overflow: hidden; + text-indent: 40px; + display: none; } + +.contact-photo-menu { + width: auto; + border: 2px solid #444; + background: #2e2f2e; + color: #eec; + position: absolute; + left: 0px; + top: 90px; + display: none; + z-index: 10000; + ul { + margin: 0px; + padding: 0px; + list-style: none; } + li a { + display: block; + padding: 2px; + &:hover { + color: #fff; + background: #3465A4; + text-decoration: none; } } } + +/** + * register, settings & profile forms + */ + +.openid {} + +#id_openid_url { + background: url(dark/login-bg.gif) no-repeat; + background-position: 0 50%; + padding-left: 18px; } + +#settings-nickname-desc { + background-color: #eec; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + padding: 5px; + color: #111; } + +#settings-default-perms { + margin-bottom: 20px; } + +#register-form div, #profile-edit-form div { + clear: both; } + +.settings-block { + label { + clear: left; } + input { + margin: 10px 5px; } } + +/*#register-form label, */ +/*#profile-edit-form label {*/ +/* width: 300px; */ +/* float: left; */ +/*} */ + +/*#register-form span, */ +/*#profile-edit-form span {*/ +/* color: #555753; */ +/* display: block; */ +/* margin-bottom: 20px; */ +/*} */ + +#profile-edit-marital-label span { + margin: -4px; } + +.settings-submit-wrapper, .profile-edit-submit-wrapper { + margin: 0 0 30px -3px; } + +.profile-edit-side-div { + display: none; } + +/*.profile-edit-side-div:hover { + display: block; +} +.profile-edit-side-link { + margin: 3px 0px 0px 70px; +}*/ + +#profiles-menu-trigger { + margin: 0px 0px 0px 25px; } + +.profile-listing { + float: left; + margin: 20px 20px 0px 0px; } + +.icon-profile-edit { + background: url("dark/icons.png") -150px 0px no-repeat; + border: 0; + cursor: pointer; + display: block; + float: right; + width: 20px; + height: 20px; + margin: 0 0 -18px; + position: absolute; + text-decoration: none; + top: 113px; + right: 260px; } + +#profile-edit-links ul { + margin: 20px 0; + padding: 0; + list-style: none; } + +.marital { + margin-top: 5px; } + +#register-sitename { + display: inline; + font-weight: bold; } + +#advanced-expire-popup { + background: #2e2f2e; + color: #eec; } + +#id_ssl_policy { + width: 374px; } + +#theme-preview img { + margin: 10px 10px 10px 288px; } + +/** + * contacts selector + */ + +.group-delete-wrapper { + margin: -31px 50px 0 0; + float: right; } + +/*.group-delete-icon { + margin: 0 0 0 10px; +}*/ + +#group-edit-submit-wrapper { + margin: 0 0 10px 0; + display: inline; } + +#group-edit-desc { + margin: 10px 0px; } + +#group-members, #prof-members { + height: 200px; + overflow: auto; + border: 1px solid #555753; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } + +#group-all-contacts, #prof-all-contacts { + height: 200px; + overflow: auto; + border: 1px solid #555753; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; } + +#group-members h3, #group-all-contacts h3, #prof-members h3, #prof-all-contacts h3 { + color: #eeeeec; + background-color: #555753; + margin: 0; + padding: 5px; } + +#group-separator, #prof-separator { + display: none; } + +/** + * profile + */ + +#cropimage-wrapper { + float: left; } + +#crop-image-form { + clear: both; } + +/** + * intros + */ + +.intro-wrapper { + margin-top: 20px; } + +.intro-fullname { + font-size: 1.1em; + font-weight: bold; } + +.intro-desc { + margin-bottom: 20px; + font-weight: bold; } + +.intro-note { + padding: 10px; } + +.intro-end { + padding: 30px; } + +.intro-form { + float: left; } + +.intro-approve-form, .intro-approve-as-friend-end { + clear: both; } + +.intro-submit-approve, .intro-submit-ignore { + margin-right: 20px; } + +.intro-submit-approve { + margin-top: 15px; } + +.intro-approve-as-friend-label, .intro-approve-as-fan-label, .intro-approve-as-friend, .intro-approve-as-fan { + float: left; } + +.intro-form-end { + clear: both; + margin-bottom: 10px; } + +.intro-approve-as-friend-desc { + margin-top: 10px; } + +.intro-approve-as-end { + clear: both; + margin-bottom: 10px; } + +.intro-end, .clear { + clear: both; } + +/** + * events + */ + +.eventcal { + float: left; + font-size: 20px; } + +.event { + background: #2e2f2e; } + +.vevent { + border: 1px solid #ccc; + .event-description, .event-location, .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;*/ } + +.event-description:before { + content: url('../../../images/calendar.png'); + margin-right: 15px; } + +.event-start, .event-end { + margin-left: 10px; + width: 330px; + font-size: smaller; } + +.event-start .dtstart, .event-end .dtend { + float: right; } + +.event-list-date { + margin-bottom: 10px; } + +.prevcal, .nextcal { + float: left; + margin-left: 32px; + margin-right: 32px; + margin-top: 64px; } + +.event-calendar-end { + clear: both; } + +.calendar { + font-family: monospace; } + +.today { + font-weight: bold; + color: #FF0000; } + +#event-start-text, #event-finish-text { + margin-top: 10px; + margin-bottom: 5px; } + +#event-nofinish-checkbox, #event-nofinish-text, #event-adjust-checkbox, #event-adjust-text, #event-share-checkbox { + float: left; } + +#event-datetime-break { + margin-bottom: 10px; } + +#event-nofinish-break, #event-adjust-break, #event-share-break { + clear: both; } + +#event-desc-text, #event-location-text { + margin-top: 10px; + margin-bottom: 5px; } + +#event-submit { + margin-top: 10px; } + +.body-tag { + margin: 10px 0; + opacity: 0.5; + &:hover { + opacity: 1.0 !important; } } + +.filesavetags, .categorytags { + margin: 20px 0; + opacity: 0.5; } + +.filesavetags:hover, .categorytags:hover { + margin: 20px 0; + opacity: 1.0 !important; } + +.item-select { + opacity: 0.1; + margin: 5px 0 0 6px !important; + &:hover { + opacity: 1; } } + +.checkeditem { + opacity: 1; } + +#item-delete-selected { + margin-top: 30px; } + +/* was tired of having no way of moving it around, so +* here's a little 'hook' to do so */ + +.delete-checked { + position: absolute; + left: 35px; + margin-top: 20px; } + +#item-delete-selected-end { + clear: both; } + +#item-delete-selected-icon { + float: left; + margin-right: 5px; } + +#item-delete-selected-desc { + float: left; + margin-right: 5px; + &:hover { + text-decoration: underline; } } + +.fc-state-highlight { + background: #eec; + color: #2e2f2e; } + +/** + * directory + */ + +.directory-item { + float: left; + margin: 0 5px 4px 0; + padding: 3px; + width: 180px; + height: 250px; + position: relative; } + +/** + * sidebar + */ + +#group-sidebar { + margin-bottom: 10px; } + +.group-selected, .nets-selected, .fileas-selected { + padding: 3px; + color: #2e2f2e; + background: #88a9d2; + font-weight: bold; } + +.group-selected:hover, .nets-selected:hover, .fileas-selected:hover { + color: #2e2f2e; } + +.groupsideedit { + margin-right: 10px; } + +#sidebar-group-ul { + padding-left: 0; } + +#sidebar-group-list { + margin: 0 0 5px 0; + ul { + list-style-type: none; + list-style-position: inside; } + li { + margin-top: 10px; } + .icon { + display: inline-block; + height: 12px; + width: 12px; } } + +#sidebar-new-group { + margin: auto; + display: inline-block; + color: #efefef; + text-decoration: none; + text-align: center; } + +#peoplefind-sidebar form { + margin-bottom: 10px; } + +#sidebar-new-group { + &:hover { + /*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% );*/ + /*background-color: #b20202;*/ } + &:active { + position: relative; + top: 1px; } } + +#side-peoplefind-url { + background-color: #2e2f2e; + color: #eec; + border: 1px 999 solid; + margin-right: 3px; + width: 75%; + &:hover, &:focus { + background-color: #efefef; + color: #222; + border: 1px 333 solid; } } + +.nets-ul { + list-style-type: none; + padding-left: 0px; + li { + margin: 10px 0 0; } } + +.nets-link, .nets-all { + margin-left: 0px; } + +#netsearch-box { + margin-top: 20px; + width: 150px; + #search-submit { + margin: 5px 0px 0px 0px; } } + +/** + * admin + */ + +#pending-update { + float: right; + color: #fff; + font-weight: bold; + background-color: #ff0000; + padding: 0 .3em; } + +.admin { + &.linklist { + border: 0; + padding: 0; } + &.link { + list-style-position: inside; } } + +#adminpage { + color: #eec; + background: #2e2f2e; + margin: 5px; + padding: 10px; + dl { + clear: left; + margin-bottom: 2px; + padding-bottom: 2px; + border-bottom: 1px solid #000; } + dt { + width: 250px; + float: left; + font-weight: bold; } + dd { + margin-left: 250px; } + h3 { + border-bottom: 1px solid #ccc; } + .submit { + clear: left; } + #pluginslist { + margin: 0; + padding: 0; } + .plugin { + list-style: none; + display: block; + border: 1px solid #888; + padding: 1em; + margin-bottom: 5px; + clear: left; } + .toggleplugin { + float: left; + margin-right: 1em; } + table { + width: 100%; + border-bottom: 1px solid #000; + margin: 5px 0; + th { + text-align: left; } } + td .icon { + float: left; } + table { + &#users img { + width: 16px; + height: 16px; } + tr:hover { + color: #2e2f2e; + background-color: #eec; } } + .selectall { + text-align: right; } + #users a { + color: #eec; + text-decoration: underline; } } + +#users .name { + color: #eec; } + +/** + * form fields + */ + +.field { + /*margin-bottom: 10px;*/ + /*padding-bottom: 10px;*/ + overflow: auto; + /* width: 100%;*/ + label { + width: 38%; + display: inline-block; + font-size: 1.077em; + margin: 0 10px 1em 0; + border: 1px #2e2f2e solid; + padding: 5px; + background: #eec; + color: #111; } } + +.field .onoff { + float: right; + margin: 0 330px 0 auto; + width: 80px; + a { + display: block; + border: 1px solid #666; + padding: 3px 6px 4px 10px; + height: 16px; + text-decoration: none; } + .on { + background: url("../../../images/onoff.jpg") no-repeat 42px 1px #999999; + color: #111; + text-align: left; } + .off { + background: url("../../../images/onoff.jpg") no-repeat 2px 1px #cccccc; + color: #333; + text-align: right; } } + +.hidden { + display: none !important; } + +.field textarea { + width: 80%; + height: 100px; } + +.field_help { + display: block; + margin-left: 297px; + color: #aaa; } + +.field.radio .field_help { + margin-left: 297px; } + +label { + width: 38%; + display: inline-block; + font-size: 1.077em; + margin: 0 10px 1em 0; + border: 1px #2e2f2e solid; + padding: 5px; + background: #eec; + color: #111; } + +input { + width: 250px; + height: 25px; + border: 1px #999 solid; + &[type="text"], &[type="password"], &[type="search"] { + width: 250px; + height: 25px; + border: 1px #999 solid; } + &[type="checkbox"], &[type="radio"] { + border: 1px #999 solid; + margin: 0 0 0 0; + height: 15px; + width: 15px; } + &[type="submit"], &[type="button"] { + background-color: #eee; + border: 2px outset #aaa; + border-radius: 5px; + box-shadow: 1px 3px 4px 0 #111; + color: #2e302e; + cursor: pointer; + font-weight: bold; + width: auto; + text-shadow: 1px 1px #000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; } + &[type="submit"]:active, &[type="button"]:active { + box-shadow: 0 0 0 0; } } + + +/* + * update + */ + +.popup { + width: 100%; + height: 100%; + top: 0px; + left: 0px; + position: absolute; + display: none; + .background { + background-color: #000; + opacity: 0.5; + width: 100%; + height: 100%; + position: absolute; + top: 0px; + left: 0px; } + .panel { + top: 25%; + left: 25%; + width: 50%; + height: 50%; + padding: 1em; + position: absolute; + border: 4px solid #000000; + background-color: #FFFFFF; } } + +#panel { + z-index: 100; } + +.grey { + color: grey; } + +.orange { + color: orange; } + +.red { + color: red; } + +.popup .panel { + .panel_text { + display: block; + overflow: auto; + height: 80%; } + .panel_in { + width: 100%; + height: 100%; + position: relative; } + .panel_actions { + width: 100%; + bottom: 4px; + left: 0px; + position: absolute; } } + +.panel_text .progress { + width: 50%; + overflow: hidden; + height: auto; + border: 1px solid #cccccc; + margin-bottom: 5px; + span { + float: right; + display: block; + width: 25%; + background-color: #eeeeee; + text-align: right; } } + +/** + * OAuth + */ + +.oauthapp { + height: auto; + overflow: auto; + border-bottom: 2px solid #cccccc; + padding-bottom: 1em; + margin-bottom: 1em; + img { + float: left; + width: 48px; + height: 48px; + margin: 10px; + &.noicon { + background-image: url("../../../images/icons/48/plugin.png"); + background-position: center center; + background-repeat: no-repeat; } } + a { + float: left; } } + +/** + * icons + */ + +.iconspacer { + display: block; + width: 16px; + height: 16px; } + +.icon { + display: block; + width: 20px; + height: 20px; + background: url(dark/icons.png) no-repeat; + border: 0; + text-decoration: none; + border-radius: 5px; + &:hover { + border: 0; + text-decoration: none; } } + +.editicon { + display: inline-block; + width: 21px; + height: 21px; + background: url(dark/editicons.png) no-repeat; + border: 0; + text-decoration: none; } + +.shadow { + box-shadow: 2px 2px 5px 2px #111; + &:active, &:focus, &:hover { + box-shadow: 0 0 0 0; } } + +.editicon:hover { + border: 0; } + +.boldbb { + background-position: 0px 0px; + &:hover { + background-position: -22px 0px; } } + +.italicbb { + background-position: 0px -22px; + &:hover { + background-position: -22px -22px; } } + +.underlinebb { + background-position: 0px -44px; + &:hover { + background-position: -22px -44px; } } + +.quotebb { + background-position: 0px -66px; + &:hover { + background-position: -22px -66px; } } + +.codebb { + background-position: 0px -88px; + &:hover { + background-position: -22px -88px; } } + +.imagebb { + background-position: -44px 0px; + &:hover { + background-position: -66px 0px; } } + +.urlbb { + background-position: -44px -22px; + &:hover { + background-position: -66px -22px; } } + +.videobb { + background-position: -44px -44px; + &:hover { + background-position: -66px -44px; } } + +.icon { + &.drop, &.drophide, &.delete { + float: left; + margin: 0 2px; } + &.s22 { + &.delete { + display: block; + background-position: -110px 0; } + &.text { + padding: 10px 0px 0px 25px; + width: 200px; } } + &.text { + text-indent: 0px; } + &.s16 { + min-width: 16px; + height: 16px; } } + +.s16 .add { + background: url("../../../images/icons/16/add.png") no-repeat; } + +.add { + margin: 0px 5px; } + +.article { + background-position: -50px 0; } + +.audio { + background-position: -70px 0; } + +.block { + background-position: -90px 0px; } + +.drop, .delete { + background-position: -110px 0; } + +.drophide { + background-position: -130px 0; } + +.edit { + background-position: -150px 0; } + +.camera { + background-position: -170px 0; } + +.dislike { + background-position: -190px 0; } + +.file-as { + background-position: -230px -60px; } + +.like { + background-position: -211px 0; } + +.link { + background-position: -230px 0; } + +.globe, .location { + background-position: -50px -20px; } + +.noglobe, .nolocation { + background-position: -70px -20px; } + +.no { + background-position: -90px -20px; } + +.pause { + background-position: -110px -20px; } + +.play { + background-position: -130px -20px; } + +.pencil { + background-position: -151px -18px; } + +.small-pencil { + background-position: -170px -20px; } + +.recycle { + background-position: -190px -20px; } + +.remote-link { + background-position: -210px -20px; } + +.share { + background-position: -230px -20px; } + +.tools { + background-position: -50px -40px; } + +.lock { + background-position: -70px -40px; } + +.unlock { + background-position: -88px -40px; } + +.video { + background-position: -110px -40px; } + +.attach { + background-position: -190px -40px; } + +.language { + background-position: -210px -40px; } + +.starred { + background-position: -130px -60px; } + +.unstarred { + background-position: -150px -60px; } + +.tagged { + background-position: -170px -60px; } + +.on { + background-position: -50px -60px; } + +.off { + background-position: -70px -60px; } + +.prev { + background-position: -90px -60px; } + +.next { + background-position: -110px -60px; } + +.icon.dim { + opacity: 0.3; } + +#pause { + position: fixed; + bottom: 40px; + right: 30px; } + +.border { + border: 1px solid #babdb6; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + &:hover { + border: 1px solid #babdb6; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } } + +.attachtype { + display: block; + width: 20px; + height: 23px; + background-image: url(../../../images/content-types.png); } + +.type-video { + background-position: 0px 0px; } + +.type-image { + background-position: -20px 0; } + +.type-audio { + background-position: -40px 0; } + +.type-text { + background-position: -60px 0px; } + +.type-unkn { + background-position: -80px 0; } + +/** + * footer + */ + +.cc-license { + margin-top: 100px; + font-size: 0.7em; } + +footer { + display: block; + /*margin: 50px 20%;*/ + clear: both; } + +#profile-jot-text { + height: 20px; + color: #eec; + border: 1px solid #eec; + border-radius: 5px; + width: 99.5%; } + +/** + * acl + */ + +#photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper { + display: block !important; + background: #2e2f2e; + color: #eec; } + +#acl-wrapper { + width: 660px; + margin: 0 auto; } + +#acl-search { + float: right; + background: white url("../../../images/search_18.png") no-repeat right center; + padding-right: 20px; + margin: 6px; + color: #111; } + +#acl-showall { + float: left; + display: block; + width: auto; + height: 18px; + background: #eeeecc url("../../../images/show_all_off.png") 8px 8px no-repeat; + padding: 7px 10px 7px 30px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + color: #999; + margin: 5px 0; + &.selected { + color: #000; + background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; } } + +#acl-list { + height: 210px; + border: 1px solid #ccc; + clear: both; + margin-top: 30px; + overflow: auto; } + +/*#acl-list-content { +}*/ + +.acl-list-item { + border: 1px solid #eec; + display: block; + float: left; + height: 110px; + margin: 3px 0 5px 5px; + width: 120px; + img { + width: 22px; + height: 22px; + float: left; + margin: 5px 5px 20px; } + p { + height: 12px; + font-size: 10px; + margin: 0 0 22px; + padding: 2px 0 1px; } + a { + background: #eeeecc 3px 3px no-repeat; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + clear: both; + font-size: 10px; + display: block; + width: 55px; + height: 20px; + color: #2e2f2e; + margin: 5px auto 0; + padding: 0 3px; + text-align: center; + vertical-align: middle; } } + +#acl-wrapper a:hover { + text-decoration: none; + color: #2e2f2e; + border: 0; } + +.acl-button-show { + background-image: url('../../../images/show_off.png'); + margin: 0 auto; } + +.acl-button-hide { + background-image: url('../../../images/hide_off.png'); + margin: 0 auto; } + +.acl-button-show.selected { + color: #2e2f2e; + background-color: #9ade00; + background-image: url(../../../images/show_on.png); } + +.acl-button-hide.selected { + color: #2e2f2e; + background-color: #ff4141; + background-image: url(../../../images/hide_on.png); } + +.acl-list-item { + &.groupshow { + border-color: #9ade00; } + &.grouphide { + border-color: #ff4141; } } + +/** /acl **/ + +/* autocomplete popup */ + +.acpopup { + max-height: 175px; + max-width: 42%; + background-color: #555753; + color: #fff; + overflow: auto; + z-index: 100000; + border: 1px solid #cccccc; } + +.acpopupitem { + background-color: #555753; + padding: 4px; + clear: left; + img { + float: left; + margin-right: 4px; } + &.selected { + color: #2e302e; + background-color: #eeeeec; } } + +.qcomment-wrapper { + padding: 0px; + margin: 5px 5px 5px 81%; } + +.qcomment { + opacity: 0.5; + &:hover { + opacity: 1.0; } } + +#network-star-link { + margin-top: 10px; } + +.network-star { + float: left; + margin-right: 5px; + &.icon.starred { + display: inline-block; } } + +#fileas-sidebar {} + +.fileas-ul { + padding: 0; } + +/* + * addons theming + */ + +#sidebar-page-list { + ul { + padding: 0; + margin: 5px 0; } + li { + list-style: none; } } + +#jappix_mini { + margin-left: 130px; + position: fixed; + bottom: 0; + right: 175px !important; + /* override the jappix css */ + z-index: 999; } + +/* media stuff */ +@media handheld { + body { + font-size: 15pt; } } -- cgit v1.2.3 From b936e3a18ae766ffa26c6b119a0bb639b0c5fd5b Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Fri, 27 Apr 2012 02:33:58 -0400 Subject: fix 2 issues. contacts img in finder; wall filer title Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 6bab0109a..5efb44603 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -1385,10 +1385,36 @@ div { br { clear: left; } } } +.profile-match-wrapper { + float: left; + margin: 0 5px 40px 0; + width: 120px; + height: 120px; + padding: 3px; + position: relative; +} +.icon.drophide.profile-match-ignore { + margin: 0 6px 0 -3px; +} +.profile-match-photo { + +} + [id$="-end"], [class$="end"] { clear: both; margin: 0 0 10px 0; } +.profile-match-end { + margin: 0 0 5px 0; +} +.profile-match-name { + font-weight: bold; + margin: auto auto auto 23px; +} +.profile-match-connect { + font-style: italic; + margin: auto auto auto 23px; +} #advanced-profile-with { margin-left: 200px; } -- cgit v1.2.3 From deae1df3beda132dde5e907cc784db5f7ce577c2 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Fri, 27 Apr 2012 04:42:38 -0400 Subject: fix some css errors Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 5efb44603..96cdb82fa 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -1485,14 +1485,21 @@ div { background-repeat: no-repeat; } #photo-prev-link { - left: 0; - top: 0; - background-image: url(dark/prev.png); } + background-image: url(dark/prev.png); + height: 350px; + left: 1%; + top: 215px; + width: 50px; + z-index: 10; +} #photo-next-link { - right: 0; - top: 0; - background-image: url(dark/next.png); } + background-image: url(dark/next.png); + height: 350px; + right: 45%; + top: 215px; + width: 50px; +} #photo-prev-link a, #photo-next-link a { display: block; @@ -2181,7 +2188,7 @@ div { #side-peoplefind-url { background-color: #2e2f2e; color: #eec; - border: 1px 999 solid; + border: 1px #999 solid; margin-right: 3px; width: 75%; &:hover, &:focus { -- cgit v1.2.3 From d0d79196ba43a9826eff135ef5cb2096570fc568 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Fri, 27 Apr 2012 13:31:06 -0400 Subject: fix contact-friend stuff on profile sidebar Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 96cdb82fa..321cb7618 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -693,10 +693,26 @@ nav #nav-notifications-linkmenu { */ #asidemain { - h4 { - font-size: 1.2em; } - #viewcontacts { - text-align: right; } } + h4 { + font-size: 1.2em; } + #viewcontacts { + text-align: right; + } + #contact-block { + width: 99%; + .contact-block-content { + width: 99%; + .contact-block-div { + float: left; + margin: 0 5px 5px 0; + width: 50px; + height: 50px; + padding: 3px; + position: relative; + } + } + } +} .aprofile dt { background: #eec; @@ -1400,7 +1416,7 @@ div { } -[id$="-end"], [class$="end"] { +[id$="-end"], [class$="-end"] { clear: both; margin: 0 0 10px 0; } -- cgit v1.2.3 From 64f3af49fa31ee566515cb878f5e5e48a0b4f6b3 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Fri, 27 Apr 2012 14:33:56 -0400 Subject: remove extra netsearch-box and fix Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 321cb7618..c56adf5a1 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -743,12 +743,6 @@ nav #nav-notifications-linkmenu { font-size: 1.2em; padding: 0.2em 0.5em; } -#netsearch-box { - margin: 20px 0px 30px; - width: 150px; - #search-submit { - margin: 5px 5px 0px 0px; } } - .ttright { margin: 0px 0px 0px 0px; } @@ -2222,10 +2216,12 @@ div { margin-left: 0px; } #netsearch-box { - margin-top: 20px; - width: 150px; - #search-submit { - margin: 5px 0px 0px 0px; } } + margin: 20px 0px 30px; + width: 135px; + #search-submit { + margin: 5px 5px 0px 0px; + } +} /** * admin -- cgit v1.2.3 From 3bfa3f2a13f4e3b75b8e922eb3d946e1a31809b6 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Fri, 27 Apr 2012 21:02:57 -0400 Subject: fix #search-text Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index c56adf5a1..41fd2c8aa 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -477,13 +477,11 @@ nav #nav-notifications-linkmenu { #search-text { border: 1px #eec solid; background: #2e2f2e; - color: #eec; } - -.search-box #search-text { + color: #eec; + font-size: 8pt; margin: 8px; width: 10em; - height: 14px; - color: #eec; } + height: 14px; } #scrollup { position: fixed; -- cgit v1.2.3 From 1a13c56fef31ccff494e33cc5634eed6cd567eb5 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Thu, 3 May 2012 14:25:18 -0400 Subject: major reworking of dispy dark. light to follow Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 3706 ++++++++++++++++++++------------------ 1 file changed, 1927 insertions(+), 1779 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 41fd2c8aa..6d76044ba 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -12,684 +12,718 @@ /* from html5boilerplate */ /* these are to tell browsers they should be displayed a certain way */ -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { - display: block; } - -audio, canvas, video, time { - display: inline-block; - *display: inline; - *zoom: 1; } - +@import "_base"; + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block; +} +audio, +canvas, +video, +time { + display: inline-block; + *display: inline; + *zoom: 1; +} audio:not([controls]), [hidden] { - display: none; } - -/* - * Base - */ + display: none; +} /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Force vertical scrollbar in non-IE - * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g + * 3. Prevent iOS text size adjust on device orientation change, + * without disabling user zoom: h5bp.com/g */ - html { - font-size: 100%; - overflow-y: scroll; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; } - + font-size: 100%; + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} body { - margin: 0; - font-size: 16px; - line-height: 1.1em; - font-family: sans-serif; - color: #eec; - background-color: #2e2f2e; } - + margin: 0; + padding: 0; + .default_font; + color: @main_colour; + background-color: @bg_colour; +} button, input, select, textarea { - font-family: sans-serif; - color: #eec; - background-color: #2e2f2e; } - + color: @main_colour; + background-color: @bg_colour; +} select { - border: 1px #555 dotted; - padding: 3px; - margin: 3px; - color: #eec; - background: #2e2f2e; } - + border: 1px #555 dotted; + padding: 1px; + margin: 3px; + color: @main_colour; + background: @bg_colour; +} option { - padding: 3px; - color: #eec; - background: #2e2f2e; - &[selected="selected"] { - color: #2e2f2e; - background: #eec; } } - + padding: 1px; + color: @main_colour; + background: @bg_colour; + &[selected="selected"] { + color: @bg_colour; + background: @main_colour; + } +} ul, ol { - padding: 0; } - + .list_reset; +} +tr:nth-child(even) { + background-color: lighten(@bg_colour, 10%); +} /* remember to define focus styles! */ - :focus { - outline: 0; } - + outline: 0; +} [disabled="disabled"] { - background: #4e4f4f; - color: #ddb; } - + background: @med_bg_colour; + color: @disabled_colour; +} /* remember to highlight inserts somehow! */ - +ins, mark { + background-color: @bg_alt_colour; + color: @lt_main_colour; +} ins { - background-color: #2e302e; - color: #ff9; - text-decoration: none; } - + text-decoration: none; +} mark { - background-color: #2e302e; - color: #ff9; - font-style: italic; - font-weight: bold; } - + font-style: italic; + font-weight: bold; +} /* Redeclare monospace font family: h5bp.com/j */ - pre, code, kbd, samp, .wall-item-body code { - font-family: monospace, monospace; - _font-family: monospace; - font-size: 1em; } - + font-family: monospace, monospace; + _font-family: monospace; + font-size: 1em; +} /* Improve readability of pre-formatted text in all browsers */ - pre, .wall-item-body code { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; } - + .wrap; +} q { - quotes: none; - &:before, &:after { - content: ""; - content: none; } } - + quotes: none; + &:before, &:after { + content: ""; + content: none; + } +} small { - font-size: 85%; } - + font-size: 85%; +} /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ - sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} sub { - bottom: -0.25em; } - + bottom: -0.25em; +} sup { - top: -0.5em; } - + top: -0.5em; +} img { - border: 0 none; } - + border: 0 none; +} a { - color: #88a9d2; - text-decoration: none; - margin-bottom: 1px; - &:hover img { - text-decoration: none; } } - + color: @link_colour; + text-decoration: none; + margin-bottom: 1px; + &:hover { + color: @hover_colour; + border-bottom: 1px dotted @hover_colour; + } + &:hover img { + text-decoration: none; + } +} blockquote { - background: #444; - color: #eec; - text-indent: 5px; - padding: 5px; - border: 1px #aaa solid; - border-radius: 5px; } - -a:hover { - color: #729fcf; - border-bottom: 1px dotted #729fcf; } - + background: #444; + color: @main_colour; + text-indent: 5px; + padding: 5px; + border: 1px #aaa solid; + .rounded_corners; +} .required { - display: inline; - color: #ff0; - font-size: 16px; - font-weight: bold; - margin: 3px; } - + display: inline; + color: #ff0; + font-size: 16px; + font-weight: bold; + margin: 3px; +} .fakelink, .lockview { - color: #729fcf; - cursor: pointer; } - + color: @link_colour; + cursor: pointer; +} .fakelink:hover { - color: #729fcf; } - + color: @hover_colour; +} .smalltext { - font-size: 0.7em; } - + font-size: 0.7em; +} #panel { - position: absolute; - font-size: 0.8em; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - border: 1px solid #fff; - background-color: #2e302e; - color: #eeeeec; - padding: 1em; } - + position: absolute; + .rounded_corners; + .borders(1px, solid, @main_alt_colour); + background-color: @bg_alt_colour; + color: @main_colour; + padding: 1em; +} .pager { - margin-top: 60px; - display: block; - clear: both; - text-align: center; - span { - padding: 4px; - margin: 4px; } } - + margin-top: 60px; + display: block; + clear: both; + text-align: center; + span { + padding: 4px; + margin: 4px; + } +} .pager_current { - background-color: #729fcf; - color: #fff; } + background-color: @link_colour; + color: @main_alt_colour; +} + /** * global */ /* .tool .action */ - .action { - margin: 5px 0; } - + margin: 5px 0; +} .tool { - margin: 5px 0; - list-style: none; } - + margin: 5px 0; + list-style: none; +} #articlemain { - width: 100%; - height: 100%; - margin: 0 auto; } + .box(100%, 100%); + margin: 0 auto; +} +[class$="-desc"], [id$="-desc"] { + color: @bg_colour; + background: @main_colour; + .rounded_corners; + .box_shadow(3px, 3px, 5px); + padding: 3px; + margin: 5px 0; + font-weight: bold; +} + /** * login */ - #asidemain .field { - overflow: hidden; - width: 200px; } - + overflow: hidden; + width: 200px; +} #login-extra-links { - overflow: auto !important; - padding-top: 60px !important; - width: 100% !important; - a { - margin-right: 20px; } } - + overflow: auto !important; + padding-top: 60px !important; + width: 100% !important; + a { + margin-right: 20px; + } +} #login_standard { - display: block !important; - float: none !important; - height: 100% !important; - position: relative !important; - width: 100% !important; - .field label { - width: 200px !important; } - input { - margin: 0 0 8px !important; - width: 210px !important; - &[type="text"] { - margin: 0 0 8px !important; - width: 210px !important; } } } - + display: block !important; + float: none !important; + height: 100% !important; + position: relative !important; + width: 100% !important; + .field label { + width: 200px !important; + } + input { + margin: 0 0 8px !important; + width: 210px !important; + &[type="text"] { + margin: 0 0 8px !important; + width: 210px !important; } + } +} #login-submit-wrapper { - margin: 0 !important; } - + margin: 0 !important; +} #login-submit-button { - margin-left: 0px !important; } - + margin-left: 0px !important; +} #asidemain #login_openid { - position: relative !important; - float: none !important; - margin-left: 0px !important; - height: auto !important; - width: 200px !important; } - + position: relative !important; + float: none !important; + margin-left: 0px !important; + height: auto !important; + width: 200px !important; +} #login_openid { - #id_openid_url { - width: 180px !important; - overflow: hidden !important; } - label { - width: 180px !important; } } + #id_openid_url { + width: 180px !important; + overflow: hidden !important; } + label { + width: 180px !important; + } } + /** * nav */ - nav { - height: 60px; - background-color: #1d1f1d; - color: #eeeeec; - position: relative; - padding: 20px 20px 10px 95px; - a { - text-decoration: none; - color: #eeeeec; - border: 0px; - &:hover { - text-decoration: none; - color: #eeeeec; - border: 0px; } } - #banner { - display: block; - position: absolute; - left: 51px; - top: 25px; - #logo-text a { - font-size: 40px; - font-weight: bold; - margin-left: 3px; } } } - + height: 60px; + background-color: @dk_bg_colour; + color: @main_alt_colour; + position: relative; + padding: 20px 20px 10px 95px; + a { + text-decoration: none; + color: @main_alt_colour; + border: 0px; + &:hover { + text-decoration: none; + color: @main_alt_colour; + border: 0px; } } + #banner { + display: block; + position: absolute; + left: 51px; + top: 25px; + #logo-text a { + font-size: 40px; + font-weight: bold; + margin-left: 3px; } } +} ul#user-menu-popup { - display: none; - position: absolute; - background-color: #555753; - width: 100%; - padding: 10px 0px; - margin: 0px; - top: 20px; - left: 0; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; - box-shadow: 5px 10px 10px 0 #111; - z-index: 10000; - li { - display: block; - a { - display: block; - padding: 5px; - &:hover { - color: #2e302e; - background-color: #eeeeec; } - &.nav-sep { - border-top: 1px solid #eeeeec; } } } } - + display: none; + position: absolute; + background-color: @menu_bg_colour; + width: 100%; + padding: 10px 0px; + margin: 0px; + top: 20px; + left: 0; + .rounded_corners(0 0 5px 5px); + .box_shadow(5px, 5px, 10px, 0px); + z-index: 10000; + li { + display: block; + a { + display: block; + padding: 5px; + &:hover { + color: @main_colour; + background-color: @bg_alt_colour; + } + &.nav-sep { + border-top: 1px solid @bg_alt_colour; } } } +} nav .nav-link { - display: inline-block; - width: 22px; - height: 22px; - overflow: hidden; - margin: 0px 5px 5px; - text-indent: 50px; - background: transparent url(dark/icons.png) 0 0 no-repeat; } - + display: inline-block; + .box(22px, 22px); + overflow: hidden; + margin: 0px 5px 5px; + text-indent: 50px; + background: transparent url(dark/icons.png) 0 0 no-repeat; +} #nav-apps-link { - background-position: 0 -66px; - &:hover { - background-position: -22px -66px; } } - + background-position: 0 -66px; + &:hover { + background-position: -22px -66px; } +} #nav-community-link, #nav-contacts-link { - background-position: 0 -22px; - &:hover { - background-position: -22px -22px; } } - + background-position: 0 -22px; + &:hover { + background-position: -22px -22px; } +} #nav-directory-link { - background-position: -44px -154px; - &:hover { - background-position: -66px -154px; } } - + background-position: -44px -154px; + &:hover { + background-position: -66px -154px; } +} #nav-help-link { - background-position: 0 -110px; - &:hover { - background-position: -22px -110px; } } - + background-position: 0 -110px; + &:hover { + background-position: -22px -110px; } +} #nav-home-link { - background-position: -44px -132px; - &:hover { - background-position: -66px -132px; } } - + background-position: -44px -132px; + &:hover { + background-position: -66px -132px; } +} #nav-intro-link { - background-position: 0px -190px; - &:hover { - background-position: -44px -190px; } } - + background-position: 0px -190px; + &:hover { + background-position: -44px -190px; } +} #nav-login-link, #nav-logout-link { - background-position: 0 -88px; - &:hover { - background-position: -22px -88px; } } - + background-position: 0 -88px; + &:hover { + background-position: -22px -88px; } +} #nav-messages-link { - background-position: -44px -88px; - &:hover { - background-position: -66px -88px; } } - + background-position: -44px -88px; + &:hover { + background-position: -66px -88px; } +} #nav-notify-link, #nav-notifications-linkmenu { - background-position: -44px -110px; } - + background-position: -44px -110px; +} #nav-notify-link:hover { - background-position: -66px -110px; } - + background-position: -66px -110px; +} #nav-network-link { - background-position: 0px -177px; - &:hover { - background-position: -22px -177px; } } - + background-position: 0px -177px; + &:hover { + background-position: -22px -177px; } +} #nav-search-link { - background-position: 0 -44px; - &:hover { - background-position: -22px -44px; } } - -#profile-link, #profile-title, #wall-image-upload, #wall-file-upload, #profile-attach-wrapper, #profile-audio, #profile-link, #profile-location, #profile-nolocation, #profile-title, #jot-title, #profile-upload-wrapper, #profile-video, #profile-jot-submit, #wall-image-upload-div, #wall-file-upload-div, .icon, .hover, .focus, .pointer { - cursor: pointer; } + background-position: 0 -44px; + &:hover { + background-position: -22px -44px; + } +} +#jot-title, +#profile-link, +#profile-title, +#profile-attach-wrapper, +#profile-audio, +#profile-link, +#profile-location, +#profile-nolocation, +#profile-title, +#profile-upload-wrapper, +#profile-video, +#profile-jot-submit, +#wall-image-upload, +#wall-file-upload, +#wall-image-upload-div, +#wall-file-upload-div, +.icon, +.hover, +.focus, +.pointer { + cursor: pointer; +} /* popup notifications */ div.jGrowl div { - &.notice { - background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center; - color: #ffffff; - padding-left: 58px; } - &.info { - background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center; - color: #ffffff; - padding-left: 58px; } } + &.notice { + background: @notice url("../../../images/icons/48/notice.png") no-repeat 5px center; + color: white; + padding-left: 58px; + margin-top: 50px; + } + &.info { + background: @info url("../../../images/icons/48/info.png") no-repeat 5px center; + color: white; + padding-left: 58px; + margin-top: 50px; + } +} #nav-notifications-menu { - margin: 30px 0 0 -20px; - width: 275px; - max-height: 300px; - overflow-y: auto; - font-size: 9pt; - .contactname { - font-weight: bold; - font-size: 0.9em; } - img { - float: left; - margin-right: 5px; } - .notif-when { - font-size: 0.8em; - display: block; } - li { - word-wrap: normal; - border-bottom: 1px solid #000; - &:hover { - color: black; } } - a:hover { - color: black; - text-decoration: underline; } } + margin: 30px 0 0 -20px; + width: 275px; + max-height: 300px; + overflow-y: auto; + font-size: 9pt; + .contactname { + font-weight: bold; + font-size: 0.9em; } + img { + float: left; + margin-right: 5px; } + .notif-when { + font-size: 0.8em; + display: block; } + li { + word-wrap: normal; + border-bottom: 1px solid black; + &:hover { + color: black; } + } + a:hover { + color: black; + text-decoration: underline; } +} nav #nav-notifications-linkmenu { - &.on .icon.s22.notify, &.selected .icon.s22.notify { - background-image: url("../../../images/icons/22/notify_on.png"); } } - + &.on .icon.s22.notify, + &.selected .icon.s22.notify { + // background-image: url("../../../images/icons/22/notify_on.png"); + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAUJcAAFCXAZtv64UAAAHuSURBVCjPbZPbTlNBFIYHLixXRIhEQGNRMUopJAJyAyZ4Z2l8B+XwEBqKtjwOp8oDIAJKIJFUjdFIQCUYrRytdyb0459ht8wG9rrYs9b618y/TsYEH4ZK4qRYYIdDybZOI7TKakIfVhrJ8J2i5IBNyV93/kaaBuv3oV3MgwCTPKGHPkkPA0xRUMBrOgN4AP0o6BseEpF2m3es0qJTFQneyvMhgDsC9tZprnEcGuOPeMcDLUpW3jlLxlDBmJTFY6gLvsVv8tyh9G7U3Z6mwtCuJAoiECSh/w1+8otmTjLqF2KDNsNzRY1bruV0o6rFFtc9S5USh5RRWvAYv4xX9dYPS8ur1oBQC4Y99m2uHriRNda5ErLdU1l3jCI2xdJ3XOYLX6kP2W6K2OF54Et84jN154F31d6ukKOG92pSbcjWLRrbRhVGLTZeOtXqX46LoQSHhJo3jOo3ESrdBQbljIRKNyXUiKHNNSXhTdbZiUzyT/WJ23Zn3BBFy+2u4ZHc1eV2N7EkxAvbbqMRmZOSlbE0g/uajRgl6Iy8r1wpnaFTQ4ji+8XOEsuxYmdDWpJleXJ0+BPdoduL4p5Vavd5IOllmJfiWmSWu6d3pV4jteFWqaAGbLkdKSqtUXXUnN3DSvF8phfy/JfkxfOp9sVb2COz+hY/T0qkwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMS0wOS0xNlQwOTozOTowMCswMjowMC9Oi90AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTEtMDktMTZUMDk6Mzk6MDArMDI6MDBeEzNhAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg=="); + } +} .show { - display: block; } - + display: block; +} #notifications { - height: 20px; - width: 170px; - position: absolute; - top: -19px; - left: 4px; } - + .box(170px, 20px); + position: absolute; + top: -19px; + left: 4px; +} #nav-floater { - position: fixed; - top: 20px; - right: 1%; - padding: 5px; - background: #1d1f1d; - color: transparent; - border-radius: 5px; - z-index: 100; - width: 300px; - height: 60px; } + position: fixed; + top: 20px; + right: 1%; + padding: 5px; + background: @dk_bg_colour; + color: transparent; + .rounded_corners; + z-index: 100; + .box(300px, 60px); +} #nav-buttons { - clear: both; - list-style: none; - padding: 0px; - margin: 0px; - height: 25px; - > li { - padding: 0; - display: inline-block; - margin: 0px -4px 0px 0px; } } - + clear: both; + list-style: none; + padding: 0px; + margin: 0px; + height: 25px; + > li { + padding: 0; + display: inline-block; + margin: 0px -4px 0px 0px; + } +} .floaterflip { - display: block; - position: fixed; - z-index: 110; - top: 56px; - right: 19px; - width: 22px; - height: 22px; - overflow: hidden; - margin: 0px; - background: transparent url(dark/icons.png) -190px -60px no-repeat; } - + display: block; + position: fixed; + z-index: 110; + top: 56px; + right: 19px; + .box(22px, 22px); + overflow: hidden; + margin: 0px; + background: transparent url(dark/icons.png) -190px -60px no-repeat; +} .search-box { - display: inline-block; - margin: 5px; - position: fixed; - right: 0px; - bottom: 0px; - z-index: 100; - background: #1d1f1d; - border-radius: 5px; } - + display: inline-block; + margin: 5px; + position: fixed; + right: 0px; + bottom: 0px; + z-index: 100; + background: @dk_bg_colour; + .rounded_corners; +} #search-text { - border: 1px #eec solid; - background: #2e2f2e; - color: #eec; - font-size: 8pt; - margin: 8px; - width: 10em; - height: 14px; } - + .borders; + background: @bg_colour; + color: @main_colour; + font-size: 8pt; + margin: 8px; + .box(10em, 14px); +} #scrollup { - position: fixed; - right: 5px; - bottom: 40px; - z-index: 100; - a:hover { - text-decoration: none; - border: 0; } } - + position: fixed; + right: 5px; + bottom: 40px; + z-index: 100; + a:hover { + text-decoration: none; + border: 0; + } +} #user-menu { - box-shadow: 5px 0 10px 0 #111; - display: block; - width: 75%; - margin: 3px 0 0 0; - position: relative; - background-color: #555753; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - background: #555753 url("dark/menu-user-pin.jpg") 98% center no-repeat; - clear: both; - top: 4px; - left: 10px; - padding: 2px; - > a { - vertical-align: top; } } - + .box_shadow(5px, 0, 10px, 0); + display: block; + width: 75%; + margin: 3px 0 0 0; + position: relative; + .rounded_corners; + background-color: @menu_bg_colour; + background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAIAAwDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMH/8QAIhAAAQMEAgIDAAAAAAAAAAAAAQIDBAAFBhESIQdBMVFh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/xAAXEQEBAQEAAAAAAAAAAAAAAAABAAIR/9oADAMBAAIRAxEAPwCXiHO8dbsEi35BEhIehNlbUhxhBU82O+G9bKgToD2D+VlmZX9OWZBJuAiMxGlni0w0gJCED4HXv7pSi6eFML//2Q=="); + background-position: 98% center; + background-repeat: no-repeat; + clear: both; + top: 4px; + left: 10px; + padding: 2px; + > a { + vertical-align: top; + } +} #user-menu-label { - font-size: 12px; - padding: 3px 20px 9px 5px; - height: 10px; } - + font-size: 12px; + padding: 3px 20px 9px 5px; + height: 10px; +} .nav-ajax-update, .nav-ajax-left { - width: 30px; - height: 19px; - background: transparent url(dark/notifications.png) 0 0 no-repeat; - color: #222; - font-weight: bold; - font-size: 0.8em; - padding-top: 0.2em; - text-align: center; - float: left; - margin: 0 -1px 0 3px; - display: block; - visibility: hidden; } - + .box(30px, 19px); + background: transparent url(dark/notifications.png) 0 0 no-repeat; + color: #222; + font-weight: bold; + font-size: 0.8em; + padding-top: 0.2em; + text-align: center; + float: left; + margin: 0 -1px 0 3px; + display: block; + visibility: hidden; +} .nav-ajax-update.show, .nav-ajax-left.show { - visibility: visible; } - + visibility: visible; +} #net-update { - background-position: 0px 0px; } - + background-position: 0px 0px; +} #mail-update { - background-position: -30px 0; } - + background-position: -30px 0; +} #notify-update { - background-position: -60px 0px; } - + background-position: -60px 0px; +} #home-update { - background-position: -90px 0px; } - + background-position: -90px 0px; +} #intro-update { - background-position: -120px 0px; } - + background-position: -120px 0px; +} #lang-select-icon { - cursor: pointer; - position: fixed; - left: 28px; - bottom: 6px; - z-index: 10; } - + cursor: pointer; + position: fixed; + left: 28px; + bottom: 6px; + z-index: 10; +} #language-selector { - position: fixed; - bottom: 2px; - left: 52px; - z-index: 10; } - + position: fixed; + bottom: 2px; + left: 52px; + z-index: 10; +} .menu-popup { - position: absolute; - display: none; - width: 11em; - background: #ffffff; - color: #2d2d2d; - margin: 0px; - padding: 0px; - list-style: none; - border: 3px solid #364e59; - z-index: 100000; - -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7); - -moz-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7); - box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7); - a { - display: block; - color: #2d2d2d; - padding: 5px 10px; - text-decoration: none; - &:hover { - background-color: #bdcdd4; } } - .menu-sep { - border-top: 1px solid #9eabb0; } - li { - float: none; - overflow: auto; - height: auto; - display: block; - img { - float: left; - width: 16px; - height: 16px; - padding-right: 5px; } } - .empty { - padding: 5px; - text-align: center; - color: #9eabb0; } } - + position: absolute; + display: none; + width: 11em; + background: white; + color: @bg_colour; + margin: 0px; + padding: 0px; + .borders(3px, solid, @shiny_colour); + z-index: 100000; + .box_shadow; + a { + display: block; + color: @bg_colour; + padding: 5px 10px; + text-decoration: none; + &:hover { + background-color: lighten(@shiny_colour, 55%); + } + } + .menu-sep { + border-top: 1px solid @med_bg_colour; + } + li { + float: none; + overflow: auto; + height: auto; + display: block; + img { + float: left; + .box(16px, 16px); + padding-right: 5px; + } + } + .empty { + padding: 5px; + text-align: center; + color: lighten(@shiny_colour, 45%); + } +} .notif-item { - font-size: small; - a { - vertical-align: middle; } } - + font-size: small; + a { + vertical-align: middle; + } +} .notif-image { - width: 32px; - height: 32px; - padding: 7px 7px 0px 0px; } - + .box(32px, 32px); + padding: 7px 7px 0px 0px; +} .notify-seen { - background: #ddd; } + background: darken(@main_alt_colour, 20%); +} + /** * sysmsg */ - #sysmsg_info { - position: fixed; - bottom: 0; - -moz-box-shadow: 3px 3px 3px 10px 0 #000; - -webkit-box-shadow: 3px 3px 10px 0 #000; - box-shadow: 3px 3px 10px 0 #000; - padding: 10px; - background-color: #fcaf3e; - border: 2px solid #f8911b; - border-bottom: 0; - padding-bottom: 50px; - z-index: 1000; } - + position: fixed; + bottom: 0; + .box_shadow(@main_shadow); + padding: 10px; + background-color: @lt_orange; + .borders(2px, solid, @orange); + border-bottom: 0; + padding-bottom: 50px; + z-index: 1000; +} #sysmsg { - position: fixed; - bottom: 0; - -moz-box-shadow: 3px 3px 10px 0 #000; - -webkit-box-shadow: 3px 3px 10px 0 #000; - box-shadow: 3px 3px 10px 0 #000; - padding: 10px; - background-color: #fcaf3e; - border: 2px solid #f8911b; - border-bottom: 0; - padding-bottom: 50px; - z-index: 1000; } - + position: fixed; + bottom: 0; + .box_shadow(@main_shadow); + padding: 10px; + background-color: @lt_orange; + .borders(2px, solid, @orange); + border-bottom: 0; + padding-bottom: 50px; + z-index: 1000; +} #sysmsg_info br, #sysmsg br { - display: block; - margin: 2px 0px; - border-top: 1px solid #ccccce; } + display: block; + margin: 2px 0px; + border-top: 1px solid @main_colour; +} + /** * aside */ - #asidemain { - float: left; - font-size: smaller; - margin: 20px 0 20px 35px; - width: 25%; - display: inline; } + float: left; + font-size: smaller; + margin: 20px 0 20px 35px; + width: 25%; + display: inline; +} /* for now, disappear these */ - #asideright, #asideleft { - display: none; } - + display: none; +} .vcard { - .fn { - font-size: 1.7em; - font-weight: bold; - border-bottom: 1px solid #729fcf; - padding-bottom: 3px; } - #profile-photo-wrapper { - margin: 20px; - img { - box-shadow: 3px 3px 10px 0 #000; } } } - -/* http://css-tricks.com/snippets/css/css-box-shadow/ -* box-shadow: -* 1. The horizontal offset of the shadow, positive means -* the shadow will be on the right of the box, a negative -* offset will put the shadow on the left of the box. -* 2. The vertical offset of the shadow, a negative one -* means the box-shadow will be above the box, a -* positive one means the shadow will be below the box. -* 3. The blur radius (optional), if set to 0 the shadow -* will be sharp, the higher the number, the more blurred -* it will be. -* 4. The spread radius (optional), positive values increase -* the size of the shadow, negative values decrease the size. -* Default is 0 (the shadow is same size as blur). -* 5. Colo[u]r -*/ - + .fn { + font-size: 1.7em; + font-weight: bold; + border-bottom: 1px solid #729fcf; + padding-bottom: 3px; + } + #profile-photo-wrapper { + margin: 20px; + img { + .box_shadow(3px, 3px, 10px, 0); + } + } +} #asidemain { h4 { font-size: 1.2em; } @@ -703,701 +737,715 @@ nav #nav-notifications-linkmenu { .contact-block-div { float: left; margin: 0 5px 5px 0; - width: 50px; - height: 50px; + .box(50px, 50px); padding: 3px; - position: relative; - } - } - } + position: relative; } } } } .aprofile dt { - background: #eec; - color: #2e2f2e; - font-weight: bold; - box-shadow: 1px 1px 5px 0 #000; - margin: 15px 0 5px; - padding-left: 5px; } - + background: @main_colour; + color: @bg_colour; + font-weight: bold; + .box_shadow(1px 1px 5px 0); + margin: 15px 0 5px; + padding-left: 5px; +} #profile-extra-links ul { - margin-left: 0px; - padding-left: 0px; - list-style: none; } - + margin-left: 0px; + padding-left: 0px; + list-style: none; +} #dfrn-request-link { - background: #3465a4 url(dark/connect.png) no-repeat 95% center; - border-radius: 5px 5px 5px 5px; - color: #eec; - display: block; - font-size: 1.2em; - padding: 0.2em 0.5em; } - + .rounded_corners; + color: @main_colour; + display: block; + font-size: 1.2em; + padding: 0.2em 0.5em; + background-color: @friendica_blue; + // background-image: url(icons/connect.png); + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE4SURBVCiRpZKxLgRRFIa//64dKruZFRIlolBviFKiVHsHrRaFikTCC+hEQtRegMQDqDUKJOPOvauSMJmjYEU2M0viT071/+fLOTlHZkadQgjLkh1LPEoj661WKw5mXG034JxtAgtmrJoVK5WZYYCy1AVQSOYbjeSqMmRmQ8v755Ne77lb5w+d4HMNJopCT7X+bwDQZKfTyf4BIAHeawHe+/kQ/FGM+QagvpFl2VSM/tyMmV7PV14AYMQ5nUp0AULIp0HXzpVvSdLYMmNVAjNdAuNAUQHgxy/ZvEQTSMw0A33DxkIIi2ma3gwC9PKSzRWF2wbdpml62DfyPF9yjlNgAnQGLJjZnXON3Xa7ff8NGPbKQPNrbAOI0a9J2ilLEzAL7P0GqJJizF+BUeDhL2cclJnZPvAg6eADf+imKjSMX1wAAAAASUVORK5CYII="); + background-repeat: no-repeat; + background-position: 95% center; +} #wallmessage-link { - /*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/ - /*border-radius: 5px 5px 5px 5px;*/ - color: #eee; - display: block; - font-size: 1.2em; - padding: 0.2em 0.5em; } - + ///*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/ + ///*border-radius: 5px 5px 5px 5px;*/ + color: @main_alt_colour; + display: block; + font-size: 1.2em; + padding: 0.2em 0.5em; +} .ttright { - margin: 0px 0px 0px 0px; } + margin: 0px; +} + /** * contacts block */ - .contact-block-div { - width: 50px; - height: 50px; - float: left; } - + .box(50px, 50px); + float: left; +} .contact-block-textdiv { - width: 150px; - height: 34px; - float: left; } + .box(150px, 34px); + float: left; +} -#contact-block-end { - clear: both; } /** * jot */ - #jot { - /*width: 785px;*/ - margin: 10px 0 20px 0px; - width: 100%; - #jot-tools { - margin: 0px; - padding: 0px; - height: 35px; - overflow: none; - width: 100%; - /*background-color: #0e232e;*/ - /*border-bottom: 2px solid #9eabb0;*/ - span { - float: left; - margin: 10px 20px 2px 0px; - a { - display: block; } } - .perms { - float: right; - width: 40px; } - li.loading { - float: right; - background-color: #ffffff; - width: 20px; - vertical-align: center; - text-align: center; - border-top: 2px solid #9eabb0; - height: 38px; - img { - margin-top: 10px; } } } - #jot-title { - border: 1px solid #ccc; - margin: 0 0 5px; - height: 20px; - width: 90%; - font-weight: bold; - border-radius: 5px; - vertical-align: middle; } } - + margin: 10px 0 20px 0px; + width: 100%; + #jot-tools { + margin: 0px; + padding: 0px; + .box(100%, 35px); + overflow: none; + span { + float: left; + margin: 10px 20px 2px 0px; + a { + display: block; + } + } + .perms { + float: right; + width: 40px; + } + li.loading { + float: right; + background-color: white; + .box(20px, 38px); + vertical-align: center; + text-align: center; + border-top: 2px solid #9eabb0; + img { + margin-top: 10px; + } + } + } + #jot-title { + .borders(1px, solid, darken(@main_alt_colour, 13%)); + margin: 0 0 5px; + .box(90%, 20px); + font-weight: bold; + .rounded_corners; + vertical-align: middle; + } +} #jot-category { - margin: 5px 0; - border-radius: 5px; - border: 1px #999 solid; - color: #aaa; - font-size: smaller; - &:focus { - color: #eee; } } - + margin: 5px 0; + .rounded_corners; + .borders(1px, solid, darken(@main_alt_colour, 33%)); + color: darken(@main_alt_colour, 27%); + font-size: smaller; + &:focus { + color: @main_alt_colour; + } +} #jot #character-counter { - width: 6%; - float: right; - text-align: right; - height: 15px; - line-height: 20px; - padding: 2px 20px 5px 0; } - + .box(6%, 15px); + float: right; + text-align: right; + line-height: 20px; + padding: 2px 20px 5px 0; +} #profile-jot-text_parent { - box-shadow: 5px 0 10px 0 #111; } - + .box_shadow(5px, 0, 10px, 0, @shadow_colour); +} #profile-jot-text_tbl { - margin-bottom: 10px; - background: #777; } - + margin-bottom: 10px; + background: #777; +} #profile-jot-text_ifr { - width: 99.900002% !important; } - + width: 99.900002% !important; +} #profile-jot-text_toolbargroup, .mceCenter tr { - background: #777; } - + background: #777; +} [id$="jot-text_ifr"] { - width: 99.900002% !important; - color: #2e2f2e; - background: #eec; - .mceContentBody { - color: #2e2f2e; - background: #eec; } } - + width: 99.900002% !important; + color: @bg_colour; + background: @main_colour; + .mceContentBody { + color: @bg_colour; + background: @main_colour; + } +} .defaultSkin { - tr.mceFirst { - background: #777; } - td { - &.mceFirst, &.mceLast { - background-color: #eec; } } - span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon { - background-color: #eec; } } - -#profile-attach-wrapper, #profile-audio-wrapper, #profile-link-wrapper, #profile-location-wrapper, #profile-nolocation-wrapper, #profile-title-wrapper, #profile-upload-wrapper, #profile-video-wrapper { - float: left; - margin: 0 20px 0 0; } - + tr.mceFirst { + background: #777; + } + td { + &.mceFirst, &.mceLast { + background-color: @main_colour; + } + } + span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon { + background-color: @main_colour; + } +} +#profile-attach-wrapper, +#profile-audio-wrapper, +#profile-link-wrapper, +#profile-location-wrapper, +#profile-nolocation-wrapper, +#profile-title-wrapper, +#profile-upload-wrapper, +#profile-video-wrapper { + float: left; + margin: 0 20px 0 0; +} #profile-rotator-wrapper { - float: right; } - -#profile-jot-tools-end, #profile-jot-banner-end { - clear: both; } - + float: right; +} #profile-jot-email-wrapper { - margin: 10px 10% 0; - border: 1px solid #555753; - border-bottom: 0; } - + margin: 10px 10% 0; + .borders(1px, solid, @menu_bg_colour); + border-bottom: 0; +} #profile-jot-email-label { - background-color: #555753; - color: #ccccce; - padding: 5px; } - + background-color: @menu_bg_colour; + color: @main_colour; + padding: 5px; +} #profile-jot-email { - width: 90%; - margin: 5px; } - + width: 90%; + margin: 5px; +} #profile-jot-networks { - margin: 0 10%; - border: 1px solid #555753; - border-top: 0; - border-bottom: 0; - padding: 5px; } - + margin: 0 10%; + border: 1px solid @menu_bg_colour; + border-top: 0; + border-bottom: 0; + padding: 5px; +} #profile-jot-net { - margin: 5px 0; } - + margin: 5px 0; +} #jot-preview-link { - margin: 0 0 0 10px; - border: 0; - text-decoration: none; - float: right; } - + margin: 0 0 0 10px; + border: 0; + text-decoration: none; + float: right; +} .icon-text-preview { - margin: 0 0 -18px 0; - display: block; - width: 20px; - height: 20px; - background: url(dark/icons.png) no-repeat -128px -40px; - border: 0; - text-decoration: none; - float: right; - cursor: pointer; } - + margin: 0 0 -18px 0; + display: block; + .box(20px, 20px); + background: url(dark/icons.png) no-repeat -128px -40px; + border: 0; + text-decoration: none; + float: right; + cursor: pointer; +} #profile-jot-perms { - float: right; - background-color: #555753; - height: 22px; - width: 20px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - overflow: hidden; - border: 0px; - margin: 0 10px 0 10px; } - + float: right; + background-color: @menu_bg_colour; + .box(22px, 22px); + .rounded_corners; + overflow: hidden; + border: 0px; + margin: 0 10px 0 10px; +} #profile-jot-plugin-wrapper { - width: 1px; - margin: 10px 0 0 0; - float: right; } - + width: 1px; + margin: 10px 0 0 0; + float: right; +} #profile-jot-submit-wrapper { - float: right; - width: 100%; - list-style: none; - margin: 10px 0 0 0; - padding: 0; } - + float: right; + width: 100%; + margin: 10px 0 0 0; + padding: 0; +} #profile-jot-submit { - height: auto; - background-color: #555753; - color: #eeeeec; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - border: 2px outset #222420; - margin: 0; - float: right; - text-shadow: 1px 1px #111; - width: auto; - &:active { - box-shadow: 0 0 0 0; } } - + height: auto; + background-color: @menu_bg_colour; + color: @main_alt_colour; + .rounded_corners; + .borders(2px, outset, @shiny_colour); + margin: 0; + float: right; + .text_shadow; + width: auto; + &:active { + .box_shadow(0, 0, 0, 0); + } +} #jot-perms-icon { - height: 22px; - width: 20px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - overflow: hidden; - border: 0; } - -#profile-jot-acl-wrapper { - margin: 0 10px; - border: 1px solid #555753; - border-top: 0; - display: block !important; } - -#group_allow_wrapper, #group_deny_wrapper, #acl-permit-outer-wrapper { - width: 47%; - float: left; } - -#contact_allow_wrapper, #contact_deny_wrapper, #acl-deny-outer-wrapper { - width: 47%; - float: right; } - + .box(20px, 22px); + .rounded_corners; + overflow: hidden; +} +#profile-jot-acl-wrapper { + margin: 0 10px; + .borders(1px, solid, darken(@main_alt_colour, 60%)); + border-top: 0; + display: block !important; + .borders(1px solid @menu_bg_colour); + .box_shadow; +} +#group_allow_wrapper, +#group_deny_wrapper, +#acl-permit-outer-wrapper, +#contact_allow_wrapper, +#contact_deny_wrapper, +#acl-deny-outer-wrapper { + width: 47%; +} +#group_allow_wrapper, +#group_deny_wrapper, +#acl-permit-outer-wrapper { + float: left; +} +#contact_allow_wrapper, +#contact_deny_wrapper, +#acl-deny-outer-wrapper { + float: right; +} #acl-permit-text { - background-color: #555753; - color: #ccccce; - padding: 5px; - float: left; } - + background-color: darken(@main_alt_colour, 60%); + color: @main_colour; + padding: 5px; + float: left; +} #jot-public { - background-color: #555753; - color: #ff0000; - padding: 5px; - float: left; } - + background-color: darken(@main_alt_colour, 60%); + color: @alert; + padding: 5px; + float: left; +} #acl-deny-text { - background-color: #555753; - color: #ccccce; - padding: 5px; - float: left; } - -#acl-permit-text-end, #acl-deny-text-end { - clear: both; } - + background-color: darken(@main_alt_colour, 60%); + color: @main_colour; + padding: 5px; + float: left; +} #jot-title-desc { - color: #ccc; } - + color: darken(@main_alt_colour, 13%); +} #profile-jot-desc { - color: #ff2000; - margin: 5px 0; } - + color: @red_orange; + margin: 5px 0; +} #jot-title-wrapper { - margin-bottom: 5px; } - + margin-bottom: 5px; +} #jot-title-display { - font-weight: bold; } - + font-weight: bold; +} .jothidden { - display: none; } - + display: none; +} #jot-preview-content { - background-color: #3e3f3e; - color: #eec; - border: 1px #eec solid; - border-radius: 5px; - padding: 3px 3px 6px 10px; - .wall-item-outside-wrapper { - border: 0; - border-radius: 0px; } } + background-color: @bg_alt_colour; + color: @main_colour; + .borders(1px, solid, @main_colour); + .rounded_corners; + padding: 3px 3px 6px 10px; + .wall-item-outside-wrapper { + border: 0; + .rounded_corners(0px 0px 0px 0px); + } +} + /** * section */ - #sectionmain { - margin: 20px; - font-size: 0.8em; - min-width: 475px; - width: 67%; - float: left; - display: inline; } + margin: 20px; + font-size: 0.8em; + min-width: 475px; + width: 67%; + float: left; + display: inline; +} + /** * tabs */ - .tabs { - list-style: none; - margin: 10px 0; - padding: 0; - li { - display: inline; - font-size: smaller; - font-weight: bold; } } - + list-style: none; + margin: 10px 0; + padding: 0; + li { + display: inline; + font-size: smaller; + font-weight: bold; + } +} .tab { - border: 1px solid #729fcf; - padding: 4px; - &:hover, &.active:hover, &:active { - background: #88a9d2; - color: #2e2f2e; } - &.active { - background: #88a9d2; - color: #2e2f2e; - a { - color: #2e2f2e; } } - a { - border: 0; - text-decoration: none; } } + border: 1px solid @link_colour; + padding: 4px; + &:hover, &.active:hover, &:active { + background: @link_colour; + color: @bg_colour; + } + &.active { + background: @main_colour; + color: @bg_colour; + a { + color: @bg_colour; + } + } + a { + border: 0; + text-decoration: none; + } +} /** * items */ - .wall-item-outside-wrapper { - border: 1px solid #aaa; - border-radius: 5px; - box-shadow: 5px 0 10px 0 #111; - &.comment { - margin-top: 5px; } } - + .borders(1px, solid, #aaa); + .rounded_corners; + .box_shadow(5px, 0, 10px, 0); + &.comment { + margin-top: 5px; + } +} .wall-item-outside-wrapper-end { - clear: both; } - + clear: both; +} .wall-item-content-wrapper { - position: relative; - padding: 10px; - width: auto; } - + position: relative; + padding: 10px; + width: auto; +} .wall-item-outside-wrapper .wall-item-comment-wrapper { - /*margin-left: 90px;*/ } - + /*margin-left: 90px;*/ +} .shiny { - background: #2e3436; - border-radius: 5px; } - + background: @shiny_colour; + .rounded_corners; +} .wall-outside-wrapper .shiny { - border-radius: 5px; } - + .rounded_corners; +} .heart { - color: red; } - + color: red; +} .wall-item-content { - overflow-x: auto; - margin: 0px 15px 0px 5px; } - -/* removing it from here, vs. putting it in .wall-item-content -* might break things for people. we shall see ;) */ - + overflow-x: auto; + margin: 0px 15px 0px 5px; +} [id^="tread-wrapper"], [class^="tread-wrapper"] { - margin: 15px 0 0 0; - padding: 0px; - /*overflow-x: auto;*/ } - + margin: 15px 0 0 0; + padding: 0px; +} .wall-item-photo-menu { - display: none; } - + display: none; +} .wall-item-photo-menu-button { - display: none; - text-indent: -99999px; - background: #555753 url(dark/menu-user-pin.jpg) no-repeat 75px center; - position: absolute; - overflow: hidden; - height: 20px; - width: 90px; - top: 85px; - left: 0; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; } - + display: none; + text-indent: -99999px; + background: @menu_bg_colour url(dark/menu-user-pin.jpg) no-repeat 75px center; + position: absolute; + overflow: hidden; + .box(90px, 20px); + top: 85px; + left: 0; + .rounded_corners(0 0 5px 5px); +} .wall-item-info { - float: left; - width: 110px; } - + float: left; + width: 110px; +} .wall-item-photo-wrapper { - width: 80px; - height: 80px; - position: relative; - padding: 5px; - background-color: #555753; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; } - + .box(80px, 80px); + position: relative; + padding: 5px; + background-color: @menu_bg_colour; + .rounded_corners; +} [class^="wall-item-tools"] * { - /*margin: 0 0 5px 0;*/ - > * { - /*margin: 0 0 5px 0;*/ } } - + /*margin: 0 0 5px 0;*/ + > * { + /*margin: 0 0 5px 0;*/ + } +} .wall-item-tools { - float: right; - opacity: 0.4; - -webkit-transition: all 1s ease-in-out; - -moz-transition: all 1s ease-in-out; - -o-transition: all 1s ease-in-out; - -ms-transition: all 1s ease-in-out; - transition: all 1s ease-in-out; - &:hover { - opacity: 1; - -webkit-transition: all 1s ease-in-out; - -moz-transition: all 1s ease-in-out; - -o-transition: all 1s ease-in-out; - -ms-transition: all 1s ease-in-out; - transition: all 1s ease-in-out; } } - + float: right; + opacity: 0.4; + .transition; + &:hover { + opacity: 1; + .transition; + } +} .wall-item-subtools1 { - height: 30px; - list-style: none outside none; - margin: 20px 0 30px -20px; - padding: 0; - width: 30px; } - + .box(30px, 30px); + list-style: none outside none; + margin: 20px 0 30px -20px; + padding: 0; +} .wall-item-subtools2 { - height: 25px; - list-style: none outside none; - margin: -75px 0 0 5px; - padding: 0; - width: 25px; } - + height: 25px; + list-style: none outside none; + margin: -75px 0 0 5px; + padding: 0; + width: 25px; +} .wall-item-title { - font-size: 1.2em; - font-weight: bold; - margin-bottom: 1em; } - + font-size: 1.2em; + font-weight: bold; + margin-bottom: 1em; +} .wall-item-body { - margin: 20px 20px 10px 0px; - text-align: left; - overflow-x: auto; } - + margin: 20px 20px 10px 0px; + text-align: left; + overflow-x: auto; +} .wall-item-lock-wrapper { - float: right; - height: 22px; - margin: 0 -5px 0 0; - width: 22px; - opacity: 1; } - -.wall-item-dislike, .wall-item-like { - clear: left; - font-size: 0.8em; - color: #878883; - margin: 5px 0 5px 120px; } - -.wall-item-author, .wall-item-actions-author { - clear: left; - font-size: 0.8em; - color: #878883; - margin: 20px 20px 0 110px; } - + float: right; + .box(22px, 22px); + margin: 0 -5px 0 0; + opacity: 1; +} +.wall-item-dislike, +.wall-item-like { + clear: left; + font-size: 0.8em; + color: #878883; + margin: 5px 0 5px 120px; +} +.wall-item-author, +.wall-item-actions-author { + clear: left; + font-size: 0.8em; + color: #878883; + margin: 20px 20px 0 110px; +} .wall-item-ago { - display: inline; - padding-left: 10px; } - + display: inline; + padding-left: 10px; +} .wall-item-wrapper-end { - clear: both; } - + clear: both; +} .wall-item-location { - margin-top: 15px; - width: 100px; - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - .icon { - float: left; } - > a, .smalltext { - margin-left: 25px; - font-size: 0.7em; - display: block; } - > br { - display: none; } } - + margin-top: 15px; + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + .icon { + float: left; + } + > a, .smalltext { + margin-left: 25px; + font-size: 0.7em; + display: block; + } + > br { + display: none; + } +} .wallwall { - .wwto { - left: 5px; - margin: 0; - position: absolute; - top: 75px; - width: 30px; - z-index: 10001; - width: 30px; - height: 30px; - img { - width: 30px !important; - height: 30px !important; } } - .wall-item-photo-end { - clear: both; } } - + .wwto { + left: 5px; + margin: 0; + position: absolute; + top: 75px; + width: 30px; + z-index: 10001; + .box(30px, 30px); + img { + width: 30px !important; + height: 30px !important; + } + } + .wall-item-photo-end { + clear: both; + } +} .wall-item-arrowphoto-wrapper { - position: absolute; - left: 35px; - top: 80px; - z-index: 10002; } - + position: absolute; + left: 35px; + top: 80px; + z-index: 10002; +} .wall-item-photo-menu { - min-width: 92px; - border: 2px solid #FFFFFF; - border-top: 0px; - background: #555753; - position: absolute; - left: -2px; - top: 101px; - display: none; - z-index: 10003; - -webkit-border-radius: 0px 5px 5px 5px; - -moz-border-radius: 0px 5px 5px 5px; - border-radius: 0px 5px 5px 5px; - ul { - margin: 0px; - padding: 0px; - list-style: none; } - li a { - white-space: nowrap; - display: block; - padding: 5px 2px; - color: #eeeeec; - &:hover { - color: #555753; - background: #eeeeec; } } } - + min-width: 92px; + .borders(2px, solid, white); + border-top: 0px; + background: #555753; + position: absolute; + left: -2px; + top: 101px; + display: none; + z-index: 10003; + .rounded_corners; + li a { + white-space: nowrap; + display: block; + padding: 5px 2px; + color: @main_alt_colour; + &:hover { + color: #555753; + background: @main_alt_colour; + } + } +} #item-delete-selected { - overflow: auto; - width: 100%; } + overflow: auto; + width: 100%; +} +#connect-services-header, +#connect-services, +#extra-help-header, +#extra-help, +#postit-header, +#postit { + margin: 5px 0 0 0; +} -#connect-services-header, #connect-services, #extra-help-header, #extra-help, #postit-header, #postit { - margin: 5px 0 0 0; } /** * comment */ - .ccollapse-wrapper { - font-size: 0.9em; - margin-left: 80px; } - + font-size: 0.9em; + margin-left: 80px; +} .wall-item-outside-wrapper.comment { - margin-left: 80px; - .wall-item-photo { - width: 40px!important; - height: 40px!important; } - .wall-item-photo-wrapper { - width: 40px; - height: 40px; } - .wall-item-photo-menu-button { - width: 50px; - top: 45px; - background-position: 35px center; } - .wall-item-info { - width: 60px; } - .wall-item-body { - margin-left: 10px; } - .wall-item-author { - margin-left: 50px; } - .wall-item-photo-menu { - min-width: 50px; - top: 60px; } } - + margin-left: 80px; + .wall-item-photo { + width: 40px!important; + height: 40px!important; + } + .wall-item-photo-wrapper { + width: 40px; + height: 40px; + } + .wall-item-photo-menu-button { + width: 50px; + top: 45px; + background-position: 35px center; + } + .wall-item-info { + width: 60px; + } + .wall-item-body { + margin-left: 10px; + } + .wall-item-author { + margin-left: 50px; + } + .wall-item-photo-menu { + min-width: 50px; + top: 60px; + } +} .comment-wwedit-wrapper { - /*margin: 30px 0px 0px 80px;*/ } - + /*margin: 30px 0px 0px 80px;*/ +} .comment-edit-wrapper { - border-top: 1px #aaa solid; } - + border-top: 1px #aaa solid; +} [class^="comment-edit-bb"] { - list-style: none; - display: none; - margin: -40px 0 5px 60px; - width: 75%; - > li { - display: inline-block; - margin: 0 10px 0 0; - visibility: none; } } - -.comment-wwedit-wrapper img, .comment-edit-wrapper img { - width: 20px; - height: 20px; } - -.comment-edit-photo-link, .comment-edit-photo { - margin-left: 10px; } - + .list_reset; + display: none; + margin: -40px 0 5px 60px; + width: 75%; + > li { + display: inline-block; + margin: 0 10px 0 0; + visibility: none; + } +} +.comment-wwedit-wrapper img, +.comment-edit-wrapper img { + .box; +} +.comment-edit-photo-link, +.comment-edit-photo { + margin-left: 10px; +} .my-comment-photo { - width: 40px; - height: 40px; - padding: 5px; } + .box(40px, 40px); + padding: 5px; +} [class^="comment-edit-text"] { - margin: 5px 0 10px 20px; - width: 84.5%; } - + margin: 5px 0 10px 20px; + width: 84.5%; +} .comment-edit-text-empty { - height: 20px; - border: 2px #c8bebe solid; - border-radius: 5px; - color: #c8bebe; - -webkit-transition: all 0.5s ease-in-out; - -moz-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - -ms-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - &:hover { - color: #999999; } } - + height: 20px; + border: 2px #c8bebe solid; + border-radius: 5px; + color: #c8bebe; + .transition; + &:hover { + color: #999999; + } +} .comment-edit-text-full { - height: 10em; - border-radius: 5px; - -webkit-transition: all 0.5s ease-in-out; - -moz-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - -ms-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; } - + height: 10em; + .rounded_corners; + .transition; +} .comment-edit-submit-wrapper { - width: 90%; - margin: 5px 5px 10px 50px; - text-align: right; } - + width: 90%; + margin: 5px 5px 10px 50px; + text-align: right; +} .comment-edit-submit { - height: 22px; - background-color: #555753; - color: #eeeeec; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - border: 0; } + height: 22px; + background-color: #555753; + color: @main_alt_colour; + .rounded_corners; + border: 0; +} + /** * item text style */ - .wall-item-body code { - display: block; - padding: 0 0 10px 5px; - border-color: #ccc; - border-style: solid; - border-width: 1px 1px 1px 10px; - background: #eee; - color: #2e2f2e; - width: 95%; } + background-color: #444; + border-bottom: 1px dashed #ccc; + border-left-style: solid; + border-left-width: 10px; + border-top: 1px dashed #ccc; + display: block; + overflow-x: auto; + padding: 5px 0 15px 10px; + width: 95%; + a { + color: @lt_link_colour; + } +} + /** * profile */ - div { - &[id$="text"] { - font-weight: bold; - border-bottom: 1px solid #ccc; } - &[id$="wrapper"] { - height: 100%; - margin-bottom: 1em; - br { - clear: left; } } } - + &[id$="text"] { + font-weight: bold; + border-bottom: 1px solid #ccc; + } + &[id$="wrapper"] { + height: 100%; + margin-bottom: 1em; + br { + clear: left; + } + } +} .profile-match-wrapper { float: left; margin: 0 5px 40px 0; - width: 120px; - height: 120px; + .box(120px, 120px); padding: 3px; position: relative; } @@ -1407,11 +1455,10 @@ div { .profile-match-photo { } - [id$="-end"], [class$="-end"] { - clear: both; - margin: 0 0 10px 0; } - + clear: both; + margin: 0 0 10px 0; +} .profile-match-end { margin: 0 0 5px 0; } @@ -1438,59 +1485,48 @@ div { margin-bottom: 30px; } .photo-album-image-wrapper, .photo-top-image-wrapper { - float: left; - -moz-box-shadow: 3px 3px 10px 0 #000; - -webkit-box-shadow: 3px 3px 10px 0 #000; - box-shadow: 3px 3px 10px 0 #000; - background-color: #222; - color: #2e2f2e; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - padding-bottom: 30px; - position: relative; - margin: 0 10px 10px 0; } + float: left; + .box_shadow; + background-color: #222; + color: @bg_colour; + .rounded_corners; + padding-bottom: 30px; + position: relative; + margin: 0 10px 10px 0; +} #photo-photo { - max-width: 100%; - img { - max-width: 100%; } } - -.photo-top-image-wrapper a:hover, #photo-photo a:hover, .photo-album-image-wrapper a:hover { - border-bottom: 0; } + max-width: 100%; + img { + max-width: 100%; } } + +.photo-top-image-wrapper a:hover, +#photo-photo a:hover, +.photo-album-image-wrapper a:hover { + border-bottom: 0; +} .photo-top-photo, .photo-album-photo { - -webkit-border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; } - -.photo-top-album-name { - position: absolute; - bottom: 0; - padding: 0 5px; } + .rounded_corners(5px 5px 0 0); +} -.caption { - position: absolute; - bottom: 0; - margin: 0 5px; } +.photo-top-album-name, .caption { + position: absolute; + bottom: 0; + padding: 0 5px; +} #photo-photo { - position: relative; - float: left; } + position: relative; + float: left; } #photo-prev-link, #photo-next-link { - position: absolute; - width: 30%; - height: 100%; - background-color: rgba(255, 255, 255, 0.5); - opacity: 0; - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; - -ms-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; - background-position: center center; - background-repeat: no-repeat; } + position: absolute; + .box(30%, 100%); + background: white center center no-repeat; + opacity: 0; + .transition(all, 0.2s); +} #photo-prev-link { background-image: url(dark/prev.png); @@ -1517,55 +1553,60 @@ div { text-indent: -900000px; } #photo-prev-link:hover { - opacity: 1; - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; - -ms-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; } + opacity: 1; + .transition(all, 0.2s); +} #photo-next-link { - &:hover { - opacity: 1; - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; - -ms-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; } - .icon { - display: none; } } + &:hover { + opacity: 1; + .transition(all, 0.2s); + } + .icon { + display: none; + } +} #photo-prev-link .icon { display: none; } -#photos-upload-spacer, #photos-upload-new-wrapper, #photos-upload-exist-wrapper { +#photos-upload-spacer, +#photos-upload-new-wrapper, +#photos-upload-exist-wrapper { margin-bottom: 1em; } -#photos-upload-existing-album-text, #photos-upload-newalbum-div { +#photos-upload-existing-album-text, +#photos-upload-newalbum-div { background-color: #555753; - color: #eeeeec; + color: @main_alt_colour; padding: 1px; } -#photos-upload-album-select, #photos-upload-newalbum { +#photos-upload-album-select, +#photos-upload-newalbum { width: 99%; } #photos-upload-perms-menu { text-align: right; } -#photo-edit-caption, #photo-edit-newtag, #photo-edit-albumname { +#photo-edit-caption, +#photo-edit-newtag, +#photo-edit-albumname { float: left; margin-bottom: 25px; } #photo-edit-link-wrap { margin-bottom: 15px; } -#photo-edit-caption, #photo-edit-newtag { +#photo-edit-caption, +#photo-edit-newtag { width: 100%; } #photo-like-div { margin-bottom: 25px; } -#photo-edit-caption-end, #photo-edit-tags-end, #photo-edit-albumname-end { +#photo-edit-caption-end, +#photo-edit-tags-end, +#photo-edit-albumname-end { clear: both; } #photo-edit-delete-button { @@ -1585,12 +1626,14 @@ div { */ .prvmail-text { - width: 100%; } + width: 100%; +} #prvmail-subject { - width: 100%; - color: #2e2f2e; - background: #eec; } + width: 100%; + color: @bg_colour; + background: @main_colour; +} #prvmail-submit-wrapper { margin-top: 10px; } @@ -1632,21 +1675,21 @@ div { .mail-list-outside-wrapper-end { clear: both; - border-bottom: 1px #eec dotted; } + border-bottom: 1px @main_colour dotted; } .mail-conv-sender { float: left; margin: 0px 5px 5px 0px; } .mail-conv-sender-photo { - width: 32px; - height: 32px; } + .box(32px, 32px) +} .mail-conv-sender-name { - float: left; } + float: left; } .mail-conv-date { - float: right; } + float: right; } .mail-conv-subject { clear: right; @@ -1664,48 +1707,51 @@ div { */ .view-contact-wrapper, .contact-entry-wrapper { - float: left; - margin: 0 5px 40px 0; - width: 120px; - height: 120px; - padding: 3px; - position: relative; } + float: left; + margin: 0 5px 40px 0; + .box(120px, 120px); + padding: 3px; + position: relative; } .contact-direction-wrapper { - position: absolute; - top: 20px; } + position: absolute; + top: 20px; } .contact-edit-links { - position: absolute; - top: 60px; } + position: absolute; + top: 60px; } .contact-entry-photo-wrapper {} .contact-entry-photo { - margin-left: 20px; } + margin-left: 20px; } .contact-entry-name { - width: 120px; - font-weight: bold; - /*overflow: hidden;*/ } + width: 120px; + font-weight: bold; + /*overflow: hidden;*/ +} .contact-entry-photo { position: relative; } .contact-entry-edit-links .icon { - border: 1px solid #babdb6; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - background-color: #fff; } - -#contact-entry-url, [id^="contact-entry-url"] { - font-size: smaller; - /*overflow: scroll;*/ } - -#contact-entry-network, [id^="contact-entry-network"] { - font-size: smaller; - font-style: italic; } + border: 1px solid #babdb6; + .rounded_corners(3px); + background-color: #fff; +} + +#contact-entry-url, +[id^="contact-entry-url"], +#contact-entry-network, +[id^="contact-entry-network"] { + font-size: smaller; +} + +#contact-entry-network, +[id^="contact-entry-network"] { + font-style: italic; +} #contact-edit-banner-name { font-size: 1.5em; } @@ -1724,18 +1770,20 @@ div { margin-left: 0px; } #contact-edit-links { - margin-top: 23px; - ul { - list-style-type: none; } } + margin-top: 23px; + ul { + .list_reset; + } +} #contact-drop-links { - margin-left: 5px; } + margin-left: 5px; +} #contact-edit-nav-wrapper .icon { - border: 1px solid #babdb6; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; } + .borders(1px, solid, #babdb6); + .rounded_corners(3px); +} #contact-edit-poll-wrapper { margin-left: 0px; } @@ -1757,25 +1805,23 @@ div { margin-bottom: 65px; } .contact-photo-menu-button { - position: absolute; - background-image: url("dark/photo-menu.jpg"); - background-position: top left; - background-repeat: no-repeat; - margin: 0px; - padding: 0px; - width: 16px; - height: 16px; - top: 64px; - left: 0px; - overflow: hidden; - text-indent: 40px; - display: none; } + position: absolute; + background: url("dark/photo-menu.jpg") top left no-repeat transparent; + margin: 0px; + padding: 0px; + .box(16px, 16px); + top: 64px; + left: 0px; + overflow: hidden; + text-indent: 40px; + display: none; +} .contact-photo-menu { width: auto; border: 2px solid #444; - background: #2e2f2e; - color: #eec; + background: @bg_colour; + color: @main_colour; position: absolute; left: 0px; top: 90px; @@ -1805,12 +1851,11 @@ div { padding-left: 18px; } #settings-nickname-desc { - background-color: #eec; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - padding: 5px; - color: #111; } + background-color: @main_colour; + .rounded_corners; + padding: 5px; + color: #111; +} #settings-default-perms { margin-bottom: 20px; } @@ -1861,84 +1906,82 @@ div { margin: 20px 20px 0px 0px; } .icon-profile-edit { - background: url("dark/icons.png") -150px 0px no-repeat; - border: 0; - cursor: pointer; - display: block; - float: right; - width: 20px; - height: 20px; - margin: 0 0 -18px; - position: absolute; - text-decoration: none; - top: 113px; - right: 260px; } - + background: url("dark/icons.png") -150px 0px no-repeat; + border: 0; + cursor: pointer; + display: block; + .box(20px, 20px); + margin: 0 0 -18px; + text-decoration: none; + top: 113px; + right: 260px; +} #profile-edit-links ul { - margin: 20px 0; - padding: 0; - list-style: none; } - + .list_reset; + margin: 20px 0; +} .marital { - margin-top: 5px; } - + margin-top: 5px; +} #register-sitename { - display: inline; - font-weight: bold; } - + display: inline; + font-weight: bold; +} #advanced-expire-popup { - background: #2e2f2e; - color: #eec; } - + background: @bg_colour; + color: @main_colour; +} #id_ssl_policy { - width: 374px; } - + width: 374px; +} #theme-preview img { - margin: 10px 10px 10px 288px; } + margin: 10px 10px 10px 288px; +} /** * contacts selector */ .group-delete-wrapper { - margin: -31px 50px 0 0; - float: right; } + margin: -31px 50px 0 0; + float: right; } /*.group-delete-icon { margin: 0 0 0 10px; }*/ #group-edit-submit-wrapper { - margin: 0 0 10px 0; - display: inline; } + margin: 0 0 10px 0; + display: inline; } #group-edit-desc { - margin: 10px 0px; } + margin: 10px 0px; } #group-members, #prof-members { - height: 200px; - overflow: auto; - border: 1px solid #555753; - -webkit-border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; } + height: 200px; + overflow: auto; + .borders(1px, solid, #555753); + .rounded_corners(5px 5px 0 0); +} #group-all-contacts, #prof-all-contacts { - height: 200px; - overflow: auto; - border: 1px solid #555753; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; } + height: 200px; + overflow: auto; + .borders(1px, solid, #555753); + .rounded_corners(0 0 5px 5px); +} -#group-members h3, #group-all-contacts h3, #prof-members h3, #prof-all-contacts h3 { - color: #eeeeec; - background-color: #555753; - margin: 0; - padding: 5px; } +#group-members h3, +#group-all-contacts h3, +#prof-members h3, +#prof-all-contacts h3 { + color: @main_alt_colour; + background-color: #555753; + margin: 0; + padding: 5px; } #group-separator, #prof-separator { - display: none; } + display: none; } /** * profile @@ -2009,7 +2052,7 @@ div { font-size: 20px; } .event { - background: #2e2f2e; } + background: @bg_colour; } .vevent { border: 1px solid #ccc; @@ -2055,7 +2098,7 @@ div { .today { font-weight: bold; - color: #FF0000; } + color: #F00; } #event-start-text, #event-finish-text { margin-top: 10px; @@ -2125,8 +2168,8 @@ div { text-decoration: underline; } } .fc-state-highlight { - background: #eec; - color: #2e2f2e; } + background: @main_colour; + color: @bg_colour; } /** * directory @@ -2145,74 +2188,88 @@ div { */ #group-sidebar { - margin-bottom: 10px; } - -.group-selected, .nets-selected, .fileas-selected { - padding: 3px; - color: #2e2f2e; - background: #88a9d2; - font-weight: bold; } - -.group-selected:hover, .nets-selected:hover, .fileas-selected:hover { - color: #2e2f2e; } - + margin-bottom: 10px; +} +.group-selected, +.nets-selected, +.fileas-selected { + padding: 3px; + color: @bg_colour; + background: @main_colour; + font-weight: bold; +} +.group-selected:hover, +.nets-selected:hover, +.fileas-selected:hover { + color: @link_colour; + background: @bg_colour; +} .groupsideedit { - margin-right: 10px; } - + margin-right: 10px; +} #sidebar-group-ul { - padding-left: 0; } - + padding-left: 0; +} #sidebar-group-list { - margin: 0 0 5px 0; - ul { - list-style-type: none; - list-style-position: inside; } - li { - margin-top: 10px; } - .icon { - display: inline-block; - height: 12px; - width: 12px; } } - + margin: 0 0 5px 0; + li { + margin-top: 10px; + } + .icon { + display: inline-block; + .box(12px, 12px); + } +} +.sidebar-group-element { + padding: 3px; + &:hover { + color: @bg_colour; + background: @link_colour; + font-weight: bold; + padding: 3px; + } +} #sidebar-new-group { - margin: auto; - display: inline-block; - color: #efefef; - text-decoration: none; - text-align: center; } - + margin: auto; + display: inline-block; + color: #efefef; + text-decoration: none; + text-align: center; +} #peoplefind-sidebar form { - margin-bottom: 10px; } - + margin-bottom: 10px; +} #sidebar-new-group { - &:hover { - /*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% );*/ - /*background-color: #b20202;*/ } - &:active { - position: relative; - top: 1px; } } - + &:hover { + /*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% );*/ + /*background-color: #b20202;*/ } + &:active { + position: relative; + top: 1px; + } +} #side-peoplefind-url { - background-color: #2e2f2e; - color: #eec; - border: 1px #999 solid; - margin-right: 3px; - width: 75%; - &:hover, &:focus { - background-color: #efefef; - color: #222; - border: 1px 333 solid; } } - + background-color: @bg_colour; + color: @main_colour; + border: 1px #999 solid; + margin-right: 3px; + width: 75%; + &:hover, &:focus { + background-color: #efefef; + color: #222; + border: 1px 333 solid; + } +} .nets-ul { - list-style-type: none; - padding-left: 0px; - li { - margin: 10px 0 0; } } - + .list_reset; + li { + margin: 10px 0 0; + } +} .nets-link, .nets-all { - margin-left: 0px; } - + margin-left: 0px; +} #netsearch-box { margin: 20px 0px 30px; width: 135px; @@ -2221,125 +2278,147 @@ div { } } + /** * admin */ - #pending-update { - float: right; - color: #fff; - font-weight: bold; - background-color: #ff0000; - padding: 0 .3em; } - + float: right; + color: #fff; + font-weight: bold; + background-color: #ff0000; + padding: 0 .3em; +} .admin { - &.linklist { - border: 0; - padding: 0; } - &.link { - list-style-position: inside; } } - + &.linklist { + border: 0; + padding: 0; } + &.link { + .list_reset; + } +} #adminpage { - color: #eec; - background: #2e2f2e; - margin: 5px; - padding: 10px; - dl { - clear: left; - margin-bottom: 2px; - padding-bottom: 2px; - border-bottom: 1px solid #000; } - dt { - width: 250px; - float: left; - font-weight: bold; } - dd { - margin-left: 250px; } - h3 { - border-bottom: 1px solid #ccc; } - .submit { - clear: left; } - #pluginslist { - margin: 0; - padding: 0; } - .plugin { - list-style: none; - display: block; - border: 1px solid #888; - padding: 1em; - margin-bottom: 5px; - clear: left; } - .toggleplugin { - float: left; - margin-right: 1em; } - table { - width: 100%; - border-bottom: 1px solid #000; - margin: 5px 0; - th { - text-align: left; } } - td .icon { - float: left; } - table { - &#users img { - width: 16px; - height: 16px; } - tr:hover { - color: #2e2f2e; - background-color: #eec; } } - .selectall { - text-align: right; } - #users a { - color: #eec; - text-decoration: underline; } } + color: @main_colour; + background: @bg_colour; + margin: 5px; + padding: 10px; + dl { + clear: left; + margin-bottom: 2px; + padding-bottom: 2px; + border-bottom: 1px solid #000; + } + dt { + width: 250px; + float: left; + font-weight: bold; + } + dd { + margin-left: 250px; + } + h3 { + border-bottom: 1px solid #ccc; + } + .submit { + clear: left; + } + #pluginslist { + margin: 0; + padding: 0; + } + .plugin { + list-style: none; + display: block; + border: 1px solid #888; + padding: 1em; + margin-bottom: 5px; + clear: left; + } + .toggleplugin { + float: left; + margin-right: 1em; + } + table { + width: 100%; + border-bottom: 1px solid #000; + margin: 5px 0; + th { + text-align: left; + } + } + td .icon { + float: left; + } + table { + &#users img { + width: 16px; + height: 16px; + } + } + .selectall { + text-align: right; + } + #users a { + color: @main_colour; + text-decoration: underline; + } +} #users .name { - color: #eec; } + color: @main_colour; +} /** * form fields */ .field { - /*margin-bottom: 10px;*/ - /*padding-bottom: 10px;*/ - overflow: auto; - /* width: 100%;*/ - label { - width: 38%; - display: inline-block; - font-size: 1.077em; - margin: 0 10px 1em 0; - border: 1px #2e2f2e solid; - padding: 5px; - background: #eec; - color: #111; } } + overflow: auto; + label { + width: 38%; + display: inline-block; + font-size: 1.077em; + margin: 0 10px 1em 0; + border: 1px @bg_colour solid; + padding: 5px; + background: @main_colour; + color: #111; } } .field .onoff { - float: right; - margin: 0 330px 0 auto; - width: 80px; - a { - display: block; - border: 1px solid #666; - padding: 3px 6px 4px 10px; - height: 16px; - text-decoration: none; } - .on { - background: url("../../../images/onoff.jpg") no-repeat 42px 1px #999999; - color: #111; - text-align: left; } - .off { - background: url("../../../images/onoff.jpg") no-repeat 2px 1px #cccccc; - color: #333; - text-align: right; } } + float: right; + margin: 0 330px 0 auto; + width: 80px; + a { + display: block; + border: 1px solid #666; + padding: 3px 6px 4px 10px; + height: 16px; + text-decoration: none; + } + .on, .off { + background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAUACIDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAQDBQEGCf/EACgQAAIBAwIFAwUAAAAAAAAAAAECAAMEERIUBRMxUpEhIoEjM1Nxkv/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgT/xAAaEQEAAgMBAAAAAAAAAAAAAAAAAQIRMVES/9oADAMBAAIRAxEAPwD1ERKFNFVaNNVUYACgACcNVt1dEKUwzZwNI9cSDczDVdnuKDjomrPyJOQ2SXNq/L0rTPMzp9vXHWZfo/jT+RNFQV6e2yPt6s/Ms3EWQofhnDqjszWFqzMcljRUknxEn3ES/dup8xxPZ0hXtKFViQzorEDpkiZtqvc3mIkzs40bVe5vMbVe5vMREbrN3xy4t7utSVaZVHZQSDnAP7iIm+K1xpkm09f/2Q=='); + background-repeat: no-repeat; + } + .on { + background-position: 42px 1px; + background-color: #999; + color: #111; + text-align: left; + } + .off { + background-position: 2px 1px; + background-color: #ccc; + color: #333; + text-align: right; + } +} .hidden { - display: none !important; } + display: none !important; } .field textarea { - width: 80%; - height: 100px; } + .box(80%, 100px); +} .field_help { display: block; @@ -2350,99 +2429,99 @@ div { margin-left: 297px; } label { - width: 38%; - display: inline-block; - font-size: 1.077em; - margin: 0 10px 1em 0; - border: 1px #2e2f2e solid; - padding: 5px; - background: #eec; - color: #111; } - + width: 38%; + display: inline-block; + font-size: 1.077em; + margin: 0 10px 1em 0; + .borders(1px, solid, @bg_colour); + padding: 5px; + background: @main_colour; + color: #111; + .box_shadow(3px, 3px, 5px); +} input { - width: 250px; - height: 25px; - border: 1px #999 solid; - &[type="text"], &[type="password"], &[type="search"] { - width: 250px; - height: 25px; - border: 1px #999 solid; } - &[type="checkbox"], &[type="radio"] { - border: 1px #999 solid; - margin: 0 0 0 0; - height: 15px; - width: 15px; } - &[type="submit"], &[type="button"] { - background-color: #eee; - border: 2px outset #aaa; - border-radius: 5px; - box-shadow: 1px 3px 4px 0 #111; - color: #2e302e; - cursor: pointer; - font-weight: bold; - width: auto; - text-shadow: 1px 1px #000; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; } - &[type="submit"]:active, &[type="button"]:active { - box-shadow: 0 0 0 0; } } + .box(250px, 25px); + .borders(1px, solid, #999); + &[type="checkbox"], + &[type="radio"] { + margin: 0; + .box(15px, 15px); + } + &[type="submit"], + &[type="button"] { + background-color: #eee; + .borders(2px, outset, #aaa); + .rounded_corners; + .box_shadow(1px, 3px, 4px, 0); + color: #2e302e; + cursor: pointer; + font-weight: bold; + width: auto; + .text_shadow; + } + &[type="submit"]:active, + &[type="button"]:active { + .box_shadow(0, 0, 0, 0); + } +} /* * update */ - .popup { - width: 100%; - height: 100%; - top: 0px; - left: 0px; - position: absolute; - display: none; - .background { - background-color: #000; - opacity: 0.5; - width: 100%; - height: 100%; - position: absolute; - top: 0px; - left: 0px; } - .panel { - top: 25%; - left: 25%; - width: 50%; - height: 50%; - padding: 1em; - position: absolute; - border: 4px solid #000000; - background-color: #FFFFFF; } } + .box(100%, 100%); + top: 0px; + left: 0px; + position: absolute; + display: none; + .background { + background-color: #000; + opacity: 0.5; + .box(100%, 100%); + position: absolute; + top: 0px; + left: 0px; } + .panel { + top: 25%; + left: 25%; + .box(50%, 50%); + padding: 1em; + position: absolute; + border: 4px solid #000000; + background-color: #FFFFFF; + } +} #panel { - z-index: 100; } + z-index: 100; } -.grey { - color: grey; } +.grey, .gray { + color: gray; } .orange { - color: orange; } + color: orange; } .red { - color: red; } + color: red; } .popup .panel { - .panel_text { - display: block; - overflow: auto; - height: 80%; } - .panel_in { - width: 100%; - height: 100%; - position: relative; } - .panel_actions { - width: 100%; - bottom: 4px; - left: 0px; - position: absolute; } } + .panel_text { + display: block; + overflow: auto; + height: 80%; + } + .panel_in { + .box(100%, 100%); + position: relative; + } + .panel_actions { + width: 100%; + bottom: 4px; + left: 0px; + position: absolute; + } +} .panel_text .progress { width: 50%; @@ -2484,21 +2563,20 @@ input { */ .iconspacer { - display: block; - width: 16px; - height: 16px; } + display: block; + .box(16px, 16px); +} .icon { - display: block; - width: 20px; - height: 20px; - background: url(dark/icons.png) no-repeat; - border: 0; - text-decoration: none; - border-radius: 5px; - &:hover { - border: 0; - text-decoration: none; } } + display: block; + .box; + background: url(dark/icons.png) no-repeat; + border: 0; + text-decoration: none; + .rounded_corners; + &:hover { + border: 0; + text-decoration: none; } } .editicon { display: inline-block; @@ -2509,273 +2587,272 @@ input { text-decoration: none; } .shadow { - box-shadow: 2px 2px 5px 2px #111; - &:active, &:focus, &:hover { - box-shadow: 0 0 0 0; } } - + .box_shadow(2px, 2px, 5px, 2px); + &:active, &:focus, &:hover { + box-shadow: 0 0 0 0; + } +} .editicon:hover { - border: 0; } + border: 0; } .boldbb { - background-position: 0px 0px; - &:hover { - background-position: -22px 0px; } } + background-position: 0px 0px; + &:hover { + background-position: -22px 0px; } } .italicbb { - background-position: 0px -22px; - &:hover { - background-position: -22px -22px; } } + background-position: 0px -22px; + &:hover { + background-position: -22px -22px; } } .underlinebb { - background-position: 0px -44px; - &:hover { - background-position: -22px -44px; } } + background-position: 0px -44px; + &:hover { + background-position: -22px -44px; } } .quotebb { - background-position: 0px -66px; - &:hover { - background-position: -22px -66px; } } + background-position: 0px -66px; + &:hover { + background-position: -22px -66px; } } .codebb { - background-position: 0px -88px; - &:hover { - background-position: -22px -88px; } } + background-position: 0px -88px; + &:hover { + background-position: -22px -88px; } } .imagebb { - background-position: -44px 0px; - &:hover { - background-position: -66px 0px; } } + background-position: -44px 0px; + &:hover { + background-position: -66px 0px; } } .urlbb { - background-position: -44px -22px; - &:hover { - background-position: -66px -22px; } } + background-position: -44px -22px; + &:hover { + background-position: -66px -22px; } } .videobb { - background-position: -44px -44px; - &:hover { - background-position: -66px -44px; } } + background-position: -44px -44px; + &:hover { + background-position: -66px -44px; } } .icon { - &.drop, &.drophide, &.delete { - float: left; - margin: 0 2px; } - &.s22 { - &.delete { - display: block; - background-position: -110px 0; } - &.text { - padding: 10px 0px 0px 25px; - width: 200px; } } - &.text { - text-indent: 0px; } - &.s16 { - min-width: 16px; - height: 16px; } } + &.drop, &.drophide, &.delete { + float: left; + margin: 0 2px; } + &.s22 { + &.delete { + display: block; + background-position: -110px 0; } + &.text { + padding: 10px 0px 0px 25px; + width: 200px; } } + &.text { + text-indent: 0px; } + &.s16 { + min-width: 16px; + height: 16px; } } .s16 .add { - background: url("../../../images/icons/16/add.png") no-repeat; } + background: url("../../../images/icons/16/add.png") no-repeat; +} .add { - margin: 0px 5px; } + margin: 0px 5px; } .article { - background-position: -50px 0; } + background-position: -50px 0; } .audio { - background-position: -70px 0; } + background-position: -70px 0; } .block { - background-position: -90px 0px; } + background-position: -90px 0px; } .drop, .delete { - background-position: -110px 0; } + background-position: -110px 0; } .drophide { - background-position: -130px 0; } + background-position: -130px 0; } .edit { - background-position: -150px 0; } + background-position: -150px 0; } .camera { - background-position: -170px 0; } + background-position: -170px 0; } .dislike { - background-position: -190px 0; } + background-position: -190px 0; } .file-as { - background-position: -230px -60px; } + background-position: -230px -60px; } .like { - background-position: -211px 0; } + background-position: -211px 0; } .link { - background-position: -230px 0; } + background-position: -230px 0; } .globe, .location { - background-position: -50px -20px; } + background-position: -50px -20px; } .noglobe, .nolocation { - background-position: -70px -20px; } + background-position: -70px -20px; } .no { - background-position: -90px -20px; } + background-position: -90px -20px; } .pause { - background-position: -110px -20px; } + background-position: -110px -20px; } .play { - background-position: -130px -20px; } + background-position: -130px -20px; } .pencil { - background-position: -151px -18px; } + background-position: -151px -18px; } .small-pencil { - background-position: -170px -20px; } + background-position: -170px -20px; } .recycle { - background-position: -190px -20px; } + background-position: -190px -20px; } .remote-link { - background-position: -210px -20px; } + background-position: -210px -20px; } .share { - background-position: -230px -20px; } + background-position: -230px -20px; } .tools { - background-position: -50px -40px; } + background-position: -50px -40px; } .lock { - background-position: -70px -40px; } + background-position: -70px -40px; } .unlock { - background-position: -88px -40px; } + background-position: -88px -40px; } .video { - background-position: -110px -40px; } + background-position: -110px -40px; } .attach { - background-position: -190px -40px; } + background-position: -190px -40px; } .language { - background-position: -210px -40px; } + background-position: -210px -40px; } .starred { - background-position: -130px -60px; } + background-position: -130px -60px; } .unstarred { - background-position: -150px -60px; } + background-position: -150px -60px; } .tagged { - background-position: -170px -60px; } + background-position: -170px -60px; } .on { - background-position: -50px -60px; } + background-position: -50px -60px; } .off { - background-position: -70px -60px; } + background-position: -70px -60px; } .prev { - background-position: -90px -60px; } + background-position: -90px -60px; } .next { - background-position: -110px -60px; } + background-position: -110px -60px; } .icon.dim { - opacity: 0.3; } + opacity: 0.3; } #pause { - position: fixed; - bottom: 40px; - right: 30px; } + position: fixed; + bottom: 40px; + right: 30px; } .border { - border: 1px solid #babdb6; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - &:hover { - border: 1px solid #babdb6; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; } } + .borders(1px, solid, #babdb6); + .rounded_corners; + &:hover { + .borders(1px, solid, #babdb6); + .rounded_corners; + } +} .attachtype { - display: block; - width: 20px; - height: 23px; - background-image: url(../../../images/content-types.png); } + display: block; + width: 20px; + height: 23px; + background-image: url(../../../images/content-types.png); } .type-video { - background-position: 0px 0px; } + background-position: 0px 0px; } .type-image { - background-position: -20px 0; } + background-position: -20px 0; } .type-audio { - background-position: -40px 0; } + background-position: -40px 0; } .type-text { - background-position: -60px 0px; } + background-position: -60px 0px; } .type-unkn { - background-position: -80px 0; } + background-position: -80px 0; } /** * footer */ .cc-license { - margin-top: 100px; - font-size: 0.7em; } + margin-top: 100px; + font-size: 0.7em; } footer { - display: block; - /*margin: 50px 20%;*/ - clear: both; } + display: block; + /*margin: 50px 20%;*/ + clear: both; } #profile-jot-text { - height: 20px; - color: #eec; - border: 1px solid #eec; - border-radius: 5px; - width: 99.5%; } + height: 20px; + color: @main_colour; + .borders; + .rounded_corners; + width: 99.5%; +} /** * acl */ #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper { - display: block !important; - background: #2e2f2e; - color: #eec; } + display: block !important; + background: @bg_colour; + color: @main_colour; } #acl-wrapper { - width: 660px; - margin: 0 auto; } + width: 660px; + margin: 0 auto; } #acl-search { - float: right; - background: white url("../../../images/search_18.png") no-repeat right center; - padding-right: 20px; - margin: 6px; - color: #111; } + float: right; + background: white url("../../../images/search_18.png") no-repeat right center; + padding-right: 20px; + margin: 6px; + color: #111; } #acl-showall { - float: left; - display: block; - width: auto; - height: 18px; - background: #eeeecc url("../../../images/show_all_off.png") 8px 8px no-repeat; - padding: 7px 10px 7px 30px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - color: #999; - margin: 5px 0; - &.selected { - color: #000; - background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; } } + float: left; + display: block; + width: auto; + height: 18px; + background: #eeeecc url("../../../images/show_all_off.png") 8px 8px no-repeat; + padding: 7px 10px 7px 30px; + .rounded_corners; + color: #999; + margin: 5px 0; + &.selected { + color: #000; + background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; } } #acl-list { height: 210px; @@ -2788,95 +2865,97 @@ footer { }*/ .acl-list-item { - border: 1px solid #eec; - display: block; - float: left; - height: 110px; - margin: 3px 0 5px 5px; - width: 120px; - img { - width: 22px; - height: 22px; - float: left; - margin: 5px 5px 20px; } - p { - height: 12px; - font-size: 10px; - margin: 0 0 22px; - padding: 2px 0 1px; } - a { - background: #eeeecc 3px 3px no-repeat; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - clear: both; - font-size: 10px; - display: block; - width: 55px; - height: 20px; - color: #2e2f2e; - margin: 5px auto 0; - padding: 0 3px; - text-align: center; - vertical-align: middle; } } + .borders; + display: block; + float: left; + height: 110px; + margin: 3px 0 5px 5px; + width: 120px; + img { + .box(22px, 22px); + float: left; + margin: 5px 5px 20px; } + p { + height: 12px; + font-size: 10px; + margin: 0 0 22px; + padding: 2px 0 1px; } + a { + background: #eeeecc 3px 3px no-repeat; + .rounded_corners; + clear: both; + font-size: 10px; + display: block; + width: 55px; + height: 20px; + color: @bg_colour; + margin: 5px auto 0; + padding: 0 3px; + text-align: center; + vertical-align: middle; } } #acl-wrapper a:hover { - text-decoration: none; - color: #2e2f2e; - border: 0; } + text-decoration: none; + color: @bg_colour; + border: 0; } +//data URI: +// data:[][;charset=][;base64], .acl-button-show { - background-image: url('../../../images/show_off.png'); - margin: 0 auto; } - + // background-image: url('../../../images/show_off.png'); + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg=='); + margin: 0 auto; +} .acl-button-hide { - background-image: url('../../../images/hide_off.png'); - margin: 0 auto; } - + // background-image: url('../../../images/hide_off.png'); + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII='); + margin: 0 auto; +} .acl-button-show.selected { - color: #2e2f2e; - background-color: #9ade00; - background-image: url(../../../images/show_on.png); } - + // background: #9ade00 url(../../../images/show_on.png); + background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII='); + color: @bg_colour; +} .acl-button-hide.selected { - color: #2e2f2e; - background-color: #ff4141; - background-image: url(../../../images/hide_on.png); } - + // background: #ff4141 url(../../../images/hide_on.png); + background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg=='); + color: @bg_colour; +} .acl-list-item { - &.groupshow { - border-color: #9ade00; } - &.grouphide { - border-color: #ff4141; } } + &.groupshow { + border-color: #9ade00; } + &.grouphide { + border-color: #ff4141; } } /** /acl **/ /* autocomplete popup */ - .acpopup { - max-height: 175px; - max-width: 42%; - background-color: #555753; - color: #fff; - overflow: auto; - z-index: 100000; - border: 1px solid #cccccc; } - + max-height: 175px; + max-width: 42%; + background-color: #555753; + color: #fff; + overflow: auto; + z-index: 100000; + border: 1px solid #cccccc; +} .acpopupitem { - background-color: #555753; - padding: 4px; - clear: left; - img { - float: left; - margin-right: 4px; } - &.selected { - color: #2e302e; - background-color: #eeeeec; } } - + background-color: #555753; + padding: 4px; + clear: left; + img { + float: left; + margin-right: 4px; + } + &.selected { + color: #2e302e; + background-color: @main_alt_colour; + } +} .qcomment-wrapper { - padding: 0px; - margin: 5px 5px 5px 81%; } - + padding: 0px; + margin: 5px 5px 5px 81%; +} .qcomment { opacity: 0.5; &:hover { @@ -2915,7 +2994,76 @@ footer { /* override the jappix css */ z-index: 999; } -/* media stuff */ +//* media stuff */ @media handheld { - body { - font-size: 15pt; } } + body { + font-size: 15pt; + } +} +//* Smartphones (portrait and landscape) ----------- */ +@media only screen and (min-device-width: 320px) + and (max-device-width: 480px) { + body { + font-size: 10px; + } +} +//* Smartphones (landscape) ----------- */ +@media only screen and (min-width: 321px) { + body { + font-size: 10px; + } +} +//* Smartphones (portrait) ----------- */ +@media only screen and (max-width: 320px) { + body { + font-size: 10px; + } +} +//* iPads (portrait and landscape) ----------- */ +@media only screen and (min-device-width: 768px) + and (max-device-width: 1024px) { + body { + font-size: 16px; + } +} +//* iPads (landscape) ----------- */ +@media only screen and (min-device-width: 768px) + and (max-device-width: 1024px) + and (orientation: landscape) { + body { + font-size: 16px; + } +} +//* iPads (portrait) ----------- */ +@media only screen and (min-device-width: 768px) + and (max-device-width: 1024px) + and (orientation: portrait) { + body { + font-size: 16px; + } +} +//* Desktops and laptops ----------- */ +//adjusted to 1024 from 1224. +//not everybody has a fucking big screen ffs +@media only screen and (min-width: 1024px) { + body { + font-size: 16px; + } +} +//* Large screens - */ +@media only screen and (min-width: 1520px) { + body { + font-size: 18px; + } +} +//* iPhone 4 ----------- */ +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min-device-pixel-ratio: 1.5) { + body { + font-size: 16px; + } +} +.test { + color: @link_colour; + background-color: darken(@main_alt_colour, 13%); +} -- cgit v1.2.3 From 20ea1b7d4bbfcfc0139b66278be383b0378b545f Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Fri, 4 May 2012 17:06:17 -0400 Subject: fix lightbox; finished dark, now on to light Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 1430 +++++++++++++++++++------------------- 1 file changed, 710 insertions(+), 720 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 6d76044ba..40c8835e6 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -807,9 +807,9 @@ nav #nav-notifications-linkmenu { span { float: left; margin: 10px 20px 2px 0px; - a { - display: block; - } + a { + display: block; + } } .perms { float: right; @@ -858,13 +858,13 @@ nav #nav-notifications-linkmenu { } #profile-jot-text_tbl { margin-bottom: 10px; - background: #777; + background: darken(@main_alt_colour, 46.8%); } #profile-jot-text_ifr { width: 99.900002% !important; } #profile-jot-text_toolbargroup, .mceCenter tr { - background: #777; + background: darken(@main_alt_colour, 46.8%); } [id$="jot-text_ifr"] { width: 99.900002% !important; @@ -877,7 +877,7 @@ nav #nav-notifications-linkmenu { } .defaultSkin { tr.mceFirst { - background: #777; + background: darken(@main_alt_colour, 46.8%); } td { &.mceFirst, &.mceLast { @@ -1071,9 +1071,8 @@ nav #nav-notifications-linkmenu { * tabs */ .tabs { - list-style: none; + .list_reset; margin: 10px 0; - padding: 0; li { display: inline; font-size: smaller; @@ -1081,7 +1080,7 @@ nav #nav-notifications-linkmenu { } } .tab { - border: 1px solid @link_colour; + .borders(1px, solid, @link_colour); padding: 4px; &:hover, &.active:hover, &:active { background: @link_colour; @@ -1187,11 +1186,10 @@ nav #nav-notifications-linkmenu { padding: 0; } .wall-item-subtools2 { - height: 25px; + .box(25px, 25px); list-style: none outside none; margin: -75px 0 0 5px; padding: 0; - width: 25px; } .wall-item-title { font-size: 1.2em; @@ -1213,14 +1211,14 @@ nav #nav-notifications-linkmenu { .wall-item-like { clear: left; font-size: 0.8em; - color: #878883; + color: lighten(@menu_bg_colour, 20%); margin: 5px 0 5px 120px; } .wall-item-author, .wall-item-actions-author { clear: left; font-size: 0.8em; - color: #878883; + color: lighten(@menu_bg_colour, 20%); margin: 20px 20px 0 110px; } .wall-item-ago { @@ -1234,8 +1232,7 @@ nav #nav-notifications-linkmenu { margin-top: 15px; width: 100px; overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; + .text_overflow; .icon { float: left; } @@ -1254,7 +1251,6 @@ nav #nav-notifications-linkmenu { margin: 0; position: absolute; top: 75px; - width: 30px; z-index: 10001; .box(30px, 30px); img { @@ -1276,7 +1272,7 @@ nav #nav-notifications-linkmenu { min-width: 92px; .borders(2px, solid, white); border-top: 0px; - background: #555753; + background: @menu_bg_colour; position: absolute; left: -2px; top: 101px; @@ -1289,7 +1285,7 @@ nav #nav-notifications-linkmenu { padding: 5px 2px; color: @main_alt_colour; &:hover { - color: #555753; + color: @menu_bg_colour; background: @main_alt_colour; } } @@ -1318,12 +1314,11 @@ nav #nav-notifications-linkmenu { .wall-item-outside-wrapper.comment { margin-left: 80px; .wall-item-photo { - width: 40px!important; - height: 40px!important; + width: 40px !important; + height: 40px !important; } .wall-item-photo-wrapper { - width: 40px; - height: 40px; + .box(40px, 40px); } .wall-item-photo-menu-button { width: 50px; @@ -1381,11 +1376,11 @@ nav #nav-notifications-linkmenu { .comment-edit-text-empty { height: 20px; border: 2px #c8bebe solid; - border-radius: 5px; + .rounded_corners; color: #c8bebe; .transition; &:hover { - color: #999999; + color: darken(@main_alt_colour, 33.5%); } } .comment-edit-text-full { @@ -1400,7 +1395,7 @@ nav #nav-notifications-linkmenu { } .comment-edit-submit { height: 22px; - background-color: #555753; + background-color: @menu_bg_colour; color: @main_alt_colour; .rounded_corners; border: 0; @@ -1411,11 +1406,10 @@ nav #nav-notifications-linkmenu { * item text style */ .wall-item-body code { - background-color: #444; - border-bottom: 1px dashed #ccc; - border-left-style: solid; - border-left-width: 10px; - border-top: 1px dashed #ccc; + background-color: darken(@main_alt_colour, 66.5%); + border-bottom: 1px dashed darken(@main_alt_colour, 13.5%); + border-left: 5px solid darken(@main_alt_colour, 13.5%); + border-top: 1px dashed darken(@main_alt_colour, 13.5%); display: block; overflow-x: auto; padding: 5px 0 15px 10px; @@ -1432,7 +1426,7 @@ nav #nav-notifications-linkmenu { div { &[id$="text"] { font-weight: bold; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid darken(@main_alt_colour, 13.5%); } &[id$="wrapper"] { height: 100%; @@ -1471,339 +1465,310 @@ div { margin: auto auto auto 23px; } #advanced-profile-with { - margin-left: 200px; } + margin-left: 200px; +} + /** * photos */ - .photos { - height: auto; - overflow: auto; } - + height: auto; + overflow: auto; +} #photo-top-links { - margin-bottom: 30px; } - -.photo-album-image-wrapper, .photo-top-image-wrapper { + margin-bottom: 30px; +} +.photo-album-image-wrapper, +.photo-top-image-wrapper { float: left; .box_shadow; - background-color: #222; + background-color: darken(@main_alt_colour, 80%); color: @bg_colour; .rounded_corners; padding-bottom: 30px; position: relative; margin: 0 10px 10px 0; } - #photo-photo { max-width: 100%; img { - max-width: 100%; } } - + max-width: 100%; } +} .photo-top-image-wrapper a:hover, #photo-photo a:hover, .photo-album-image-wrapper a:hover { border-bottom: 0; } - .photo-top-photo, .photo-album-photo { .rounded_corners(5px 5px 0 0); } - .photo-top-album-name, .caption { position: absolute; bottom: 0; padding: 0 5px; } - #photo-photo { position: relative; - float: left; } - -#photo-prev-link, #photo-next-link { + // float: left; + margin: 5px 45%; +} +#photo-prev-link, +#photo-next-link { position: absolute; - .box(30%, 100%); + // .box(30%, 100%); + .box(50px, 150px); background: white center center no-repeat; opacity: 0; - .transition(all, 0.2s); -} - -#photo-prev-link { - background-image: url(dark/prev.png); - height: 350px; - left: 1%; - top: 215px; - width: 50px; - z-index: 10; -} - -#photo-next-link { - background-image: url(dark/next.png); - height: 350px; - right: 45%; - top: 215px; - width: 50px; -} - -#photo-prev-link a, #photo-next-link a { - display: block; - width: 100%; - height: 100%; - overflow: hidden; - text-indent: -900000px; } - -#photo-prev-link:hover { - opacity: 1; - .transition(all, 0.2s); -} - -#photo-next-link { + .transition(all, 0.5s); + z-index: 10; + top: 175px; + .rounded_corners; &:hover { - opacity: 1; - .transition(all, 0.2s); + opacity: 0.6; + .transition(all, 0.5s); } .icon { display: none; } } - -#photo-prev-link .icon { - display: none; } - +#photo-prev-link { + // background-image: url(dark/prev.png); + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAnCAMAAADTjiM/AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAALpQTFRF////AAAAQEBAZmZmVVVVSUlJTU1NXV1dVVVVTk5OW1tbWlpaWFhPWFhQU1pTVVVVVlZSVVlRVlZTVFdUVFdUVVdTVFZSVldUVldSVldSVldTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVZUVVdTVVdTVVhSVVdTVVdTVVhSVVdTVVdTVVhSVVdTVVdTVVdTVVdTVVdTVVdTVVhTVVdTVVdTVVdTVVdT3XYY/AAAAD10Uk5TAAEEBQYHCgsMDQ4RHSAlP0FFR1hee3+JnqSqq6ytrq+wsbKztLW2t7y9vr/AwcLDxMXGx8jU1dng7O/3+TmOwVsAAADASURBVCjPddPXEoIwEAXQINh7Q8WKYu+95v9/S0dxZxNy83hgMpvdu0Jox642r25GVxGfys+5540sZV3jyY/lWeVxyDLg7AR/lhXOI+KZZeRFgvGQeMnY9olXScYD4jXnPvHGzNsU4x7xjnGsa+YO8T7NnukRHzgXiY/KNKiUkzqkZ8ivnDoKD/xfBvdbbXM9sH70Xtgf2E/YfzgvOF+YB5gf5cPcAfmsgTy3QP5vYF8akf36XvXIRhZPlPyLWxBvNENWsZXDKukAAAAASUVORK5CYII="); + left: 22%; +} +#photo-next-link { + // background-image: url(dark/next.png); + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAnCAMAAADTjiM/AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAKVQTFRF////gICAQEBAZmZmVVVVSUlJYGBgVVVVTU1NXV1dVVVVWVlZU1hTVlZSVlZTVlZTVVlRVVhSVFdUVlhTVVdTVFZTVVdTVldTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVhSVVdTVVdTVVdTVVdTVVdTVVdTVVdTVVdTVVdT8E3YQQAAADZ0Uk5TAAIEBQYHCAkKCwwUN0FER0hOW2uNjqWqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCxcjT3PP3B0dhfwAAANlJREFUKM910+cSgjAQRtEIomAXu4iIYge7ef9Hs+ZzN4b9eW4mk1kGIaqdU9wQf2Nf5XPSiu4d+Z6jp/n54/KghZ40h5ZymbFQGCCkLg3WKC+MEfYs2AHCrszCBGHLQ5gXpggbFooRwrrEwgxhxUOcE5w5wtJiYYHQZjt0EuUhX3r19vU7Y++ozgeMD7i/buYhYTcDj8gz3RQ8prwHB/aPyzvwhPLWzBtwSLi0Bk8pr8BR0cgzwiIycw0cUxZ9xXOH7VZ9vAVn4X840Vh4F9Pp1w/gZ92mpesDuLpM+1blc68AAAAASUVORK5CYII="); + left: 44%; +} +#photo-prev-link a, +#photo-next-link a { + display: block; + .box(100%, 100%); + .rounded_corners; + overflow: hidden; + text-indent: -900000px; +} #photos-upload-spacer, #photos-upload-new-wrapper, #photos-upload-exist-wrapper { - margin-bottom: 1em; } - + margin-bottom: 1em; +} #photos-upload-existing-album-text, #photos-upload-newalbum-div { - background-color: #555753; - color: @main_alt_colour; - padding: 1px; } - + background-color: @menu_bg_colour; + color: @main_alt_colour; + padding: 1px; +} #photos-upload-album-select, #photos-upload-newalbum { - width: 99%; } - + width: 99%; +} #photos-upload-perms-menu { - text-align: right; } - + text-align: right; +} #photo-edit-caption, #photo-edit-newtag, #photo-edit-albumname { - float: left; - margin-bottom: 25px; } - + float: left; + margin-bottom: 25px; +} #photo-edit-link-wrap { - margin-bottom: 15px; } - + margin-bottom: 15px; +} #photo-edit-caption, #photo-edit-newtag { - width: 100%; } - + width: 100%; +} #photo-like-div { - margin-bottom: 25px; } - -#photo-edit-caption-end, -#photo-edit-tags-end, -#photo-edit-albumname-end { - clear: both; } - + margin-bottom: 25px; +} #photo-edit-delete-button { - margin-left: 200px; } - + margin-left: 200px; +} #photo-edit-end { - margin-bottom: 35px; } - + margin-bottom: 35px; +} #photo-caption { - font-size: 110%; - font-weight: bold; - margin-top: 15px; - margin-bottom: 15px; } + font-size: 110%; + font-weight: bold; + margin-top: 15px; + margin-bottom: 15px; +} + /** * message */ - .prvmail-text { width: 100%; } - #prvmail-subject { width: 100%; color: @bg_colour; background: @main_colour; } - #prvmail-submit-wrapper { - margin-top: 10px; } - + margin-top: 10px; +} #prvmail-submit { - float: right; - margin-top: 0; } - + float: right; + margin-top: 0; +} #prvmail-submit-wrapper div { - margin-right: 5px; - float: left; } - + margin-right: 5px; + float: left; +} .mail-list-outside-wrapper { - margin-top: 20px; } - + margin-top: 20px; +} .mail-list-sender { - float: left; } - + float: left; +} .mail-list-detail { - margin-left: 90px; } - + margin-left: 90px; +} .mail-list-sender-name { - display: inline; - font-size: 1.1em; } - + display: inline; + font-size: 1.1em; +} .mail-list-date { - display: inline; - font-size: 0.9em; - padding-left: 10px; } - + display: inline; + font-size: 0.9em; + padding-left: 10px; +} .mail-list-sender-name, .mail-list-date { - font-style: italic; } - + font-style: italic; +} .mail-list-subject { - font-size: 1.2em; } - + font-size: 1.2em; +} .mail-list-delete-wrapper { - float: right; } - + float: right; +} .mail-list-outside-wrapper-end { - clear: both; - border-bottom: 1px @main_colour dotted; } - + clear: both; + border-bottom: 1px @main_colour dotted; +} .mail-conv-sender { - float: left; - margin: 0px 5px 5px 0px; } - + float: left; + margin: 0px 5px 5px 0px; +} .mail-conv-sender-photo { .box(32px, 32px) } - .mail-conv-sender-name { - float: left; } - + float: left; +} .mail-conv-date { - float: right; } - + float: right; +} .mail-conv-subject { - clear: right; - font-weight: bold; - font-size: 1.2em; } - + clear: right; + font-weight: bold; + font-size: 1.2em; +} .mail-conv-body { - clear: both; } - + clear: both; +} .mail-conv-delete-wrapper { - margin-top: 5px; } + margin-top: 5px; +} + /** * contacts */ - .view-contact-wrapper, .contact-entry-wrapper { float: left; margin: 0 5px 40px 0; .box(120px, 120px); padding: 3px; - position: relative; } - + position: relative; +} .contact-direction-wrapper { position: absolute; - top: 20px; } - + top: 20px; +} .contact-edit-links { position: absolute; - top: 60px; } - + top: 60px; +} .contact-entry-photo-wrapper {} .contact-entry-photo { - margin-left: 20px; } - + margin-left: 20px; +} .contact-entry-name { width: 120px; font-weight: bold; - /*overflow: hidden;*/ } - .contact-entry-photo { - position: relative; } - + position: relative; +} .contact-entry-edit-links .icon { - border: 1px solid #babdb6; + .borders(1px, solid, #babdb6); .rounded_corners(3px); - background-color: #fff; + background-color: white; } - #contact-entry-url, [id^="contact-entry-url"], #contact-entry-network, [id^="contact-entry-network"] { font-size: smaller; } - #contact-entry-network, [id^="contact-entry-network"] { font-style: italic; } - #contact-edit-banner-name { - font-size: 1.5em; } + font-size: 1.5em; +} #contact-edit-photo-wrapper { - position: relative; - float: left; - padding: 20px; } - + position: relative; + float: left; + padding: 20px; +} #contact-edit-direction-icon { - position: absolute; - top: 60px; - left: 0; } - + position: absolute; + top: 60px; + left: 0; +} #contact-edit-nav-wrapper { - margin-left: 0px; } - + margin-left: 0px; +} #contact-edit-links { margin-top: 23px; - ul { - .list_reset; - } } - #contact-drop-links { margin-left: 5px; } - #contact-edit-nav-wrapper .icon { .borders(1px, solid, #babdb6); .rounded_corners(3px); } - #contact-edit-poll-wrapper { - margin-left: 0px; } - + margin-left: 0px; +} #contact-edit-last-update-text { - margin-bottom: 15px; } - + margin-bottom: 15px; +} #contact-edit-last-updated { - font-weight: bold; } - + font-weight: bold; +} #contact-edit-poll-text { - display: inline; } - -#contact-edit-info_tbl, #contact-edit-info_parent, .mceLayout { - width: 100%; } - + display: inline; +} +#contact-edit-info_tbl, +#contact-edit-info_parent, +.mceLayout { + width: 100%; } #contact-edit-end { - clear: both; - margin-bottom: 65px; } - + clear: both; + margin-bottom: 65px; +} .contact-photo-menu-button { position: absolute; background: url("dark/photo-menu.jpg") top left no-repeat transparent; @@ -1816,81 +1781,78 @@ div { text-indent: 40px; display: none; } - .contact-photo-menu { - width: auto; - border: 2px solid #444; - background: @bg_colour; - color: @main_colour; - position: absolute; - left: 0px; - top: 90px; - display: none; - z-index: 10000; - ul { - margin: 0px; - padding: 0px; - list-style: none; } - li a { - display: block; - padding: 2px; - &:hover { - color: #fff; - background: #3465A4; - text-decoration: none; } } } + width: auto; + .borders(2px, solid, darken(@main_alt_colour, 66.5%)); + background: @bg_colour; + color: @main_colour; + position: absolute; + left: 0px; + top: 90px; + display: none; + z-index: 10000; + li a { + display: block; + padding: 2px; + &:hover { + color: white; + background: #3465A4; + text-decoration: none; + } + } +} + /** * register, settings & profile forms */ - .openid {} #id_openid_url { - background: url(dark/login-bg.gif) no-repeat; - background-position: 0 50%; - padding-left: 18px; } - + background: url(dark/login-bg.gif) no-repeat; + background-position: 0 50%; + padding-left: 18px; +} #settings-nickname-desc { background-color: @main_colour; .rounded_corners; padding: 5px; - color: #111; + color: @shadow_colour; } - #settings-default-perms { - margin-bottom: 20px; } - + margin-bottom: 20px; +} #register-form div, #profile-edit-form div { - clear: both; } - + clear: both; +} .settings-block { - label { - clear: left; } - input { - margin: 10px 5px; } } - -/*#register-form label, */ -/*#profile-edit-form label {*/ -/* width: 300px; */ -/* float: left; */ -/*} */ - -/*#register-form span, */ -/*#profile-edit-form span {*/ -/* color: #555753; */ -/* display: block; */ -/* margin-bottom: 20px; */ -/*} */ - + label { + clear: left; + } + input { + margin: 10px 5px; + } +} +#register-form label, +#profile-edit-form label { + width: 300px; + float: left; +} +#register-form span, +#profile-edit-form span { + color: @menu_bg_colour; + display: block; + margin-bottom: 20px; +} #profile-edit-marital-label span { - margin: -4px; } - + margin: -4px; +} .settings-submit-wrapper, .profile-edit-submit-wrapper { - margin: 0 0 30px -3px; } - + margin: 0 0 30px -3px; +} .profile-edit-side-div { - display: none; } - + display: none; +} /*.profile-edit-side-div:hover { display: block; } @@ -1899,12 +1861,12 @@ div { }*/ #profiles-menu-trigger { - margin: 0px 0px 0px 25px; } - + margin: 0px 0px 0px 25px; +} .profile-listing { - float: left; - margin: 20px 20px 0px 0px; } - + float: left; + margin: 20px 20px 0px 0px; +} .icon-profile-edit { background: url("dark/icons.png") -150px 0px no-repeat; border: 0; @@ -1938,39 +1900,36 @@ div { margin: 10px 10px 10px 288px; } + /** * contacts selector */ - .group-delete-wrapper { margin: -31px 50px 0 0; - float: right; } - + float: right; +} /*.group-delete-icon { margin: 0 0 0 10px; }*/ - #group-edit-submit-wrapper { margin: 0 0 10px 0; - display: inline; } - + display: inline; +} #group-edit-desc { - margin: 10px 0px; } - + margin: 10px 0px; +} #group-members, #prof-members { height: 200px; overflow: auto; .borders(1px, solid, #555753); .rounded_corners(5px 5px 0 0); } - #group-all-contacts, #prof-all-contacts { height: 200px; overflow: auto; .borders(1px, solid, #555753); .rounded_corners(0 0 5px 5px); } - #group-members h3, #group-all-contacts h3, #prof-members h3, @@ -1978,215 +1937,227 @@ div { color: @main_alt_colour; background-color: #555753; margin: 0; - padding: 5px; } - + padding: 5px; +} #group-separator, #prof-separator { - display: none; } + display: none; +} + /** * profile */ - #cropimage-wrapper { - float: left; } - + float: left; +} #crop-image-form { - clear: both; } + clear: both; +} + /** * intros */ - .intro-wrapper { - margin-top: 20px; } - + margin-top: 20px; +} .intro-fullname { - font-size: 1.1em; - font-weight: bold; } - + font-size: 1.1em; + font-weight: bold; +} .intro-desc { - margin-bottom: 20px; - font-weight: bold; } - + margin-bottom: 20px; + font-weight: bold; +} .intro-note { - padding: 10px; } - + padding: 10px; +} .intro-end { - padding: 30px; } - + padding: 30px; +} .intro-form { - float: left; } - -.intro-approve-form, .intro-approve-as-friend-end { - clear: both; } - + float: left; +} +.intro-approve-form, +.intro-approve-as-friend-end { + clear: both; +} .intro-submit-approve, .intro-submit-ignore { - margin-right: 20px; } - + margin-right: 20px; +} .intro-submit-approve { - margin-top: 15px; } - -.intro-approve-as-friend-label, .intro-approve-as-fan-label, .intro-approve-as-friend, .intro-approve-as-fan { - float: left; } - + margin-top: 15px; +} +.intro-approve-as-friend-label, +.intro-approve-as-fan-label, +.intro-approve-as-friend, +.intro-approve-as-fan { + float: left; +} .intro-form-end { - clear: both; - margin-bottom: 10px; } - + clear: both; + margin-bottom: 10px; +} .intro-approve-as-friend-desc { - margin-top: 10px; } - + margin-top: 10px; +} .intro-approve-as-end { - clear: both; - margin-bottom: 10px; } - + clear: both; + margin-bottom: 10px; +} .intro-end, .clear { - clear: both; } + clear: both; +} + /** * events */ - .eventcal { - float: left; - font-size: 20px; } - + float: left; + font-size: 20px; +} .event { - background: @bg_colour; } - + background: @bg_colour; +} .vevent { - border: 1px solid #ccc; - .event-description, .event-location, .event-start { - margin-left: 10px; - margin-right: 10px; } } - + border: 1px solid darken(@main_alt_colour, 13.5%); + .event-description, .event-location, .event-start { + margin-left: 10px; + margin-right: 10px; + } +} #new-event-link { - margin-bottom: 10px; } - + margin-bottom: 10px; +} .edit-event-link, .plink-event-link { /*float: left; */ /*margin-top: 4px; */ /*margin-right: 4px;*/ - /*margin-bottom: 15px;*/ } - + /*margin-bottom: 15px;*/ +} .event-description:before { - content: url('../../../images/calendar.png'); - margin-right: 15px; } - -.event-start, .event-end { - margin-left: 10px; - width: 330px; - font-size: smaller; } - -.event-start .dtstart, .event-end .dtend { - float: right; } - + content: url('../../../images/calendar.png'); + margin-right: 15px; +} +.event-start, +.event-end { + margin-left: 10px; + width: 330px; + font-size: smaller; +} +.event-start .dtstart, +.event-end .dtend { + float: right; +} .event-list-date { - margin-bottom: 10px; } - + margin-bottom: 10px; +} .prevcal, .nextcal { - float: left; - margin-left: 32px; - margin-right: 32px; - margin-top: 64px; } - -.event-calendar-end { - clear: both; } - + float: left; + margin: 64px 32px auto 32px; +} .calendar { - font-family: monospace; } - + font-family: monospace; +} .today { - font-weight: bold; - color: #F00; } - + font-weight: bold; + color: red; +} #event-start-text, #event-finish-text { - margin-top: 10px; - margin-bottom: 5px; } - -#event-nofinish-checkbox, #event-nofinish-text, #event-adjust-checkbox, #event-adjust-text, #event-share-checkbox { - float: left; } - + margin-top: 10px; + margin-bottom: 5px; +} +#event-nofinish-checkbox, +#event-nofinish-text, +#event-adjust-checkbox, +#event-adjust-text, +#event-share-checkbox { + float: left; +} #event-datetime-break { - margin-bottom: 10px; } - -#event-nofinish-break, #event-adjust-break, #event-share-break { - clear: both; } - + margin-bottom: 10px; +} +#event-nofinish-break, +#event-adjust-break, +#event-share-break { + clear: both; +} #event-desc-text, #event-location-text { - margin-top: 10px; - margin-bottom: 5px; } - + margin-top: 10px; + margin-bottom: 5px; +} #event-submit { - margin-top: 10px; } - + margin-top: 10px; +} .body-tag { - margin: 10px 0; - opacity: 0.5; - &:hover { - opacity: 1.0 !important; } } - + margin: 10px 0; + opacity: 0.5; + &:hover { + opacity: 1.0 !important; + } +} .filesavetags, .categorytags { - margin: 20px 0; - opacity: 0.5; } - + margin: 20px 0; + opacity: 0.5; +} .filesavetags:hover, .categorytags:hover { - margin: 20px 0; - opacity: 1.0 !important; } - + margin: 20px 0; + opacity: 1.0 !important; +} .item-select { - opacity: 0.1; - margin: 5px 0 0 6px !important; - &:hover { - opacity: 1; } } - + opacity: 0.1; + margin: 5px 0 0 6px !important; + &:hover { + opacity: 1; + } +} .checkeditem { - opacity: 1; } - + opacity: 1; +} #item-delete-selected { - margin-top: 30px; } - + margin-top: 30px; +} /* was tired of having no way of moving it around, so * here's a little 'hook' to do so */ - .delete-checked { - position: absolute; - left: 35px; - margin-top: 20px; } - -#item-delete-selected-end { - clear: both; } - + position: absolute; + left: 35px; + margin-top: 20px; +} #item-delete-selected-icon { - float: left; - margin-right: 5px; } - + float: left; + margin-right: 5px; +} #item-delete-selected-desc { - float: left; - margin-right: 5px; - &:hover { - text-decoration: underline; } } - + float: left; + margin-right: 5px; + &:hover { + text-decoration: underline; + } +} .fc-state-highlight { - background: @main_colour; - color: @bg_colour; } + background: @main_colour; + color: @bg_colour; +} + /** * directory */ - .directory-item { - float: left; - margin: 0 5px 4px 0; - padding: 3px; - width: 180px; - height: 250px; - position: relative; } + float: left; + margin: 0 5px 4px 0; + padding: 3px; + width: 180px; + height: 250px; + position: relative; +} + /** * sidebar */ - #group-sidebar { margin-bottom: 10px; } @@ -2232,7 +2203,7 @@ div { #sidebar-new-group { margin: auto; display: inline-block; - color: #efefef; + color: @main_alt_colour; text-decoration: none; text-align: center; } @@ -2252,13 +2223,13 @@ div { #side-peoplefind-url { background-color: @bg_colour; color: @main_colour; - border: 1px #999 solid; + .borders(1px, solid, darken(@main_alt_colour, 33.5%)); margin-right: 3px; width: 75%; &:hover, &:focus { - background-color: #efefef; - color: #222; - border: 1px 333 solid; + background-color: @main_alt_colour; + color: darken(@main_alt_colour, 80%); + .borders(1px, solid, darken(@main_alt_colour, 73.5%)); } } .nets-ul { @@ -2284,15 +2255,16 @@ div { */ #pending-update { float: right; - color: #fff; + color: white; font-weight: bold; - background-color: #ff0000; - padding: 0 .3em; + background-color: red; + padding: 0 0.3em; } .admin { &.linklist { border: 0; - padding: 0; } + padding: 0; + } &.link { .list_reset; } @@ -2306,7 +2278,7 @@ div { clear: left; margin-bottom: 2px; padding-bottom: 2px; - border-bottom: 1px solid #000; + border-bottom: 1px solid @shadow_colour; } dt { width: 250px; @@ -2317,7 +2289,7 @@ div { margin-left: 250px; } h3 { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid darken(@main_alt_colour, 13.5%); } .submit { clear: left; @@ -2327,9 +2299,8 @@ div { padding: 0; } .plugin { - list-style: none; display: block; - border: 1px solid #888; + .borders(1px, solid, darken(@main_alt_colour, 40%)); padding: 1em; margin-bottom: 5px; clear: left; @@ -2340,7 +2311,7 @@ div { } table { width: 100%; - border-bottom: 1px solid #000; + border-bottom: 1px solid @shadow_colour; margin: 5px 0; th { text-align: left; @@ -2351,8 +2322,7 @@ div { } table { &#users img { - width: 16px; - height: 16px; + .box(16px, 16px); } } .selectall { @@ -2363,15 +2333,14 @@ div { text-decoration: underline; } } - #users .name { color: @main_colour; } + /** * form fields */ - .field { overflow: auto; label { @@ -2382,15 +2351,16 @@ div { border: 1px @bg_colour solid; padding: 5px; background: @main_colour; - color: #111; } } - + color: #111; + } +} .field .onoff { float: right; margin: 0 330px 0 auto; width: 80px; a { display: block; - border: 1px solid #666; + .borders(1px, solid, darken(@main_alt_colour, 53.5%)); padding: 3px 6px 4px 10px; height: 16px; text-decoration: none; @@ -2401,33 +2371,31 @@ div { } .on { background-position: 42px 1px; - background-color: #999; - color: #111; + background-color: darken(@main_alt_colour, 33.5%); + color: darken(@main_alt_colour, 86.5%); text-align: left; } .off { background-position: 2px 1px; - background-color: #ccc; - color: #333; + background-color: darken(@main_alt_colour, 13.5%); + color: darken(@main_alt_colour, 73.5%); text-align: right; } } - .hidden { - display: none !important; } - + display: none !important; +} .field textarea { .box(80%, 100px); } - .field_help { - display: block; - margin-left: 297px; - color: #aaa; } - + display: block; + margin-left: 297px; + color: darken(@main_alt_colour, 24%); +} .field.radio .field_help { - margin-left: 297px; } - + margin-left: 297px; +} label { width: 38%; display: inline-block; @@ -2436,12 +2404,12 @@ label { .borders(1px, solid, @bg_colour); padding: 5px; background: @main_colour; - color: #111; + color: darken(@main_alt_colour, 86.5%); .box_shadow(3px, 3px, 5px); } input { .box(250px, 25px); - .borders(1px, solid, #999); + .borders(1px, solid, darken(@main_alt_colour, 33.5%)); &[type="checkbox"], &[type="radio"] { margin: 0; @@ -2449,11 +2417,11 @@ input { } &[type="submit"], &[type="button"] { - background-color: #eee; - .borders(2px, outset, #aaa); + background-color: @main_alt_colour; + .borders(2px, outset, darken(@main_alt_colour, 24%)); .rounded_corners; .box_shadow(1px, 3px, 4px, 0); - color: #2e302e; + color: @bg_alt_colour; cursor: pointer; font-weight: bold; width: auto; @@ -2476,35 +2444,35 @@ input { position: absolute; display: none; .background { - background-color: #000; + background-color: darken(@main_alt_colour, 86.5%); opacity: 0.5; .box(100%, 100%); position: absolute; top: 0px; - left: 0px; } + left: 0px; + } .panel { top: 25%; left: 25%; .box(50%, 50%); padding: 1em; position: absolute; - border: 4px solid #000000; - background-color: #FFFFFF; + .borders(4px, solid, black); + background-color: white; } } - #panel { - z-index: 100; } - + z-index: 100; +} .grey, .gray { - color: gray; } - + color: gray; +} .orange { - color: orange; } - + color: orange; +} .red { - color: red; } - + color: red; +} .popup .panel { .panel_text { display: block; @@ -2522,51 +2490,54 @@ input { position: absolute; } } - .panel_text .progress { - width: 50%; - overflow: hidden; - height: auto; - border: 1px solid #cccccc; - margin-bottom: 5px; - span { - float: right; - display: block; - width: 25%; - background-color: #eeeeee; - text-align: right; } } + width: 50%; + overflow: hidden; + height: auto; + .borders(1px, solid, darken(@main_alt_colour, 13.5%)); + margin-bottom: 5px; + span { + float: right; + display: block; + width: 25%; + background-color: @main_alt_colour; + text-align: right; + } +} + /** * OAuth */ - .oauthapp { - height: auto; - overflow: auto; - border-bottom: 2px solid #cccccc; - padding-bottom: 1em; - margin-bottom: 1em; - img { - float: left; - width: 48px; - height: 48px; - margin: 10px; - &.noicon { - background-image: url("../../../images/icons/48/plugin.png"); - background-position: center center; - background-repeat: no-repeat; } } - a { - float: left; } } + height: auto; + overflow: auto; + border-bottom: 2px solid darken(@main_alt_colour, 13.5%); + padding-bottom: 1em; + margin-bottom: 1em; + img { + float: left; + .box(48px, 48px); + margin: 10px; + &.noicon { + background-image: url("../../../images/icons/48/plugin.png"); + background-position: center center; + background-repeat: no-repeat; + } + } + a { + float: left; + } +} + /** * icons */ - .iconspacer { display: block; .box(16px, 16px); } - .icon { display: block; .box; @@ -2576,242 +2547,252 @@ input { .rounded_corners; &:hover { border: 0; - text-decoration: none; } } - + text-decoration: none; + } +} .editicon { - display: inline-block; - width: 21px; - height: 21px; - background: url(dark/editicons.png) no-repeat; - border: 0; - text-decoration: none; } - + display: inline-block; + .box(21px, 21px); + background: url(dark/editicons.png) no-repeat; + border: 0; + text-decoration: none; +} .shadow { .box_shadow(2px, 2px, 5px, 2px); &:active, &:focus, &:hover { - box-shadow: 0 0 0 0; + .box_shadow(0, 0, 0, 0); } } .editicon:hover { - border: 0; } - + border: 0; +} .boldbb { background-position: 0px 0px; &:hover { - background-position: -22px 0px; } } - + background-position: -22px 0px; } +} .italicbb { background-position: 0px -22px; &:hover { - background-position: -22px -22px; } } - + background-position: -22px -22px; } +} .underlinebb { background-position: 0px -44px; &:hover { - background-position: -22px -44px; } } - + background-position: -22px -44px; } +} .quotebb { background-position: 0px -66px; &:hover { - background-position: -22px -66px; } } - + background-position: -22px -66px; } +} .codebb { background-position: 0px -88px; &:hover { - background-position: -22px -88px; } } - + background-position: -22px -88px; } +} .imagebb { background-position: -44px 0px; &:hover { - background-position: -66px 0px; } } - + background-position: -66px 0px; } +} .urlbb { background-position: -44px -22px; &:hover { - background-position: -66px -22px; } } - + background-position: -66px -22px; } +} .videobb { background-position: -44px -44px; &:hover { - background-position: -66px -44px; } } - + background-position: -66px -44px; } +} .icon { &.drop, &.drophide, &.delete { float: left; - margin: 0 2px; } + margin: 0 2px; + } &.s22 { &.delete { display: block; - background-position: -110px 0; } + background-position: -110px 0; + } &.text { padding: 10px 0px 0px 25px; - width: 200px; } } + width: 200px; + } + } &.text { - text-indent: 0px; } + text-indent: 0px; + } &.s16 { min-width: 16px; - height: 16px; } } - + height: 16px; + } +} +// special case for wall items +.wall-item-delete-wrapper.icon.delete, +.wall-item-delete-wrapper.icon.drophide { + margin: 0; +} .s16 .add { background: url("../../../images/icons/16/add.png") no-repeat; } - .add { - margin: 0px 5px; } - + margin: 0px 5px; +} .article { - background-position: -50px 0; } - + background-position: -50px 0; +} .audio { - background-position: -70px 0; } - + background-position: -70px 0; +} .block { - background-position: -90px 0px; } - + background-position: -90px 0px; +} .drop, .delete { - background-position: -110px 0; } - + background-position: -110px 0; +} .drophide { - background-position: -130px 0; } - + background-position: -130px 0; +} .edit { - background-position: -150px 0; } - + background-position: -150px 0; +} .camera { - background-position: -170px 0; } - + background-position: -170px 0; +} .dislike { - background-position: -190px 0; } - + background-position: -190px 0; +} .file-as { - background-position: -230px -60px; } - + background-position: -230px -60px; +} .like { - background-position: -211px 0; } - + background-position: -211px 0; +} .link { - background-position: -230px 0; } - -.globe, .location { - background-position: -50px -20px; } - -.noglobe, .nolocation { - background-position: -70px -20px; } - + background-position: -230px 0; +} +.globe, +.location { + background-position: -50px -20px; +} +.noglobe, +.nolocation { + background-position: -70px -20px; +} .no { - background-position: -90px -20px; } - + background-position: -90px -20px; +} .pause { - background-position: -110px -20px; } - + background-position: -110px -20px; +} .play { - background-position: -130px -20px; } - + background-position: -130px -20px; +} .pencil { - background-position: -151px -18px; } - + background-position: -151px -18px; +} .small-pencil { - background-position: -170px -20px; } - + background-position: -170px -20px; +} .recycle { - background-position: -190px -20px; } - + background-position: -190px -20px; +} .remote-link { - background-position: -210px -20px; } - + background-position: -210px -20px; +} .share { - background-position: -230px -20px; } - + background-position: -230px -20px; +} .tools { - background-position: -50px -40px; } - + background-position: -50px -40px; +} .lock { - background-position: -70px -40px; } - + background-position: -70px -40px; +} .unlock { - background-position: -88px -40px; } - + background-position: -88px -40px; +} .video { - background-position: -110px -40px; } - + background-position: -110px -40px; +} .attach { - background-position: -190px -40px; } - + background-position: -190px -40px; +} .language { - background-position: -210px -40px; } - + background-position: -210px -40px; +} .starred { - background-position: -130px -60px; } - + background-position: -130px -60px; +} .unstarred { - background-position: -150px -60px; } - + background-position: -150px -60px; +} .tagged { - background-position: -170px -60px; } - + background-position: -170px -60px; +} .on { - background-position: -50px -60px; } - + background-position: -50px -60px; +} .off { - background-position: -70px -60px; } - + background-position: -70px -60px; +} .prev { - background-position: -90px -60px; } - + background-position: -90px -60px; +} .next { - background-position: -110px -60px; } - + background-position: -110px -60px; +} .icon.dim { - opacity: 0.3; } - + opacity: 0.3; +} #pause { position: fixed; bottom: 40px; - right: 30px; } - + right: 30px; +} .border { - .borders(1px, solid, #babdb6); + .borders(1px, solid, @border2); .rounded_corners; &:hover { - .borders(1px, solid, #babdb6); + .borders(1px, solid, @border2); .rounded_corners; } } - .attachtype { display: block; - width: 20px; - height: 23px; - background-image: url(../../../images/content-types.png); } - + .box(20px, 23px); + background-image: url(../../../images/content-types.png); +} .type-video { - background-position: 0px 0px; } - + background-position: 0px 0px; +} .type-image { - background-position: -20px 0; } - + background-position: -20px 0; +} .type-audio { - background-position: -40px 0; } - + background-position: -40px 0; +} .type-text { - background-position: -60px 0px; } - + background-position: -60px 0px; +} .type-unkn { - background-position: -80px 0; } + background-position: -80px 0; +} + /** * footer */ - .cc-license { margin-top: 100px; - font-size: 0.7em; } - + font-size: 0.7em; +} footer { display: block; - /*margin: 50px 20%;*/ - clear: both; } - + clear: both; +} #profile-jot-text { height: 20px; color: @main_colour; @@ -2820,85 +2801,87 @@ footer { width: 99.5%; } + /** * acl */ - -#photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper { +#photo-edit-perms-select, +#photos-upload-permissions-wrapper, +#profile-jot-acl-wrapper { display: block !important; background: @bg_colour; - color: @main_colour; } - + color: @main_colour; +} #acl-wrapper { width: 660px; - margin: 0 auto; } - + margin: 0 auto; +} #acl-search { float: right; background: white url("../../../images/search_18.png") no-repeat right center; padding-right: 20px; margin: 6px; - color: #111; } - + color: @shadow_colour; +} #acl-showall { float: left; display: block; - width: auto; - height: 18px; - background: #eeeecc url("../../../images/show_all_off.png") 8px 8px no-repeat; + .box(auto, 18px); + background: @main_colour url("../../../images/show_all_off.png") 8px 8px no-repeat; padding: 7px 10px 7px 30px; .rounded_corners; - color: #999; + color: darken(@main_alt_colour, 33.5%); margin: 5px 0; &.selected { - color: #000; - background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; } } - + color: black; + background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; + } +} #acl-list { - height: 210px; - border: 1px solid #ccc; - clear: both; - margin-top: 30px; - overflow: auto; } - + height: 210px; + .borders(1px, solid, darken(@main_alt_colour, 13.5%); + clear: both; + margin-top: 30px; + overflow: auto; +} /*#acl-list-content { }*/ - .acl-list-item { .borders; + .box(120px, 110px); display: block; float: left; - height: 110px; margin: 3px 0 5px 5px; - width: 120px; img { .box(22px, 22px); float: left; - margin: 5px 5px 20px; } + margin: 5px 5px 20px; + } p { height: 12px; font-size: 10px; margin: 0 0 22px; - padding: 2px 0 1px; } + padding: 2px 0 1px; + } a { - background: #eeeecc 3px 3px no-repeat; + background: @main_colour 3px 3px no-repeat; .rounded_corners; + .box(55px, 20px); clear: both; font-size: 10px; display: block; - width: 55px; - height: 20px; color: @bg_colour; margin: 5px auto 0; padding: 0 3px; text-align: center; - vertical-align: middle; } } - + vertical-align: middle; + } +} #acl-wrapper a:hover { text-decoration: none; color: @bg_colour; - border: 0; } - + border: 0; +} //data URI: // data:[][;charset=][;base64], .acl-button-show { @@ -2923,24 +2906,27 @@ footer { } .acl-list-item { &.groupshow { - border-color: #9ade00; } + border-color: @group_show; + } &.grouphide { - border-color: #ff4141; } } - + border-color: @group_hide; + } +} /** /acl **/ + /* autocomplete popup */ .acpopup { max-height: 175px; max-width: 42%; - background-color: #555753; - color: #fff; + background-color: @menu_bg_colour; + color: white; overflow: auto; z-index: 100000; - border: 1px solid #cccccc; + border: 1px solid darken(@main_alt_colour, 13.5%); } .acpopupitem { - background-color: #555753; + background-color: @menu_bg_colour; padding: 4px; clear: left; img { @@ -2948,7 +2934,7 @@ footer { margin-right: 4px; } &.selected { - color: #2e302e; + color: @bg_alt_colour; background-color: @main_alt_colour; } } @@ -2957,42 +2943,49 @@ footer { margin: 5px 5px 5px 81%; } .qcomment { - opacity: 0.5; - &:hover { - opacity: 1.0; } } - + opacity: 0.5; + &:hover { + opacity: 1.0; + } +} #network-star-link { - margin-top: 10px; } - + margin-top: 10px; +} .network-star { - float: left; - margin-right: 5px; - &.icon.starred { - display: inline-block; } } - + float: left; + margin-right: 5px; + &.icon.starred { + display: inline-block; + } +} #fileas-sidebar {} .fileas-ul { - padding: 0; } + padding: 0; +} + /* * addons theming */ - #sidebar-page-list { - ul { - padding: 0; - margin: 5px 0; } - li { - list-style: none; } } - + ul { + padding: 0; + margin: 5px 0; + } + li { + list-style: none; + } +} #jappix_mini { - margin-left: 130px; - position: fixed; - bottom: 0; - right: 175px !important; - /* override the jappix css */ - z-index: 999; } + margin-left: 130px; + position: fixed; + bottom: 0; + /* override the jappix css */ + right: 175px !important; + z-index: 999; +} + //* media stuff */ @media handheld { @@ -3063,7 +3056,4 @@ footer { font-size: 16px; } } -.test { - color: @link_colour; - background-color: darken(@main_alt_colour, 13%); -} + -- cgit v1.2.3 From f32c3d74a4a70d871a5f0f166bbe67fe9dcea26f Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Sun, 6 May 2012 06:05:31 -0400 Subject: fixing widths to be more dynamic where possible. font size fixes. add README.md Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 237 +++++++++++++++------------------------ 1 file changed, 91 insertions(+), 146 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 40c8835e6..522c909a6 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -1,19 +1,19 @@ /* - * dispy-dark - * + * dispy dark + * Description: Dispy Dark: dark, sleek, functional * author, maintainer: simon * * Author's notes: * A few things of note here. The less file is our working copy, * and the CSS is *generated* from it. The CSS is the one that's * included in the HTML, and not the less one. This is to save - * bandwidth and processing time. + * bandwidth and processing time, by not including less.js. */ -/* from html5boilerplate */ -/* these are to tell browsers they should be displayed a certain way */ @import "_base"; +///* from html5boilerplate */ +///* these are to tell browsers they should be displayed a certain way */ article, aside, details, @@ -37,12 +37,12 @@ time { audio:not([controls]), [hidden] { display: none; } -/* - * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units - * 2. Force vertical scrollbar in non-IE - * 3. Prevent iOS text size adjust on device orientation change, - * without disabling user zoom: h5bp.com/g - */ +///* +// * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units +// * 2. Force vertical scrollbar in non-IE +// * 3. Prevent iOS text size adjust on device orientation change, +// * without disabling user zoom: h5bp.com/g +// */ html { font-size: 100%; overflow-y: scroll; @@ -61,11 +61,13 @@ button, input, select, textarea { background-color: @bg_colour; } select { - border: 1px #555 dotted; + .borders(1px, dotted, darken(@main_alt_colour, 60%)); padding: 1px; margin: 3px; color: @main_colour; background: @bg_colour; + max-width: 85%; + min-width: 85px; } option { padding: 1px; @@ -76,13 +78,10 @@ option { background: @main_colour; } } -ul, ol { - .list_reset; -} tr:nth-child(even) { background-color: lighten(@bg_colour, 10%); } -/* remember to define focus styles! */ +///* remember to define focus styles! */ :focus { outline: 0; } @@ -90,7 +89,7 @@ tr:nth-child(even) { background: @med_bg_colour; color: @disabled_colour; } -/* remember to highlight inserts somehow! */ +///* remember to highlight inserts somehow! */ ins, mark { background-color: @bg_alt_colour; color: @lt_main_colour; @@ -102,14 +101,19 @@ mark { font-style: italic; font-weight: bold; } -/* Redeclare monospace font family: h5bp.com/j */ -pre, code, kbd, samp, .wall-item-body code { +///* Redeclare monospace font family: h5bp.com/j */ +pre, +code, +kbd, +samp, +.wall-item-body code { font-family: monospace, monospace; _font-family: monospace; font-size: 1em; } -/* Improve readability of pre-formatted text in all browsers */ -pre, .wall-item-body code { +///* Improve readability of pre-formatted text in all browsers */ +pre, +.wall-item-body code { .wrap; } q { @@ -122,7 +126,8 @@ q { small { font-size: 85%; } -/* Position subscript and superscript content without affecting line-height: h5bp.com/k */ +///* Position subscript and superscript content without affecting +// * line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; @@ -151,13 +156,55 @@ a { } } blockquote { - background: #444; + background: darken(@main_alt_colour, 66.5%); color: @main_colour; text-indent: 5px; padding: 5px; - border: 1px #aaa solid; + .borders(1px, solid, darken(@main_alt_colour, 33%)); .rounded_corners; } +label { + width: 38%; + display: inline-block; + font-size: 0.95em; + margin: 0 10px 1em 0; + .borders(1px, solid, @bg_colour); + padding: 5px; + background: @main_colour; + color: darken(@main_alt_colour, 86.5%); + .box_shadow(3px, 3px, 5px); +} +input { + .box(250px, 25px); + .borders(1px, solid, darken(@main_alt_colour, 33.5%)); + &[type="checkbox"], + &[type="radio"] { + margin: 0; + .box(15px, 15px); + } + &[type="submit"], + &[type="button"] { + background-color: @main_alt_colour; + .borders(2px, outset, darken(@main_alt_colour, 24%)); + .rounded_corners; + .box_shadow(1px, 3px, 4px, 0); + color: @bg_alt_colour; + cursor: pointer; + font-weight: bold; + width: auto; + .text_shadow; + } + &[type="submit"]:active, + &[type="button"]:active { + .box_shadow(0, 0, 0, 0); + } +} +h1, h2, h3, +h4, h5, h6 { + margin: 10px 0px; +} + +// .required { display: inline; color: #ff0; @@ -219,9 +266,10 @@ blockquote { background: @main_colour; .rounded_corners; .box_shadow(3px, 3px, 5px); - padding: 3px; - margin: 5px 0; + margin: 3px 10px 7px 0; + padding: 6px 7px; font-weight: bold; + font-size: smaller; } @@ -276,7 +324,8 @@ blockquote { overflow: hidden !important; } label { width: 180px !important; - } } + } +} /** @@ -315,6 +364,8 @@ ul#user-menu-popup { margin: 0px; top: 20px; left: 0; + font-size: small; + line-height: 1; .rounded_corners(0 0 5px 5px); .box_shadow(5px, 5px, 10px, 0px); z-index: 10000; @@ -560,7 +611,7 @@ nav #nav-notifications-linkmenu { } } #user-menu-label { - font-size: 12px; + font-size: small; padding: 3px 20px 9px 5px; height: 10px; } @@ -700,7 +751,7 @@ nav #nav-notifications-linkmenu { */ #asidemain { float: left; - font-size: smaller; + font-size: 0.75em; margin: 20px 0 20px 35px; width: 25%; display: inline; @@ -712,9 +763,9 @@ nav #nav-notifications-linkmenu { } .vcard { .fn { - font-size: 1.7em; + font-size: 1.5em; font-weight: bold; - border-bottom: 1px solid #729fcf; + border-bottom: 1px solid @hover_colour; padding-bottom: 3px; } #profile-photo-wrapper { @@ -746,7 +797,8 @@ nav #nav-notifications-linkmenu { background: @main_colour; color: @bg_colour; font-weight: bold; - .box_shadow(1px 1px 5px 0); + .box_shadow(3px, 3px, 5px); + .rounded_corners; margin: 15px 0 5px; padding-left: 5px; } @@ -1133,7 +1185,7 @@ nav #nav-notifications-linkmenu { } .wall-item-content { overflow-x: auto; - margin: 0px 15px 0px 5px; + margin: 0px 4em 0px 5px; } [id^="tread-wrapper"], [class^="tread-wrapper"] { margin: 15px 0 0 0; @@ -1182,13 +1234,13 @@ nav #nav-notifications-linkmenu { .wall-item-subtools1 { .box(30px, 30px); list-style: none outside none; - margin: 20px 0 30px -20px; + margin: 18px 0 30px -20px; padding: 0; } .wall-item-subtools2 { .box(25px, 25px); list-style: none outside none; - margin: -75px 0 0 5px; + margin: -78px 0 0 5px; padding: 0; } .wall-item-title { @@ -1219,7 +1271,7 @@ nav #nav-notifications-linkmenu { clear: left; font-size: 0.8em; color: lighten(@menu_bg_colour, 20%); - margin: 20px 20px 0 110px; + margin: 20px auto 0 0.2em; } .wall-item-ago { display: inline; @@ -1332,7 +1384,7 @@ nav #nav-notifications-linkmenu { margin-left: 10px; } .wall-item-author { - margin-left: 50px; + margin-left: 0.2em; } .wall-item-photo-menu { min-width: 50px; @@ -1371,7 +1423,7 @@ nav #nav-notifications-linkmenu { [class^="comment-edit-text"] { margin: 5px 0 10px 20px; - width: 84.5%; + width: 94%; } .comment-edit-text-empty { height: 20px; @@ -2346,7 +2398,6 @@ div { label { width: 38%; display: inline-block; - font-size: 1.077em; margin: 0 10px 1em 0; border: 1px @bg_colour solid; padding: 5px; @@ -2396,42 +2447,6 @@ div { .field.radio .field_help { margin-left: 297px; } -label { - width: 38%; - display: inline-block; - font-size: 1.077em; - margin: 0 10px 1em 0; - .borders(1px, solid, @bg_colour); - padding: 5px; - background: @main_colour; - color: darken(@main_alt_colour, 86.5%); - .box_shadow(3px, 3px, 5px); -} -input { - .box(250px, 25px); - .borders(1px, solid, darken(@main_alt_colour, 33.5%)); - &[type="checkbox"], - &[type="radio"] { - margin: 0; - .box(15px, 15px); - } - &[type="submit"], - &[type="button"] { - background-color: @main_alt_colour; - .borders(2px, outset, darken(@main_alt_colour, 24%)); - .rounded_corners; - .box_shadow(1px, 3px, 4px, 0); - color: @bg_alt_colour; - cursor: pointer; - font-weight: bold; - width: auto; - .text_shadow; - } - &[type="submit"]:active, - &[type="button"]:active { - .box_shadow(0, 0, 0, 0); - } -} /* @@ -2986,74 +3001,4 @@ footer { z-index: 999; } - -//* media stuff */ -@media handheld { - body { - font-size: 15pt; - } -} -//* Smartphones (portrait and landscape) ----------- */ -@media only screen and (min-device-width: 320px) - and (max-device-width: 480px) { - body { - font-size: 10px; - } -} -//* Smartphones (landscape) ----------- */ -@media only screen and (min-width: 321px) { - body { - font-size: 10px; - } -} -//* Smartphones (portrait) ----------- */ -@media only screen and (max-width: 320px) { - body { - font-size: 10px; - } -} -//* iPads (portrait and landscape) ----------- */ -@media only screen and (min-device-width: 768px) - and (max-device-width: 1024px) { - body { - font-size: 16px; - } -} -//* iPads (landscape) ----------- */ -@media only screen and (min-device-width: 768px) - and (max-device-width: 1024px) - and (orientation: landscape) { - body { - font-size: 16px; - } -} -//* iPads (portrait) ----------- */ -@media only screen and (min-device-width: 768px) - and (max-device-width: 1024px) - and (orientation: portrait) { - body { - font-size: 16px; - } -} -//* Desktops and laptops ----------- */ -//adjusted to 1024 from 1224. -//not everybody has a fucking big screen ffs -@media only screen and (min-width: 1024px) { - body { - font-size: 16px; - } -} -//* Large screens - */ -@media only screen and (min-width: 1520px) { - body { - font-size: 18px; - } -} -//* iPhone 4 ----------- */ -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-device-pixel-ratio: 1.5) { - body { - font-size: 16px; - } -} - +@import "../css/media"; -- cgit v1.2.3 From e5545304308a869a3057da7fe0662290a5e5390d Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Mon, 7 May 2012 01:20:32 -0400 Subject: more css tweaks. nothing major Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 64 +++++++++++++++++++++++----------------- 1 file changed, 37 insertions(+), 27 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 522c909a6..f48a77e27 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -202,6 +202,8 @@ input { h1, h2, h3, h4, h5, h6 { margin: 10px 0px; + font-weight: bold; + border-bottom: 1px solid @hover_colour; } // @@ -235,6 +237,8 @@ h4, h5, h6 { display: block; clear: both; text-align: center; + font-size: small; + font-weight: bold; span { padding: 4px; margin: 4px; @@ -242,7 +246,7 @@ h4, h5, h6 { } .pager_current { background-color: @link_colour; - color: @main_alt_colour; + color: @bg_colour; } @@ -429,7 +433,8 @@ nav .nav-link { &:hover { background-position: -66px -88px; } } -#nav-notify-link, #nav-notifications-linkmenu { +#nav-notify-link, +#nav-notifications-linkmenu { background-position: -44px -110px; } #nav-notify-link:hover { @@ -468,9 +473,7 @@ nav .nav-link { .pointer { cursor: pointer; } - -/* popup notifications */ - +//* popup notifications */ div.jGrowl div { &.notice { background: @notice url("../../../images/icons/48/notice.png") no-repeat 5px center; @@ -485,7 +488,6 @@ div.jGrowl div { margin-top: 50px; } } - #nav-notifications-menu { margin: 30px 0 0 -20px; width: 275px; @@ -509,9 +511,9 @@ div.jGrowl div { } a:hover { color: black; - text-decoration: underline; } + text-decoration: underline; + } } - nav #nav-notifications-linkmenu { &.on .icon.s22.notify, &.selected .icon.s22.notify { @@ -524,9 +526,10 @@ nav #nav-notifications-linkmenu { } #notifications { .box(170px, 20px); - position: absolute; + font-size: small; top: -19px; left: 4px; + position: absolute; } #nav-floater { position: fixed; @@ -1033,14 +1036,6 @@ nav #nav-notifications-linkmenu { .rounded_corners; overflow: hidden; } -#profile-jot-acl-wrapper { - margin: 0 10px; - .borders(1px, solid, darken(@main_alt_colour, 60%)); - border-top: 0; - display: block !important; - .borders(1px solid @menu_bg_colour); - .box_shadow; -} #group_allow_wrapper, #group_deny_wrapper, #acl-permit-outer-wrapper, @@ -1098,10 +1093,12 @@ nav #nav-notifications-linkmenu { color: @main_colour; .borders(1px, solid, @main_colour); .rounded_corners; + .box_shadow(5px, 0, 10px); padding: 3px 3px 6px 10px; .wall-item-outside-wrapper { border: 0; .rounded_corners(0px 0px 0px 0px); + .box_shadow(0, 0, 0, 0); } } @@ -1167,7 +1164,7 @@ nav #nav-notifications-linkmenu { } .wall-item-content-wrapper { position: relative; - padding: 10px; + padding: 0.75em; width: auto; } .wall-item-outside-wrapper .wall-item-comment-wrapper { @@ -1185,10 +1182,11 @@ nav #nav-notifications-linkmenu { } .wall-item-content { overflow-x: auto; - margin: 0px 4em 0px 5px; + margin: 0px 4em 1em 5px; } -[id^="tread-wrapper"], [class^="tread-wrapper"] { - margin: 15px 0 0 0; +[id^="tread-wrapper"], +[class^="tread-wrapper"] { + margin: 1.2em 0 0 0; padding: 0px; } .wall-item-photo-menu { @@ -1246,10 +1244,10 @@ nav #nav-notifications-linkmenu { .wall-item-title { font-size: 1.2em; font-weight: bold; - margin-bottom: 1em; + margin-bottom: 1.4em; } .wall-item-body { - margin: 20px 20px 10px 0px; + margin: 15px 10px 10px 0px; text-align: left; overflow-x: auto; } @@ -1264,14 +1262,20 @@ nav #nav-notifications-linkmenu { clear: left; font-size: 0.8em; color: lighten(@menu_bg_colour, 20%); - margin: 5px 0 5px 120px; + margin: 5px 0 5px 10.2em; + .transition; + opacity: 0.5; + &:hover { + opacity: 1; + } } .wall-item-author, .wall-item-actions-author { clear: left; + float: left; font-size: 0.8em; color: lighten(@menu_bg_colour, 20%); - margin: 20px auto 0 0.2em; + margin: 1em auto 0 0.2em; } .wall-item-ago { display: inline; @@ -1361,10 +1365,10 @@ nav #nav-notifications-linkmenu { */ .ccollapse-wrapper { font-size: 0.9em; - margin-left: 80px; + margin-left: 5em; } .wall-item-outside-wrapper.comment { - margin-left: 80px; + margin-left: 5em; .wall-item-photo { width: 40px !important; height: 40px !important; @@ -2827,6 +2831,12 @@ footer { background: @bg_colour; color: @main_colour; } +#profile-jot-acl-wrapper { + margin: 0 10px; + .borders(1px, solid, @menu_bg_colour); + border-top: 0; + // .box_shadow; +} #acl-wrapper { width: 660px; margin: 0 auto; -- cgit v1.2.3 From a077e63fa58992fe04eeb7f5aa9a865985fa1039 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Thu, 10 May 2012 02:27:48 -0400 Subject: don't make -desc so obnoxious looking Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index f48a77e27..caa45918c 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -268,8 +268,8 @@ h4, h5, h6 { [class$="-desc"], [id$="-desc"] { color: @bg_colour; background: @main_colour; - .rounded_corners; - .box_shadow(3px, 3px, 5px); + // .rounded_corners; + // .box_shadow(3px, 3px, 5px); margin: 3px 10px 7px 0; padding: 6px 7px; font-weight: bold; @@ -1736,10 +1736,11 @@ div { /** * contacts */ -.view-contact-wrapper, .contact-entry-wrapper { +.view-contact-wrapper, +.contact-entry-wrapper { float: left; margin: 0 5px 40px 0; - .box(120px, 120px); + .box(120px, 135px); padding: 3px; position: relative; } @@ -1759,6 +1760,10 @@ div { .contact-entry-name { width: 120px; font-weight: bold; + font-size: small; +} +.contact-entry-details { + font-size: x-small; } .contact-entry-photo { position: relative; -- cgit v1.2.3 From c6897d0dc4917ed20a4fb4d6a0f942ea8aa5df06 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Sat, 12 May 2012 07:29:36 -0400 Subject: finished migrating dispy light - maybe Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 320 ++++++++++++++++++++++++--------------- 1 file changed, 197 insertions(+), 123 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index caa45918c..96c92947f 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -34,7 +34,8 @@ time { *display: inline; *zoom: 1; } -audio:not([controls]), [hidden] { +audio:not([controls]), +[hidden] { display: none; } ///* @@ -46,8 +47,7 @@ audio:not([controls]), [hidden] { html { font-size: 100%; overflow-y: scroll; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + .font_size_adjust; } body { margin: 0; @@ -56,7 +56,10 @@ body { color: @main_colour; background-color: @bg_colour; } -button, input, select, textarea { +button, +input, +select, +textarea { color: @main_colour; background-color: @bg_colour; } @@ -82,15 +85,20 @@ tr:nth-child(even) { background-color: lighten(@bg_colour, 10%); } ///* remember to define focus styles! */ +//outline Sets all the outline properties in one declaration +//outline-color Sets the color of an outline color_name,hex_number,rgb_number,invert,inherit +//outline-style Sets the style of an outline dotted,dashed,solid,double,groove,ridge,inset,outset,inherit +//outline-width Sets the width of an outline thin,medium,thick,length,inherit :focus { - outline: 0; + outline: invert, dashed, thin; } [disabled="disabled"] { background: @med_bg_colour; color: @disabled_colour; } ///* remember to highlight inserts somehow! */ -ins, mark { +ins, +mark { background-color: @bg_alt_colour; color: @lt_main_colour; } @@ -123,12 +131,22 @@ q { content: none; } } +em { + font-style: italic; +} +strong { + font-weight: bold; +} +strike { + text-decoration: line-through; +} small { font-size: 85%; } ///* Position subscript and superscript content without affecting // * line-height: h5bp.com/k */ -sub, sup { +sub, +sup { font-size: 75%; line-height: 0; position: relative; @@ -166,7 +184,7 @@ blockquote { label { width: 38%; display: inline-block; - font-size: 0.95em; + font-size: small; margin: 0 10px 1em 0; .borders(1px, solid, @bg_colour); padding: 5px; @@ -205,11 +223,29 @@ h4, h5, h6 { font-weight: bold; border-bottom: 1px solid @hover_colour; } +h1 { + font-size: x-large; +} +h2 { + font-size: large; +} +h3 { + font-size: medium; +} +h4 { + font-size: small; +} +h5 { + font-size: x-small; +} +h6 { + font-size: xx-small; +} // .required { display: inline; - color: #ff0; + color: red; font-size: 16px; font-weight: bold; margin: 3px; @@ -265,16 +301,50 @@ h4, h5, h6 { .box(100%, 100%); margin: 0 auto; } -[class$="-desc"], [id$="-desc"] { +[class$="-desc"], +[id$="-desc"] { color: @bg_colour; background: @main_colour; - // .rounded_corners; + .rounded_corners; // .box_shadow(3px, 3px, 5px); margin: 3px 10px 7px 0; - padding: 6px 7px; + padding: 5px; + font-weight: bold; + font-size: smaller; +} +#item-delete-selected-desc { + float: left; + margin-right: 5px; + &:hover { + text-decoration: underline; + } +} +.intro-approve-as-friend-desc { + margin-top: 10px; +} +.intro-desc { + margin-bottom: 20px; + font-weight: bold; +} +#group-edit-desc { + margin: 10px 0px; +} +#settings-nickname-desc { + background: @main_colour; + .rounded_corners; + .borders; + padding: 5px; + color: @bg_colour; +} +.contactname, +.contact-name { font-weight: bold; font-size: smaller; } +.contact-details { + font-style: italic; + font-size: smaller; +} /** @@ -396,42 +466,51 @@ nav .nav-link { #nav-apps-link { background-position: 0 -66px; &:hover { - background-position: -22px -66px; } + background-position: -22px -66px; + } } -#nav-community-link, #nav-contacts-link { +#nav-community-link, +#nav-contacts-link { background-position: 0 -22px; &:hover { - background-position: -22px -22px; } + background-position: -22px -22px; + } } #nav-directory-link { background-position: -44px -154px; &:hover { - background-position: -66px -154px; } + background-position: -66px -154px; + } } #nav-help-link { background-position: 0 -110px; &:hover { - background-position: -22px -110px; } + background-position: -22px -110px; + } } #nav-home-link { background-position: -44px -132px; &:hover { - background-position: -66px -132px; } + background-position: -66px -132px; + } } #nav-intro-link { background-position: 0px -190px; &:hover { - background-position: -44px -190px; } + background-position: -44px -190px; + } } #nav-login-link, #nav-logout-link { background-position: 0 -88px; &:hover { - background-position: -22px -88px; } + background-position: -22px -88px; + } } #nav-messages-link { background-position: -44px -88px; &:hover { - background-position: -66px -88px; } + background-position: -66px -88px; + } } #nav-notify-link, #nav-notifications-linkmenu { @@ -443,7 +522,8 @@ nav .nav-link { #nav-network-link { background-position: 0px -177px; &:hover { - background-position: -22px -177px; } + background-position: -22px -177px; + } } #nav-search-link { background-position: 0 -44px; @@ -494,9 +574,6 @@ div.jGrowl div { max-height: 300px; overflow-y: auto; font-size: 9pt; - .contactname { - font-weight: bold; - font-size: 0.9em; } img { float: left; margin-right: 5px; } @@ -542,7 +619,6 @@ nav #nav-notifications-linkmenu { z-index: 100; .box(300px, 60px); } - #nav-buttons { clear: both; list-style: none; @@ -611,6 +687,7 @@ nav #nav-notifications-linkmenu { padding: 2px; > a { vertical-align: top; + outline: 0 none; } } #user-menu-label { @@ -618,10 +695,11 @@ nav #nav-notifications-linkmenu { padding: 3px 20px 9px 5px; height: 10px; } -.nav-ajax-update, .nav-ajax-left { +.nav-ajax-update, +.nav-ajax-left { .box(30px, 19px); background: transparent url(dark/notifications.png) 0 0 no-repeat; - color: #222; + color: @main_colour; font-weight: bold; font-size: 0.8em; padding-top: 0.2em; @@ -631,7 +709,8 @@ nav #nav-notifications-linkmenu { display: block; visibility: hidden; } -.nav-ajax-update.show, .nav-ajax-left.show { +.nav-ajax-update.show, +.nav-ajax-left.show { visibility: visible; } #net-update { @@ -742,7 +821,8 @@ nav #nav-notifications-linkmenu { padding-bottom: 50px; z-index: 1000; } -#sysmsg_info br, #sysmsg br { +#sysmsg_info br, +#sysmsg br { display: block; margin: 2px 0px; border-top: 1px solid @main_colour; @@ -754,12 +834,11 @@ nav #nav-notifications-linkmenu { */ #asidemain { float: left; - font-size: 0.75em; + font-size: small; margin: 20px 0 20px 35px; width: 25%; display: inline; } - /* for now, disappear these */ #asideright, #asideleft { display: none; @@ -795,7 +874,6 @@ nav #nav-notifications-linkmenu { padding: 3px; position: relative; } } } } - .aprofile dt { background: @main_colour; color: @bg_colour; @@ -909,7 +987,7 @@ nav #nav-notifications-linkmenu { padding: 2px 20px 5px 0; } #profile-jot-text_parent { - .box_shadow(5px, 0, 10px, 0, @shadow_colour); + .box_shadow(5px, 0, 10px, 0); } #profile-jot-text_tbl { margin-bottom: 10px; @@ -999,11 +1077,13 @@ nav #nav-notifications-linkmenu { } #profile-jot-perms { float: right; - background-color: @menu_bg_colour; - .box(22px, 22px); + color: @menu_bg_colour; + background-color: @main_colour; + .box(20px, 20px); .rounded_corners; + .box_shadow(3px, 3px, 5px, 0); + .borders(2px, outset, @main_alt_colour); overflow: hidden; - border: 0px; margin: 0 10px 0 10px; } #profile-jot-plugin-wrapper { @@ -1125,21 +1205,25 @@ nav #nav-notifications-linkmenu { li { display: inline; font-size: smaller; - font-weight: bold; } } .tab { - .borders(1px, solid, @link_colour); + .borders(1px, solid, @hover_colour); padding: 4px; - &:hover, &.active:hover, &:active { - background: @link_colour; - color: @bg_colour; + &:hover, + &.active:hover, + &:active { + background: @shiny_colour; + color: @main_colour; + .borders(1px, solid, @hover_colour); } &.active { background: @main_colour; color: @bg_colour; + .borders(1px, solid, @hover_colour); a { color: @bg_colour; + text-decoration: none; } } a { @@ -1148,20 +1232,18 @@ nav #nav-notifications-linkmenu { } } + /** * items */ .wall-item-outside-wrapper { - .borders(1px, solid, #aaa); + .borders(1px, solid, darken(@main_alt_colour, 27%)); .rounded_corners; - .box_shadow(5px, 0, 10px, 0); + .box_shadow(6px, 1px, 10px, -2px);//@lt_shadow_colour &.comment { margin-top: 5px; } } -.wall-item-outside-wrapper-end { - clear: both; -} .wall-item-content-wrapper { position: relative; padding: 0.75em; @@ -1281,9 +1363,6 @@ nav #nav-notifications-linkmenu { display: inline; padding-left: 10px; } -.wall-item-wrapper-end { - clear: both; -} .wall-item-location { margin-top: 15px; width: 100px; @@ -1334,7 +1413,7 @@ nav #nav-notifications-linkmenu { top: 101px; display: none; z-index: 10003; - .rounded_corners; + .rounded_corners(0 5px 5px 5px); li a { white-space: nowrap; display: block; @@ -1396,7 +1475,7 @@ nav #nav-notifications-linkmenu { } } .comment-wwedit-wrapper { - /*margin: 30px 0px 0px 80px;*/ + /*margin: 30px 0px 0px 80px;*/ } .comment-edit-wrapper { border-top: 1px #aaa solid; @@ -1424,16 +1503,15 @@ nav #nav-notifications-linkmenu { .box(40px, 40px); padding: 5px; } - [class^="comment-edit-text"] { margin: 5px 0 10px 20px; width: 94%; } .comment-edit-text-empty { height: 20px; - border: 2px #c8bebe solid; + .med_borders; .rounded_corners; - color: #c8bebe; + color: @med_border_colour; .transition; &:hover { color: darken(@main_alt_colour, 33.5%); @@ -1466,6 +1544,7 @@ nav #nav-notifications-linkmenu { border-bottom: 1px dashed darken(@main_alt_colour, 13.5%); border-left: 5px solid darken(@main_alt_colour, 13.5%); border-top: 1px dashed darken(@main_alt_colour, 13.5%); + color: @main_colour; display: block; overflow-x: auto; padding: 5px 0 15px 10px; @@ -1538,7 +1617,7 @@ div { .photo-album-image-wrapper, .photo-top-image-wrapper { float: left; - .box_shadow; + .box_shadow(3px, 3px, 10px, 0); background-color: darken(@main_alt_colour, 80%); color: @bg_colour; .rounded_corners; @@ -1549,7 +1628,8 @@ div { #photo-photo { max-width: 100%; img { - max-width: 100%; } + max-width: 100%; + } } .photo-top-image-wrapper a:hover, #photo-photo a:hover, @@ -1559,7 +1639,8 @@ div { .photo-top-photo, .photo-album-photo { .rounded_corners(5px 5px 0 0); } -.photo-top-album-name, .caption { +.photo-top-album-name, +.caption { position: absolute; bottom: 0; padding: 0 5px; @@ -1694,7 +1775,8 @@ div { font-size: 0.9em; padding-left: 10px; } -.mail-list-sender-name, .mail-list-date { +.mail-list-sender-name, +.mail-list-date { font-style: italic; } .mail-list-subject { @@ -1753,7 +1835,6 @@ div { top: 60px; } .contact-entry-photo-wrapper {} - .contact-entry-photo { margin-left: 20px; } @@ -1825,7 +1906,8 @@ div { #contact-edit-info_tbl, #contact-edit-info_parent, .mceLayout { - width: 100%; } + width: 100%; +} #contact-edit-end { clear: both; margin-bottom: 65px; @@ -1868,18 +1950,11 @@ div { * register, settings & profile forms */ .openid {} - #id_openid_url { background: url(dark/login-bg.gif) no-repeat; background-position: 0 50%; padding-left: 18px; } -#settings-nickname-desc { - background-color: @main_colour; - .rounded_corners; - padding: 5px; - color: @shadow_colour; -} #settings-default-perms { margin-bottom: 20px; } @@ -1908,8 +1983,9 @@ div { #profile-edit-marital-label span { margin: -4px; } -.settings-submit-wrapper, .profile-edit-submit-wrapper { - margin: 0 0 30px -3px; +.settings-submit-wrapper, +.profile-edit-submit-wrapper { + margin: 0 0 30px; } .profile-edit-side-div { display: none; @@ -1920,7 +1996,6 @@ div { .profile-edit-side-link { margin: 3px 0px 0px 70px; }*/ - #profiles-menu-trigger { margin: 0px 0px 0px 25px; } @@ -1976,19 +2051,16 @@ div { margin: 0 0 10px 0; display: inline; } -#group-edit-desc { - margin: 10px 0px; -} #group-members, #prof-members { height: 200px; overflow: auto; - .borders(1px, solid, #555753); + .borders(1px, solid, @menu_bg_colour); .rounded_corners(5px 5px 0 0); } #group-all-contacts, #prof-all-contacts { height: 200px; overflow: auto; - .borders(1px, solid, #555753); + .borders(1px, solid, @menu_bg_colour); .rounded_corners(0 0 5px 5px); } #group-members h3, @@ -1996,7 +2068,7 @@ div { #prof-members h3, #prof-all-contacts h3 { color: @main_alt_colour; - background-color: #555753; + background-color: @menu_bg_colour; margin: 0; padding: 5px; } @@ -2026,10 +2098,6 @@ div { font-size: 1.1em; font-weight: bold; } -.intro-desc { - margin-bottom: 20px; - font-weight: bold; -} .intro-note { padding: 10px; } @@ -2039,11 +2107,11 @@ div { .intro-form { float: left; } -.intro-approve-form, -.intro-approve-as-friend-end { +.intro-approve-form { clear: both; } -.intro-submit-approve, .intro-submit-ignore { +.intro-submit-approve, +.intro-submit-ignore { margin-right: 20px; } .intro-submit-approve { @@ -2059,14 +2127,11 @@ div { clear: both; margin-bottom: 10px; } -.intro-approve-as-friend-desc { - margin-top: 10px; -} .intro-approve-as-end { clear: both; margin-bottom: 10px; } -.intro-end, .clear { +.clear { clear: both; } @@ -2083,7 +2148,9 @@ div { } .vevent { border: 1px solid darken(@main_alt_colour, 13.5%); - .event-description, .event-location, .event-start { + .event-description, + .event-location, + .event-start { margin-left: 10px; margin-right: 10px; } @@ -2091,7 +2158,8 @@ div { #new-event-link { margin-bottom: 10px; } -.edit-event-link, .plink-event-link { +.edit-event-link, +.plink-event-link { /*float: left; */ /*margin-top: 4px; */ /*margin-right: 4px;*/ @@ -2125,7 +2193,8 @@ div { font-weight: bold; color: red; } -#event-start-text, #event-finish-text { +#event-start-text, +#event-finish-text { margin-top: 10px; margin-bottom: 5px; } @@ -2144,7 +2213,8 @@ div { #event-share-break { clear: both; } -#event-desc-text, #event-location-text { +#event-desc-text, +#event-location-text { margin-top: 10px; margin-bottom: 5px; } @@ -2158,11 +2228,13 @@ div { opacity: 1.0 !important; } } -.filesavetags, .categorytags { +.filesavetags, +.categorytags { margin: 20px 0; opacity: 0.5; } -.filesavetags:hover, .categorytags:hover { +.filesavetags:hover, +.categorytags:hover { margin: 20px 0; opacity: 1.0 !important; } @@ -2190,13 +2262,6 @@ div { float: left; margin-right: 5px; } -#item-delete-selected-desc { - float: left; - margin-right: 5px; - &:hover { - text-decoration: underline; - } -} .fc-state-highlight { background: @main_colour; color: @bg_colour; @@ -2228,13 +2293,15 @@ div { padding: 3px; color: @bg_colour; background: @main_colour; - font-weight: bold; + .borders(1px, solid, @link_colour); } .group-selected:hover, .nets-selected:hover, .fileas-selected:hover { + padding: 3px; color: @link_colour; background: @bg_colour; + .borders(1px, solid, @link_colour); } .groupsideedit { margin-right: 10px; @@ -2275,7 +2342,8 @@ div { &:hover { /*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% );*/ - /*background-color: #b20202;*/ } + /*background-color: #b20202;*/ + } &:active { position: relative; top: 1px; @@ -2299,7 +2367,8 @@ div { margin: 10px 0 0; } } -.nets-link, .nets-all { +.nets-link, +.nets-all { margin-left: 0px; } #netsearch-box { @@ -2335,6 +2404,7 @@ div { background: @bg_colour; margin: 5px; padding: 10px; + font-size: smaller; dl { clear: left; margin-bottom: 2px; @@ -2375,28 +2445,38 @@ div { border-bottom: 1px solid @shadow_colour; margin: 5px 0; th { + font-weight: bold; text-align: left; } - } - td .icon { - float: left; - } - table { + td { + padding: 5px; + vertical-align: middle; + } + &#users { + padding: 5px; + } &#users img { .box(16px, 16px); } + &#users a { + color: @main_colour; + text-decoration: underline; + } + } + td .icon { + float: left; } .selectall { text-align: right; } - #users a { - color: @main_colour; - text-decoration: underline; - } } #users .name { color: @main_colour; } +#users .tools { + padding: 5px 0; + vertical-align: middle; +} /** @@ -2404,15 +2484,6 @@ div { */ .field { overflow: auto; - label { - width: 38%; - display: inline-block; - margin: 0 10px 1em 0; - border: 1px @bg_colour solid; - padding: 5px; - background: @main_colour; - color: #111; - } } .field .onoff { float: right; @@ -2452,6 +2523,7 @@ div { display: block; margin-left: 297px; color: darken(@main_alt_colour, 24%); + font-size: small; } .field.radio .field_help { margin-left: 297px; @@ -2742,7 +2814,7 @@ div { background-position: -110px -40px; } .attach { - background-position: -190px -40px; + background-position: -191px -40px; } .language { background-position: -210px -40px; @@ -2775,6 +2847,7 @@ div { position: fixed; bottom: 40px; right: 30px; + z-index: 10; } .border { .borders(1px, solid, @border2); @@ -2820,6 +2893,7 @@ footer { #profile-jot-text { height: 20px; color: @main_colour; + background: @bg_colour; .borders; .rounded_corners; width: 99.5%; -- cgit v1.2.3 From 93dc96e2cf6e11eee95988be3f89249da3bfe18b Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Sat, 12 May 2012 18:53:01 -0400 Subject: css fixes; new screenshots Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 40 +++++++++++++++++++++++++++------------- 1 file changed, 27 insertions(+), 13 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 96c92947f..2e6e0ae8b 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -448,9 +448,11 @@ ul#user-menu-popup { a { display: block; padding: 5px; + color: @main_alt_colour; + background-color: @menu_bg_colour; &:hover { - color: @main_colour; - background-color: @bg_alt_colour; + color: @bg_colour; + background-color: @main_alt_colour; } &.nav-sep { border-top: 1px solid @bg_alt_colour; } } } @@ -652,13 +654,20 @@ nav #nav-notifications-linkmenu { background: @dk_bg_colour; .rounded_corners; } -#search-text { - .borders; +#search-text, +#mini-search-text { background: @bg_colour; color: @main_colour; font-size: 8pt; margin: 8px; - .box(10em, 14px); + height: 14px; +} +#search-text { + .borders; + width: 90%; +} +#mini-search-text { + width: 10em; } #scrollup { position: fixed; @@ -699,7 +708,7 @@ nav #nav-notifications-linkmenu { .nav-ajax-left { .box(30px, 19px); background: transparent url(dark/notifications.png) 0 0 no-repeat; - color: @main_colour; + color: @shadow_colour; font-weight: bold; font-size: 0.8em; padding-top: 0.2em; @@ -749,7 +758,8 @@ nav #nav-notifications-linkmenu { color: @bg_colour; margin: 0px; padding: 0px; - .borders(3px, solid, @shiny_colour); + .borders(3px, solid, @link_colour); + .rounded_corners; z-index: 100000; .box_shadow; a { @@ -758,7 +768,8 @@ nav #nav-notifications-linkmenu { padding: 5px 10px; text-decoration: none; &:hover { - background-color: lighten(@shiny_colour, 55%); + color: @main_colour; + background-color: @link_colour; } } .menu-sep { @@ -792,7 +803,11 @@ nav #nav-notifications-linkmenu { padding: 7px 7px 0px 0px; } .notify-seen { - background: darken(@main_alt_colour, 20%); + background: @disabled_colour; + color: @main_colour; +} +.notify-unseen { + color: @main_colour; } @@ -1078,7 +1093,6 @@ nav #nav-notifications-linkmenu { #profile-jot-perms { float: right; color: @menu_bg_colour; - background-color: @main_colour; .box(20px, 20px); .rounded_corners; .box_shadow(3px, 3px, 5px, 0); @@ -1112,9 +1126,10 @@ nav #nav-notifications-linkmenu { } } #jot-perms-icon { - .box(20px, 22px); + .box(22px, 22px); .rounded_corners; overflow: hidden; + background: @menu_bg_colour url("dark/icons.png") -88px -40px; } #group_allow_wrapper, #group_deny_wrapper, @@ -2324,7 +2339,6 @@ div { &:hover { color: @bg_colour; background: @link_colour; - font-weight: bold; padding: 3px; } } @@ -2637,7 +2651,7 @@ div { .icon { display: block; .box; - background: url(dark/icons.png) no-repeat; + background: transparent url("dark/icons.png") no-repeat; border: 0; text-decoration: none; .rounded_corners; -- cgit v1.2.3 From db5fe142411ffb75aab31f7b4fe20bfaba5e77b0 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Mon, 14 May 2012 00:30:25 -0400 Subject: finish dipsy light colour fixes Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 76 +++++++++++++++++++++++----------------- 1 file changed, 43 insertions(+), 33 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 2e6e0ae8b..3521b4398 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -90,6 +90,9 @@ tr:nth-child(even) { //outline-style Sets the style of an outline dotted,dashed,solid,double,groove,ridge,inset,outset,inherit //outline-width Sets the width of an outline thin,medium,thick,length,inherit :focus { + outline: none; +} +a:focus { outline: invert, dashed, thin; } [disabled="disabled"] { @@ -260,30 +263,6 @@ h6 { .smalltext { font-size: 0.7em; } -#panel { - position: absolute; - .rounded_corners; - .borders(1px, solid, @main_alt_colour); - background-color: @bg_alt_colour; - color: @main_colour; - padding: 1em; -} -.pager { - margin-top: 60px; - display: block; - clear: both; - text-align: center; - font-size: small; - font-weight: bold; - span { - padding: 4px; - margin: 4px; - } -} -.pager_current { - background-color: @link_colour; - color: @bg_colour; -} /** @@ -658,15 +637,14 @@ nav #nav-notifications-linkmenu { #mini-search-text { background: @bg_colour; color: @main_colour; - font-size: 8pt; margin: 8px; - height: 14px; } #search-text { .borders; - width: 90%; } #mini-search-text { + font-size: 8pt; + height: 14px; width: 10em; } #scrollup { @@ -1171,6 +1149,9 @@ nav #nav-notifications-linkmenu { color: darken(@main_alt_colour, 13%); } #profile-jot-desc { + background: @bg_colour; + .borders; + .rounded_corners; color: @red_orange; margin: 5px 0; } @@ -1184,9 +1165,9 @@ nav #nav-notifications-linkmenu { display: none; } #jot-preview-content { - background-color: @bg_alt_colour; + background-color: @shiny_colour; color: @main_colour; - .borders(1px, solid, @main_colour); + .borders(1px, solid, @bg_colour); .rounded_corners; .box_shadow(5px, 0, 10px); padding: 3px 3px 6px 10px; @@ -1226,7 +1207,6 @@ nav #nav-notifications-linkmenu { .borders(1px, solid, @hover_colour); padding: 4px; &:hover, - &.active:hover, &:active { background: @shiny_colour; color: @main_colour; @@ -1236,6 +1216,11 @@ nav #nav-notifications-linkmenu { background: @main_colour; color: @bg_colour; .borders(1px, solid, @hover_colour); + &:hover { + background: @shiny_colour; + color: @bg_colour; + .borders(1px, solid, @hover_colour); + } a { color: @bg_colour; text-decoration: none; @@ -2338,7 +2323,8 @@ div { padding: 3px; &:hover { color: @bg_colour; - background: @link_colour; + background: @shiny_colour; + .borders(1px, solid, @hover_colour); padding: 3px; } } @@ -2369,7 +2355,8 @@ div { .borders(1px, solid, darken(@main_alt_colour, 33.5%)); margin-right: 3px; width: 75%; - &:hover, &:focus { + &:hover, + &:focus { background-color: @main_alt_colour; color: darken(@main_alt_colour, 80%); .borders(1px, solid, darken(@main_alt_colour, 73.5%)); @@ -2572,8 +2559,31 @@ div { } } #panel { + position: absolute; + font-size: small; + .rounded_corners; + .borders(1px, solid, @main_alt_colour); + background-color: @bg_alt_colour; + color: @main_colour; + padding: 1em; z-index: 100; } +.pager { + margin-top: 60px; + display: block; + clear: both; + text-align: center; + font-size: small; + font-weight: bold; + span { + padding: 4px; + margin: 4px; + } +} +.pager_current { + background-color: @link_colour; + color: @bg_colour; +} .grey, .gray { color: gray; } @@ -2663,7 +2673,7 @@ div { .editicon { display: inline-block; .box(21px, 21px); - background: url(dark/editicons.png) no-repeat; + background: url("dark/editicons.png") no-repeat; border: 0; text-decoration: none; } -- cgit v1.2.3 From fca09c9d4c5e9577b38288aeecbdf6dceef70745 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Wed, 16 May 2012 01:58:55 -0400 Subject: slight re-design of wall stuff and css/font cleaning Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 79 +++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 25 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 3521b4398..7634db1d7 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -280,10 +280,30 @@ h6 { .box(100%, 100%); margin: 0 auto; } +.button, +#profile-listing-desc { + .box(25%, auto); + background: @menu_bg_colour; + color: @main_colour; + .borders(2px, outset, darken(@menu_bg_colour, 20%)); + .rounded_corners; + padding: 5px; + font-size: smaller; + cursor: pointer; + &.active { + .box_shadow(4px, 4px, 7px); + } + a { + color: @main_colour; + font-size: smaller; + font-weight: bold; + } +} [class$="-desc"], [id$="-desc"] { color: @bg_colour; - background: @main_colour; + // background: @main_colour; + .borders(1px, outset, @main_colour); .rounded_corners; // .box_shadow(3px, 3px, 5px); margin: 3px 10px 7px 0; @@ -1074,7 +1094,7 @@ nav #nav-notifications-linkmenu { .box(20px, 20px); .rounded_corners; .box_shadow(3px, 3px, 5px, 0); - .borders(2px, outset, @main_alt_colour); + .borders(2px, outset, @menu_bg_colour); overflow: hidden; margin: 0 10px 0 10px; } @@ -1218,7 +1238,7 @@ nav #nav-notifications-linkmenu { .borders(1px, solid, @hover_colour); &:hover { background: @shiny_colour; - color: @bg_colour; + color: @main_colour; .borders(1px, solid, @hover_colour); } a { @@ -1287,7 +1307,7 @@ nav #nav-notifications-linkmenu { } .wall-item-info { float: left; - width: 110px; + width: 8em; } .wall-item-photo-wrapper { .box(80px, 80px); @@ -1352,16 +1372,21 @@ nav #nav-notifications-linkmenu { } } .wall-item-author, -.wall-item-actions-author { +.wall-item-actions-author, +.wall-item-ago { clear: left; float: left; - font-size: 0.8em; - color: lighten(@menu_bg_colour, 20%); - margin: 1em auto 0 0.2em; + color: @main_colour; + line-height: 1; + display: inline-block; + font-size: 0.75em; + margin: 0.5em auto 0; } -.wall-item-ago { - display: inline; - padding-left: 10px; +.wall-item-author, +.wall-item-actions-author { + margin: 0.5em auto 0; + font-size: 0.75em; + font-weight: bold; } .wall-item-location { margin-top: 15px; @@ -1371,7 +1396,8 @@ nav #nav-notifications-linkmenu { .icon { float: left; } - > a, .smalltext { + > a, + .smalltext { margin-left: 25px; font-size: 0.7em; display: block; @@ -1405,7 +1431,8 @@ nav #nav-notifications-linkmenu { } .wall-item-photo-menu { min-width: 92px; - .borders(2px, solid, white); + font-size: 0.75em; + .borders(2px, solid, @menu_bg_colour); border-top: 0px; background: @menu_bg_colour; position: absolute; @@ -1417,7 +1444,7 @@ nav #nav-notifications-linkmenu { li a { white-space: nowrap; display: block; - padding: 5px 2px; + padding: 5px 6px; color: @main_alt_colour; &:hover { color: @menu_bg_colour; @@ -1446,6 +1473,9 @@ nav #nav-notifications-linkmenu { font-size: 0.9em; margin-left: 5em; } +.hide-comments-outer { + font-size: small; +} .wall-item-outside-wrapper.comment { margin-left: 5em; .wall-item-photo { @@ -1460,9 +1490,6 @@ nav #nav-notifications-linkmenu { top: 45px; background-position: 35px center; } - .wall-item-info { - width: 60px; - } .wall-item-body { margin-left: 10px; } @@ -2455,13 +2482,13 @@ div { } &#users { padding: 5px; - } - &#users img { - .box(16px, 16px); - } - &#users a { - color: @main_colour; - text-decoration: underline; + img { + .box(16px, 16px); + } + a { + color: @main_colour; + text-decoration: underline; + } } } td .icon { @@ -2584,7 +2611,8 @@ div { background-color: @link_colour; color: @bg_colour; } -.grey, .gray { +.grey, +.gray { color: gray; } .orange { @@ -2938,6 +2966,7 @@ footer { margin: 0 10px; .borders(1px, solid, @menu_bg_colour); border-top: 0; + font-size: small; // .box_shadow; } #acl-wrapper { -- cgit v1.2.3 From 7eb73bc600a17e7611d3c77ef777bf81becfb0b5 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Wed, 16 May 2012 05:32:08 -0400 Subject: get rid of the monstrosity for .button. need to find alternate solution Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 7634db1d7..fb8769a87 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -282,20 +282,20 @@ h6 { } .button, #profile-listing-desc { - .box(25%, auto); - background: @menu_bg_colour; + // .box(25%, auto); + // background: @menu_bg_colour; color: @main_colour; - .borders(2px, outset, darken(@menu_bg_colour, 20%)); - .rounded_corners; + // .borders(2px, outset, darken(@menu_bg_colour, 20%)); + // .rounded_corners; padding: 5px; - font-size: smaller; + // font-size: smaller; cursor: pointer; &.active { .box_shadow(4px, 4px, 7px); } a { color: @main_colour; - font-size: smaller; + // font-size: smaller; font-weight: bold; } } @@ -568,6 +568,9 @@ div.jGrowl div { padding-left: 58px; margin-top: 50px; } + // &.jGrowl-message { + + // } } #nav-notifications-menu { margin: 30px 0 0 -20px; -- cgit v1.2.3 From a8a3732f05f9651ddedd779c2c0080de0034751d Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Wed, 16 May 2012 05:51:29 -0400 Subject: *sigh*. fix dark *again* Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index fb8769a87..f2714b717 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -2352,7 +2352,7 @@ div { .sidebar-group-element { padding: 3px; &:hover { - color: @bg_colour; + color: @main_colour; background: @shiny_colour; .borders(1px, solid, @hover_colour); padding: 3px; -- cgit v1.2.3 From 4a35a517246a25899a965cb16382136f6fe92c17 Mon Sep 17 00:00:00 2001 From: Simon L'nu Date: Sat, 19 May 2012 03:15:35 -0400 Subject: fix -desc again Signed-off-by: Simon L'nu --- view/theme/dispy/dark/style.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'view/theme/dispy/dark/style.less') diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index f2714b717..4967ac9c2 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -301,8 +301,8 @@ h6 { } [class$="-desc"], [id$="-desc"] { - color: @bg_colour; - // background: @main_colour; + color: @main_colour; + background: @bg_colour; .borders(1px, outset, @main_colour); .rounded_corners; // .box_shadow(3px, 3px, 5px); -- cgit v1.2.3