navbar: fix https://github.com/rabuzarus/frio/issues/1 - friendica logo isn't visible...

[friendica.git] / css / style.css

diff --git a/css/style.css b/css/style.css
index 5cd96686e0baddf3d7f054ff7aea45d23f97a1f3..5c55d432179875c96339a2413a842dc08df57c68 100644 (file)
--- a/css/style.css
+++ b/css/style.css
@@ -110,7 +110,7 @@ iframe, img {
 
 .btn-default {
     background: #ededed;
-    color: #7a7a7a!important;
+    color: #7a7a7a;
 }
 .btn-sm {
     padding: 4px 8px;
@@ -164,6 +164,16 @@ iframe, img {
     background: $link_hover_color;
 }
 
+/* Badges */
+.badge {
+    vertical-align: baseline;
+    background-color: $link_color;
+    border-radius: 4px;
+}
+aside .badge {
+    opacity: 0.7;
+}
+
 
 header #site-location {
     display: none;
@@ -185,11 +195,12 @@ header #banner {
     color: #fff;
     font-weight: bold;
     whitespace: nowrap;
+    padding-left: 55px;
 }
 header #banner #logo-img, 
 .navbar-brand #logo-img {
-    mask: url('img/friendica-logo.svg#logo_mask');
-    mask-image: url('img/friendica-25.png');
+    /*mask: url('network#m1');*/
+    /*mask-image: url('img/friendica-25.png');*/
     -webkit-mask-image: url('img/friendica-25.png');
     background-color: $nav_icon_color;
     height: 25px;
@@ -197,6 +208,7 @@ header #banner #logo-img,
     margin-left: auto;
     margin-right: auto;
 }
+
 #navbrand-container {
     display: flex;
 }
@@ -329,6 +341,9 @@ nav.navbar .nav>li>a:focus{
     text-shadow: none;
     display: none;*/
 }
+#topbar-first #intro-update{
+    cursor: pointer;
+}
 #topbar-first .topbar-nav .arrow:after {
     position: absolute;
     display: block;
@@ -927,10 +942,15 @@ section #jotOpen {
 }
 
 /* ACL */
+/*#jot-modal-body {
+    height: auto;
+    max-height: calc(100vh - 130px);
+    overflow-y: hidden;
+}*/
 #acl-search {
     margin-top: 20px;
-    padding: 8px;
-    border: 1px solid #ccc;
+    /*padding: 8px;*/
+    /*border: 1px solid #ccc;*/
     width: 100%;
 }
 #acl-list {
@@ -945,6 +965,11 @@ section #jotOpen {
     -moz-border-radius: 4px;
     border-radius: 4px;
 }
+#acl-list-content {
+    overflow-y: auto;
+    max-height: calc(100vh - 330px);
+    height: auto !important;
+}
 .acl-list-item {
     width: 48%;
     width: calc(50% - 10px);
@@ -977,7 +1002,22 @@ section #jotOpen {
 .acl-list-item.grouphide {
     background-color: #E68364;
 }
-
+.acl-button-show, .acl-button-hide {
+    float: right;
+    margin-left: 5px;
+}
+#acl-showall.selected {
+    background-color: #4CAF50;
+    color: #fff;
+}
+.acl-button-show.selected {
+    background-color: #4CAF50;
+    color: #fff;
+}
+.acl-button-hide.selected {
+    background-color: #F44336;
+    color: #fff;
+}
 
 /*
 /* Stream
@@ -1024,7 +1064,8 @@ section #jotOpen {
 .toplevel_item:hover .wall-item-content a,
 .toplevel_item:hover .wall-item-name,
 .wall-item-container:hover .wall-item-content a,
-.wall-item-container:hover .wall-item-name {
+.wall-item-container:hover .wall-item-name,
+.wall-item-container:hover .wall-item-location a {
     /*color: #6fdbe8;*/
     color: $link_color;
     -webkit-transition: all 0.25s ease-in-out;
@@ -1156,6 +1197,7 @@ section #jotOpen {
 }
 .wall-item-content img {
     max-height: 480px;
+    object-fit: contain;
 }
 .shared-content-wrapper,
 .vevent {
@@ -1365,7 +1407,9 @@ img.acpopup-img {
   
 }
 /* Menubar Tabs */
-#tabmenu {
+#tabmenu,
+.tabbar,
+.tabbar > li {
     height: 100%;
     /*margin-left: -15px;*/
     padding: 0;
@@ -1387,9 +1431,9 @@ ul.tabs li {
     height: 102%;
     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 */
-}
+/*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 
+}*/
 ul.tabs li a {
     margin-left: 10px;
     margin-right: 10px;
@@ -1399,6 +1443,13 @@ ul.tabs li a {
 ul.tabs li:hover, ul.tabs li.active {
     border-bottom-width: 4px;
 }
+ul.tabbar ul.tabs-extended li.active {
+    width: 100%;
+    border-bottom-width: 2px;
+}
+ul.tabbar ul.tabs-extended li.active a {
+    background: none;
+}
 ul.dropdown-menu li:hover {
     border-bottom-width: 0;
 }
@@ -1424,7 +1475,9 @@ ul.dropdown-menu li:hover {
 }
 
 /* Media Classes */
-.media .time {
+.media .time,
+.media .location,
+.media .location a {
     font-size: 11px;
     color: #bebebe;
 }
@@ -1473,10 +1526,7 @@ ul.dropdown-menu li:hover {
 }
 .form-group-search {
     position: relative;
-}
-
-.form-group-search {
-    position: relative;
+    width: 100%;
 }
 
 .form-group-search .form-button-search {
@@ -1485,13 +1535,26 @@ ul.dropdown-menu li:hover {
     right: 4px;
     border-radius: 30px;
 }
+.search-input.form-control.form-search {
+    width: 100%;
+}
+.search-headding {
+    text-align: center;
+    color: $link_color;
+    font-size: 20px;
+}
+
 
 /* PAGES */
 
 /* Profile-page */
 #profile-page, .photos-content-wrapper, .settings-content-wrapper,
 .contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
-.allfriends-content-wrapper, .match-content-wrapper {
+.allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
+.directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper,
+.events-content-wrapper, .message-content-wrapper, .apps-content-wrapper, 
+.notifications-content-wrapper, .admin-content-wrapper {
+    min-height: calc(100vh - 150px);
     padding: 15px;
     padding-bottom: 20px;
     margin-bottom: 20px;
@@ -1500,7 +1563,7 @@ ul.dropdown-menu li:hover {
     background-color: rgba(255,255,255,$contentbg_transp);
     border-radius: 4px;
     position: relative;
-    overflow: hidden;
+    /*overflow: hidden;*/
     color: #555;
     box-shadow: 0 0 3px #dadada;
     -webkit-box-shadow: 0 0 3px #dadada;
@@ -1535,7 +1598,34 @@ ul.viewcontact_wrapper > li {
 .contact-wrapper.media {
     overflow: visible;
     word-wrap: break-word;
+    margin-top: 0;
+}
+/* bootstrap hack for .media */
+.contact-wrapper.media .media-body {
+display: table-cell;
+width: 10000px;
+*width: auto;
+*zoom: 1;
+}
+.contact-wrapper.media:before, .media:after {
+content: "";
+display: table;
+}
+.contact-wrapper.media:after {
+clear: both;
+}
+.contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
+    height: 80px;
+    width: 80px;    
 }
+.contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
+    height: 48px;
+    width: 48px;
+}
+.contact-wrapper .contact-photo-overlay-content.xl {
+    font-size: 48px;
+}
+
 .contact-entry-desc {
     color: #555;
 }
@@ -1547,6 +1637,15 @@ ul.viewcontact_wrapper > li {
     color: #777;
     font-size: 15px;
 }
+#contacts-search-wrapper,
+#directory-search-wrapper{
+    padding: 10px 0;
+}
+
+/* directory page */
+#directory-search-headding {
+    padding-top: 10px;
+}
 
 /*
 * Overwriting for transparency and other colors
@@ -1614,3 +1713,36 @@ main .nav-tabs>li.active>a:hover {
 .theme-frio .back-bar .pointer-label {
     color: #999;
 }
+
+/* textcomplete for contact filtering*/
+#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
+    position: relative !important;
+    top: inherit !important;
+    bottom: inherit !important;
+    left: inherit !important;
+    padding: 0;
+    margin-left: -15px;
+    margin-right: -15px;
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+}
+#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
+    padding-left: 15px;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
+}
+#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
+    display: none;
+}
+#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list 
+.textcomplete-item > a {
+    padding: 0 !important;
+    border-left: none;
+    background-color: transparent !important;
+}
+/* this is a little hack for texcomplete contact filter
+There are for some reasons empty <a> tags. I don't know why */
+.textcomplete-item .contact-wrapper a {
+    padding: 0;
+}
+