X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Ffrio%2Fcss%2Fstyle.css;h=f15faf3896afa28e4a5bc5e46b47d6db74cf471f;hb=2332d9f62ac651ee2991ce8df5a66e07f41ab864;hp=5895ad89f0f754791c553ae36c9876a9d76819e6;hpb=9375438216eb21e43fe43201844a5ebc9106d1ea;p=friendica.git diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 5895ad89f0..f15faf3896 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -91,10 +91,45 @@ blockquote { .hidden { display: none !important; } +.minimize { + max-height: 0px !important; + overflow: hidden !important; +} code { white-space: pre-wrap; } +.help-content-wrapper code, .help-aside-wrapper code {display: inline} +/** + * mobile aside + */ +@media screen and (max-width: 990px) { + aside{ + position: fixed!important; + top: 0!important; + background-color: #fff; + width: 100%; + max-width: 300px; + height: 100%; + padding-top: 100px; + z-index: 10; + } + aside::before { + content: " "; + position: fixed; + display: block; + top: 0; left: 300px; right: 0; bottom: 0; + background-color: rgba(0,0,0,0.4); + opacity: 0; + transition: opacity 0.5s; + } + aside.canvas-slid::before { + opacity: 1; + } + + /* prevent page scroll when the aside is opened **/ + body.aside-out { overflow: hidden; } +} /* * standard page elements */ @@ -114,7 +149,7 @@ code { line-height: 1.5; } -a#item-delete-selected { +#item-delete-selected { cursor: pointer; color: white; position: fixed; @@ -157,6 +192,10 @@ a#item-delete-selected { font-size: 14px; font-weight: 600; padding: 8px 16px; + color: inherit; +} +a.btn:hover { + color: #333; } .btn-default { @@ -189,12 +228,7 @@ a#item-delete-selected { outline: 0; background: $btn_primary_hover_color !important; } -.btn-default:active, .btn-default.active { - color: $link_color; -} -.btn-default:active:hover, .btn-default.active:hover { - color: $link_hover_color; -} + .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, @@ -210,6 +244,12 @@ a#item-delete-selected { padding-left: 0; padding-right: 0; } +.btn-clear, +.btn-clear:active { + border: 0; + background: transparent; + box-shadow: none; +} .btn-eventnav, btn-eventnav:hover { font-size: 16px; background: none; @@ -439,7 +479,7 @@ nav.navbar .nav>li>a:focus{ border-radius: 3px; } #topbar-first .nav>.account .dropdown-toggle { - padding: 10px 5px 8px; + padding: 10px 5px 0px; line-height: 1.1em; text-align: left } @@ -996,15 +1036,22 @@ aside .widget li a:hover { } /* forumlist widget */ -aside #datebrowse-sidebar .posted-date-selector-months{ - margin-left: 0; - margin-bottom: 10px; +aside > #datebrowse-sidebar li.posted-date-selector-months { + margin-bottom: 10px;; + padding: 0; width: 100% } -aside #datebrowse-sidebar .posted-date-selector-months li{ +aside > #datebrowse-sidebar li.posted-date-selector-months:hover { + border-left: none !important; + background-color: transparent !important; +} +aside > #datebrowse-sidebar .posted-date-selector-months > ul { + margin: 0; +} +aside > #datebrowse-sidebar .posted-date-selector-months > ul > li{ padding-left: 30px; } -aside #datebrowse-sidebar .posted-date-selector-months li:hover{ +aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover{ padding-left: 27px; } @@ -1090,6 +1137,9 @@ aside .vcard #wallmessage-link { padding-right: 20px; margin-left: -14px; } +#nav-short-info .contact-photo-wrapper.media-left { + float: left; +} #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { height: 34px; @@ -1135,6 +1185,10 @@ aside #follow-sidebar input { height: 30px; background-position: 10px 5px; } +aside #peoplefind-sidebar label, +aside #follow-sidebar label { + font-weight: normal; +} aside #peoplefind-sidebar .form-group-search .form-button-search, aside #follow-sidebar .form-group-search .form-button-search { padding: 2px 8px; @@ -1220,7 +1274,7 @@ section #jotOpen { #jot-text-wrap textarea { min-height: 100px; } -#profile-jot-wrapper button#jot-submit { +#profile-jot-wrapper button#profile-jot-submit { margin-top: 5px; } #profile-jot-wrapper #character-counter { @@ -1306,6 +1360,69 @@ section #jotOpen { } /* Filebrowser */ +.fbrowser .breadcrumb { + margin-bottom: 0px; +} +.fbrowser .path a:before { + content: ""; + padding: 0; +} +.fbrowser .breadcrumb > li:last-of-type a{ + color: #777; + pointer-events: none; + cursor: default; +} +.fbrowser .folders { + box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset; + padding-right: 1px; +} +.fbrowser .folders ul { + padding: 0px; + margin-left: -15px; + margin-bottom: 0px; + overflow-y: auto; + min-width: 100px; + max-height: calc(100vh - 210px); + line-height: 1.3; +} +@media (min-width: 768px) { + .fbrowser .folders ul { + max-height: calc(100vh - 255px); + } +} +.fbrowser .folders li { + padding-left: 20px; + padding-right: 10px; + padding-top: 3px; + padding-bottom: 3px; +} +.fbrowser .folders li:hover { + z-index: 2; + color: #555; + background-color: rgba(247, 247, 247, $contentbg_transp); + border-left: 3px solid $link_color !important; + padding-left: 17px; +} +.fbrowser .folders li a, +.fbrowser .folders li a:hover { + color: #555; + font-size: 13px; +} +.fbrowser .folders + .list { + padding-left: 10px; +} +.fbrowser .fbrowser-content-container { + overflow-y: auto; + max-height: calc(100vh - 175px); +} +@media (min-width: 768px) { + .fbrowser .fbrowser-content-container { + max-height: calc(100vh - 220px); + } +} +.fbrowser.image .photo-album-image-wrapper { + box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2); +} .fbrowser .profile-rotator-wrapper { min-height: 200px; } @@ -1330,6 +1447,12 @@ section #jotOpen { border-radius: 4px; position: relative; } +.panel.panel-inline { + margin-left: -15px; + margin-right: -15px; + margin-top: 15px; + padding: 15px; +} .panel .panel-body { padding: 15px; font-size: 14px; @@ -1553,6 +1676,38 @@ code > .hl-main { .hl-main ol { line-height: 1.7; } +.type-link img.attachment-image { + width: 100%; +} +.type-link blockquote, .type-video blockquote { + margin: 0; + padding: 10px 0; +} +.oembed.video .embed_video > div::before { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: inherit; + vertical-align: top; + font-size: 3em; + content: "\f01d"; + color: #fff; + bottom: 0px; + right: 10px; + position: absolute; +} +.oembed.video .embed_video > div { + background-color: rgba(0,0,0,0.2); + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + -ms-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} +.oembed.video .embed_video > div:hover { + background-color: rgba(0,0,0,0); +} .wall-item-tags, .itemedited { margin-top: 10px; @@ -1606,6 +1761,10 @@ code > .hl-main { .wall-item-actions .button-likes { text-transform: capitalize; } +.wall-item-actions button:hover { + color: #555; + text-decoration: underline; +} .wall-item-actions .separator { margin: 0 .3em; } @@ -1859,7 +2018,8 @@ ul.dropdown-menu li:hover { font-size: 12px; } .media-list > li:hover, -.media-list > li.selected { +.media-list > li.selected, +.media-list > li.active { border-left: 3px solid $link_color; background-color: rgba(247, 247, 247, $contentbg_transp); } @@ -1947,9 +2107,9 @@ ul.dropdown-menu li:hover { .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper, .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper, .message-content-wrapper, .apps-content-wrapper, .photos-content-wrapper, -.admin-content-wrapper, .group-content-wrapper, .viewcontacts-content-wrapper, -.dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper, -.nogroup-content-wrapper, .profperm-content-wrapper { +.admin-content-wrapper, .viewcontacts-content-wrapper, .dfrn_request-content-wrapper, +.friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper, +.profperm-content-wrapper { min-height: calc(100vh - 150px); padding: 15px; padding-bottom: 20px; @@ -1996,6 +2156,9 @@ ul.viewcontact_wrapper > li { position: relative;*/ /*border-left: 3px solid white;*/ } +.contact-wrapper .contact-photo-wrapper button { + padding: 0; +} .contact-wrapper.media { overflow: visible; word-wrap: break-word; @@ -2026,6 +2189,9 @@ ul.viewcontact_wrapper > li { .contact-wrapper .contact-photo-overlay-content.xl { font-size: 48px; } +.contact-wrapper .contact-photo-menu { + top: auto; +} .contact-entry-desc { color: #555; @@ -2099,6 +2265,61 @@ ul li:hover .contact-wrapper .contact-action-link:hover { padding-top: 10px; } +/* group edit page */ +.group-actions { + margin-top: 20px; + margin-bottom: 10px; + font-size: 30px; +} +.group-actions button, +.group-actions a { + font-size: 18px; +} +#group-edit-wrapper { + display: none; +} +#group-update-wrapper .contact-photo-overlay { + display: none; +} +#group-update-wrapper .viewcontact_wrapper .contact-group-actions { + height: 100%; + margin-top: -10px; + display: flex; +} +#group-update-wrapper .viewcontact_wrapper .contact-action-link { + opacity: 0.8; + font-size: 20px; + line-height: 50px; +} +#group-update-wrapper .viewcontact_wrapper .contact-action-link:hover { + opacity: 1; +} +#group-update-wrapper .shortmode { + height: 53px; + overflow: hidden; +} +#group-update-wrapper .shortmode .contact-photo { + height: 32px; + width: 32px; +} +#group-update-wrapper .shortmode .media { + overflow: hidden; +} +#group-update-wrapper .shortmode .contact-entry-desc { + font-size: 12px !important; +} +#group-update-wrapper .shortmode .contact-entry-desc h4.media-heading { + margin: 0; +} +#group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a { + font-size: 13px !important; + white-space: nowrap; +} +#group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel, +#group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network { + display: none; +} + /* private mail */ .message-content-wrapper > li { /* we need this overwriting because we have no template file @@ -2240,6 +2461,155 @@ ul li:hover .contact-wrapper .contact-action-link:hover { .event-buttons .plink-event-link { margin-left: 20px; } +.vevent .event-summary { + font-size: 16px; +} +.vevent .event-description { + padding: 10px 0; +} +.vevent .event-location .location { + font-size: inherit; + color: inherit; +} +.modal-body .vevent .event-summary { + display: none; +} +#event-preview .vevent .event-summary { + display: block; +} + +/* Event Cards */ +.event-card-details, .event-card-header { + width: 100%; +} +.event-card-header, .event-card-left-date { + float: left; +} +.vevent .event-card-header { + display: table; +} +.event-card-left-date { + width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */ +} +.event-card .event-date-wrapper > span { + display: block; + overflow: hidden; + text-align: center; + white-space: nowrap; +} +.event-card .event-date-wrapper .event-card-short-month { + font-size: 13px; + text-transform: uppercase; +} +.event-card .event-date-wrapper.medium .event-card-short-date { + font-size: 24px; + line-height: 28px; + margin-top: 2px; +} +.event-card .event-card-content { + width: 100%; + padding: 0 5px 0 15px; + box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset; + color: #777; + position: relative; +} +.event-card .event-card-content .event-map-btn { + position: absolute; + right: 0; + top:0; + line-height: 15px; +} +.event-card .event-card-title { + font-size: 14px; + color: #555; + line-height: 15px; + font-weight: bold; + margin: 0; +} +.event-card .event-card-location { + margin-top: 10px; + font-size: 13px; +} +.event-card .event-card-location br { + content: " "; +} +.event-card .event-card-location br::after { + content: " "; +} +.event-card-profile-name a { + color: $link_color; +} +.event-card-profile-name a:hover { + color: $link_hover_color; +} +.event-card .event-card-content .event-location-map { + position: absolute; + left: -9999px; + top: -9999px; +} +.event-card .event-card-content .event-location-map .map{ + margin-top: 10px; +} +.event-card .description { + margin-top: 10px; + box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset; +} +/* Photos Pages */ +#photo-photo { + position: relative; +} +.photo-next-link, .photo-prev-link { + height: 64px; + margin-top: -32px; + opacity: 0; + position: absolute; + top: 50%; + transform: translateZ(0); + transition: opacity .2s; + /*width: 27px;*/ + width: 100px; + z-index: 11; + font-size: 64px; + color: #fff; + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; +} +.photo-next-link > i, .photo-prev-link > i { + vertical-align: super; +} +.photo-next-link > i { + float: right; +} +.photo-prev-link { + left: 20px; +} +.photo-next-link { + right: 20px; +} +#photo-photo:hover .photo-next-link, +#photo-photo:hover .photo-prev-link { + opacity: 0.4; +} +#photo-photo .photo-next-link:hover, +#photo-photo .photo-prev-link:hover { + opacity: 1; + color: #fff; +} +.photo-comment-wrapper .comment { + position: relative; +} +.photo-comment-wrapper .wall-item-content { + color: #555; + font-size: 13px; +} +.photo-comment-wrapper .comment-wwedit-wrapper, +.photo-comment-wrapper .wall-item-outside-wrapper.media:first-child { + margin-top: 15px; +} + /* Profiles Page */ .profile-listing-table { display: table; @@ -2447,6 +2817,15 @@ section.help-content-wrapper li { font-size: 0.96em; } +/* Register Page*/ +#register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper { + margin-top: 20px; +} +#register-openid-end, #register-nickname-end +{ + margin-top: 40px; +} + /* * Overwriting for transparency and other colors */ @@ -2612,3 +2991,4 @@ body .tread-wrapper .hovercard:hover .hover-card-content a { section .profile-match-wrapper { float: left; } +