X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Ffrio%2Fcss%2Fstyle.css;h=312bee263eb0340486216d4d9c210591c604b499;hb=c9f02d534e2016acf18d7fa18db193d056495841;hp=8cc8997930ed7792b179cd26536b89fea4f1ba34;hpb=4a473611163a12b48d3bbad71dc54765be8789f9;p=friendica.git diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 8cc8997930..312bee263e 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -73,7 +73,7 @@ aside hr, section hr { border-color: rgba(238, 238, 238, $contentbg_transp); } -iframe, img { +iframe, img, video { max-width: 100%; } blockquote { @@ -1036,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; } @@ -1080,6 +1087,9 @@ color: rgba(255,255,255,.85); aside .vcard #profile-photo-wrapper:hover .tool .action { opacity: 1; } +aside .vcard #profile-photo-wrapper.crop-preview { + padding: 0; +} aside .vcard .profile-header { margin-bottom: 20px; } @@ -1130,6 +1140,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; @@ -1175,6 +1188,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; @@ -1224,6 +1241,11 @@ aside #group-sidebar li .group-edit-tool:first-child { width: 75px; border-radius: 4px; } + +/* Tag cloud widget */ +.tagblock.widget > .tag-cloud { + text-align: center; +} /* Section */ section ul.tabs { display: none !important; @@ -1260,7 +1282,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 { @@ -1662,6 +1684,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; @@ -1720,7 +1774,7 @@ code > .hl-main { text-decoration: underline; } .wall-item-actions .separator { - margin: 0 .3em; + margin: 0 .3em; } /* wall item hover effects */ @@ -2061,7 +2115,7 @@ 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, .viewcontacts-content-wrapper, .dfrn_request-content-wrapper, +#adminpage, .viewcontacts-content-wrapper, .dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper, .profperm-content-wrapper { min-height: calc(100vh - 150px); @@ -2083,6 +2137,11 @@ ul.dropdown-menu li:hover { .section-title-wrapper { overflow: hidden; } +/* Home and Login Page */ +body.mod-home .navbar #nav-login, +body.mod-login .navbar #nav-login { + display: none; +} /* Profile-page */ #profile-content-standard, #profile-content-advanced { @@ -2415,6 +2474,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; @@ -2473,6 +2681,53 @@ ul li:hover .contact-wrapper .contact-action-link:hover { margin-left: 20px; } +/* Emulates Bootstrap display */ +.settings-block { + margin: 0 -15px 5px; + color: #333; + background-color: rgba(255,255,255,0.95); + border-radius: 4px; + padding: 10px 15px; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; + -moz-box-shadow: 0 0 3px #dadada; +} + +.settings-block.fakelink, .settings-block > .fakelink { + padding: 10px 25px; + display: block; +} +.settings-block > .fakelink { + margin: -10px -15px 10px -15px; + border-radius: 4px 4px 0 0; +} + +.settings-block.fakelink:hover, .settings-block > .fakelink:hover { + color: $link_hover_color; +} +.settings-block.fakelink > h3, .settings-block > .fakelink > h3 { + margin: 0; + padding: 0; + color: $link_color; + font-size: 18px; +} + +.fakelink > h3:before { + padding-right: 10px; +} +.settings-block.fakelink > h3:before { + font-family: FontAwesome; + content: "\f0da"; /* Right Plain Pointer */ +} +.settings-block > .fakelink > h3:before { + font-family: FontAwesome; + content: "\f0d7"; /* Bottom Plain Pointer */ +} + +h3.connector { + line-height: 40px; +} + /* Intro Notifications */ ul.notif-network-list { margin-left: -15px; @@ -2622,6 +2877,70 @@ section.help-content-wrapper li { font-size: 0.96em; } +/*Admin Page*/ +#adminpage #frio_background_image .image-select { + display: none; +} +#adminpage #frio_background_image.input-group { + display: block; +} +#admin-summary-wrapper { + padding-top: 10px; +} +#adminpage ul#pluginslist, li.plugin { + padding-top: 10px; +} +#adminpage li .icon { + display: inline-block; + vertical-align: text-top; + position: relative; + padding-left: 5px; +} +#adminpage li .icon:before { + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + left: 0; + margin-left: -20px; + margin-top: 2px; + border: 1px solid #cccccc; + border-radius: 3px; + background-color: #fff; + -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; +} +#adminpage li .icon.on:after { + font-family: "FontAwesome"; + content: "\f00c"; + display: inline-block; + position: absolute; + width: 16px; + height: 16px; + left: 0; + top: 0; + margin-left: -20px; + margin-top: 2px; + padding-left: 3px; + padding-top: 1px; + font-size: 11px; + color: #555555; +} +#adminpage .plugin .desc { + padding-left: 10px; +} + +/* 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 */ @@ -2787,3 +3106,99 @@ body .tread-wrapper .hovercard:hover .hover-card-content a { section .profile-match-wrapper { float: left; } + +/** + * Login page + */ +#login-submit-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} +#lost-password-link { flex-grow: 2; } + +.mod-home.is-not-singleuser, +.mod-login { + background-color: $login_bg_color; + background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image); + background-size: cover; + background-attachment: fixed; + background-position: center; + padding-top: 0; +} +.mod-home.is-not-singleuser nav.navbar, +.mod-login nav.navbar { background-color: transparent } +.mod-home.is-not-singleuser #topbar-second, +.mod-login #topbar-second { + background-color: transparent; + box-shadow: unset; + border: 0 +} +.mod-home.is-not-singleuser .login-content, +.mod-login .login-content { + color: #eee; + margin-top: 2.5%; +} + +.mod-home.is-not-singleuser .login-form > #login-form label, +.mod-login #content #login-form label { + color: #eee; +} + + +.mod-home.is-not-singleuser .login-panel-content, +.mod-login .login-panel-content { + background-color: rgba(255,255,255,.85); +} + +/* Medium devices (desktops, 992px and up) */ +@media (min-width: 992px) { + .mod-home.is-not-singleuser #content, + .mod-login #content { + margin-top: 100px!important; + } + + .mod-home.is-not-singleuser .login-form > #login-form, + .mod-login #content #login-form { + background-color: #fff; + padding: 1em; + position: relative; + margin-top: 4em; + } + + .mod-home.is-not-singleuser .login-form > #login-form label, + .mod-login #content #login-form label { + color: #444; + } + + .mod-home.is-not-singleuser .login-form > #login-form::before, + .mod-login #content #login-form::before { + display: block; + position: absolute; + content: " "; + background-color: rgba(255,255,255,0.1); + width:90%; + height: 110%; + top: -5%; + left: 5%; + z-index: -1; + } + + .mod-home.is-not-singleuser .login-form > #login-form::after, + .mod-login #content #login-form::after { + display: block; + position: absolute; + content: " "; + background-color: rgba(255,255,255,0.2); + width:80%; + height: 120%; + top: -10%; + left: 10%; + z-index: -1; + } + +} + + +