// 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 0px 0px 0px; display:table; } h4 { font-size: 1.1em } .shadow(@x: 0px, @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; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } 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; } 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: 0px; 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; } } /* popup notifications */ 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; } /* header */ header { position: fixed; left: 43%; right: 43%; top: 0px; margin: 0px; padding: 0px; /*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: 0px; top: 0px; padding: 0px; background-color: @NavbarBackground; color: @Grey1; z-index: 100; .shadow(0px, 0px); a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none; } ul { margin: 0px; padding: 0px 20px; li { list-style: none; margin: 0px; padding: 0px; float: left; .menu-popup{ left: 0px; right: auto; } } } .nav-menu-icon { position: relative; height: 22px; padding: 5px; margin: 0px 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 0px; 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: 0px; 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: 0px; 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-apps-link.selected { background-color: @NavbarSelectedBg; } } ul.menu-popup { position: absolute; display: none; width: 10em; background: @MenuBg; color: @Menu; margin: 0px; padding: 0px; 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; } } /* autocomplete popup */ .acpopup { max-height:150px; background-color:@MenuBg; color: @Menu; border:1px solid #MenuBorder; overflow:auto; z-index:100000; .shadow(); } .acpopupitem { color: @MenuItem; padding: 4px; clear:left; img { float: left; margin-right: 4px; } &.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; } } /* aside */ aside { display: table-cell; vertical-align: top; width: 200px; padding:0px 10px 0px 20px; border-right: 1px solid @AsideBorder; .vcard { .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .title { margin-bottom: 5px; } dl { height: auto; overflow: auto; } dt {float: left; margin-left: 0px; width: 35%; text-align: right; color: @VCardLabelColor; } dd {float: left; margin-left: 4px; width: 60%;} } #profile-extra-links { ul { padding: 0px; margin: 0px; } li { padding: 0px; margin: 0px; list-style: none; } } #dfrn-request-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; &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; } } #profiles-menu { width: 20em; } } #contact-block { overflow: auto; height: auto; .contact-block-h4 { float: left; margin: 5px 0px; } .allcontact-link { float: right; margin: 5px 0px; } .contact-block-content { clear: both; overflow: hidden; height: auto; } /*.contact-block-div { width:60px; height: 60px; }*/ .contact-block-link { float: left; margin: 0px 2px 2px 0px; img { width: 48px; height: 48px; } } } /* mail view */ .mail-conv-sender, .mail-conv-detail { float: left; } .mail-conv-detail { margin-left: 20px; width: 500px; } .mail-conv-subject { font-size: 1.4em; margin: 10px 0; } .mail-conv-outside-wrapper-end { clear: both; } .mail-conv-outside-wrapper { margin-top: 30px; } .mail-conv-delete-wrapper { float: right; margin-right: 30px; margin-top: 15px; } .mail-conv-break { clear: both; } .mail-conv-delete-icon { border: none; } /* 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: 0px; 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: 0px;} 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: 0px;} .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ } /* widget: search */ #add-search-popup { width: 200px; top: 18px; } /* section */ section { display: table-cell; vertical-align: top; width: 800px; padding:0px 20px 0px 10px; } /* wall item */ .tread-wrapper { background-color: @ThreadBackgroundColor; position: relative; padding: 10px; margin-bottom: 20px; width: 780px; } .wall-item-decor { position: absolute; left: 790px; top: -10px; width: 16px;} .unstarred { display: none; } .wall-item-container { display: table; width: 780px; .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: 710px; } .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-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 { /*margin-top: 50px;*/ .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-comment-wrapper { margin: 30px 2em 2em 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 { font-size: 14px; height: 4em; color: @CommentBoxFullColor; border: 1px solid @CommentBoxFullBorderColor; } } .comment-edit-preview { width: 710px; border: 1px solid @Grey5; margin-top: 10px; .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: 700px; } .tread-wrapper { width: 700px; padding: 0; margin: 10px 0;} } .shiny { border-right:10px solid @ShinyBorderColor; } #jot-preview-content .tread-wrapper { background-color: @JotPreviewBackgroundColor; } .wall-item-tags { padding-top: 5px; } .tag { background: url("../../../images/tag_b.png") no-repeat center left; color: @TagColor; padding-left: 3px; a { padding-right: 8px; background: url("../../../images/tag.png") no-repeat center right; color: @TagColor; } } .wwto { position: absolute !important; width: 25px; height: 25px; background: #FFFFFF; border: 2px solid @Metalic3; height: 25px; width: 25px; overflow: hidden; padding: 1px; position: absolute !important; top: 40px; left: 30px; .shadow(0px, 0px) } .wwto .contact-photo { width: 25px; height: 25px; } #pause { position: fixed; bottom: 5px; right: 5px; } .contact-photo-wrapper { position: relative; } .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 0px; .contact-photo-wrapper { float: left; margin-right: 10px; } .contact-photo { width: 80px; height: 80px; img { width: 80px; height: 80px; } } .contact-photo-menu-button { left: 0px; top: 63px; } } .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; } /* editor */ .jothidden { display: none; } #jot { width: 100%; margin: 0px 2em 20px 0px; .profile-jot-text { height: 1em; width: 99%; font-size: 10px; color: @CommentBoxEmptyColor; border: 1px solid @CommentBoxEmptyBorderColor; padding:0.3em; } #jot-tools { margin: 0px; padding: 0px; height: 40px; overflow: none; width: 800px; 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: 0px; margin: 0px; padding: 0px; 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: 0px; margin: 0px; height: 20px; width: 700px; 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: 80px; float: right; text-align: right; height: 20px; line-height: 20px; padding-right: 20px; } } /** buttons **/ /*input[type="submit"] { border: 0px; background-color: @ButtonBackgroundColor; color: @ButtonColor; padding: 0px 10px; .rounded(5px); height: 18px; }*/ /** 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 0px 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: 0px; padding: 2px 0px 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; } 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: 0px; } } #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; } /* photo */ .lframe { float: left; margin: 0px 10px 10px 0px; } /* profile match wrapper */ .profile-match-wrapper { float: left; width: 90px; height: 90px; margin-bottom: 20px; .contact-photo { width: 80px; height: 80px; img { width: 80px; height: 80px; } } .contact-photo-menu-button { left: 0px; top: 63px; } } /* page footer */ footer { height: 100px; display: table-row; } .pager { margin-top: 25px; clear: both; }