From 7c2608e07d54fe9f861cc9bcafa9e204adb05251 Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Sat, 23 May 2015 22:51:34 +0200 Subject: [PATCH] quattro: style video delete button --- view/templates/video_top.tpl | 2 +- view/theme/quattro/dark/style.css | 28 ++- view/theme/quattro/green/style.css | 28 ++- view/theme/quattro/lilac/style.css | 28 ++- view/theme/quattro/quattro.less | 283 ++++++++++++++++------------- 5 files changed, 219 insertions(+), 150 deletions(-) diff --git a/view/templates/video_top.tpl b/view/templates/video_top.tpl index 207dd83f2f..8348d702cd 100644 --- a/view/templates/video_top.tpl +++ b/view/templates/video_top.tpl @@ -11,7 +11,7 @@ {{*
{{$video.album.name}}
*}} {{if $delete_url }}
- +
{{/if}} diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css index 5f4b005c8e..3c109a440e 100644 --- a/view/theme/quattro/dark/style.css +++ b/view/theme/quattro/dark/style.css @@ -514,7 +514,6 @@ header { margin: 0px; padding: 0px; /*width: 100%; height: 12px; */ - z-index: 110; color: #ffffff; } @@ -844,7 +843,6 @@ aside #profiles-menu { overflow: auto; height: auto; /*.contact-block-div { width:60px; height: 60px; }*/ - } #contact-block .contact-block-h4 { float: left; @@ -926,7 +924,6 @@ aside #profiles-menu { margin-bottom: 2em; /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ - } .widget h3 { padding: 0px; @@ -1208,7 +1205,6 @@ section { 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; @@ -1283,9 +1279,6 @@ section { opacity: 0.5; }*/ .wwto { - position: absolute !important; - width: 25px; - height: 25px; background: #FFFFFF; border: 2px solid #364e59; height: 25px; @@ -1969,6 +1962,27 @@ ul.tabs li .active { width: 50px; float: left; } +/* videos page */ +.videos .video-top-wrapper { + width: 200px; + float: left; + margin: 0px 10px 10px 0px; + position: relative; +} +.videos .video-top-wrapper .video-js { + width: 200px!important; + height: 132px!important; +} +.videos .video-top-wrapper .video-delete { + position: absolute; + opacity: 0; + right: 0px; + top: 0px; + transition: opacity 0.5s; +} +.videos .video-top-wrapper:hover .video-delete { + opacity: 1; +} /* photo albums */ #photo-edit-link-wrap { margin-bottom: 10px; diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css index c2826a3c0c..5e355ffa70 100644 --- a/view/theme/quattro/green/style.css +++ b/view/theme/quattro/green/style.css @@ -514,7 +514,6 @@ header { margin: 0px; padding: 0px; /*width: 100%; height: 12px; */ - z-index: 110; color: #ffffff; } @@ -844,7 +843,6 @@ aside #profiles-menu { overflow: auto; height: auto; /*.contact-block-div { width:60px; height: 60px; }*/ - } #contact-block .contact-block-h4 { float: left; @@ -926,7 +924,6 @@ aside #profiles-menu { margin-bottom: 2em; /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ - } .widget h3 { padding: 0px; @@ -1208,7 +1205,6 @@ section { 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; @@ -1283,9 +1279,6 @@ section { opacity: 0.5; }*/ .wwto { - position: absolute !important; - width: 25px; - height: 25px; background: #FFFFFF; border: 2px solid #364e59; height: 25px; @@ -1969,6 +1962,27 @@ ul.tabs li .active { width: 50px; float: left; } +/* videos page */ +.videos .video-top-wrapper { + width: 200px; + float: left; + margin: 0px 10px 10px 0px; + position: relative; +} +.videos .video-top-wrapper .video-js { + width: 200px!important; + height: 132px!important; +} +.videos .video-top-wrapper .video-delete { + position: absolute; + opacity: 0; + right: 0px; + top: 0px; + transition: opacity 0.5s; +} +.videos .video-top-wrapper:hover .video-delete { + opacity: 1; +} /* photo albums */ #photo-edit-link-wrap { margin-bottom: 10px; diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css index 28c5cd47a9..0f497d492f 100644 --- a/view/theme/quattro/lilac/style.css +++ b/view/theme/quattro/lilac/style.css @@ -514,7 +514,6 @@ header { margin: 0px; padding: 0px; /*width: 100%; height: 12px; */ - z-index: 110; color: #ffffff; } @@ -844,7 +843,6 @@ aside #profiles-menu { overflow: auto; height: auto; /*.contact-block-div { width:60px; height: 60px; }*/ - } #contact-block .contact-block-h4 { float: left; @@ -926,7 +924,6 @@ aside #profiles-menu { margin-bottom: 2em; /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ - } .widget h3 { padding: 0px; @@ -1208,7 +1205,6 @@ section { 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; @@ -1283,9 +1279,6 @@ section { opacity: 0.5; }*/ .wwto { - position: absolute !important; - width: 25px; - height: 25px; background: #FFFFFF; border: 2px solid #364e59; height: 25px; @@ -1969,6 +1962,27 @@ ul.tabs li .active { width: 50px; float: left; } +/* videos page */ +.videos .video-top-wrapper { + width: 200px; + float: left; + margin: 0px 10px 10px 0px; + position: relative; +} +.videos .video-top-wrapper .video-js { + width: 200px!important; + height: 132px!important; +} +.videos .video-top-wrapper .video-delete { + position: absolute; + opacity: 0; + right: 0px; + top: 0px; + transition: opacity 0.5s; +} +.videos .video-top-wrapper:hover .video-delete { + opacity: 1; +} /* photo albums */ #photo-edit-link-wrap { margin-bottom: 10px; diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less index 172fad31b5..56eab54cc9 100644 --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -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; } @@ -56,7 +56,7 @@ blockquote { 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 { @@ -81,8 +81,8 @@ code { list-style: none; border: 3px solid @MenuBorder; z-index: 100000; - - .shadow(); + + .shadow(); } @@ -134,7 +134,7 @@ header { #site-location { display: none; } - + #banner { overflow: hidden; text-align: center; @@ -145,7 +145,7 @@ header { } } /* nav */ -nav { +nav { width: 100%; height: 32px; position: fixed; left: 0px; top: 0px; padding: 0px; @@ -159,13 +159,13 @@ nav { ul { margin: 0px; padding: 0px 20px; - li { - list-style: none; + li { + list-style: none; margin: 0px; padding: 0px; float: left; .menu-popup{ left: 0px; right: auto; } } - + } .nav-menu-icon { @@ -174,11 +174,11 @@ nav { padding: 5px; margin: 0px 10px; .roundtop(); - + &.selected { background-color: @NavbarSelectedBg; } - + img { width: 22px; height: 22px; } .nav-notify { top: 3px; } } @@ -193,7 +193,7 @@ nav { &.selected { border-bottom: 3px solid @NavbarSelectedBorder; } - + } .nav-notify { @@ -207,26 +207,26 @@ nav { 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; } } - + #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.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; } } @@ -242,9 +242,9 @@ ul.menu-popup { 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; } @@ -256,12 +256,12 @@ 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 */ @@ -275,7 +275,7 @@ ul.menu-popup { z-index:100000; .shadow(); } -.autocomplete > div, +.autocomplete > div, .acpopupitem { color: @MenuItem; padding: 4px; clear:left; @@ -305,7 +305,7 @@ ul.menu-popup { /* aside 230px*/ -aside { +aside { display: table-cell; vertical-align: top; width: 200px; @@ -320,7 +320,7 @@ aside { 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 { @@ -337,7 +337,7 @@ aside { text-transform:uppercase; padding: 4px 2px 2px 35px; margin-top: 3px; - + &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; } } #dfrn-request-link { @@ -348,7 +348,7 @@ aside { font-weight: bold; text-transform:uppercase; padding: 4px 2px 2px 35px; - + &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; } } @@ -420,11 +420,11 @@ aside { width: 60px; height: 60px; }*/ - + /* widget */ .widget { margin-bottom: 2em; - + h3 { padding: 0px; margin: 2px;} .action { .opaque(0.1); } input.action { .opaque(0.5); } @@ -434,14 +434,14 @@ aside { 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 */ @@ -452,7 +452,7 @@ aside { /* section 800px */ -section { +section { display: table-cell; vertical-align: top; width: 770px; @@ -464,7 +464,7 @@ section { } /* wall item */ -.tread-wrapper { +.tread-wrapper { background-color: @ThreadBackgroundColor; position: relative; padding: 10px; @@ -478,10 +478,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 { @@ -489,8 +489,8 @@ section { vertical-align: top; text-align: left; width: 60px; - - } + + } .wall-item-location { word-wrap: break-word; width: 50px; @@ -503,45 +503,45 @@ 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; a { margin-right: 3em; } } - .wall-item-actions-tools { float: right; width: 15%; + .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; } .wall-item-links { padding-left: 12px; } - + .commentbox { height: 0px; overflow: hidden; @@ -551,7 +551,7 @@ section { } .transition(); } - + &:hover .commentbox { height:auto; overflow: visible; .wall-item-comment-wrapper { @@ -568,9 +568,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; @@ -581,8 +581,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; @@ -593,7 +593,7 @@ section { color: @CommentBoxFullColor; border: 1px solid @CommentBoxFullBorderColor; } - + &.photo { margin: 1em 2em 1em 0px; } @@ -606,10 +606,10 @@ section { 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; @@ -617,8 +617,8 @@ 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; } @@ -664,9 +664,9 @@ section { opacity: 0.5; }*/ -.wwto { - position: absolute !important; - width: 25px; height: 25px; +.wwto { + position: absolute !important; + width: 25px; height: 25px; background: #FFFFFF; border: 2px solid @Metalic3; height: 25px; @@ -676,7 +676,7 @@ section { position: absolute !important; top: 40px; left: 30px; - + .shadow(0px, 0px) } .wwto .contact-photo { width: 25px; height: 25px; } @@ -695,7 +695,7 @@ section { float: none; margin-right: 0px; } - + } .type-link { blockquote { @@ -715,14 +715,14 @@ section { 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; } } @@ -735,7 +735,7 @@ blockquote.shared_content { .oembed.video { - > a.embed_video { + > a.embed_video { display: block; float: none; > div { @@ -753,45 +753,45 @@ blockquote.shared_content { .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; } } } - } + } } } } @@ -820,8 +820,8 @@ 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 { - position: absolute; +#contacts-actions { + position: absolute; left: 800px; width: 200px; background-color: @MenuBg; @@ -845,12 +845,12 @@ span[id^="showmore-wrap"] { #contacts-actions { left: 40px; } } -.contact-photo { +.contact-photo { width: 48px; height: 48px; img { width: 48px; height: 48px; } overflow: hidden; display: block; - } + } .contact-photo-menu-button { display: none; position: absolute; @@ -864,30 +864,30 @@ span[id^="showmore-wrap"] { height: 90px; padding-right: 10px; margin: 0 10px 10px 0px; - .contact-photo-wrapper { - float: left; + .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; top: 63px; - } + } } .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-details { color: @Grey3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -899,8 +899,8 @@ span[id^="showmore-wrap"] { width: 100%; margin: 0px 2em 20px 0px; - - + + .profile-jot-text { height: 1em; width: 99%; font-size: 10px; color: @CommentBoxEmptyColor; @@ -947,7 +947,7 @@ span[id^="showmore-wrap"] { border-left: 10px solid @JotPermissionLockBackgroundColor; background-color: @JotPermissionLockBackgroundColor; } - + } li.submit { float: right; @@ -993,12 +993,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; @@ -1007,7 +1007,7 @@ span[id^="showmore-wrap"] { line-height: 20px; padding-right: 20px; } - + #jot-category { border: 0px; margin: 0px; @@ -1076,7 +1076,7 @@ span[id^="showmore-wrap"] { overflow: auto; } #acl-list-content { - + } .acl-list-item { display: block; @@ -1093,7 +1093,7 @@ span[id^="showmore-wrap"] { 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 a { font-size: 8px; display: block; width: 40px; @@ -1138,12 +1138,12 @@ ul.tabs { li { float: left; margin-left: 20px; - + .active { border-bottom: 1px solid @LinkVisited; } } - + } @@ -1152,7 +1152,7 @@ ul.tabs { #group-update-wrapper{ height: auto; overflow: auto; #group { - width:300px; + width:300px; float:left; margin-right:20px; } @@ -1194,13 +1194,13 @@ ul.tabs { input[type="checkbox"], input[type="radio"]{ width: auto; } - + textarea { height: 100px; } .field_help { display: block; margin-left: 200px; color: @FieldHelpColor; - + } @@ -1275,7 +1275,7 @@ ul.tabs { } #profile-edit-profile-name, #profile-edit-name, -#gender-select, +#gender-select, #profile-edit-pdesc, #profile-edit-gender, #profile-edit-dob, @@ -1300,7 +1300,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; @@ -1321,11 +1321,38 @@ ul.tabs { width: 50px; float: left; } +/* videos page */ +.videos { + .video-top-wrapper { + width: 200px; float: left; + margin: 0px 10px 10px 0px; + position: relative; + + .video-js { + width: 200px!important; + height: 132px!important; + } + + .video-delete { + position: absolute; + opacity: 0; + right: 0px; + top: 0px; + 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; @@ -1358,21 +1385,21 @@ ul.tabs { 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; @@ -1392,8 +1419,8 @@ ul.tabs { background: url("../../../images/icons/22/image.png") no-repeat top left; padding-left: 23px; min-height: 22px; - padding-top: 6px; - /* a { display: block;}*/ + padding-top: 6px; + /* a { display: block;}*/ } #photo-caption { @@ -1441,14 +1468,14 @@ ul.tabs { top: 10px; left: -10px; } - .contact-photo { + .contact-photo { width: 80px; height: 80px; img { width: 80px; height: 80px; } } .contact-photo-menu-button { left: 0px; top: 63px; - } + } } /* messages */ @@ -1469,10 +1496,10 @@ 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; a { display: block; } @@ -1481,7 +1508,7 @@ ul.tabs { .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; } } @@ -1493,7 +1520,7 @@ ul.tabs { span { float: left; overflow: hidden; padding: 4px 0px 0px 10px;} .mail-delete { float: right; .opaque(0.5);} &:hover .mail-delete { .opaque(1); } - + } /* theme screenshot */ @@ -1522,7 +1549,7 @@ footer { height: 100px; display: table-row; } font-weight: bold; background-color: #FF0000; padding: 0em 0.3em; - + } #adminpage { dl { @@ -1569,20 +1596,20 @@ footer { height: 100px; display: table-row; } } table { width:100%; - border-bottom: 1px solid #000000; + border-bottom: 1px solid #000000; margin: 5px 0px; - th { + 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; } }