vier: make TopNavBar mobile friendly

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

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 6313d2f0d497e156d840733d8b95f4b302f1dd85..c854b26ddb1dfd406033aa064455f189fbdeaf34 100644 (file)
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -342,6 +342,7 @@ code {
   padding: 10px;
   margin-top: 20px;
   max-width: 640px;
+  white-space: pre-wrap;
 }
 .badge {
   display: inline-block;
@@ -371,6 +372,13 @@ code {
   z-index: 100000;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
+
+/* some settings for different form-factors */
+@media (min-width: 601px) {
+  a.mobile-view { display: none };
+  a.desktop-view { display: initial };
+}
+
 /* tool */
 .tool {
   height: auto;
@@ -419,9 +427,10 @@ code {
   opacity: 1;
 }
 
-.sidebar-group-li:hover, #sidebar-new-group:hover, #sidebar-edit-groups:hover, #forum-widget-collapse:hover,
+.sidebar-group-li:hover, #sidebar-new-group:hover, #sidebar-edit-groups:hover,#forum-widget-collapse:hover,
 #sidebar-ungrouped:hover, .side-link:hover, .nets-ul li:hover, #forumlist-sidebar li:hover, #forumlist-sidebar-right li:hover,
-.nets-all:hover, .saved-search-li:hover, li.tool:hover, .admin.link:hover, aside h4 a:hover, right_aside h4 a:hover, #message-new:hover {
+.nets-all:hover, .saved-search-li:hover, li.tool:hover, .admin.link:hover, aside h4 a:hover, right_aside h4 a:hover, #message-new:hover,
+#sidebar-photos-albums li:hover, .photos-upload-link:hover {
   /* background-color: #ddd; */
 /*  background-color: #e5e5e5; */
   background-color: #F5F5F5;
@@ -448,6 +457,12 @@ code {
   display: block;
 }
 
+.photos-upload-link {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  display: block;
+}
+
 #forumlist-sidebar {
   padding-top: 3px;
   padding-bottom: 3px;
@@ -467,7 +482,7 @@ code {
   display: inline-block;
 }
 
-a.nets-link, .side-link a, #sidebar-new-group a, #sidebar-edit-groups a, a.savedsearchterm, a.fileas-link, aside h4 a, right_aside h4 a {
+a.nets-link, .side-link a, #sidebar-new-group a, #sidebar-edit-groups a, a.savedsearchterm,a.fileas-link, aside h4 a, right_aside h4 a {
   display: block;
   color: #737373;
 }
@@ -494,7 +509,7 @@ a.sidebar-group-element {
   color: black;
 }
 
-#forumlist-sidebar a, #forumlist-sidebar-right a, .tool a, .admin.link a {
+#forumlist-sidebar a, #forumlist-sidebar-right a, .tool a, .admin.link a, #sidebar-photos-albums a {
   color: #737373;
 }
 
@@ -951,7 +966,7 @@ right_aside {
   font-size: 13px;
   overflow-y: auto;
   z-index: 2;
-  line-height: 17px;
+  /* line-height: 17px; */
   color: #737373;
   box-shadow: 1px 2px 0px 0px #D8D8D8;
   top: 32px;
@@ -976,7 +991,7 @@ aside {
   top: 32px;
   overflow-y: auto;
   z-index: 2;
-  line-height: 17px;
+  /* line-height: 17px; */
   position: fixed;
   /* overflow: auto; */
   height: 100%;
@@ -993,6 +1008,7 @@ aside .vcard .fn {
 }
 aside .vcard .title {
   margin-bottom: 5px;
+  float: left;
 }
 aside .vcard dl {
   height: auto;
@@ -1340,6 +1356,10 @@ section.minimal {
   float: right;
 }
 
+.wall-item-network-end {
+  clear: both;
+}
+
 .wall-item-location {
   width: 350px;
   float: left;
@@ -1438,6 +1458,7 @@ section.minimal {
   transition: all 0.2s ease-in-out;
   /* color: darkblue; */
   /* color: #3E3E8C; */
+  word-break: break-word;
 }
 
 .toplevel_item:hover .fakelink,
@@ -2508,6 +2529,25 @@ blockquote {
     display: block;
 }
 
+.oembed.video .embed_video > div {
+    position: absolute; top: 0px; left: 0px;
+    background-color: rgba(0,0,0,0.5);
+}
+.oembed.video .embed_video > div::before {
+    font-family: FontAwesome;
+    font-weight: normal;
+    font-style: normal;
+    display: inline-block;
+    text-decoration: inherit;
+    vertical-align: top;
+    font-size: 3em;
+    content: "\f01d"; /* icon-play-circle */
+    color: #fff;
+    bottom: 10px;
+    right: 10px;
+    position: absolute;
+}
+
 /* ================== */
 /* = Contacts Block = */
 /* ================== */
@@ -2720,6 +2760,13 @@ a.mail-list-link {
         font-weight: bold;
         color: #FF0000;
 }
+#event-desc-text-edit-bb, #event-location-text-edit-bb {
+  float: none;
+}
+#event-start-text, #event-finish-text, #event-summary-text, #event-desc-text, #event-location-text {
+  margin-bottom: 10px;
+  margin-top: 20px;
+}
 
 .settings-block {
         /* border: 1px solid #AAA; */