X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=css%2Fstyle.css;h=834e7505cb6264246b994d71f9be2348dc78a56b;hb=27db33858786531131c1f6f550a9989c2080ac67;hp=6d5366a45b74ac433900cd7ec6c1b112579dc24c;hpb=9aa8451279ee2f5274ebb9c4a44d96d94820f455;p=friendica.git

diff --git a/css/style.css b/css/style.css
index 6d5366a45b..834e7505cb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,7 +9,7 @@ and open the template in the editor.
 */
 
 /* Imports */
-@import url("frameworks/bootstrap/css/bootstrap.min.css");
+/*@import url("frameworks/bootstrap/css/bootstrap.min.css");
 @import url("frameworks/bootstrap/css/bootstrap-theme.min.css");
 @import url("frameworks/font-awesome/css/font-awesome.min.css");
 @import url("frameworks/jasny/css/jasny-bootstrap.min.css");
@@ -19,6 +19,7 @@ and open the template in the editor.
 @import url("frameworks/justifiedGallery/justifiedGallery.min.css");
 @import url("frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css");
 @import url("font/open_sans/open-sans.css");
+@import url("css/hovercard.css");*/
 
 
 body {
@@ -26,6 +27,7 @@ body {
     background-color: $bgcolor;
     background-image: url("$background_image");
     background-size: $background_size_img;
+    background-attachment: fixed;
     color: #777;
     /*color: #555;*/
     font-family: 'Open Sans',sans-serif;
@@ -47,6 +49,10 @@ hr {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+aside hr,
+section hr {
+    border-color: rgba(238, 238, 238, $contentbg_transp);
+}
 iframe, img {
     max-width: 100%;
 }
@@ -79,6 +85,22 @@ iframe, img {
     line-height: 1.5;
 }
 
+a#item-delete-selected {
+    cursor: pointer;
+    color: white;
+    position: fixed;
+    z-index: 49;
+    right: 20px;
+    top: 100px;
+    opacity: 0.8;
+    font-size: 2.9em;
+    padding: 0 12px 0 12px;
+    border-radius: 10px;
+    background-color: $link_color;
+    line-height: 1.5;
+    display: none;
+}
+
 /*
 * Overwriting and Extend Bootstrap
 */
@@ -106,7 +128,7 @@ iframe, img {
 
 .btn-default {
     background: #ededed;
-    color: #7a7a7a!important;
+    color: #7a7a7a;
 }
 .btn-sm {
     padding: 4px 8px;
@@ -160,6 +182,39 @@ iframe, img {
     background: $link_hover_color;
 }
 
+/* Bootstrap media class fix/hack
+ * This is a test. I thought it does have some
+ * issues in some corner cases. Maybe we remove
+ * once more
+ * https://github.com/twbs/bootstrap/issues/6053
+ */
+.media, .media-body {
+    overflow: visible;
+}
+.media .media-body {
+    display: table-cell;
+    width: 10000px;
+    *width: auto;
+    *zoom: 1;
+}
+.media:before, .media:after {
+    content: "";
+    display: table;
+}
+.media:after {
+    clear: both;
+}
+
+/* Badges */
+.badge {
+    vertical-align: baseline;
+    background-color: $link_color;
+    border-radius: 4px;
+}
+aside .badge {
+    opacity: 0.7;
+}
+
 
 header #site-location {
     display: none;
@@ -181,9 +236,12 @@ header #banner {
     color: #fff;
     font-weight: bold;
     whitespace: nowrap;
+    padding-left: 55px;
 }
-header #banner #logo-img {
-    mask: url('img/friendica-25.png');
+header #banner #logo-img, 
+.navbar-brand #logo-img {
+    /*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;
@@ -192,6 +250,13 @@ header #banner #logo-img {
     margin-right: auto;
 }
 
+#navbrand-container {
+    display: flex;
+}
+#navbrand-container #navbar-brand-text {
+    padding-left: 5px;
+}
+
 /* NavBar */
 .topbar {
     position: fixed;
@@ -317,6 +382,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;
@@ -452,11 +520,12 @@ nav.navbar a {
     width: 32px;
     border-radius: 3px;
 }
+/* The Top Nav Bar user menu */
 #topbar-first .account .user-title {
     text-align: right
 }
 #topbar-first .account .user-title span {
-    color: #d7d7d7
+    color: $nav_icon_color;
 }
 #topbar-first .account #main-menu .nav-notify {
     position: absolute;
@@ -464,11 +533,29 @@ nav.navbar a {
     right: -2px;
     background-color: #ff8989;
 }
+#myNavmenu li,
+#myNavmenu a {
+    background-color: $nav_bg;
+    color: $nav_icon_color;
+}
+#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 {
-    background-color: $nav_bg
+    background-color: $nav_bg;
+}
+#topbar-first .dropdown.account li#nav-sitename {
+    padding-left: 15px;
+    padding-right: 15px;
+    font-weight: bold;
+    word-break: break-word;
+}
+#topbar-first .dropdown.account li#nav-sitename:hover {
+    border: none;
+    background-color: $nav_bg;
 }
 /* Nav Search */
 #topbar-first #search-box .navbar-form {
@@ -743,7 +830,8 @@ aside .widget li.selected,
 .nav-container .widget li:hover {
     z-index: 2;
     color: #555;
-    background-color: #f7f7f7;
+    /*background-color: #f7f7f7;*/
+    background-color: rgba(247, 247, 247, $contentbg_transp);
     /*border-left: 3px solid #6fdbe8!important;*/
     border-left: 3px solid $link_color !important;
     padding-left: 17px;
@@ -895,10 +983,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 {
@@ -913,6 +1006,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);
@@ -945,7 +1043,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
@@ -992,7 +1105,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;
@@ -1089,7 +1203,11 @@ section #jotOpen {
 .media .media-body h5.media-heading a {
     display: block;
 }
-.media .contact-info-xs h5 {
+.media .contact-info-comment {
+    display: table-cell;
+}
+.media .contact-info-xs h5,
+.media .contact-info-comment {
     margin: 0 0 5px;
 }
 .media-heading {
@@ -1099,6 +1217,10 @@ section #jotOpen {
     font-size: 15px;
     font-weight: bold;
 }
+.wall-item-name.xs {
+    font-weight: 700;
+    font-size: 14px;
+}
 
 /* The lock symbol popup */
 #panel {
@@ -1124,6 +1246,7 @@ section #jotOpen {
 }
 .wall-item-content img {
     max-height: 480px;
+    object-fit: contain;
 }
 .shared-content-wrapper,
 .vevent {
@@ -1217,7 +1340,8 @@ blockquote.shared_content {
 .well {
     border: none;
     box-shadow: none;
-    background-color: #ededed;
+    /*background-color: #ededed;*/
+    background-color: rgba(237, 237, 237, $contentbg_transp);
     background-image: none;
     margin-bottom: 1px;
 }
@@ -1263,34 +1387,47 @@ blockquote.shared_content {
 }
 .comment-edit-submit-wrapper a,
 .comment-edit-submit-wrapper a:hover {
-    color: #555;
     padding-top: 5px !important;
     padding-bottom: 5px !important;
 }
+.comment-icon-list a.icon,
+.comment-icon-list a.icon:hover {
+    color: #555;
+    background-color: transparent;
+}
 
-/* acpopup */
+/* acpopup  + textcompletion*/
 .acpopup {
-    max-height: 150px;
+    /* max-height: 150px; */
     background-color: #ffffff;
-    color: #555;
     border-radius: 4px;
     overflow: auto;
     z-index: 100000;
     box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
-.acpopupitem {
-    color: #555;
-    padding: 4px;
-    clear: left;
+nav .acpopup {
+    /*top: 35px !important;*/
+    margin-left: -23px;
 }
-.acpopupitem.selected {
-    background-color: $nav_bg;
-    color: $nav_icon_color;
+/** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
+ at the beginning of this file to get rid of the !important */
+.textcomplete-item > a {
+    color: #555 !important;
+    padding: 5px 20px !important;
 }
-.acpopupitem img {
-    float: left;
-    margin-right: 4px;
+.textcomplete-item.active > a {
+    background-color: rgb(247, 247, 247) !important;
+    background-image: none !important;
+    border-left: 3px solid $link_color;
+    padding-left: 17px !important;
 }
+.textcomplete-item a .forum {
+    color: $link_color;
+}
+img.acpopup-img {
+    border-radius: 4px;
+ }
+
 
 /* The wall-item thread levels */
 /*.wall-item-container.thread_level_3 {
@@ -1323,7 +1460,9 @@ blockquote.shared_content {
   
 }
 /* Menubar Tabs */
-#tabmenu {
+#tabmenu,
+.tabbar,
+.tabbar > li {
     height: 100%;
     /*margin-left: -15px;*/
     padding: 0;
@@ -1345,6 +1484,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 li a {
     margin-left: 10px;
     margin-right: 10px;
@@ -1354,6 +1496,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;
 }
@@ -1379,10 +1528,25 @@ ul.dropdown-menu li:hover {
 }
 
 /* Media Classes */
-.media .time {
+.media .time,
+.media .location,
+.media .location a {
     font-size: 11px;
     color: #bebebe;
 }
+.media-list > li {
+    padding: 10px;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
+    position: relative;
+/*    border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
+    border-left: 3px solid rgba(255,255,255,0);
+    font-size: 12px;
+}
+.media-list > li:hover,
+.media-list > li.selected {
+    border-left: 3px solid $link_color;
+    background-color: rgba(247, 247, 247, $contentbg_transp);
+}
 
 /* Forms */
 .form-control {
@@ -1415,10 +1579,7 @@ ul.dropdown-menu li:hover {
 }
 .form-group-search {
     position: relative;
-}
-
-.form-group-search {
-    position: relative;
+    width: 100%;
 }
 
 .form-group-search .form-button-search {
@@ -1427,11 +1588,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 {
+#profile-page, .photos-content-wrapper, .settings-content-wrapper,
+.contacts-content-wrapper, .suggest-content-wrapper, .common-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;
@@ -1440,7 +1616,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;
@@ -1458,6 +1634,83 @@ ul.dropdown-menu li:hover {
     float: left;
 }
 
+/* contacts page */
+ul.viewcontact_wrapper {
+    margin-left: -15px;
+    margin-right: -15px;
+}
+ul.viewcontact_wrapper > li {
+    padding-left: 15px;
+}
+.contact-wrapper {
+/*    padding: 10px;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
+    position: relative;*/
+    /*border-left: 3px solid white;*/
+}
+.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;
+}
+.contact-entry-checkbox {
+    margin-top: -20px;
+}
+.contact-wrapper .media-body .contact-entry-name h4.media-heading {
+    font-weight: bold;
+    color: #777;
+    font-size: 15px;
+}
+#contacts-search-wrapper,
+#directory-search-wrapper{
+    padding: 10px 0;
+}
+
+/* directory page */
+#directory-search-headding {
+    padding-top: 10px;
+}
+
+/* private mail */
+#prvmail-end {
+    clear:both;
+}
+/* poke */
+#poke-desc {
+    margin: 5px 0 30px;
+}
+#poke-wrapper-end {
+    clear: both;
+}
 /*
 * Overwriting for transparency and other colors
 */
@@ -1467,4 +1720,93 @@ main .nav-tabs>li.active>a:hover {
     background-color: rgba(255,255,255,$contentbg_transp);
 }
 
+/*
+ * Modal
+ */
+.modal hr {
+    border-color: #eee;
+}
+
+/*
+ * Framework overwrite
+ */
+
+/* jRange */
+.theme-frio .back-bar {
+    height: 5px !important;
+    border-radius: 2px;
+    background-color: #eeeeee;
+    background-color: #e7e7e7;
+    background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
+    background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
+    background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
+    background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
+}
+.theme-frio .back-bar .selected-bar {
+    border-radius: 2px;
+    background-color: $link_color;
+/*    background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
+    background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
+    background-image: -o-linear-gradient(top, #bdfade, #76fabc);
+    background-image: linear-gradient(to bottom, #bdfade, #76fabc);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);*/
+}
+.theme-frio .back-bar .pointer {
+    width: 14px !important;
+    height: 14px !important;
+    top: -5px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border-radius: 10px;
+    border: 1px solid #AAA;
+    background-color: #e7e7e7 !important;
+    background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
+    background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
+    background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
+    background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
+}
+.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;
+}