X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Ffrio%2Fcss%2Fstyle.css;h=8cc8997930ed7792b179cd26536b89fea4f1ba34;hb=fd5d058156185c6c02c1285a794139d07f4d13ce;hp=b272e3f0de05db7b00bba10547e1600f94ebdd89;hpb=214c76fec79e2507e8de61cc683502d5f7cf2356;p=friendica.git diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index b272e3f0de..8cc8997930 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -51,13 +51,14 @@ body a[name]:not([href]) { visibility: hidden; } -body a:hover, body .btn-link:hover, -body a:focus, body .btn-link:focus, -body a:active, body .btn-link:active, -body a.active, body .btn-link.active { +body a:hover, .btn-link:hover, +body a:focus, .btn-link:focus, +body a:active, .btn-link:active, +body a.active, .btn-link.active { /*color: #59d6e4;*/ color: $link_hover_color; text-decoration: none; + outline: none; } .wall-item-container a:hover { @@ -90,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 */ @@ -113,7 +149,7 @@ code { line-height: 1.5; } -a#item-delete-selected { +#item-delete-selected { cursor: pointer; color: white; position: fixed; @@ -156,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 { @@ -188,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, @@ -204,10 +239,16 @@ a#item-delete-selected { } .btn-link { + border: 0; color: $link_color; + padding-left: 0; + padding-right: 0; } -.btn-link:focus, .btn-link:hover { - color: #23527c; +.btn-clear, +.btn-clear:active { + border: 0; + background: transparent; + box-shadow: none; } .btn-eventnav, btn-eventnav:hover { font-size: 16px; @@ -403,7 +444,8 @@ header #banner #logo-img, top: 2px; right: 10px } -.topbar .dropdown-header .dropdown-header-link a { +.topbar .dropdown-header .dropdown-header-link a, +.topbar .dropdown-header .dropdown-header-link .btn-link { /*color: #6fdbe8!important;*/ color: $link_color !important; font-size: 12px; @@ -437,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 } @@ -651,10 +693,12 @@ nav.navbar a, nav.navbar .btn-link { #myNavmenu li.nav-sitename { font-weight: bold; } -#topbar-first .dropdown.account>a, -#topbar-first .dropdown.account.open>a, -#topbar-first .dropdown.account>a:hover, -#topbar-first .dropdown.account.open>a:hover { +#topbar-first .dropdown.account > a, +#topbar-first .dropdown.account.open > a, +#topbar-first .dropdown.account > button, +#topbar-first .dropdown.account.open > button, +#topbar-first .dropdown.account > :hover, +#topbar-first .dropdown.account.open > :hover { background-color: $nav_bg; } #topbar-first .dropdown.account li#nav-sitename { @@ -703,7 +747,7 @@ nav.navbar a, nav.navbar .btn-link { @media screen and (max-width: 767px) { #topbar-second > .container, #topbar-second #navbar-button { - padding: 0; + padding: 0; } } #topbar-second .dropdown-menu { @@ -822,18 +866,24 @@ nav.navbar a, nav.navbar .btn-link { } /* Dropdown Menus */ +.nav > li > .btn-link { + position: relative; + display: block; + padding: 10px 15px; +} +.nav > li > .btn-link:focus, +.nav > li > .btn-link:hover { + text-decoration: none; + background-color: #eee; +} +.nav .open > .btn-link, +.nav .open > .btn-link:focus, +.nav .open > .btn-link:hover { + background-color: #eee; + border-color: #337ab7; +} .nav-pills > li > .btn-link { - border-radius: 4px; -} -.dropdown-menu > li > :focus, -.dropdown-menu > li > :hover { - background-color: #e8e8e8; - background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%); - background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%); - background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8)); - background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); - background-repeat: repeat-x; + border-radius: 4px; } .nav-pills .dropdown-menu, .nav-tabs .dropdown-menu, @@ -865,7 +915,7 @@ nav.navbar a, nav.navbar .btn-link { font-size: 13px; padding: 4px 15px; text-transform: capitalize; - width: 100%; + width: 100%; text-align: left; } .nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i, @@ -1193,8 +1243,8 @@ section #jotOpen { .jothidden { /*display: none;*/ } -#jot-modal .modal-header a, -#profile-jot-submit-wrapper a { +#jot-modal .modal-header a, #jot-modal .modal-header .btn-link, +#profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link { color: #555; text-transform: capitalize; } @@ -1295,6 +1345,81 @@ section #jotOpen { color: #fff; } +/* 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; +} +.fbrowser .fa-spin { + position: absolute; + left: 45%; + top: 40%; + font-size: 48px; + margin:0px auto; +} + /* /* Stream */ @@ -1308,6 +1433,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; @@ -1504,8 +1635,8 @@ section #jotOpen { @media screen and (max-width: 767px) { .shared-wrapper, .vevent { - margin-left: 0px; - margin-right: 0px; + margin-left: 0px; + margin-right: 0px; } } .shared-wrapper:hover, @@ -1550,18 +1681,17 @@ code > .hl-main { } /* item social action buttons */ +.wall-item-actions { + margin-top: 15px; +} .wall-item-actions, .wall-item-actions a, .wall-item-actions button { font-size: 13px; color: #555; - margin-top: 15px; margin-bottom: 0; } .wall-item-actions .active { font-weight: bold; } -.wall-item-actions :hover { - color: #555; -} .wall-item-actions .active:hover { color: $link_color; } @@ -1585,6 +1715,13 @@ 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; +} /* wall item hover effects */ .wall-item-container .wall-item-links, @@ -1656,9 +1793,6 @@ code > .hl-main { /* * Comment Box */ -.wall-item-comment-wrapper { - margin-top: 10px; -} .thread_level_2 .wall-item-comment-wrapper { padding-right: 5px; } @@ -1670,8 +1804,8 @@ code > .hl-main { padding-top: 5px !important; padding-bottom: 5px !important; } -.comment-icon-list .icon, -.comment-icon-list .icon:hover { +.comment-icon-list > li > .icon, +.comment-icon-list > li > .icon:hover { color: #555; background-color: transparent; } @@ -1838,7 +1972,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); } @@ -1926,9 +2061,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; @@ -1975,6 +2110,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; @@ -2005,6 +2143,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; @@ -2025,7 +2166,7 @@ ul.viewcontact_wrapper > li { .textcomplete-item .contact-wrapper .contact-action-link { padding: 0 5px; color: #555; - border: 0; + border: 0; } .contact-wrapper .contact-action-link { opacity: 0.1; @@ -2078,6 +2219,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 @@ -2216,6 +2412,9 @@ ul li:hover .contact-wrapper .contact-action-link:hover { #event-edit-form-wrapper #event-edit-time { padding: 10px 0; } +.event-buttons .plink-event-link { + margin-left: 20px; +} /* Profiles Page */ .profile-listing-table { display: table;