X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;ds=sidebyside;f=view%2Ftheme%2Ffrio%2Fcss%2Fstyle.css;h=b4497b5a6bb9d222aa145405b0be3d76274aea87;hb=68659c7740481028c76efd39ce465fd9d13044c7;hp=6f1fcf74adaea7c1975f4e7deba924b7ccd50f23;hpb=93ea37e016d29d06fc42828bdbe2afff0cf20dcf;p=friendica.git diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 6f1fcf74ad..b4497b5a6b 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -51,10 +51,14 @@ body a[name]:not([href]) { visibility: hidden; } -body a:hover, body a:focus, body a:active, body a.active, body .btn-link:hover{ +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,6 +94,7 @@ blockquote { code { white-space: pre-wrap; } +.help-content-wrapper code {display: inline} /* * standard page elements @@ -153,6 +158,7 @@ a#item-delete-selected { font-size: 14px; font-weight: 600; padding: 8px 16px; + color: inherit; } .btn-default { @@ -169,6 +175,10 @@ a#item-delete-selected { line-height: 1.5; border-radius: 3px; } +.btn-xs { + padding: 1px 5px; + font-size: 12px; +} .btn-primary { background: $nav_bg; color: $btn_primary_color !important; @@ -181,6 +191,7 @@ a#item-delete-selected { outline: 0; background: $btn_primary_hover_color !important; } + .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, @@ -191,11 +202,10 @@ a#item-delete-selected { } .btn-link { -/* color: #6fdbe8;*/ + border: 0; color: $link_color; -} -.btn-link:focus, .btn-link:hover { - color: #23527c; + padding-left: 0; + padding-right: 0; } .btn-eventnav, btn-eventnav:hover { font-size: 16px; @@ -220,20 +230,49 @@ a#item-delete-selected { }*/ .btn-main { - /*background: #6fdbe8;*/ background: $link_color; color: #fff!important; } .btn-main:hover, .btn-main:focus { - /*background: #59d6e4!important;*/ background: $link_hover_color !important; text-decoration: none; } .btn-main:active, .btn-main.active { outline: 0; - /*background: #59d6e4;*/ background: $link_hover_color; } +.toggle.btn { + border: 1px solid transparent; +} +.toggle.btn-xs { + min-width: 45px; +} +.toggle.off { + border-color: #ccc; +} +.toggle .toggle-off, +.toggle .toggle-off:hover { + color: #ccc; + background-color: #eee; + box-shadow: none; +} +.toggle.off .toggle-handle { + background-color: #eee; +} +.toggle-handle { + background-color: #fff; + border-width: 0 1px; + border: 1px solid transparent; + border-color: #ccc; +} +.field.yesno:hover .toggle { + border-color: $link_hover_color; + transition: all 0.25s ease-in-out; +} +.field.yesno:hover .toggle-handle { + background-color: #fff; + transition: all 0.25s ease-in-out; +} .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn { padding: .275rem .75rem; @@ -362,7 +401,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; @@ -515,9 +555,8 @@ nav.navbar .nav>li>a:focus{ #topbar-first .dropdown-footer { margin: 10px 10px 5px } -#topbar-first a, -nav.navbar a { - /*color: #fff*/ +#topbar-first a, #topbar-first .btn-link, +nav.navbar a, nav.navbar .btn-link { color: $nav_icon_color; } #topbar-first .caret { @@ -611,10 +650,12 @@ nav.navbar a { #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 { @@ -663,7 +704,7 @@ nav.navbar a { @media screen and (max-width: 767px) { #topbar-second > .container, #topbar-second #navbar-button { - padding: 0; + padding: 0; } } #topbar-second .dropdown-menu { @@ -782,6 +823,25 @@ nav.navbar a { } /* 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; +} .nav-pills .dropdown-menu, .nav-tabs .dropdown-menu, .account .dropdown-menu, @@ -803,41 +863,43 @@ nav.navbar a { .contact-photo-wrapper .dropdown-menu li { border-left: 3px solid $nav_bg; } -.nav-pills .dropdown-menu li a, -.nav-tabs .dropdown-menu li a, -.account .dropdown-menu li a, -.contact-photo-wrapper .dropdown-menu li a { +.nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link, +.nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link, +.account .dropdown-menu li a, .account .dropdown-menu li .btn-link, +.contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link { color: $nav_icon_color; font-weight: 400; font-size: 13px; padding: 4px 15px; text-transform: capitalize; + width: 100%; + text-align: left; } -.nav-pills .dropdown-menu li a i, -.nav-tabs .dropdown-menu li a i, -.account .dropdown-menu li a i, -.contact-photo-wrapper .dropdown-menu li a i { +.nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i, +.nav-tabs .dropdown-menu li a i, .nav-tabs .dropdown-menu li .btn-link i, +.account .dropdown-menu li a i, .account .dropdown-menu li .btn-link i, +.contact-photo-wrapper .dropdown-menu li a i, .contact-photo-wrapper .dropdown-menu li .btn-link i { margin-right: 5px; font-size: 14px; display: inline-block; width: 14px } -.nav-pills .dropdown-menu li a:hover, -.nav-tabs .dropdown-menu li a:hover, -.account .dropdown-menu li a:hover, -.contact-photo-wrapper .dropdown-menu li a:hover, -.nav-pills .dropdown-menu li a:visited, -.nav-tabs .dropdown-menu li a:visited, -.account .dropdown-menu li a:visited, -.contact-photo-wrapper .dropdown-menu li a:visited, -.nav-pills .dropdown-menu li a:hover, -.nav-tabs .dropdown-menu li a:hover, -.account .dropdown-menu li a:hover, -.contact-photo-wrapper .dropdown-menu li a:hover, -.nav-pills .dropdown-menu li a:focus, -.nav-tabs .dropdown-menu li a:focus, -.account .dropdown-menu li a:focus, -.contact-photo-wrapper .dropdown-menu li a:focus { +.nav-pills .dropdown-menu li a:hover, .nav-pills .dropdown-menu li .btn-link:hover, +.nav-tabs .dropdown-menu li a:hover, .nav-tabs .dropdown-menu li .btn-link:hover, +.account .dropdown-menu li a:hover, .account .dropdown-menu li .btn-link:hover, +.contact-photo-wrapper .dropdown-menu li a:hover, .contact-photo-wrapper .dropdown-menu li .btn-link:hover, +.nav-pills .dropdown-menu li a:visited, .nav-pills .dropdown-menu li .btn-link:visited, +.nav-tabs .dropdown-menu li a:visited, .nav-tabs .dropdown-menu li .btn-link:visited, +.account .dropdown-menu li a:visited, .account .dropdown-menu li .btn-link:visited, +.contact-photo-wrapper .dropdown-menu li a:visited, .contact-photo-wrapper .dropdown-menu li .btn-link:visited, +.nav-pills .dropdown-menu li a:hover, .nav-pills .dropdown-menu li .btn-link:hover, +.nav-tabs .dropdown-menu li a:hover, .nav-tabs .dropdown-menu li .btn-link:hover, +.account .dropdown-menu li a:hover, .account .dropdown-menu li .btn-link:hover, +.contact-photo-wrapper .dropdown-menu li a:hover, .contact-photo-wrapper .dropdown-menu li .btn-link:hover, +.nav-pills .dropdown-menu li a:focus, .nav-pills .dropdown-menu li .btn-link:focus, +.nav-tabs .dropdown-menu li a:focus, .nav-tabs .dropdown-menu li .btn-link:focus, +.account .dropdown-menu li a:focus, .account .dropdown-menu li .btn-link:focus, +.contact-photo-wrapper .dropdown-menu li a:focus, .contact-photo-wrapper .dropdown-menu li .btn-link:focus { background: 0 0 } .nav-pills .dropdown-menu li:hover, @@ -1138,8 +1200,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; } @@ -1240,6 +1302,84 @@ section #jotOpen { color: #fff; } +/* Filebrowser */ +#jot-fbrowser-wrapper { + overflow: hidden; +} +.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 img { + border: 1px solid #ddd; +} +.fbrowser .profile-rotator-wrapper { + min-height: 200px; +} +.fbrowser .fa-spin { + position: absolute; + left: 45%; + top: 40%; + font-size: 48px; + margin:0px auto; +} + /* /* Stream */ @@ -1270,8 +1410,6 @@ section #jotOpen { .wall-item-container a, .wall-item-container .fakelink, .toplevel_item .fakelink, -.toplevel_item .wall-item-container .btn-link, -.wall-item-container .btn-link, .toplevel_item .wall-item-container .wall-item-responses a { color: #555; -webkit-transition: all 0.25s ease-in-out; @@ -1282,7 +1420,6 @@ section #jotOpen { } .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink, -.toplevel_item:hover .wall-item-container:hover .btn-link, .toplevel_item:hover .wall-item-container:hover .wall-item-responses a, .toplevel_item:hover .wall-item-content a, .toplevel_item:hover .wall-item-name, @@ -1452,8 +1589,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, @@ -1498,19 +1635,18 @@ code > .hl-main { } /* item social action buttons */ -.wall-item-actions, .wall-item-actions a { +.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 a.active { +.wall-item-actions .active { font-weight: bold; } -.wall-item-actions a:hover { - color: #555; -} -.wall-item-actions a.active:hover { +.wall-item-actions .active:hover { color: $link_color; } .wall-item-actions-left { @@ -1531,10 +1667,15 @@ code > .hl-main { .wall-item-actions .button-comments, .wall-item-actions .button-votes, .wall-item-actions .button-likes { - padding-left: 0px; - padding-right: 0px; 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, @@ -1617,8 +1758,8 @@ code > .hl-main { padding-top: 5px !important; padding-bottom: 5px !important; } -.comment-icon-list a.icon, -.comment-icon-list a.icon:hover { +.comment-icon-list > li > .icon, +.comment-icon-list > li > .icon:hover { color: #555; background-color: transparent; } @@ -1687,7 +1828,14 @@ img.acpopup-img { } /* Menubar Tabs */ +section > .tabbar-wrapper { +/* The tabbar shouldn't' be visibile inside +the section element. Only after we have +moved it to the nav through js */ + display: none !important; +} #tabmenu, +.tabbar-wrapper, .tabbar, .tabbar > li { height: 100%; @@ -1741,12 +1889,14 @@ ul.dropdown-menu li:hover { /* Dropdown Menu */ -.dropdown-menu li a { +.dropdown-menu li a, +.dropdown-menu li .btn-link { font-size: 13px!important; font-weight: 600!important; } -.dropdown-menu li a:hover, .dropdown-menu li a:visited, -.dropdown-menu li a:hover, .dropdown-menu li a:focus { +.dropdown-menu li > :hover, +.dropdown-menu li > :visited, +.dropdown-menu li > :focus { background: 0 0; } @@ -1958,22 +2108,22 @@ ul.viewcontact_wrapper > li { .contact-wrapper .contact-actions { display: flex; } -.contact-wrapper a.contact-action-link { +.contact-wrapper .contact-action-link, +.contact-wrapper .contact-action-link:hover, +.textcomplete-item .contact-wrapper .contact-action-link { + padding: 0 5px; + color: #555; + border: 0; +} +.contact-wrapper .contact-action-link { opacity: 0.1; transition: all 0.25s ease-in-out; } -.contact-wrapper a.contact-action-link, -.contact-wrapper a.contact-action-link:hover, -.textcomplete-item .contact-wrapper a.contact-action-link { - padding-right: 5px; - padding-left: 5px; - color: #555; -} -ul li:hover .contact-wrapper a.contact-action-link { +ul li:hover .contact-wrapper .contact-action-link { opacity: 0.8; transition: all 0.25s ease-in-out; } -ul li:hover .contact-wrapper a.contact-action-link:hover { +ul li:hover .contact-wrapper .contact-action-link:hover { opacity: 1; } #contacts-search-wrapper, @@ -2154,6 +2304,9 @@ ul li:hover .contact-wrapper a.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; @@ -2469,6 +2622,56 @@ body .tread-wrapper .hovercard:hover .hover-card-content a { color: $link_color !important; } +/* Pagination improvements */ +.pagination { + text-align: center; + display: block; +} +.pagination > li > a, +.pagination > li > span { + color: $link_color; + float: none; +} +.pagination>li>a:hover, +.pagination>li>span:hover { + color: $link_hover_color; +} +.pagination > .active > a, +.pagination > .active > a:focus, +.pagination > .active > a:hover, +.pagination > .active > span, +.pagination > .active > span:focus, +.pagination > .active > span:hover { + background-color: $link_color; + border-color: $link_color; + border-radius: 3px; +} +.pagination li.pager_n a { + margin-left: 3px; + border-radius: 3px; +} +.pagination .pager_prev a { + margin-left: -5px; + margin-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} +.pagination .pager_next a { + margin-left: 4px; + margin-right: -5px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} +.pager .next > a, +.pager .previous > a { + float: none; + border-radius: 3px; +} +.pagination .disabled > a, +.pager .disabled > a { + display: none; +} + /* * some temporary workarounds until this will solved * elsewhere (e.g. new templates)