// Quattro Theme LESS file /* global */ body { font-family: Liberation Sans,helvetica,arial,clean,sans-serif; font-size: 11px; background-color: @BodyBackground; color: @BodyColor; margin: 50px 0 0 0; display:table; } h4 { font-size: 1.1em } .shadow(@x: 0, @y: 5px){ -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7); box-shadow:@x @y 10px rgba(0, 0, 0, 0.7); } .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){ -moz-border-radius: @arguments; -webkit-border-radius: @arguments; border-radius: @arguments; } .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); } .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); } .opaque(@v: 0.5){ opacity: @v; .transition(); } .transition(@d: 0.2s){ -webkit-transition: all @d ease-in-out; -moz-transition: all @d ease-in-out; -o-transition: all @d ease-in-out; -ms-transition: all @d ease-in-out; transition: all @d ease-in-out; } a, a:link { color: @Link; text-decoration: none; } a:visited { color: @LinkVisited; text-decoration: none; } a:hover {color: @LinkHover; text-decoration: underline; } .left { float: left; } .right { float: right; } .hidden { display: none; } .clear { clear: both; } .fakelink { color: @Link; text-decoration: none; cursor:pointer; } .fakelink:hover { color: @LinkHover; text-decoration: underline; } blockquote { background:@BlockquoteBackgroundColor; padding: 1em; margin-left: 1em; border-left: 1em solid @BlockquoteBorderColor; } code { font-family: Courier, monospace; white-space: pre; display: block; overflow: auto; border: 1px solid #444; background: #EEE; color: #444; padding: 10px; margin-top: 20px; } #panel { position: absolute; width: 10em; background: @MenuBg; color: @Menu; margin: 0; padding: 1em; list-style: none; border: 3px solid @MenuBorder; z-index: 100000; .shadow(); } /* tool */ .tool { height: auto; overflow: auto; .label { float: left;} .action { float: right; } > img { float: left; } } /* popup notifications */ #jGrowl.top-right { top: 30px; right: 15px; } div.jGrowl div.notice { background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center; color: @NoticeColor; padding-left: 58px; } div.jGrowl div.info { background: @InfoBackgroundColor url("../../../images/icons/48/info.png") no-repeat 5px center; color: @InfoColor; padding-left: 58px; } /* notifications page */ .notif-item { padding: 0.5em; &:nth-child(even) { background-color: @NotificationsPageListEvenBackground; } &:nth-child(odd) { background-color: @NotificationsPageListOddBackground; } .notif-image { width: 16px; } } /* header */ header { position: fixed; left: 43%; right: 43%; top: 0; margin: 0; padding: 0; /*width: 100%; height: 12px; */ z-index: 110; color: @Grey1; #site-location { display: none; } #banner { overflow: hidden; text-align: center; width: 100%; a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; } #logo-img { height: 22px; margin-top:5px;} #logo-text { font-size: 22px } } } /* nav */ nav { width: 100%; height: 32px; position: fixed; left: 0; top: 0; padding: 0; background-color: @NavbarBackground; color: @Grey1; z-index: 100; .shadow(0px, 0); a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none; } ul { margin: 0; padding: 0 20px; li { list-style: none; margin: 0; padding: 0; float: left; .menu-popup{ left: 0; right: auto; } } } .nav-menu-icon { position: relative; height: 22px; padding: 5px; margin: 0 10px; .roundtop(); &.selected { background-color: @NavbarSelectedBg; } img { width: 22px; height: 22px; } .nav-notify { top: 3px; } } .nav-menu { position: relative; height: 16px; padding: 5px; margin: 3px 15px 0; font-size: 14px; border-bottom: 3px solid @NavbarBackground; &.selected { border-bottom: 3px solid @NavbarSelectedBorder; } } .nav-notify { display: none; position: absolute; background-color: @NavbarNotifBg; .rounded(); font-size: 10px; padding: 1px 3px; top: 0; right: -10px; min-width: 15px; text-align: right; &.show{ display: block; } } #nav-help-link, #nav-search-link, #nav-directory-link, #nav-apps-link, #nav-site-linkmenu { float: right; .menu-popup{ right: 0; left: auto; } } #nav-notifications-linkmenu.on .icon.s22.notify, #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/22/notify_on.png") } #nav-introductions-link.on .icon.s22.intro, #nav-introductions-link.selected .icon.s22.intro { background-image: url("icons/contacts_on.png") } #nav-messages-link.on .icon.s22.mail, #nav-messages-link.selected .icon.s22.mail { background-image: url("icons/messages_on.png") } #nav-apps-link.selected { background-color: @NavbarSelectedBg; } } ul.menu-popup { position: absolute; display: none; width: 10em; background: @MenuBg; color: @Menu; margin: 0; padding: 0; list-style: none; border: 3px solid @MenuBorder; z-index: 100000; .shadow(); a { display: block; color: @MenuItem; padding: 5px 10px; text-decoration: none;} a:hover { background-color: @MenuItemHoverBg; } .menu-sep { border-top: 1px solid @MenuItemSeparator; } li { float: none; overflow: auto; height: auto; display: block; } li img { float: left; width: 16px; height: 16px; padding-right: 5px;} .empty { padding: 5px; text-align: center; color: @MenuEmpty; } .toolbar { background-color: @MenuEmpty; height: auto; overflow: auto; a { float: right; } a:hover { background-color: @MenuBg; } } } /* autocomplete popup */ .autocomplete, .acpopup { max-height:150px; background-color:@MenuBg; color: @Menu; border:1px solid @MenuBorder; overflow:auto; z-index:100000; .shadow(); } .autocomplete > div, .acpopupitem { color: @MenuItem; padding: 4px; clear:left; overflow: auto; height: auto; img { float: left; margin-right: 4px; width: 16px !important; height: 16px !important; } &.selected{ background-color: @MenuItemHoverBg; } } #nav-notifications-menu { width: 400px; max-height: 550px; overflow: auto; img { float: left; margin-right: 5px; } .contactname { font-weight: bold; } .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; } } /* Contact-Header for the Network Stream */ #viewcontact_wrapper-network { width: 100%; min-height: 100px; background-color: #eff0f1; border-bottom: 1px solid #cccccc; #contact-entry-wrapper-network { float: none; width: auto; height: auto; padding: 10px; #contact-entry-accounttype-network { font-size: 22px; } #contact-entry-name-network { font-size: 24.5px; font-weight: normal; } .contact-details { font-size: 12px; } } } /* aside 230px*/ aside { display: table-cell; vertical-align: top; width: 200px; padding:0px 10px 0 20px; border-right: 1px solid @AsideBorder; .profile-edit-side-div { display: none; } .vcard { .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .title { margin-bottom: 5px; } .p-addr { margin-bottom: 5px; } .account-type { font-size: 14px; margin-bottom: 13px; } dl { height: auto; overflow: auto; } dt {float: left; margin-left: 0; width: 35%; text-align: right; color: @VCardLabelColor; } dd {float: left; margin-left: 4px; width: 60%;} } #profile-extra-links { ul { padding: 0; margin: 0; } li { padding: 0.2em 0; margin: 0; list-style: none; } } #wallmessage-link { display: block; .rounded(); color: @AsideConnect; background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center; font-weight: bold; text-transform:uppercase; padding: 4px 2px 2px 35px; margin-top: 3px; &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; } } #dfrn-request-link { display: block; .rounded(); color: @AsideConnect; background: @AsideConnectBg url('icons/connect-bg.png') no-repeat left center; font-weight: bold; text-transform:uppercase; padding: 4px 2px 2px 35px; &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; } } #subscribe-feed-link { display: block; .rounded(); color: @AsideConnect; background: @AsideConnectBg url('icons/rss-bg.png') no-repeat left center; font-weight: bold; text-transform:uppercase; padding: 4px 2px 2px 35px; &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; } } #profiles-menu { width: 20em; } .posted-date-selector-months { margin-left: 10px; } } #contact-block { overflow: auto; height: auto; .contact-block-h4 { float: left; margin: 5px 0; } .allcontact-link { float: right; margin: 5px 0; } .contact-block-content { clear: both; overflow: hidden; height: auto; } /*.contact-block-div { width:60px; height: 60px; }*/ .contact-block-link { float: left; margin: 0 2px 2px 0; img { width: 48px; height: 48px; } } } /* group member */ #contact-edit-drop-link, .mail-list-delete-wrapper, .group-delete-wrapper { float: right; margin-right: 50px; .drophide { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; height: 22px; opacity: 0.3; position: relative; top: -50px; } .drop { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; height: 22px; position: relative; top: -50px; } } /* #group-members { margin-top: 20px; padding: 10px; height: 250px; overflow: auto; border: 1px solid #ddd; } #group-members-end { clear: both; } #group-all-contacts { padding: 10px; height: 450px; overflow: auto; border: 1px solid #ddd; } #group-all-contacts-end { clear: both; margin-bottom: 10px; } .contact-block-div { float: left; width: 60px; height: 60px; }*/ /* widget */ .widget { margin-bottom: 2em; h3 { padding: 0; margin: 2px;} .action { .opaque(0.1); } input.action { .opaque(0.5); } &:hover .title .action { .opaque(1); } .tool:hover .action { .opaque(1); } .tool:hover .action.ticked { .opaque(1); } ul { padding: 0;} ul li {padding-left: 16px; min-height: 16px; list-style: none; } .tool.selected { background: url('../../../images/selected.png') no-repeat left center; } /*.action .s10 { width: 10px; overflow: hidden; padding: 0;} .action .s16 { width: 16px; overflow: hidden; padding: 0;}*/ .notify { display: none; background-color: #19AEFF; border-radius: 5px; font-size: 10px; padding: 1px 3px; min-width: 15px; text-align: right; float: right; color: rgb(255, 255, 255); margin-right: 10px; &.on { display: block; } } } /* widget: search */ #add-search-popup { width: 200px; top: 18px; } /* section 800px */ section { display: table-cell; vertical-align: top; width: 770px; padding:0px 20px 0 10px; } .sparkle { cursor: url('icons/lock.cur'), pointer; } /* wall item */ .tread-wrapper { background-color: @ThreadBackgroundColor; position: relative; padding: 10px; margin-bottom: 20px; width: 750px; border-bottom: 1px solid @ThreadBottomBorderColor; } .wall-item-decor { position: absolute; left: 97%; top: -10px; width: 16px;} .unstarred { display: none; } .wall-item-container { display: table; width: 750px; .wall-item-item, .wall-item-bottom { display: table-row; } .wall-item-bottom { .opaque(0.5); } &:hover .wall-item-bottom { .opaque(1); } .wall-item-info { display: table-cell; vertical-align: top; text-align: left; width: 60px; } .wall-item-location { word-wrap: break-word; width: 50px; } .wall-item-content { display: table-cell; font-size: 12px; max-width: 720px; word-wrap: break-word; } .wall-item-content img { max-width: 700px; } .wall-item-links, .wall-item-actions { display: table-cell; vertical-align: middle; .icon { .opaque(0.5); } .icon:hover { .opaque(1.0); } } .wall-item-ago { padding-right: 40px; } .wall-item-name { font-weight: bold; } .wall-item-actions-author { float: left; width: 20em; margin-top: 0.5em; } .wall-item-actions-events { float: left; margin-top: 0.5em; a { margin-right: 3em; } } .wall-item-actions-social { float: left; margin-top: 0.5em; a { margin-right: 3em; } } .wall-item-actions-tools { float: right; width: 15%; a { float: right; } input { float: right; } } } .wall-item-container.comment { .contact-photo-wrapper { margin-left: 16px; } .contact-photo { width: 32px; height: 32px; } .contact-photo-menu-button { top: 15px !important; left: 0 !important; } .wall-item-links { padding-left: 12px; } .commentbox { height: 0; overflow: hidden; .wall-item-comment-wrapper { border-top: 1px solid @CommentBoxEmptyBorderColor; height: 0; overflow: hidden; } .transition(); } &:hover .commentbox { height:auto; overflow: visible; .wall-item-comment-wrapper { border-top: 0; height:auto;overflow: visible; } .transition(); } } /* 'tag' item type */ .wall-item-container.item-tag { .wall-item-content { .opaque(0.5); } .contact-photo-wrapper { margin-left: 32px; } .contact-photo { width: 16px; height: 16px; } .contact-photo-menu-button { top: 15px !important; left: 15px !important; } } .wall-item-comment-wrapper { margin: 1em 2em 1em 60px; .comment-edit-photo { display: none; } textarea { height: 1em; width: 100%; font-size: 10px; color: @CommentBoxEmptyColor; border: 1px solid @CommentBoxEmptyBorderColor; padding:0.3em; } .comment-edit-text-full { height: 4em; color: @CommentBoxFullColor; border: 1px solid @CommentBoxFullBorderColor; } &.photo { margin: 1em 2em 1em 0; } } .threaded .wall-item-comment-wrapper { margin-left: 0; } .comment-edit-preview { width: 710px; border: 1px solid @Grey5; margin-top: 10px; background-color: @JotPreviewBackgroundColor; .contact-photo { width: 32px; height: 32px; margin-left: 16px; /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ } .contact-photo-menu-button { top: 15px !important; left: 15px !important; } .wall-item-links { padding-left: 12px; } .wall-item-container { width: 90%; } .tread-wrapper { width: 90%; padding: 0; margin: 10px 0; background-color: @JotPreviewBackgroundColor; border-bottom: 0; } .wall-item-conv { display: none; } } .shiny { border-right:10px solid @ShinyBorderColor; } #jot-preview-content .tread-wrapper { background-color: @JotPreviewBackgroundColor; } .hide-comments-outer {margin-bottom: 0.8em; } .wall-item-tags { padding-top: 5px; } .tag { background: url("icons/tag.png") no-repeat center right; color: @TagColor; padding-right: 8px; padding-left: 3px; a { color: @TagColor; } } .mention { background: url("icons/men.png") no-repeat 1px center; color: @MentionColor; padding-right: 3px; padding-left: 18px; a { color: @MentionColor; } } .folder { background: url("icons/folder.png") no-repeat 1px center; color: @MentionColor; padding-right: 3px; padding-left: 15px; a { color: @MentionColor; } } .category { background: url("icons/category.png") no-repeat 1px center; color: @MentionColor; padding-right: 3px; padding-left: 15px; a { color: @MentionColor; } } /*.filesavetags { padding: 3px 0 3px 0; opacity: 0.5; }*/ .wwto { position: absolute !important; background: #FFFFFF; border: 2px solid @Metalic3; height: 25px; width: 25px; overflow: hidden; padding: 1px; top: 40px; left: 30px; .shadow(0px, 0); } .wwto .contact-photo { width: 25px; height: 25px; } /* reshare e embed */ .wall-item-container .wall-item-content .type-link img, .type-link img { max-width: 160px; max-height: 160px; float: left; margin-right: 10px; &.attachment-image { max-width: 650px; max-height: inital; float: none; margin-right: 0; } } .type-link { blockquote { margin: 1em 0; max-height: 160px; overflow: hidden; padding-left: 1em; } .oembed {} } .type-video blockquote { padding-left: 1em; } .shared_header { height: 32px; color: #999; border-top: 1px solid @ThreadBottomBorderColor; padding-top: 5px; margin-top: 5px; img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; float: left; } span { margin-left: 9px; } } blockquote.shared_content { margin-left: 32px; color: #000; border: none; } .oembed.video { > a.embed_video { display: block; float: left; position: relative; > div { position: absolute; top: 0px; left: 0px; background: rgba(255, 255, 255, 0.36) url(../../../images/icons/48/play.png) no-repeat center center !important; } } } /* threaded comments */ .children { margin-top: 1em; .hide-comments-outer { margin-left:60px; } .wwto { display: none; } .comment-edit-preview { width: 660px; .wall-item-container { width: 610px; } } & .children { margin-left: 40px; .wall-item-container { width: 710px; } .comment-edit-preview { width: 620px; .wall-item-container { width: 620px; } } & .children { .wall-item-container { width: 670px; } .comment-edit-preview { width: 580px; .wall-item-container { width: 580px; } } & .children { .wall-item-container { width: 630px; } .comment-edit-preview { width: 540px; .wall-item-container { width: 540px; } } & .children { .wall-item-container { width: 590px; } .comment-edit-preview { width: 500px; .wall-item-container { width: 500px; } } .children { margin-left: 0; .hide-comments-outer { margin-left: 0; } } } } } } } /*.threaded .hide-comments-outer { margin-left: 20px; }*/ span[id^="showmore-teaser"]{ background: url("showmore-bg.jpg") no-repeat center bottom; } span[id^="showmore-wrap"] { border-top: 1px solid #999999; color: #999999; display: block; text-align: center; background-color: @ThreadBackgroundColor; } #pause { position: fixed; bottom: 5px; right: 5px; } .contact-photo-wrapper { position: relative; } .contact-select { position: absolute; top:64px; left:64px; display:none; } .contact-select:checked, .contact-photo:hover .contact-select { display:block; } #contacts-actions { position: absolute; left: 800px; width: 200px; background-color: @MenuBg; border: 2px solid @MenuBorder; .batch-action { display: block; width: 100%; background-color: @MenuBg; border: 0; color: @MenuItem; text-align: left; padding: 5px 10px; font-size: 11px; } .batch-action:hover { background-color: @MenuItemHoverBg; } display: none; } @media (max-width: 1000px) { #contacts-actions { left: 40px; } } .contact-photo { width: 48px; height: 48px; img { width: 48px; height: 48px; } overflow: hidden; display: block; } .contact-photo-menu-button { display: none; position: absolute; left: -2px; top: 31px; } .contact-wrapper { float: left; width: 300px; height: 90px; padding-right: 10px; margin: 0 10px 10px 0; .contact-photo-wrapper { float: left; margin-right: 10px; } .contact-photo { width: 80px; height: 80px; img { width: 80px; height: 80px; } } .contact-photo-menu-button { left: 0; top: 63px; } .drop { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; height: 22px; position: relative; top: 10px; left: -10px; z-index: 99; } .drophide { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; height: 22px; opacity: 0.3; position: relative; top: 10px; left: -10px; z-index: 99; } .contact-entry-connect { padding-top: 5px; font-weight: bold; } } .directory-item { float: left; width: 200px; height: 200px; .contact-photo { width: 175px; height: 175px; img { width: 175px; height: 175px; } } } .contact-name { font-weight: bold; /* padding-top: 15px; */} .contact-details { color: @Grey3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contact-edit-status-wrapper { border-color: @JotToolsOverBackgroundColor;} /* editor */ .jothidden { display: none; } #jot { width: 100%; margin: 0 2em 20px 0; .profile-jot-text { height: 1em; width: 99%; font-size: 10px; color: @CommentBoxEmptyColor; border: 1px solid @CommentBoxEmptyBorderColor; padding:0.3em; } #jot-tools { margin: 0; padding: 0; height: 40px; overflow: none; width: 770px; background-color: @JotToolsBackgroundColor; border-bottom: 2px solid @JotToolsBorderColor; li { list-style: none; float: left; width: 80px; height: 40px; border-bottom: 2px solid @JotToolsBorderColor; a { display: block; color: @JotToolsText; width: 100%; height:40px; text-align: center; line-height: 40px; overflow: hidden; } } li:hover { background-color: @JotToolsOverBackgroundColor; border-bottom: 2px solid @JotToolsOverBorderColor; } li.perms { float: right; width: 40px; a.unlock { width: 30px; border-left: 10px solid @JotPermissionUnlockBackgroundColor; background-color: @JotPermissionUnlockBackgroundColor; } a.lock { width: 30px; border-left: 10px solid @JotPermissionLockBackgroundColor; background-color: @JotPermissionLockBackgroundColor; } } li.submit { float: right; background-color: @JotSubmitBackgroundColor; border-bottom: 2px solid @JotSubmitBackgroundColor; border-right: 1px solid @Grey4; border-left: 1px solid @Grey4; input { border: 0; margin: 0; padding: 0; background-color: @JotSubmitBackgroundColor; color: @JotSubmitText; width: 80px; height: 40px; line-height: 40px; } input:hover { background-color: @JotSubmitOverBackgroundColor; color: @JotSubmitOverText; } } li.loading { float: right; background-color: @JotLoadingBackgroundColor; width: 20px; vertical-align: center; text-align: center; img { margin-top: 10px; } border-top: 2px solid @JotToolsBorderColor; height: 38px; } } #jot-title { border: 0; margin: 0; height: 20px; width: 500px; font-weight: bold; border: 1px solid @BodyBackground; &:-webkit-input-placeholder { font-weight: normal; } &:-moz-placeholder { font-weight: normal; } &:hover { border: 1px solid @CommentBoxEmptyBorderColor } &:focus { border: 1px solid @CommentBoxEmptyBorderColor } } #character-counter { width: 40px; float: right; text-align: right; height: 20px; line-height: 20px; padding-right: 20px; } #jot-category { border: 0; margin: 0; height: 20px; width: 200px; border: 1px solid @BodyBackground; &:hover { border: 1px solid @CommentBoxEmptyBorderColor } &:focus { border: 1px solid @CommentBoxEmptyBorderColor } } } /** buttons **/ /*input[type="submit"] { border: 0; background-color: @ButtonBackgroundColor; color: @ButtonColor; padding: 0 10px; .rounded(5px); height: 18px; }*/ a.actionbutton { border: 1px solid @Grey3; background-color: @Grey2; color: @Grey5; font-size: 8pt; padding: 2pt; .rounded(); i.icon { display: inline-block; vertical-align: baseline; padding: 0; } &:hover { text-decoration: none; background-color: @Grey1; } } h2 > .actionbutton { float: right; } /** acl **/ #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper{ display:block!important; } #acl-wrapper { width: 690px; float:left; } #acl-search { float:right; background: #ffffff url("../../../images/search_18.png") no-repeat right center; padding-right:20px; } #acl-showall { float: left; display: block; width: auto; height: 18px; background-color: #cccccc; background-image: url("../../../images/show_all_off.png"); background-position: 7px 7px; background-repeat: no-repeat; padding: 7px 5px 0 30px; color: #999999; .rounded(5px); } #acl-showall.selected { color: #000000; background-color: #ff9900; background-image: url("../../../images/show_all_on.png"); } #acl-list { height: 210px; border: 1px solid #cccccc; clear: both; margin-top: 30px; overflow: auto; } #acl-list-content { } .acl-list-item { display: block; width: 150px; height: 30px; border: 1px solid #cccccc; margin: 5px; float: left; } .acl-list-item img{ width:22px; height: 22px; float: left; margin: 4px; } .acl-list-item p { height: 12px; font-size: 10px; margin: 0; padding: 2px 0 1px; overflow: hidden;} .acl-list-item a { font-size: 8px; display: block; width: 40px; height: 10px; float: left; color: #999999; background-color: #cccccc; background-position: 3px 3px; background-repeat: no-repeat; margin-right: 5px; -webkit-border-radius: 2px ; -moz-border-radius: 2px; border-radius: 2px; padding-left: 15px; } #acl-wrapper a:hover { text-decoration: none; color:#000000; } .acl-button-show { background-image: url("../../../images/show_off.png"); } .acl-button-hide { background-image: url("../../../images/hide_off.png"); } .acl-button-show.selected { color: #000000; background-color: #9ade00; background-image: url("../../../images/show_on.png"); } .acl-button-hide.selected { color: #000000; background-color: #ff4141; background-image: url("../../../images/hide_on.png"); } .acl-list-item.groupshow { border-color: #9ade00; } .acl-list-item.grouphide { border-color: #ff4141; } /** /acl **/ /** tab buttons **/ ul.tabs { list-style-type: none; padding-bottom: 10px; li { float: left; margin-left: 20px; .active { border-bottom: 1px solid @LinkVisited; } } } /** group editor **/ #group-edit-desc { margin-top: 1em; color: @FieldHelpColor; } #group-update-wrapper{ height: auto; overflow: auto; #group { width:300px; float:left; margin-right:20px; } #contacts { width:300px; float:left; } #group-separator { display: none; } .contact_list { height: 300px; border: 1px solid @MenuBorder; overflow: auto; .contact-block-div { width: 50px; height: 50px; float: left; } } } /** * Form fields */ .field { margin-bottom: 10px; padding-bottom: 10px; overflow: auto; width: 100%; label { float: left; width: 200px; } input, textarea { width: 400px; } input[type="checkbox"], input[type="radio"]{ width: auto; } textarea { height: 100px; } .field_help { display: block; margin-left: 200px; color: @FieldHelpColor; } .onoff { float: left; width: 80px; } .onoff a { display: block; border:1px solid #666666; background-image:url("../../../images/onoff.jpg"); background-repeat: no-repeat; padding: 4px 2px 2px 2px; height: 16px; text-decoration: none; } .onoff .off { border-color:#666666; padding-left: 40px; background-position: left center; background-color: #cccccc; color: #666666; text-align: right; } .onoff .on { border-color:#204A87; padding-right: 40px; background-position: right center; background-color: #D7E3F1; color: #204A87; text-align: left; } .hidden { display: none!important; } &.radio .field_help { margin-left: 0; } } #profile-edit-links li { list-style: none; margin-top: 10px; } #profile-edit-default-desc { color: #FF0000; border: 1px solid #FF8888; background-color: #FFEEEE; padding: 7px; } #profile-edit-profile-name-label, #profile-edit-name-label, #profile-edit-pdesc-label, #profile-edit-gender-label, #profile-edit-dob-label, #profile-edit-address-label, #profile-edit-locality-label, #profile-edit-region-label, #profile-edit-postal-code-label, #profile-edit-country-name-label, #profile-edit-marital-label, #profile-edit-with-label, #profile-edit-sexual-label, #profile-edit-politic-label, #profile-edit-religion-label, #profile-edit-pubkeywords-label, #profile-edit-prvkeywords-label, #profile-edit-gender-select, #profile-edit-homepage-label { float: left; width: 175px; padding-top: 7px; } #profile-edit-profile-name, #profile-edit-name, #gender-select, #profile-edit-pdesc, #profile-edit-gender, #profile-edit-dob, #profile-edit-address, #profile-edit-locality, #profile-edit-region, #profile-edit-postal-code, #profile-edit-country-name, #profile-edit-marital, #profile-edit-with, #profile-edit-sexual, #profile-edit-politic, #profile-edit-religion, #profile-edit-pubkeywords, #profile-edit-prvkeywords, #profile-edit-homepage { margin-top: 5px; } /* oauth */ .oauthapp { height: auto; overflow: auto; border-bottom: 2px solid #cccccc; padding-bottom: 1em; margin-bottom: 1em; } .oauthapp img { float: left; width: 48px; height: 48px; margin: 10px; } .oauthapp img.noicon { background-image: url("../../../images/icons/48/plugin.png"); background-position: center center; background-repeat: no-repeat; } .oauthapp a { float: left; } /* contacts */ .contact-entry-wrapper { width: 50px; float: left; } /* manage page */ .identity-match-photo { position: relative; .manage-notify { background-color: #19AEFF; border-radius: 5px; font-size: 10px; padding: 1px 3px; min-width: 15px; text-align: right; position: absolute; right: 10px; top: -5px; color: rgb(255, 255, 255); } } /* videos page */ .videos { .video-top-wrapper { width: 200px; float: left; margin: 0 10px 10px 0; position: relative; .video-js { width: 200px!important; height: 132px!important; } .video-delete { position: absolute; opacity: 0; right: 0; top: 0; transition: opacity 0.5s; } &:hover .video-delete { opacity: 1; } } } /* photo albums */ @photosize: 150px; #photo-edit-link-wrap { margin-bottom: 10px; } #album-edit-link { border-right: 1px solid @MenuBorder; float: left; padding-right: 5px; margin-right: 5px; } #photo-edit-link, #album-edit-link a { background: url("../../../images/icons/16/edit.png") no-repeat left center; padding-left: 18px; } #photo-toprofile-link { background: url("../../../images/icons/16/user.png") no-repeat left center; padding-left: 18px; } #photo-top-upload-link, .photos-upload-link { margin: 1em 0; display: block; } .photos-upload-link a, #photo-top-upload-link { background: url("../../../images/icons/16/add.png") no-repeat left center; padding-left: 18px; } .photo-top-image-wrapper, .photo-album-image-wrapper { float: left; margin: 0 10px 10px 0; width:@photosize; height: @photosize; position: relative; overflow: hidden; img { width: @photosize; } .photo-top-album-name, .caption{ position: absolute; color: @Menu; background-color: @MenuBg; width: 100%; .shadow(0px, 5px); .transition(0.5s); bottom: -@photosize; } &:hover .photo-top-album-name, &:hover .caption { bottom: 0; .shadow(0px, 0); .transition(0.5s); } } #photo-photo { display: block; width: 660px; padding: 50px; margin-bottom: 0; text-align: center; background-color: @Grey3; img { max-width: 560px; } } #photo-album-title { background: url("../../../images/icons/22/image.png") no-repeat top left; padding-left: 23px; min-height: 22px; padding-top: 6px; /* a { display: block;}*/ } #photo-caption { display: block; width: 660px; min-height: 55px; background-color: @Grey2; padding:0 50px 0 50px; } #photo-next-link > a > div { background: url("icons/next.png") no-repeat center center; float: right; width: 50px; height: 50px; } #photo-prev-link > a > div { background: url("icons/prev.png") no-repeat center center; float: left; width: 50px; height: 50px; } #photo-like-div { display: block; width: 660px; height: 30px; background-color: @Grey2; padding:0 50px 0 50px; .icon {float: left;} .like-rotator {float: right;} } #photo_edit_form { padding: 1em; } /* profile match wrapper */ .profile-match-wrapper { float: left; width: 110px; height: 110px; margin-bottom: 20px; .drop { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; height: 22px; position: relative; top: 10px; left: -10px; } .drophide { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; height: 22px; opacity: 0.3; position: relative; top: 10px; left: -10px; } .contact-photo { width: 80px; height: 80px; img { width: 80px; height: 80px; } } .contact-photo-menu-button { left: 0; top: 63px; } } /* messages */ #message-new { background: @MessageNewBackgroundColor; border: 1px solid @MessageNewBorderColor; width: 150px; a { color: @MessageNewColor; text-align: center; display: block; font-weight: bold; padding: 1em 0; } } .mail-list-wrapper { background-color: @MailListBackgroundColor; margin-bottom: 5px; width: 100%; height: auto; overflow: hidden; span { display: block; float: left; width: 20%; overflow: hidden;} .mail-subject { width: 30%; padding:4px 0 0 4px; a { display: block; } &.unseen a { font-weight: bold; } } .mail-date { padding: 4px 4px 0 4px; } .mail-from { padding: 4px 4px 0 4px; } .mail-count { padding: 4px 4px 0 4px; text-align: right;} .mail-delete { float: right; } } #message-preview { margin-top: 1em; box-sizing: border-box; * { box-sizing: border-box; white-space: nowrap;} .mail-list-wrapper { .mail-subject { width: 100%; } .mail-date { font-size: 0.8em; width: 25%; text-align: right} .mail-from { font-size: 0.8em; width: 75%;} .mail-count { font-size: 0.8em; width: 100%;} .mail-delete { display: none;} & .mail-date, & .mail-from, & .mail-count { .opaque(0.5); } &:hover .mail-date, &:hover .mail-from, &:hover .mail-count { .opaque(1); } } } #mail-display-subject { background-color: @MailDisplaySubjectBackgroundColor; color: @MailDisplaySubjectColor; margin-bottom: 10px; width: 100%; height: auto; overflow: hidden; span { float: left; overflow: hidden; padding: 4px 0 0 10px;} .mail-delete { float: right; .opaque(0.5);} &:hover .mail-delete { .opaque(1); } } /* theme screenshot */ .screenshot, #theme-preview { position: absolute; width:202px; left: 70%; top: 50px; img { width: 200px; height: 150px; } } /* page footer */ footer { height: 100px; display: table-row; } .pager { margin-top: 25px; clear: both; } /** * ADMIN */ #pending-update { float:right; color: #ffffff; font-weight: bold; background-color: #FF0000; padding: 0em 0.3em; } #adminpage { dl { clear: left; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid black; } dt { width: 200px; float: left; font-weight: bold; } dd { margin-left: 200px; } h3 { border-bottom: 1px solid #cccccc; } .field label { font-weight: bold; } .submit { clear:left; text-align: right; } #pluginslist { margin: 0; padding: 0; } .plugin { list-style: none; display: block; border: 1px solid #888888; padding: 1em; margin-bottom: 5px; clear: left; desc { margin-left: 2.5em; } } .toggleplugin { float:left; margin-right: 1em; } table { width:100%; border-bottom: 1px solid #000000; margin: 5px 0; th { text-align: left; } td .icon { float: left; } tr:hover { background-color: #bbc7d7; } } table#users img { width: 16px; height: 16px; } .selectall { text-align: right; } } /* edit buttons for comments */ .icon.dim { opacity: 0.3;filter:alpha(opacity=30); } .comment-edit-bb { list-style: none; display: none; margin: 0; padding: 0; width: 75%; } .comment-edit-bb > li { display: inline-block; margin: 10px 10px 0 0; visibility: none; } .editicon { display: inline-block; width: 16px; height: 16px; background-image: url(icons/bbedit.png); text-decoration: none; :hover {background-color: #ccc;} } .boldbb { background-position: 0 0; } .boldbb:hover { background-position: 0 -16px; } .italicbb { background-position: -16px 0; } .italicbb:hover { background-position: -16px -16px; } .underlinebb { background-position: -32px 0; } .underlinebb:hover { background-position: -32px -16px; } .quotebb { background-position: -48px 0; } .quotebb:hover { background-position: -48px -16px; } .codebb { background-position: -64px 0; } .codebb:hover { background-position: -64px -16px; } .imagebb { background-position: -80px 0; } .imagebb:hover { background-position: -80px -16px; } .urlbb { background-position: -96px 0; } .urlbb:hover { background-position: -96px -16px; } .videobb { background-position: -112px 0; } .videobb:hover { background-position: -112px -16px; } /** range input css **/ /* slider root element */ .slider { height:2px; position:relative; cursor:pointer; border:1px solid #333; width:200px; margin:10px 0 10px 0; float: left; } /* progress bar (enabled with progress: true) */ .progress { height:9px; background-color:#C5FF00; display:none; opacity:0.6; } /* drag handle */ .handle { background-color:#ccc; height:16px; width:8px; top:-8px; position:absolute; display:block; margin-top:1px; border:1px solid #000; cursor:move; .roundbottom(); .shadow(); } /* the input field */ .range { width: 20px!important; font-size: 8pt; margin-left: 10px; border: 0; color: @FieldHelpColor; } /* buttons for the event view */ .plink-event-link { float: left; margin-left: 2px; } /* upload/select popup */ .fbrowser { overflow: auto; position: absolute; top: 0; width: 100%; height: 100%; } .fbrowser .path { background-color: @NavbarBackground; a { padding: 5px; margin: 0 2px; display: inline-block; } a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none; } } .fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;} .fbrowser .list { padding: 10px; } .fbrowser.image .photo-album-image-wrapper { width: 48px; height: 48px; } .fbrowser.image a img { width: auto; height: 48px; } .fbrowser.image a p { display: none;} .fbrowser.file .photo-album-image-wrapper { float:none; white-space: nowrap; width: 100%; height: auto; } .fbrowser.file img { display: inline; width: 16px; height: 16px} .fbrowser.file p { display: inline; white-space: nowrap; } .fbrowser .upload { clear: both; padding-top: 1em;}