*/
/* 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");
@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 {
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;
margin-top: 10px;
margin-bottom: 10px;
}
+aside hr,
+section hr {
+ border-color: rgba(238, 238, 238, $contentbg_transp);
+}
iframe, img {
max-width: 100%;
}
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
*/
.btn-default {
background: #ededed;
- color: #7a7a7a!important;
+ color: #7a7a7a;
}
.btn-sm {
padding: 4px 8px;
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;
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;
margin-right: auto;
}
+#navbrand-container {
+ display: flex;
+}
+#navbrand-container #navbar-brand-text {
+ padding-left: 5px;
+}
+
/* NavBar */
.topbar {
position: fixed;
text-shadow: none;
display: none;*/
}
+#topbar-first #intro-update{
+ cursor: pointer;
+}
#topbar-first .topbar-nav .arrow:after {
position: absolute;
display: block;
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;
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 {
.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;
}
/* 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 {
-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);
.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
.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;
.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 {
font-size: 15px;
font-weight: bold;
}
+.wall-item-name.xs {
+ font-weight: 700;
+ font-size: 14px;
+}
/* The lock symbol popup */
#panel {
}
.wall-item-content img {
max-height: 480px;
+ object-fit: contain;
}
.shared-content-wrapper,
.vevent {
.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;
}
}
.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 {
}
/* Menubar Tabs */
-#tabmenu {
+#tabmenu,
+.tabbar,
+.tabbar > li {
height: 100%;
/*margin-left: -15px;*/
padding: 0;
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;
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;
}
}
/* 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 {
}
.form-group-search {
position: relative;
-}
-
-.form-group-search {
- position: relative;
+ width: 100%;
}
.form-group-search .form-button-search {
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;
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;
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
*/
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;
+}
projects / friendica.git / blobdiff