The appearanxe of the link preview is now configurable

[friendica.git] / view / theme / frio / css / style.css

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index daa2afd75fc8a3255dbccd79545c778c1b60bcad..9c8c74eb2a67aec7bb0910de876514fc54a9c321 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1,6 +1,6 @@
 /*
     Created on : 17.02.2016, 23:55:45
-    Author     : rabuzarus
+    Author     : rabuzarus and contributors
 */
 
 body {
@@ -84,6 +84,27 @@ blockquote {
        overflow: hidden !important;
 }
 
+/**
+ * details tag
+ */
+details {
+       padding: .5em .5em 0;
+}
+details details {
+       padding-left: .5em;
+}
+details summary {
+       font-weight: bold;
+       display: list-item;
+}
+
+/**
+ * clickable table rows
+ */
+.table > tbody > td[role="button"] {
+       cursor: pointer;
+}
+
 /**
  * mobile aside
  */
@@ -383,6 +404,86 @@ header #banner #logo-img,
        color: $nav_icon_color;
 }
 
+/* offcanvas section */
+
+/* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
+   .offcanvas-right and .offcanvas-right-overlay */
+.off-canvas {
+       width: 300px;
+       position: fixed;
+       left: 0;
+       top: 0;
+       height: 100%;
+       overflow-x: hidden;
+       overflow-y: auto;
+       background-color: #333;
+       transform: translateX(-100%);
+       transition: 0.4s ease-in-out;
+       z-index: 1060;
+}
+#offcanvasUsermenu {
+       width: 300px;
+       position: fixed;
+       right: 0px;
+       top: 50px;
+       height: 100%;
+       overflow-x: hidden;
+       overflow-y: auto;
+       background-color: #333;
+       transform: translateX(100%);
+       transition: 0.4s ease-in-out;
+       z-index: 1060;
+}
+.offcanvas-active .off-canvas {
+       transform: translateX(0);
+}
+.offcanvas-right-active #offcanvasUsermenu {
+       transform: translateX(0);
+}
+.navbar-fixed-top {
+       transition: 0.4s ease-in-out;
+       width: 100%;
+}
+.page-wrapper {
+       padding-top: 50px;
+       transition: 0.4s ease-in-out;
+}
+.offcanvas-active .page-wrapper,
+.offcanvas-active .navbar-fixed-top {
+       transform: translateX(300px);
+}
+
+.offcanvas-overlay {
+       position: fixed;
+       left: 0;
+       top: 0;
+       width: 100%;
+       height: 100%;
+       background-color: rgba(0, 0, 0, 0.5);
+       z-index: 1050;
+       visibility: hidden;
+       opacity: 0;
+       transition: 0.4s ease-in-out;
+}
+.offcanvas-right-overlay {
+       position: fixed;
+       right: 0;
+       top: 50px;
+       width: 100%;
+       height: 100%;
+       background-color: rgba(0, 0, 0, 0.5);
+       z-index: 1050;
+       visibility: hidden;
+       opacity: 0;
+       transition: 0.4s ease-in-out;
+}
+.offcanvas-active .offcanvas-overlay,
+.offcanvas-right-active .offcanvas-right-overlay {
+       opacity: 1;
+       visibility: visible;
+}
+/* offcanvas section ends */
+
 /* NavBar */
 .topbar {
        position: fixed;
@@ -470,7 +571,8 @@ nav.navbar .nav > li > button {
 #topbar-first .nav > li > button:not(#main-menu):hover,
 #topbar-first .nav > li > button:not(#main-menu):focus,
 nav.navbar .nav > li > a:hover,
-nav.navbar .nav > li > a:focus nav.navbar .nav > li > button:hover,
+nav.navbar .nav > li > a:focus,
+nav.navbar .nav > li > button:hover,
 nav.navbar .nav > li > button:focus {
        background-color: $nav_icon_hover_color;
 }
@@ -663,34 +765,43 @@ nav.navbar .nav > li > button:focus {
        right: -2px;
        background-color: #ff8989;
 }
-#myNavmenu {
+#offcanvasUsermenu {
        top: 50px;
        background-color: $background_color;
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        border-left-color: $nav_icon_color;
-       box-shadow: 0 0 3px black;
+       box-shadow: -3px 0 3px -3px black;
+}
+#offcanvasUsermenu .nav-container {
+       /* required to compensate for moving the container below the topnav bar */
+       margin-bottom: 50px;
 }
-#myNavmenu ul,
-#myNavmenu ul li:first-child,
-#myNavmenu ul,
-#myNavmenu ul li:last-child {
+#offcanvasUsermenu li.divider {
+       background-color: transparent;
+       height: 3px;
+}
+
+#offcanvasUsermenu ul,
+#offcanvasUsermenu ul li:first-child,
+#offcanvasUsermenu ul,
+#offcanvasUsermenu ul li:last-child {
        border-radius: 0;
 }
-#myNavmenu li,
-#myNavmenu a {
+#offcanvasUsermenu li,
+#offcanvasUsermenu a {
        background-color: $nav_bg;
        color: $nav_icon_color;
 }
 
-#myNavmenu li.list-group-item {
+#offcanvasUsermenu li.list-group-item {
        border-color: $background_color;
 }
-#myNavmenu a {
+#offcanvasUsermenu a {
        display: block;
 }
-#myNavmenu li.nav-sitename {
+#offcanvasUsermenu li.nav-sitename {
        font-weight: bold;
 }
 #topbar-first .dropdown.account li#nav-sitename {
@@ -871,7 +982,6 @@ ul li .intro-wrapper button.intro-action-link {
        font-weight: 400;
        font-size: 13px;
        padding: 4px 15px;
-       text-transform: capitalize;
        width: 100%;
        text-align: left;
 }
@@ -1076,9 +1186,9 @@ aside .vcard .title {
 }
 aside .vcard .detail {
        display: table;
-       padding: 5px 0;
+       padding: 2px 0;
 }
-aside .xmpp {
+aside .xmpp, aside .matrix {
        display: table;
 }
 aside .vcard .icon {
@@ -1090,6 +1200,7 @@ aside .vcard .icon {
        overflow: auto;
        margin-bottom: 10px;
 }
+aside .vcard #subscribe-feed-link-button,
 aside .vcard #dfrn-request-link-button,
 aside .vcard #wallmessage-link-botton {
        width: 50%;
@@ -1097,6 +1208,7 @@ aside .vcard #wallmessage-link-botton {
        float: left;
        padding: 0 5px;
 }
+aside .vcard #subscribe-feed-link,
 aside .vcard #dfrn-request-link,
 aside .vcard #wallmessage-link {
        width: 100%;
@@ -1451,10 +1563,10 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
                max-height: calc(100vh - 220px);
        }
 }
-.fbrowser.image .photo-album-image-wrapper {
+.fbrowser.photo .photo-album-image-wrapper {
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
 }
-.fbrowser.image .photo-album-image-wrapper .caption {
+.fbrowser.photo .photo-album-image-wrapper .caption {
        pointer-events: none;
 }
 .fbrowser .profile-rotator-wrapper {
@@ -1620,10 +1732,20 @@ aside .panel-body {
        right: 0;
        top: 0;
 }
-.shared_header .preferences {
-       top: 7px;
-       right: 9px;
+.shared_header {
+       margin-left: 0px;
+       margin-top: 0px;
+       padding-top: 0px;
+       margin-bottom: 10px;
+       border-top: none;
+       color: inherit;
+}
+blockquote.shared_content {
+       padding: 0px;
+       margin-inline-start: 0px;
+       color: inherit;
 }
+
 .wall-item-network {
        font-size: 13px;
 }
@@ -1637,8 +1759,7 @@ aside .panel-body {
        font-weight: 500;
        color: $font_color_darker;
 }
-.media .media-body .addional-info a,
-.media .media-body h5.media-heading > a {
+.media .media-body .addional-info a {
        display: block;
 }
 .media .contact-info-comment {
@@ -1649,7 +1770,7 @@ aside .panel-body {
        margin: 0 0 5px;
 }
 .media-heading {
-       margin: 0 0 5px;
+       margin: 0px;
 }
 .wall-item-name,
 .shared-author {
@@ -1711,7 +1832,6 @@ aside .panel-body {
        word-break: break-word;
 }
 .wall-item-content img {
-       max-height: 480px;
        object-fit: contain;
 }
 .wall-item-body > img,
@@ -1749,19 +1869,6 @@ aside .panel-body {
 .vevent:hover {
        box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
 }
-.shared_header {
-       margin-left: 0px;
-       margin-top: 0px;
-       padding-top: 0px;
-       margin-bottom: 10px;
-       border-top: none;
-       color: inherit;
-}
-blockquote.shared_content {
-       padding: 0px;
-       margin-left: 0px;
-       color: inherit;
-}
 code > .hl-main {
        padding: 10px 10px 1px 0;
 }
@@ -1855,11 +1962,6 @@ code > .hl-main {
        margin: 0;
        margin-left: 20px;
 }
-.wall-item-actions .button-comments,
-.wall-item-actions .button-votes,
-.wall-item-actions .button-likes {
-       text-transform: capitalize;
-}
 .wall-item-actions button:hover {
        color: $font_color_darker;
        text-decoration: underline;
@@ -1899,8 +2001,7 @@ code > .hl-main {
        }
        /* Like/Comment/etc buttons */
        .wall-item-container .wall-item-links,
-       .wall-item-container .wall-item-actions button,
-       .wall-item-container .body-attach > a {
+       .wall-item-container .wall-item-actions button > a {
                opacity: 0.4;
 
                -webkit-transition: all 0.25s ease-in-out;
@@ -1910,8 +2011,7 @@ code > .hl-main {
                transition: all 0.25s ease-in-out;
        }
        .wall-item-container:hover .wall-item-links,
-       .wall-item-container:hover .wall-item-actions button,
-       .wall-item-container:hover .body-attach > a {
+       .wall-item-container:hover .wall-item-actions button > a {
                opacity: 1;
 
                -webkit-transition: all 0.25s ease-in-out;
@@ -2099,6 +2199,12 @@ ul.tabs li:hover,
 ul.tabs li.active {
        border-bottom-width: 4px;
 }
+.tabbar.visible-xs .tabs-extended {
+       padding-top: 0;
+}
+#dropdownMenuTools-xs {
+       padding: 9px 10px;
+}
 ul.tabbar ul.tabs-extended:hover li.dropdown {
        border-bottom: 0;
 }
@@ -2399,14 +2505,6 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
 #directory-search-wrapper {
        padding: 10px 0;
 }
-#contact-drop-confirm .contact-actions,
-#contact-drop-confirm .contact-photo-overlay,
-#contact-drop-confirm .contact-photo-menu {
-       display: none;
-}
-#contact-drop-confirm #confirm-form {
-       margin-top: 20px;
-}
 
 /* contact-edit */
 #contact-edit-actions {
@@ -2804,13 +2902,13 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
        padding: 1px 10px;
 }
 details.profile-jot-net[open] summary:before,
-.panel .section-subtitle-wrapper a.accordion-toggle:before {
+.panel .section-subtitle-wrapper .accordion-toggle:before {
        font-family: ForkAwesome;
        content: "\f0d7";
        padding-right: 5px;
 }
 details.profile-jot-net summary:before,
-.panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
+.panel .section-subtitle-wrapper .accordion-toggle.collapsed:before {
        font-family: ForkAwesome;
        content: "\f0da";
 }
@@ -2868,17 +2966,21 @@ details.profile-jot-net[open] summary:before {
        margin-bottom: 10px;
 }
 
+.section-subtitle-wrapper > h3 {
+       font-size: 16px;
+       margin-top: 8px;
+       margin-bottom: 8px;
+}
+
 .fakelink > h3:before {
        padding-right: 10px;
 }
-.widget.fakelink > h3:before,
-.settings-block.fakelink > h3:before {
+.widget.fakelink > h3:before {
        font-family: ForkAwesome;
        content: "\f0da"; /* Right Plain Pointer */
 }
 .widget > .fakelink > h3:before,
-#sidebar-group-header > .fakelink > h3:before,
-.settings-block > .fakelink > h3:before {
+#sidebar-group-header > .fakelink > h3:before {
        font-family: ForkAwesome;
        content: "\f0d7"; /* Bottom Plain Pointer */
 }
@@ -3323,6 +3425,7 @@ section .profile-match-wrapper {
 .mod-home.is-not-singleuser nav.navbar,
 .mod-login nav.navbar {
        background-color: transparent;
+       position: inherit;
 }
 .mod-home.is-not-singleuser #topbar-second,
 .mod-login #topbar-second {
@@ -3502,6 +3605,11 @@ section .profile-match-wrapper {
        font-size: 13px;
 }
 
+
+.generic-page-wrapper.contact-follow-wrapper {
+       min-height: auto;
+}
+
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
        .mod-home.is-not-singleuser #content,