X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Ffrio%2Fcss%2Fstyle.css;h=efff14a4eafd89e4daf038975204cc1a77042b5b;hb=51c9a66fc3d145d6ada187e654f44fdd0ad3125d;hp=7795a7e433028eb11dc219b889204b72fb5c5ed1;hpb=af3a6725707aee82c2dcb22a2eddc8cfe1e02f15;p=friendica.git diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 7795a7e433..efff14a4ea 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -3,7 +3,7 @@ To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ -/* +/* Created on : 17.02.2016, 23:55:45 Author : rabuzarus */ @@ -38,6 +38,18 @@ body a { color: $link_color; text-decoration: none; } +/* Anchors incorrectly display with a fixed top menu. This global rule offsets all + * anchors so that accessing them with a # link will actually scroll the associated + * content in the visible part of the page. + * + * anchor.top should be the opposite of body.padding-top + */ +body a[name]:not([href]) { + display: block; + position: relative; + top: -110px; + visibility: hidden; +} body a:hover, body a:focus, body a:active, body a.active, body .btn-link:hover{ /*color: #59d6e4;*/ @@ -75,6 +87,9 @@ blockquote { .hidden { display: none !important; } +code { + white-space: pre-wrap; +} /* * standard page elements @@ -174,7 +189,7 @@ a#item-delete-selected { background: $btn_primary_hover_color; border-color: none; } - + .btn-link { /* color: #6fdbe8;*/ color: $link_color; @@ -287,7 +302,7 @@ header #banner { whitespace: nowrap; padding-left: 55px; } -header #banner #logo-img, +header #banner #logo-img, .navbar-brand #logo-img { /*mask: url('network#m1');*/ /*mask-image: url('img/friendica-25.png');*/ @@ -419,7 +434,7 @@ nav.navbar .nav>li>a:focus{ top: 4px; right: -2px; background-color: #ff8989; - + /* text-transform: uppercase; display: inline-block; padding: 3px 5px 4px; @@ -794,7 +809,8 @@ nav.navbar a { color: $nav_icon_color; font-weight: 400; font-size: 13px; - padding: 4px 15px + padding: 4px 15px; + text-transform: capitalize; } .nav-pills .dropdown-menu li a i, .nav-tabs .dropdown-menu li a i, @@ -834,17 +850,19 @@ nav.navbar a { /*border-left: 3px solid #6fdbe8;*/ border-left: 3px solid $link_color; color: #fff!important; - background-color: $menu_background_hover_color !important + background-color: $menu_background_hover_color !important; } -.nav-pills.preferences .dropdown .dropdown-toggle { - color: #bebebe +.nav-pills.preferences .dropdown .dropdown-toggle, +.nav-pills.preferences > li > .btn { + color: #bebebe; } .nav-pills.preferences .dropdown.open .dropdown-toggle, .nav-pills.preferences .dropdown.open .dropdown-toggle:hover { - background-color: $nav_bg + background-color: $nav_bg; } -.nav-pills.preferences .dropdown .dropdown-toggle { +.nav-pills.preferences .dropdown .dropdown-toggle, +.nav-pills.preferences > li > .btn { padding: 2px 10px; } @@ -1093,7 +1111,7 @@ aside #group-sidebar li .group-edit-tool:first-child { width: 90px;*/ } #contact-block contact-block-link { - + } #contact-block .contact-block-img { height: 75px; @@ -1122,6 +1140,7 @@ section #jotOpen { #jot-modal .modal-header a, #profile-jot-submit-wrapper a { color: #555; + text-transform: capitalize; } #jot-modal .modal-header { border-bottom: none; @@ -1138,6 +1157,9 @@ section #jotOpen { #profile-jot-wrapper button#jot-submit { margin-top: 5px; } +#profile-jot-wrapper #character-counter { + padding: 10px 15px; +} /* ACL */ /*#jot-modal-body { @@ -1420,6 +1442,7 @@ section #jotOpen { width: 20px; } +/* wall-item content elements */ .shared-wrapper, .vevent { padding: 10px; @@ -1449,6 +1472,12 @@ blockquote.shared_content { margin-left: 0px; color: inherit; } +code > .hl-main { + padding: 10px 10px 1px 0; +} +.hl-main ol { + line-height: 1.7; +} .wall-item-tags, .itemedited { margin-top: 10px; @@ -1470,14 +1499,19 @@ blockquote.shared_content { /* item social action buttons */ .wall-item-actions, .wall-item-actions a { font-size: 13px; - /*color: #aeaeae;*/ color: #555; margin-top: 15px; margin-bottom: 0; } +.wall-item-actions a.active { + font-weight: bold; +} .wall-item-actions a:hover { color: #555; } +.wall-item-actions a.active:hover { + color: $link_color; +} .wall-item-actions-left { display: table-cell; vertical-align: middle; @@ -1498,6 +1532,7 @@ blockquote.shared_content { .wall-item-actions .button-likes { padding-left: 0px; padding-right: 0px; + text-transform: capitalize; } /* wall item hover effects */ @@ -1648,7 +1683,7 @@ img.acpopup-img { .wall-item-container.thread_level_6, .wall-item-container.thread_level_7 { margin-left: 15px; - + } /* Menubar Tabs */ #tabmenu, @@ -1681,7 +1716,7 @@ ul.tabs li { transition: all .15s ease; } /*ul.tabs.visible-xs > li.active { - min-width: 150px; This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here + min-width: 150px; This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here }*/ ul.tabs li a { margin-left: 10px; @@ -1847,6 +1882,9 @@ ul.dropdown-menu li:hover { -moz-box-shadow: 0 0 3px #dadada; } +.section-title-wrapper { + overflow: hidden; +} /* Profile-page */ #profile-content-standard, #profile-content-advanced { @@ -1895,7 +1933,7 @@ ul.viewcontact_wrapper > li { } .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl { height: 80px; - width: 80px; + width: 80px; } .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs { height: 48px; @@ -1912,7 +1950,7 @@ ul.viewcontact_wrapper > li { margin-top: -20px; } .contact-wrapper .media-body .contact-entry-name h4.media-heading a { - font-weight: bold !important; + font-weight: bold !important; color: $link_color; font-size: 15px !important; } @@ -2069,45 +2107,20 @@ ul li:hover .contact-wrapper a.contact-action-link:hover { } /* Events page */ -#fc-header { - margin-top: 20px; - margin-bottom: 10px; -} -#fc-header-left, -#fc-header-right, -#event-calendar-title { - display: inline-block; -} -#fc-title { - margin: 0; - padding-left: 20px; +.fc .fc-month-view .fc-content .fc-title .item-desc:hover { + color: $link_hover_color; } -#fc-header-right { - margin-top: -4px; -} -#event-calendar-title { - vertical-align: middle; -} -a#event-calendar-views { - padding: 6px 9px; - font-size: 14px -} -tr.fc-first, -tr.fc-first th { - border-left: none; - border-right: none; - border-top: none; -} -td.fc-day { - border-left: none; - border-right: none; - padding: 0 6px; +.fc .fc-list-item-title a { + color: $link_color; } -#events-calendar .fc-grid .fc-day-number { - float: left; - font-size: 0.9em; +.fc .fc-list-item-title a[href]:hover { + color: $link_hover_color; + text-decoration: none; } +/*.event-date-wrapper.medium .event-hover-short-month { + color: $link_color; +}*/ .event-wrapper .event-owner { margin-bottom: 15px; } @@ -2198,7 +2211,7 @@ td.fc-day { margin-left: 20px; } -/* Notifications */ +/* Intro Notifications */ ul.notif-network-list { margin-left: -15px; margin-right: -15px; @@ -2216,10 +2229,9 @@ ul.notif-network-list li.unseen { word-wrap: break-word; margin-top: 0; } -.intro-photo-wrapper img.intro-photo, -.notif-item img.notif-image { - height:80px; - width: 80px; +.intro-photo-wrapper img.intro-photo { + height:48px; + width: 48px; border-radius: 4px; } .intro-actions { @@ -2270,9 +2282,26 @@ ul.notif-network-list > li:hover .intro-action-buttons { margin-top: 5px } +/* Notifications Page */ +.notif-item img.notif-image { + height: 48px; + width: 48px; + border-radius: 4px; +} +.notif-item .notif-desc-wrapper { + height: 48px; +} +.notif-item .notif-desc-wrapper a { + height: 100%; + display: block; + color: #555; + font-size: 13px; + font-weight: 600; +} + /* Search Page */ -/* This is a little bit hacky. Since the search page is used for diferent +/* This is a little bit hacky. Since the search page is used for diferent content types we can't apply the generic-page-wrapper class. So we apply the css of the generic-page-wrapper class to the ul element with some little modifications to emulate a standard page template */ @@ -2294,6 +2323,44 @@ little modifications to emulate a standard page template */ -moz-box-shadow: 0 0 3px #dadada; } +/* Help Page */ +section.help-content-wrapper h1 { + padding-bottom: 0.3em; + font-size: 1.8em; + border-bottom: 1px solid #ddd; +} +section.help-content-wrapper h2 { + padding-bottom: 0.3em; + font-size: 1.5em; + border-bottom: 1px solid #ddd; +} +section.help-content-wrapper h3 { + font-size: 1.2em; +} +section.help-content-wrapper h4 { + font-size: 1em; +} +section.help-content-wrapper h1, +section.help-content-wrapper h2, +section.help-content-wrapper h3, +section.help-content-wrapper h4, +section.help-content-wrapper h5, +section.help-content-wrapper h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; +} +section.help-content-wrapper p { + margin: 0.4em 0; +} +section.help-content-wrapper p, +section.help-content-wrapper a, +section.help-content-wrapper li { + line-height: 1.6; + font-size: 0.96em; +} + /* * Overwriting for transparency and other colors */ @@ -2381,7 +2448,7 @@ main .nav-tabs>li.active>a:hover { #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child { display: none; } -#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list +#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a { padding: 0 !important; border-left: none; @@ -2401,3 +2468,11 @@ body .tread-wrapper .hovercard a:hover { body .tread-wrapper .hovercard:hover .hover-card-content a { color: $link_color !important; } + +/* + * some temporary workarounds until this will solved + * elsewhere (e.g. new templates) + */ +section .profile-match-wrapper { + float: left; +}