X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Fquattro%2Fstyle.css;h=6087e4cd17b1ad88dcad659a091b0dcd20f52484;hb=3a609adfb77a94d5b8681496a9306d9cf4efcafb;hp=95c3d087ede6430744014e58fa19439c009ba96c;hpb=1aba538c96628468b84136386496ccc69050e810;p=friendica.git diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css old mode 100644 new mode 100755 index 95c3d087ed..6087e4cd17 --- a/view/theme/quattro/style.css +++ b/view/theme/quattro/style.css @@ -5,7 +5,7 @@ .icon { background-color: transparent ; background-repeat: no-repeat; - background-position: center center; + background-position: left center; display: block; overflow: hidden; text-indent: -9999px; @@ -15,7 +15,7 @@ text-indent: 0px; } .icon.s10 { - width: 10px; + min-width: 10px; height: 10px; } .icon.s10.notify { @@ -48,9 +48,27 @@ .icon.s10.unlock { background-image: url("../../../images/icons/10/unlock.png"); } +.icon.s10.type-unkn { + background-image: url("../../../images/icons/10/zip.png"); +} +.icon.s10.type-audio { + background-image: url("../../../images/icons/10/audio.png"); +} +.icon.s10.type-video { + background-image: url("../../../images/icons/10/video.png"); +} +.icon.s10.type-image { + background-image: url("../../../images/icons/10/image.png"); +} +.icon.s10.type-text { + background-image: url("../../../images/icons/10/text.png"); +} +.icon.s10.text { + padding: 2px 0px 0px 15px; +} .icon.s16 { - width: 22px; - height: 22px; + min-width: 16px; + height: 16px; } .icon.s16.notify { background-image: url("../../../images/icons/16/notify_off.png"); @@ -82,8 +100,26 @@ .icon.s16.unlock { background-image: url("../../../images/icons/16/unlock.png"); } +.icon.s16.type-unkn { + background-image: url("../../../images/icons/16/zip.png"); +} +.icon.s16.type-audio { + background-image: url("../../../images/icons/16/audio.png"); +} +.icon.s16.type-video { + background-image: url("../../../images/icons/16/video.png"); +} +.icon.s16.type-image { + background-image: url("../../../images/icons/16/image.png"); +} +.icon.s16.type-text { + background-image: url("../../../images/icons/16/text.png"); +} +.icon.s16.text { + padding: 4px 0px 0px 20px; +} .icon.s22 { - width: 22px; + min-width: 22px; height: 22px; } .icon.s22.notify { @@ -116,6 +152,24 @@ .icon.s22.unlock { background-image: url("../../../images/icons/22/unlock.png"); } +.icon.s22.type-unkn { + background-image: url("../../../images/icons/22/zip.png"); +} +.icon.s22.type-audio { + background-image: url("../../../images/icons/22/audio.png"); +} +.icon.s22.type-video { + background-image: url("../../../images/icons/22/video.png"); +} +.icon.s22.type-image { + background-image: url("../../../images/icons/22/image.png"); +} +.icon.s22.type-text { + background-image: url("../../../images/icons/22/text.png"); +} +.icon.s22.text { + padding: 10px 0px 0px 25px; +} .icon.s48 { width: 48px; height: 48px; @@ -150,15 +204,33 @@ .icon.s48.unlock { background-image: url("../../../images/icons/48/unlock.png"); } +.icon.s48.type-unkn { + background-image: url("../../../images/icons/48/zip.png"); +} +.icon.s48.type-audio { + background-image: url("../../../images/icons/48/audio.png"); +} +.icon.s48.type-video { + background-image: url("../../../images/icons/48/video.png"); +} +.icon.s48.type-image { + background-image: url("../../../images/icons/48/image.png"); +} +.icon.s48.type-text { + background-image: url("../../../images/icons/48/text.png"); +} /* global */ body { font-family: Liberation Sans, helvetica, arial, clean, sans-serif; - font-size: 12px; + font-size: 11px; background-color: #ffffff; color: #2d2d2d; margin: 50px 0px 0px 0px; display: table; } +h4 { + font-size: 1.1em; +} a, a:link { color: #005c94; text-decoration: none; @@ -180,6 +252,44 @@ a:hover { .hidden { display: none; } +.clear { + clear: both; +} +.fakelink { + color: #005c94; + text-decoration: none; + cursor: pointer; +} +.fakelink:hover { + color: #005c94; + 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: #ffffff; + color: #2d2d2d; + margin: 0px; + padding: 1em; + list-style: none; + border: 3px solid #364e59; + z-index: 100000; + -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); +} +/* tool */ .tool { height: auto; overflow: auto; @@ -218,6 +328,7 @@ header #site-location { display: none; } header #banner { + overflow: hidden; text-align: center; width: 100%; } @@ -414,6 +525,8 @@ ul.menu-popup .empty { } #nav-notifications-menu { width: 400px; + max-height: 550px; + overflow: auto; } #nav-notifications-menu img { float: left; @@ -430,6 +543,7 @@ ul.menu-popup .empty { /* aside */ aside { display: table-cell; + vertical-align: top; width: 200px; padding: 0px 10px 0px 20px; border-right: 1px solid #bdcdd4; @@ -488,6 +602,8 @@ aside #profiles-menu { #contact-block { overflow: auto; height: auto; + /*.contact-block-div { width:60px; height: 60px; }*/ + } #contact-block .contact-block-h4 { float: left; @@ -499,16 +615,165 @@ aside #profiles-menu { } #contact-block .contact-block-content { clear: both; - overflow: auto; + overflow: hidden; height: auto; } #contact-block .contact-block-link { float: left; margin: 0px 2px 2px 0px; } +#contact-block .contact-block-link 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; +} +#contact-edit-drop-link .drophide, .mail-list-delete-wrapper .drophide, .group-delete-wrapper .drophide { + background-image: url('../../../images/icons/22/delete.png'); + display: block; + width: 22px; + height: 22px; + opacity: 0.3; + position: relative; + top: -50px; +} +#contact-edit-drop-link .drop, .mail-list-delete-wrapper .drop, .group-delete-wrapper .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; + /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} + .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ + +} +.widget h3 { + padding: 0px; + margin: 2px; +} +.widget .action { + opacity: 0.1; + -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; +} +.widget input.action { + opacity: 0.5; + -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; +} +.widget:hover .title .action { + opacity: 1; + -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; +} +.widget .tool:hover .action { + opacity: 1; + -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; +} +.widget .tool:hover .action.ticked { + opacity: 1; + -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; +} +.widget ul { + padding: 0px; +} +.widget ul li { + padding-left: 16px; + min-height: 16px; + list-style: none; +} +.widget .tool.selected { + background: url('../../../images/selected.png') no-repeat left center; +} +/* widget: search */ +#add-search-popup { + width: 200px; + top: 18px; +} /* section */ section { display: table-cell; + vertical-align: top; width: 800px; padding: 0px 20px 0px 10px; } @@ -518,6 +783,7 @@ section { position: relative; padding: 10px; margin-bottom: 20px; + width: 780px; } .wall-item-decor { position: absolute; @@ -535,35 +801,35 @@ section { .wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom { display: table-row; } +.wall-item-container .wall-item-bottom { + opacity: 0.5; + -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; +} +.wall-item-container:hover .wall-item-bottom { + opacity: 1; + -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; +} .wall-item-container .wall-item-info { display: table-cell; vertical-align: top; text-align: left; width: 60px; } -.wall-item-container .wall-item-info .wall-item-photo-wrapper { - position: relative; -} -.wall-item-container .wall-item-info .wall-item-photo { - width: 48px; - height: 48px; -} -.wall-item-container .wall-item-info .wall-item-photo-menu-button { - display: none; - position: absolute; - left: -4px; - top: 28px; -} -.wall-item-container .wall-item-info .wall-item-photo-menu { - display: none; -} .wall-item-container .wall-item-location { word-wrap: break-word; width: 50px; } .wall-item-container .wall-item-content { display: table-cell; - font-size: 16px; + font-size: 12px; max-width: 720px; word-wrap: break-word; } @@ -619,16 +885,19 @@ section { float: right; } .wall-item-container.comment { - margin-top: 50px; + /*margin-top: 50px;*/ + } -.wall-item-container.comment .wall-item-photo { +.wall-item-container.comment .contact-photo { width: 32px; height: 32px; margin-left: 16px; + /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ + } -.wall-item-container.comment .wall-item-photo-menu-button { - top: 13px !important; - left: 10px !important; +.wall-item-container.comment .contact-photo-menu-button { + top: 15px !important; + left: 15px !important; } .wall-item-container.comment .wall-item-links { padding-left: 12px; @@ -653,79 +922,272 @@ section { color: #2d2d2d; border: 1px solid #2d2d2d; } -#profile-jot-wrapper { +.comment-edit-preview { + width: 710px; + border: 1px solid #2d2d2d; + margin-top: 10px; +} +.comment-edit-preview .contact-photo { + width: 32px; + height: 32px; + margin-left: 16px; + /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ + +} +.comment-edit-preview .contact-photo-menu-button { + top: 15px !important; + left: 15px !important; +} +.comment-edit-preview .wall-item-links { + padding-left: 12px; +} +.comment-edit-preview .wall-item-container { + width: 700px; +} +.comment-edit-preview .tread-wrapper { + width: 700px; + padding: 0; + margin: 10px 0; +} +.shiny { + border-right: 10px solid #fce94f; +} +#jot-preview-content .tread-wrapper { + background-color: #fce94f; +} +.wall-item-tags { + padding-top: 5px; +} +.tag { + background: url("../../../images/tag_b.png") no-repeat center left; + color: #ffffff; + padding-left: 3px; +} +.tag a { + padding-right: 8px; + background: url("../../../images/tag.png") no-repeat center right; + color: #ffffff; +} +.wwto { + position: absolute !important; + width: 25px; + height: 25px; + background: #FFFFFF; + border: 2px solid #364e59; + height: 25px; + width: 25px; + overflow: hidden; + padding: 1px; + position: absolute !important; + top: 40px; + left: 30px; + -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); +} +.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; + overflow: hidden; + display: block; +} +.contact-photo img { + width: 48px; + height: 48px; +} +.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-wrapper .contact-photo-wrapper { + float: left; + margin-right: 10px; +} +.contact-wrapper .contact-photo { + width: 80px; + height: 80px; +} +.contact-wrapper .contact-photo img { + width: 80px; + height: 80px; +} +.contact-wrapper .contact-photo-menu-button { + left: 0px; + top: 63px; +} +.directory-item { + float: left; + width: 200px; + height: 200px; +} +.directory-item .contact-photo { + width: 175px; + height: 175px; +} +.directory-item .contact-photo img { + width: 175px; + height: 175px; +} +.contact-name { + font-weight: bold; + padding-top: 15px; +} +.contact-details { + color: #999999; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +/* editor */ +.jothidden { + display: none; +} +#jot { width: 100%; margin: 0px 2em 20px 0px; } -.profile-jot-text { +#jot .profile-jot-text { height: 1em; - width: 100%; + width: 99%; font-size: 10px; color: #999999; border: 1px solid #999999; padding: 0.3em; } -#profile-jot-plugin-wrapper, #profile-jot-submit-wrapper { - margin-top: 10px; +#jot #jot-tools { + margin: 0px; + padding: 0px; + height: 40px; + overflow: none; + width: 800px; + background-color: #0e232e; + border-bottom: 2px solid #9eabb0; } -#profile-jot-submit { +#jot #jot-tools li { + list-style: none; float: left; + width: 80px; + height: 40px; + border-bottom: 2px solid #9eabb0; } -#profile-upload-wrapper { - float: left; - margin-left: 10px; +#jot #jot-tools li a { + display: block; + color: #cccccc; + width: 100%; + height: 40px; + text-align: center; + line-height: 40px; + overflow: hidden; } -#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 { - float: left; - margin-left: 20px; +#jot #jot-tools li:hover { + background-color: #364e59; + border-bottom: 2px solid #bdcdd4; } -#profile-jot-perms { - float: left; - margin-left: 35px; - margin-right: 35px; +#jot #jot-tools li.perms { + float: right; + width: 40px; } -#profile-jot-perms-end { - /*clear: left;*/ - - height: 20px; +#jot #jot-tools li.perms a.unlock { + width: 30px; + border-left: 10px solid #cccccc; + background-color: #cccccc; } -#profile-jot-plugin-end { - clear: both; +#jot #jot-tools li.perms a.lock { + width: 30px; + border-left: 10px solid #666666; + background-color: #666666; } -.profile-jot-net { - float: left; - margin-right: 10px; - margin-top: 5px; - margin-bottom: 5px; +#jot #jot-tools li.submit { + float: right; + background-color: #cccccc; + border-bottom: 2px solid #cccccc; + border-right: 1px solid #666666; + border-left: 1px solid #666666; } -#profile-jot-networks-end { - clear: both; +#jot #jot-tools li.submit input { + border: 0px; + margin: 0px; + padding: 0px; + background-color: #cccccc; + color: #666666; + width: 80px; + height: 40px; + line-height: 40px; } -#profile-jot-end, #about-jot-end { - margin-bottom: 15px; +#jot #jot-tools li.submit input:hover { + background-color: #bdcdd4; + color: #666666; } -#about-jot-submit-wrapper { - margin-top: 15px; +#jot #jot-tools li.loading { + float: right; + background-color: #ffffff; + width: 20px; + vertical-align: center; + text-align: center; + border-top: 2px solid #9eabb0; + height: 38px; } -/** buttons **/ -input[type="submit"] { +#jot #jot-tools li.loading img { + margin-top: 10px; +} +#jot #jot-title { border: 0px; - background-color: #2d2d2d; - color: #ffffff; - padding: 0px 10px; - -moz-border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - border-radius: 5px 5px 5px 5px; - height: 18px; + margin: 0px; + height: 20px; + width: 700px; + font-weight: bold; + border: 1px solid #ffffff; +} +#jot #jot-title:-webkit-input-placeholder { + font-weight: normal; } +#jot #jot-title:-moz-placeholder { + font-weight: normal; +} +#jot #jot-title:hover { + border: 1px solid #999999; +} +#jot #jot-title:focus { + border: 1px solid #999999; +} +#jot #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; @@ -839,3 +1301,210 @@ ul.tabs li { float: left; margin-left: 20px; } +ul.tabs li .active { + border-bottom: 1px solid #005c94; +} +/** group editor **/ +#group-edit-desc { + margin-top: 1em; + color: #999999; +} +#group-update-wrapper { + height: auto; + overflow: auto; +} +#group-update-wrapper #group { + width: 300px; + float: left; + margin-right: 20px; +} +#group-update-wrapper #contacts { + width: 300px; + float: left; +} +#group-update-wrapper #group-separator { + display: none; +} +#group-update-wrapper .contact_list { + height: 300px; + border: 1px solid #364e59; + overflow: auto; +} +#group-update-wrapper .contact_list .contact-block-div { + width: 50px; + height: 50px; + float: left; +} +/** + * Form fields + */ +.field { + margin-bottom: 10px; + padding-bottom: 10px; + overflow: auto; + width: 100%; +} +.field label { + float: left; + width: 200px; +} +.field input, .field textarea { + width: 400px; +} +.field textarea { + height: 100px; +} +.field .field_help { + display: block; + margin-left: 200px; + color: #999999; +} +.field .onoff { + float: left; + width: 80px; +} +.field .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; +} +.field .onoff .off { + border-color: #666666; + padding-left: 40px; + background-position: left center; + background-color: #cccccc; + color: #666666; + text-align: right; +} +.field .onoff .on { + border-color: #204A87; + padding-right: 40px; + background-position: right center; + background-color: #D7E3F1; + color: #204A87; + text-align: left; +} +.field .hidden { + display: none!important; +} +.field.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; +} +.profile-match-wrapper .contact-photo { + width: 80px; + height: 80px; +} +.profile-match-wrapper .contact-photo img { + width: 80px; + height: 80px; +} +.profile-match-wrapper .contact-photo-menu-button { + left: 0px; + top: 63px; +} +/* page footer */ +footer { + height: 100px; + display: table-row; +} +.pager { + margin-top: 25px; + clear: both; +}