X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Fquattro%2Fquattro.less;h=91c8074d9f0f12dbb3476201177eff9e7eb8daef;hb=4e9236e9e999a19d5346d8d19088b167f8e42e09;hp=46eed3d6c0d791bce4aae23ea1976654fd0d69f0;hpb=36a67158d225caf74ef2be48420a593e408befc4;p=friendica.git diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less index 46eed3d6c0..91c8074d9f 100644 --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -6,15 +6,15 @@ body { font-size: 11px; background-color: @BodyBackground; color: @BodyColor; - margin: 50px 0px 0px 0px; + margin: 50px 0 0 0; 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); +.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){ @@ -36,7 +36,7 @@ h4 { font-size: 1.1em } -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; } @@ -52,11 +52,11 @@ a:hover {color: @LinkHover; text-decoration: underline; } .fakelink:hover { color: @LinkHover; text-decoration: underline; } blockquote { - background:@BlockquoteBackgroundColor; - padding: 1em; - margin-left: 1em; - border-left: 1em solid @BlockquoteBorderColor; - + background:@BlockquoteBackgroundColor; + padding: 1em; + margin-left: 1em; + border-left: 1em solid @BlockquoteBorderColor; + } code { @@ -68,7 +68,7 @@ code { background: #EEE; color: #444; padding: 10px; - margin-top: 20px; + margin-top: 20px; } #panel { @@ -76,13 +76,13 @@ code { width: 10em; background: @MenuBg; color: @Menu; - margin: 0px; + margin: 0; padding: 1em; list-style: none; border: 3px solid @MenuBorder; z-index: 100000; - - .shadow(); + + .shadow(); } @@ -115,19 +115,26 @@ div.jGrowl div.info { 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: 0px; - margin: 0px; padding: 0px; + 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; @@ -138,40 +145,40 @@ header { } } /* nav */ -nav { +nav { width: 100%; height: 32px; - position: fixed; left: 0px; top: 0px; - padding: 0px; + position: fixed; left: 0; top: 0; + padding: 0; background-color: @NavbarBackground; color: @Grey1; z-index: 100; - .shadow(0px, 0px); + .shadow(0px, 0); 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; + margin: 0; + padding: 0 20px; + li { + list-style: none; + margin: 0; padding: 0; float: left; - .menu-popup{ left: 0px; right: auto; } + .menu-popup{ left: 0; right: auto; } } - + } .nav-menu-icon { position: relative; height: 22px; padding: 5px; - margin: 0px 10px; + margin: 0 10px; .roundtop(); - + &.selected { background-color: @NavbarSelectedBg; } - + img { width: 22px; height: 22px; } .nav-notify { top: 3px; } } @@ -180,13 +187,13 @@ nav { position: relative; height: 16px; padding: 5px; - margin: 3px 15px 0px; + margin: 3px 15px 0; font-size: 14px; border-bottom: 3px solid @NavbarBackground; &.selected { border-bottom: 3px solid @NavbarSelectedBorder; } - + } .nav-notify { @@ -196,30 +203,30 @@ nav { .rounded(); font-size: 10px; padding: 1px 3px; - top: 0px; + 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 { + #nav-site-linkmenu { float: right; - .menu-popup{ right: 0px; left: auto; } + .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.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-messages-link.selected .icon.s22.mail { background-image: url("icons/messages_on.png") } #nav-apps-link.selected { background-color: @NavbarSelectedBg; } } @@ -230,14 +237,14 @@ ul.menu-popup { width: 10em; background: @MenuBg; color: @Menu; - margin: 0px; - padding: 0px; + 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; } @@ -249,18 +256,19 @@ ul.menu-popup { color: @MenuEmpty; } .toolbar { - background-color: @MenuEmpty; + background-color: @MenuEmpty; height: auto; overflow: auto; a { float: right; } a:hover { background-color: @MenuBg; } } - + } /* autocomplete popup */ +.autocomplete, .acpopup-mce { max-height:150px; } .autocomplete, +.acpopup-mce, .acpopup { - max-height:150px; background-color:@MenuBg; color: @Menu; border:1px solid @MenuBorder; @@ -268,7 +276,7 @@ ul.menu-popup { z-index:100000; .shadow(); } -.autocomplete > div, +.autocomplete > div, .acpopupitem { color: @MenuItem; padding: 4px; clear:left; @@ -284,6 +292,15 @@ ul.menu-popup { background-color: @MenuItemHoverBg; } } +.textcomplete-item { + color: @MenuItem; + a:hover{ + color: @MenuItem; + } + &.active{ + background-color: @MenuItemHoverBg; + } +} #nav-notifications-menu { @@ -294,15 +311,30 @@ ul.menu-popup { .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 { +aside { display: table-cell; vertical-align: top; width: 200px; - padding:0px 10px 0px 20px; + padding:0px 10px 0 20px; border-right: 1px solid @AsideBorder; .profile-edit-side-div { display: none; } @@ -310,15 +342,17 @@ aside { .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: 0px; width: 35%; text-align: right; color: @VCardLabelColor; } + 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: 0px; margin: 0px; } - li { padding: 0px; margin: 0px; list-style: none; } + ul { padding: 0; margin: 0; } + li { padding: 0.2em 0; margin: 0; list-style: none; } } #wallmessage-link { @@ -330,30 +364,41 @@ aside { 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('../../../images/connect-bg.png') no-repeat left center; + 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; - #profiles-menu { width: 20em; } + &: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 0px; } - .allcontact-link { float: right; margin: 5px 0px; } + .contact-block-h4 { float: left; margin: 5px 0; } + .allcontact-link { float: right; margin: 5px 0; } .contact-block-content { clear: both; overflow: hidden; @@ -362,7 +407,7 @@ aside { /*.contact-block-div { width:60px; height: 60px; }*/ .contact-block-link { float: left; - margin: 0px 2px 2px 0px; + margin: 0 2px 2px 0; img { width: 48px; height: 48px; } } } @@ -373,19 +418,19 @@ aside { .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; - } + .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 { @@ -413,28 +458,42 @@ aside { width: 60px; height: 60px; }*/ - + /* widget */ .widget { margin-bottom: 2em; - - h3 { padding: 0px; margin: 2px;} + + 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: 0px;} + 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: 0px;} - .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ - + + /*.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 */ @@ -445,19 +504,19 @@ aside { /* section 800px */ -section { +section { display: table-cell; vertical-align: top; width: 770px; - padding:0px 20px 0px 10px; + padding:0px 20px 0 10px; } .sparkle { - cursor: url('icons/lock.cur'), pointer; + cursor: url('icons/lock.cur'), pointer; } /* wall item */ -.tread-wrapper { +.tread-wrapper { background-color: @ThreadBackgroundColor; position: relative; padding: 10px; @@ -471,10 +530,10 @@ section { .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 { @@ -482,8 +541,8 @@ section { vertical-align: top; text-align: left; width: 60px; - - } + + } .wall-item-location { word-wrap: break-word; width: 50px; @@ -496,59 +555,64 @@ section { } .wall-item-content img { max-width: 700px; } .wall-item-links, - .wall-item-actions { - display: table-cell; - vertical-align: middle; - + .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; + .wall-item-actions-events { float: left; margin-top: 0.5em; a { margin-right: 3em; } } - .wall-item-actions-tools { float: right; width: 15%; + .wall-item-actions-social { float: left; margin-top: 0.5em; + a { margin-right: 3em; + &.active { font-weight: bold;} + } + } + .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 { + width: 32px; height: 32px; } - + .contact-photo-menu-button { top: 15px !important; - left: 0px !important; + left: 0 !important; } .wall-item-links { padding-left: 12px; } - + .commentbox { - height: 0px; + height: 0; overflow: hidden; .wall-item-comment-wrapper { border-top: 1px solid @CommentBoxEmptyBorderColor; - height: 0px; overflow: hidden; + height: 0; overflow: hidden; } .transition(); } - + &:hover .commentbox { height:auto; overflow: visible; .wall-item-comment-wrapper { - border-top: 0px; + border-top: 0; height:auto;overflow: visible; } .transition(); @@ -561,9 +625,9 @@ section { .opaque(0.5); } .contact-photo-wrapper { margin-left: 32px; } - .contact-photo { + .contact-photo { width: 16px; height: 16px; - } + } .contact-photo-menu-button { top: 15px !important; left: 15px !important; @@ -574,8 +638,8 @@ section { .wall-item-comment-wrapper { margin: 1em 2em 1em 60px; .comment-edit-photo { display: none; } - - textarea { + + textarea { height: 1em; width: 100%; font-size: 10px; color: @CommentBoxEmptyColor; border: 1px solid @CommentBoxEmptyBorderColor; @@ -586,23 +650,23 @@ section { color: @CommentBoxFullColor; border: 1px solid @CommentBoxFullBorderColor; } - + &.photo { - margin: 1em 2em 1em 0px; + margin: 1em 2em 1em 0; } } -.threaded .wall-item-comment-wrapper { margin-left: 0px; } +.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; @@ -610,10 +674,10 @@ section { .wall-item-links { padding-left: 12px; } .wall-item-container { width: 90%; } - .tread-wrapper { - width: 90%; padding: 0; margin: 10px 0; + .tread-wrapper { + width: 90%; padding: 0; margin: 10px 0; background-color: @JotPreviewBackgroundColor; - border-bottom: 0px; + border-bottom: 0; } .wall-item-conv { display: none; } } @@ -653,134 +717,156 @@ section { a { color: @MentionColor; } } /*.filesavetags { - padding: 3px 0px 3px 0px; + padding: 3px 0 3px 0; opacity: 0.5; }*/ -.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 { + 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 */ +/* 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; + 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-left: 160px; - max-height: 160px; - overflow: hidden; - } - .oembed {} + 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; } + 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; + margin-left: 32px; + color: #000; + border: none; } - +.oembed.video { + > a.embed_video { + display: block; + 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; + .comment-edit-preview { width: 580px; .wall-item-container { width: 580px; } } - + & .children { .wall-item-container { width: 630px; } - .comment-edit-preview { width: 540px; + .comment-edit-preview { width: 540px; .wall-item-container { width: 540px; } } & .children { .wall-item-container { width: 590px; } - .comment-edit-preview { width: 500px; + .comment-edit-preview { width: 500px; .wall-item-container { width: 500px; } } - + .children { - margin-left: 0px; - .hide-comments-outer { margin-left: 0px; } + 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; + 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; + border-top: 1px solid #999999; + color: #999999; + display: block; + text-align: center; + background-color: @ThreadBackgroundColor; } #pause { - position: fixed; - bottom: 5px; - right: 5px; + position: fixed; + bottom: 5px; + right: 5px; } @@ -788,13 +874,37 @@ span[id^="showmore-wrap"] { .contact-select { position: absolute; top:64px; left:64px; display:none; } .contact-select:checked, .contact-photo:hover .contact-select { display:block; } -#contacts-actions { clear: both; } -.contact-photo { +#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; @@ -807,44 +917,65 @@ span[id^="showmore-wrap"] { width: 300px; height: 90px; padding-right: 10px; - margin: 0 10px 10px 0px; - .contact-photo-wrapper { - float: left; + margin: 0 10px 10px 0; + .contact-photo-wrapper { + float: left; margin-right: 10px; } - .contact-photo { + .contact-photo { width: 80px; height: 80px; img { width: 80px; height: 80px; } } .contact-photo-menu-button { - left: 0px; + 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 { + .contact-photo { width: 175px; height: 175px; img { width: 175px; height: 175px; } } } -.contact-name { font-weight: bold; padding-top: 15px; } -.contact-details { +.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: 0px 2em 20px 0px; - - + margin: 0 2em 20px 0; + .profile-jot-text { height: 1em; width: 99%; font-size: 10px; color: @CommentBoxEmptyColor; @@ -853,7 +984,7 @@ span[id^="showmore-wrap"] { } #jot-tools { - margin: 0px; padding: 0px; + margin: 0; padding: 0; height: 40px; overflow: none; width: 770px; background-color: @JotToolsBackgroundColor; @@ -891,7 +1022,7 @@ span[id^="showmore-wrap"] { border-left: 10px solid @JotPermissionLockBackgroundColor; background-color: @JotPermissionLockBackgroundColor; } - + } li.submit { float: right; @@ -900,7 +1031,7 @@ span[id^="showmore-wrap"] { border-right: 1px solid @Grey4; border-left: 1px solid @Grey4; input { - border: 0px; margin: 0px; padding: 0px; + border: 0; margin: 0; padding: 0; background-color: @JotSubmitBackgroundColor; color: @JotSubmitText; width: 80px; height: 40px; @@ -924,8 +1055,8 @@ span[id^="showmore-wrap"] { } #jot-title { - border: 0px; - margin: 0px; + border: 0; + margin: 0; height: 20px; width: 500px; font-weight: bold; @@ -937,12 +1068,12 @@ span[id^="showmore-wrap"] { &:-moz-placeholder { font-weight: normal; - } - + } + &:hover { border: 1px solid @CommentBoxEmptyBorderColor } &:focus { border: 1px solid @CommentBoxEmptyBorderColor } } - + #character-counter { width: 40px; float: right; @@ -951,10 +1082,10 @@ span[id^="showmore-wrap"] { line-height: 20px; padding-right: 20px; } - + #jot-category { - border: 0px; - margin: 0px; + border: 0; + margin: 0; height: 20px; width: 200px; border: 1px solid @BodyBackground; @@ -966,14 +1097,35 @@ span[id^="showmore-wrap"] { /** buttons **/ /*input[type="submit"] { - border: 0px; + border: 0; background-color: @ButtonBackgroundColor; color: @ButtonColor; - padding: 0px 10px; + 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, @@ -1002,7 +1154,7 @@ span[id^="showmore-wrap"] { background-image: url("../../../images/show_all_off.png"); background-position: 7px 7px; background-repeat: no-repeat; - padding: 7px 5px 0px 30px; + padding: 7px 5px 0 30px; color: #999999; .rounded(5px); } @@ -1020,7 +1172,7 @@ span[id^="showmore-wrap"] { overflow: auto; } #acl-list-content { - + } .acl-list-item { display: block; @@ -1036,8 +1188,8 @@ span[id^="showmore-wrap"] { 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 { +.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; @@ -1082,12 +1234,12 @@ ul.tabs { li { float: left; margin-left: 20px; - + .active { border-bottom: 1px solid @LinkVisited; } } - + } @@ -1096,7 +1248,7 @@ ul.tabs { #group-update-wrapper{ height: auto; overflow: auto; #group { - width:300px; + width:300px; float:left; margin-right:20px; } @@ -1138,13 +1290,12 @@ ul.tabs { input[type="checkbox"], input[type="radio"]{ width: auto; } - + textarea { height: 100px; } .field_help { display: block; margin-left: 200px; color: @FieldHelpColor; - } @@ -1179,7 +1330,7 @@ ul.tabs { } .hidden { display: none!important; } - &.radio .field_help { margin-left: 0px; } + &.radio .field_help { margin-left: 0; } } @@ -1219,7 +1370,7 @@ ul.tabs { } #profile-edit-profile-name, #profile-edit-name, -#gender-select, +#gender-select, #profile-edit-pdesc, #profile-edit-gender, #profile-edit-dob, @@ -1236,7 +1387,7 @@ ul.tabs { #profile-edit-pubkeywords, #profile-edit-prvkeywords, #profile-edit-homepage { - margin-top: 5px; + margin-top: 5px; } /* oauth */ @@ -1244,7 +1395,7 @@ ul.tabs { height: auto; overflow: auto; border-bottom: 2px solid #cccccc; padding-bottom: 1em; - margin-bottom: 1em; + margin-bottom: 1em; } .oauthapp img { float: left; @@ -1265,11 +1416,50 @@ ul.tabs { 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-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; @@ -1286,6 +1476,8 @@ ul.tabs { 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; @@ -1296,36 +1488,36 @@ ul.tabs { .photo-top-image-wrapper, .photo-album-image-wrapper { float: left; - margin: 0px 10px 10px 0px; + 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: 0px; - .shadow(0px, 0px); + bottom: 0; + .shadow(0px, 0); .transition(0.5s); } } #photo-photo { display: block; width: 660px; - padding: 50px; margin-bottom: 0px; + padding: 50px; margin-bottom: 0; text-align: center; background-color: @Grey3; img { max-width: 560px; } @@ -1334,7 +1526,8 @@ ul.tabs { background: url("../../../images/icons/22/image.png") no-repeat top left; padding-left: 23px; min-height: 22px; - a { display: block; padding-top: 5px; } + padding-top: 6px; + /* a { display: block;}*/ } #photo-caption { @@ -1361,20 +1554,40 @@ ul.tabs { .icon {float: left;} .like-rotator {float: right;} } + +#photo_edit_form { + padding: 1em; +} + /* profile match wrapper */ .profile-match-wrapper { float: left; - width: 90px; - height: 90px; + width: 110px; + height: 110px; margin-bottom: 20px; - .contact-photo { + .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: 0px; + left: 0; top: 63px; - } + } } /* messages */ @@ -1387,7 +1600,7 @@ ul.tabs { text-align: center; display: block; font-weight: bold; - padding: 1em 0px; + padding: 1em 0; } } @@ -1395,31 +1608,50 @@ ul.tabs { background-color: @MailListBackgroundColor; margin-bottom: 5px; width: 100%; height: auto; overflow: hidden; - + span { display: block; float: left; width: 20%; overflow: hidden;} - - .mail-subject { + + .mail-subject { width: 30%; - padding:4px 0px 0px 4px; + padding:4px 0 0 4px; a { display: block; } &.unseen a { font-weight: bold; } } - .mail-date { padding: 4px 4px 0px 4px; } - .mail-from { padding: 4px 4px 0px 4px; } - .mail-count { padding: 4px 4px 0px 4px; text-align: right;} - + .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 0px 0px 10px;} + span { float: left; overflow: hidden; padding: 4px 0 0 10px;} .mail-delete { float: right; .opaque(0.5);} &:hover .mail-delete { .opaque(1); } - + } /* theme screenshot */ @@ -1435,8 +1667,11 @@ ul.tabs { footer { height: 100px; display: table-row; } .pager { - margin-top: 25px; - clear: both; + margin-top: 25px; + clear: both; +} +.pager .disabled { + display: none; } /** @@ -1448,7 +1683,7 @@ footer { height: 100px; display: table-row; } font-weight: bold; background-color: #FF0000; padding: 0em 0.3em; - + } #adminpage { dl { @@ -1476,7 +1711,7 @@ footer { height: 100px; display: table-row; } text-align: right; } #pluginslist { - margin: 0px; padding: 0px; + margin: 0; padding: 0; } .plugin { list-style: none; @@ -1495,20 +1730,20 @@ footer { height: 100px; display: table-row; } } table { width:100%; - border-bottom: 1px solid #000000; - margin: 5px 0px; - th { + border-bottom: 1px solid #000000; + margin: 5px 0; + th { text-align: left; } - td .icon { + td .icon { float: left; } - tr:hover { + tr:hover { background-color: #bbc7d7; } } - table#users img { - width: 16px; height: 16px; + table#users img { + width: 16px; height: 16px; } .selectall { text-align: right; } } @@ -1519,8 +1754,8 @@ footer { height: 100px; display: table-row; } .comment-edit-bb { list-style: none; display: none; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; width: 75%; } .comment-edit-bb > li { @@ -1530,65 +1765,64 @@ footer { height: 100px; display: table-row; } } .editicon { - display: inline-block; - width: 16px; - height: 16px; - background-image: url(icons/bbedit.png); - text-decoration: none; - :hover {background-color: #ccc;} -} -.boldbb { background-position: 0px 0px; } -.boldbb:hover { background-position: 0px -16px; } -.italicbb { background-position: -16px 0px; } + 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 0px; } +.underlinebb { background-position: -32px 0; } .underlinebb:hover { background-position: -32px -16px; } -.quotebb { background-position: -48px 0px; } +.quotebb { background-position: -48px 0; } .quotebb:hover { background-position: -48px -16px; } -.codebb { background-position: -64px 0px; } +.codebb { background-position: -64px 0; } .codebb:hover { background-position: -64px -16px; } -.imagebb { background-position: -80px 0px; } +.imagebb { background-position: -80px 0; } .imagebb:hover { background-position: -80px -16px; } -.urlbb { background-position: -96px 0px; } +.urlbb { background-position: -96px 0; } .urlbb:hover { background-position: -96px -16px; } -.videobb { background-position: -112px 0px; } +.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 0px 10px 0px; - float: left; + 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; + 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(); - + 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 */ @@ -1596,7 +1830,36 @@ footer { height: 100px; display: table-row; } width: 20px!important; font-size: 8pt; margin-left: 10px; - border: 0px; + 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;}