X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Fquattro%2Fquattro.less;h=4c3279943db3c718795240b26e943cf3ca3e51c9;hb=c9a8dbc322fbbd595a0e9a74a8fa68ddc1c187f6;hp=5a7780a4c6185e459169c97a9fc74d7e334a5a3c;hpb=938b2bf438656ce9068f0f7cb92ff6dbd696c5c8;p=friendica.git diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less index 5a7780a4c6..4c3279943d 100644 --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -3,12 +3,13 @@ /* global */ body { font-family: Liberation Sans,helvetica,arial,clean,sans-serif; - font-size: 10px; + 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); @@ -33,6 +34,7 @@ body { 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; } @@ -40,6 +42,37 @@ 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 */ @@ -54,6 +87,10 @@ a:hover {color: @LinkHover; text-decoration: underline; } /* 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; @@ -80,7 +117,7 @@ header { #banner { overflow: hidden; - text-align: center; + 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;} @@ -194,6 +231,12 @@ ul.menu-popup { text-align: center; color: @MenuEmpty; } + .toolbar { + background-color: @MenuEmpty; + height: auto; overflow: auto; + a { float: right; } + a:hover { background-color: @MenuBg; } + } } @@ -221,7 +264,8 @@ ul.menu-popup { #nav-notifications-menu { - width: 400px; + 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; } @@ -230,7 +274,7 @@ ul.menu-popup { -/* aside */ +/* aside 230px*/ aside { display: table-cell; vertical-align: top; @@ -275,15 +319,64 @@ aside { .allcontact-link { float: right; margin: 5px 0px; } .contact-block-content { clear: both; - overflow: auto; height: auto; + 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; } } } - +/* 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; @@ -314,11 +407,11 @@ aside { } -/* section */ +/* section 800px */ section { display: table-cell; vertical-align: top; - width: 800px; + width: 770px; padding:0px 20px 0px 10px; } @@ -328,13 +421,15 @@ section { position: relative; padding: 10px; margin-bottom: 20px; + width: 750px; + border-bottom: 1px solid @ThreadBottomBorderColor; } -.wall-item-decor { position: absolute; left: 790px; top: -10px; width: 16px;} +.wall-item-decor { position: absolute; left: 97%; top: -10px; width: 16px;} .unstarred { display: none; } .wall-item-container { display: table; - width: 780px; + width: 750px; .wall-item-item, .wall-item-bottom { display: table-row; } @@ -347,23 +442,6 @@ section { text-align: left; width: 60px; - .wall-item-photo-wrapper { position: relative; } - .wall-item-photo { - width: 48px; height: 48px; - overflow: hidden; - text-indent: -9999px; - display: block; - background: url(../../../images/icons/48/user.png) no-repeat center center; - } - - .wall-item-photo-menu-button { - display: none; - position: absolute; - left: -4px; - top: 28px; - } - .wall-item-photo-menu { display: none; } - } .wall-item-location { word-wrap: break-word; @@ -405,19 +483,35 @@ section { .wall-item-container.comment { - /*margin-top: 50px;*/ - .wall-item-photo { width: 32px; height: 32px; margin-left: 16px; - background: url(../../../images/icons/22/user.png) no-repeat center center; + .contact-photo-wrapper { margin-left: 16px; } + .contact-photo { + width: 32px; height: 32px; } - .wall-item-photo-menu-button { - top: 13px !important; - left: 10px !important; + .contact-photo-menu-button { + top: 15px !important; + left: 0px !important; } .wall-item-links { padding-left: 12px; } } +/* '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: 30px 2em 2em 60px; + margin: 1em 2em 1em 60px; .comment-edit-photo { display: none; } textarea { height: 1em; width: 100%; font-size: 10px; @@ -433,7 +527,28 @@ section { } } +.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; } +.hide-comments-outer {margin-bottom: 0.8em; } .wall-item-tags { padding-top: 5px; } .tag { @@ -446,78 +561,212 @@ section { color: @TagColor; } } +.filesavetags { + padding: 3px 0px 3px 0px; + 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 .contact-photo { width: 25px; height: 25px; } -#profile-jot-wrapper { - width: 100%; - margin: 0px 2em 20px 0px; - - -} -.profile-jot-text { - height: 1em; width: 100%; font-size: 10px; - color: @CommentBoxEmptyColor; - border: 1px solid @CommentBoxEmptyBorderColor; - padding:0.3em; -} -#profile-jot-plugin-wrapper, -#profile-jot-submit-wrapper { - margin-top: 10px; +#pause { + position: fixed; + bottom: 5px; + right: 5px; } -#profile-jot-submit { - float: left; +.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; } -#profile-upload-wrapper{ - float: left; - margin-left: 10px; -} -#profile-attach-wrapper, -#profile-rotator, -#profile-link-wrapper, -#profile-youtube-wrapper, -#profile-video-wrapper, -#profile-audio-wrapper, -#profile-location-wrapper, -#profile-nolocation-wrapper, -#profile-title-wrapper { + +.contact-wrapper { float: left; - margin-left: 20px; + 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; + } } - -#profile-jot-perms { +.directory-item { float: left; - margin-left: 35px; - margin-right: 35px; + width: 200px; + height: 200px; + .contact-photo { + width: 175px; height: 175px; + img { width: 175px; height: 175px; } + } } - -#profile-jot-perms-end { - /*clear: left;*/ - height: 20px; +.contact-name { font-weight: bold; padding-top: 15px; } +.contact-details { + color: @Grey3; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -#profile-jot-plugin-end{ - clear: both; -} -.profile-jot-net { - float: left; - margin-right: 10px; - margin-top: 5px; - margin-bottom: 5px; -} +/* editor */ +.jothidden { display: none; } +#jot { -#profile-jot-networks-end { - clear: both; -} + 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; + } -#profile-jot-end, #about-jot-end { - margin-bottom: 15px; -} -#about-jot-submit-wrapper { - margin-top: 15px; + #jot-tools { + margin: 0px; padding: 0px; + 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: 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: 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: 0px; + margin: 0px; + height: 20px; + width: 200px; + border: 1px solid @BodyBackground; + &:hover { border: 1px solid @CommentBoxEmptyBorderColor } + &:focus { border: 1px solid @CommentBoxEmptyBorderColor } + } } + + /** buttons **/ /*input[type="submit"] { border: 0px; @@ -645,6 +894,31 @@ ul.tabs { } +/** 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 */ @@ -664,11 +938,15 @@ ul.tabs { textarea { width: 400px; } + input[type="checkbox"], input[type="radio"]{ + width: auto; + } + textarea { height: 100px; } .field_help { display: block; margin-left: 200px; - color: #666666; + color: @FieldHelpColor; } @@ -708,5 +986,169 @@ ul.tabs { } +#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; + } +} + +/* messages */ +#message-new { + background: @MessageNewBackgroundColor; + border: 1px solid @MessageNewBorderColor; + width: 150px; + a { + color: @MessageNewColor; + text-align: center; + display: block; + font-weight: bold; + padding: 1em 0px; + } +} + +.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 0px 0px 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-delete { float: right; } +} + +#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;} + .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; +} +