X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Fquattro%2Fquattro.less;h=0dac79bf9c2ceedce648491342fe22948f9b6fd4;hb=a03e6b96ea96c81d4cb1a1e8c4e86a8a3a82863e;hp=fca65c90763e6cc97d6e69ca3852399f5b9b9656;hpb=d5a6e7b1767ebc337f31745984f1ce0904b77780;p=friendica.git diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less old mode 100755 new mode 100644 index fca65c9076..0dac79bf9c --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -27,13 +27,17 @@ h4 { font-size: 1.1em } .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; + .transition(); } +.transition(@d: 0.2s){ + -webkit-transition: all @d ease-in-out; + -moz-transition: all @d ease-in-out; + -o-transition: all @d ease-in-out; + -ms-transition: all @d ease-in-out; + transition: all @d ease-in-out; +} + a, a:link { color: @Link; text-decoration: none; } a:visited { color: @LinkVisited; text-decoration: none; } @@ -81,12 +85,17 @@ code { height: auto; overflow: auto; .label { float: left;} .action { float: right; } + > img { float: left; } } /* popup notifications */ +#jGrowl.top-right { + top: 30px; + right: 15px; +} div.jGrowl div.notice { background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center; color: @NoticeColor; @@ -227,6 +236,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; } + } } @@ -264,7 +279,7 @@ ul.menu-popup { -/* aside */ +/* aside 230px*/ aside { display: table-cell; vertical-align: top; @@ -272,6 +287,8 @@ aside { padding:0px 10px 0px 20px; border-right: 1px solid @AsideBorder; + .profile-edit-side-div { display: none; } + .vcard { .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .title { margin-bottom: 5px; } @@ -319,41 +336,6 @@ aside { 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, @@ -432,11 +414,11 @@ aside { } -/* section */ +/* section 800px */ section { display: table-cell; vertical-align: top; - width: 800px; + width: 770px; padding:0px 20px 0px 10px; } @@ -446,14 +428,15 @@ section { position: relative; padding: 10px; margin-bottom: 20px; - width: 780px; + width: 750px; + border-bottom: 1px solid @ThreadBottomBorderColor; } .wall-item-decor { position: absolute; left: 97%; top: -10px; width: 16px;} .unstarred { display: none; } .wall-item-container { display: table; - width: 780px; + width: 750px; .wall-item-item, .wall-item-bottom { display: table-row; } @@ -507,19 +490,35 @@ section { .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-wrapper { margin-left: 16px; } + .contact-photo { + width: 32px; height: 32px; } .contact-photo-menu-button { top: 15px !important; - left: 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; @@ -551,13 +550,12 @@ section { .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 { @@ -667,7 +665,7 @@ section { #jot-tools { margin: 0px; padding: 0px; height: 40px; overflow: none; - width: 800px; + width: 770px; background-color: @JotToolsBackgroundColor; border-bottom: 2px solid @JotToolsBorderColor; li { @@ -739,7 +737,7 @@ section { border: 0px; margin: 0px; height: 20px; - width: 700px; + width: 500px; font-weight: bold; border: 1px solid @BodyBackground; @@ -756,14 +754,23 @@ section { } #character-counter { - width: 80px; + 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 } + } } @@ -938,6 +945,10 @@ ul.tabs { textarea { width: 400px; } + input[type="checkbox"], input[type="radio"]{ + width: auto; + } + textarea { height: 100px; } .field_help { display: block; @@ -981,6 +992,7 @@ ul.tabs { &.radio .field_help { margin-left: 0px; } } + #profile-edit-links li { list-style: none; margin-top: 10px; @@ -1063,12 +1075,102 @@ ul.tabs { width: 50px; float: left; } -/* photo */ -.lframe { +/* photo albums */ +@photosize: 150px; + +#photo-edit-link-wrap { margin-bottom: 10px; } + +#album-edit-link { + border-right: 1px solid @MenuBorder; + float: left; + padding-right: 5px; + margin-right: 5px; +} +#photo-edit-link, +#album-edit-link a { + background: url("../../../images/icons/16/edit.png") no-repeat left center; + padding-left: 18px; +} +#photo-toprofile-link { + background: url("../../../images/icons/16/user.png") no-repeat left center; + padding-left: 18px; +} + +.photos-upload-link a, +#photo-top-upload-link { + background: url("../../../images/icons/16/add.png") no-repeat left center; + padding-left: 18px; +} + + +.photo-top-image-wrapper, +.photo-album-image-wrapper { float: left; margin: 0px 10px 10px 0px; + 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); + .transition(0.5s); + } } +#photo-photo { + display: block; width: 660px; + padding: 50px; margin-bottom: 0px; + text-align: center; + background-color: @Grey3; + img { max-width: 560px; } +} +#photo-album-title { + background: url("../../../images/icons/22/image.png") no-repeat top left; + padding-left: 23px; + min-height: 22px; + a { display: block; padding-top: 5px; } +} + +#photo-caption { + display: block; width: 660px; + min-height: 55px; + background-color: @Grey2; + padding:0 50px 0 50px; +} +#photo-next-link > a > div { + background: url("icons/next.png") no-repeat center center; + float: right; + width: 50px; height: 50px; +} +#photo-prev-link > a > div { + background: url("icons/prev.png") no-repeat center center; + float: left; + width: 50px; height: 50px; +} +#photo-like-div { + display: block; width: 660px; + height: 30px; + background-color: @Grey2; + padding:0 50px 0 50px; + .icon {float: left;} + .like-rotator {float: right;} +} /* profile match wrapper */ .profile-match-wrapper { float: left; @@ -1085,6 +1187,59 @@ ul.tabs { } } +/* 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; } @@ -1094,3 +1249,134 @@ footer { height: 100px; display: table-row; } clear: both; } +/** + * ADMIN + */ +#pending-update { + float:right; + color: #ffffff; + font-weight: bold; + background-color: #FF0000; + padding: 0em 0.3em; + +} +#adminpage { + dl { + clear: left; + margin-bottom: 2px; + padding-bottom: 2px; + border-bottom: 1px solid black; + } + dt { + width: 200px; + float: left; + font-weight: bold; + } + dd { + margin-left: 200px; + } + h3 { + border-bottom: 1px solid #cccccc; + } + .field label { + font-weight: bold; + } + .submit { + clear:left; + text-align: right; + } + #pluginslist { + margin: 0px; padding: 0px; + } + .plugin { + list-style: none; + display: block; + border: 1px solid #888888; + padding: 1em; + margin-bottom: 5px; + clear: left; + desc { + margin-left: 2.5em; + } + } + .toggleplugin { + float:left; + margin-right: 1em; + } + table { + width:100%; + border-bottom: 1px solid #000000; + margin: 5px 0px; + th { + text-align: left; + } + td .icon { + float: left; + } + tr:hover { + background-color: #bbc7d7; + } + } + table#users img { + width: 16px; height: 16px; + } + .selectall { text-align: right; } +} + +/* edit buttons for comments */ + +.icon.dim { opacity: 0.3;filter:alpha(opacity=30); } +[class^="comment-edit-bb"] { + list-style: none; + display: none; + margin: 0px 0 0px 60px; + width: 75%; +} +[class^="comment-edit-bb"] > li { + display: inline-block; + margin: 10px 10px 0 0; + visibility: none; +} +[class^="comment-edit-bb-end"] { + clear: both; +} +.editicon { + display: inline-block; + width: 16px; + height: 16px; + background-image: url(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; } +.italicbb:hover { background-position: -16px -16px; } +.underlinebb { background-position: -32px 0px; } +.underlinebb:hover { background-position: -32px -16px; } +.quotebb { background-position: -48px 0px; } +.quotebb:hover { background-position: -48px -16px; } +.codebb { background-position: -64px 0px; } +.codebb:hover { background-position: -64px -16px; } +.imagebb { background-position: -80px 0px; } +.imagebb:hover { background-position: -80px -16px; } +.urlbb { background-position: -96px 0px; } +.urlbb:hover { background-position: -96px -16px; } +.videobb { background-position: -112px 0px; } +.videobb:hover { background-position: -112px -16px; } + +.attachtype { + display: block; width: 20px; height: 23px; + float: left; + background-image: url('../../../images/content-types.png'); +} + +.body-attach { + margin-top: 10px; +} + +.type-video { background-position: 0px 0px; } +.type-image { background-position: -20px 0px; } +.type-audio { background-position: -40px 0px; } +.type-text { background-position: -60px 0px; } +.type-unkn { background-position: -80px 0px; }