mobile stylesheet improvements

[irc/quakenet/qwebirc.git] / css / qui.mcss

diff --git a/css/qui.mcss b/css/qui.mcss
index 4ce32a5ea196c45171081b0d899ef3ea2d2c0848..a804b7c50cde0b170d4bb556e664042006241e83 100644 (file)
--- a/css/qui.mcss
+++ b/css/qui.mcss
@@ -51,27 +51,32 @@ html {
 .qwebirc-qui .dynamicpanel {
   position: absolute;
 }
-.qwebirc-qui .widepanel, .leftboundpanel {
+.qwebirc-qui .leftboundpanel {
   left: 0px;
-}
-.qwebirc-qui .widepanel {
-  width: 100%;
+  width: 150px;
+  height: 100%;
 }
 .qwebirc-qui .topboundpanel {
   top: 0px;
+  width: 100%;
+}
+.qwebirc-qui .topicboundpanel {
+  width: 100%;
 }
 .qwebirc-qui .rightboundpanel {
-  /*right: 0px;*/
+  right: 0px;
+  width: 140px;
 }
 .qwebirc-qui .bottomboundpanel {
-  color: red;
+  bottom: 0px;
+  right: 0px;
 }
 
 .qwebirc-qui .lines {
   color: $(lines_text);
   overflow: auto;
-  font-size: 0.8em;
   background: $(lines_background);
+  font-size: 0.8em;
 }
 
 .qwebirc-qui .lines .timestamp {
@@ -91,10 +96,18 @@ html {
 
 .qwebirc-qui .input input.keyboard-input {
   border: 0px;
-  margin: 2px 0px 0px 0px;
+  margin: 0px 0px 0px 0px;
+  font-size: 1.2em;
+  padding-left: 4px;
+  padding-top: 3px;
+  padding-bottom: 3px;
   width: 99%;
 }
 
+.qwebirc-qui .input-flash {
+  background: #bbffbb;
+}
+
 .qwebirc-qui .input input.mobile-input {
   border: 0px;
   margin: 2px 0px 0px 0px;
@@ -117,6 +130,9 @@ html {
   right: 0px;
   background-color: $(topic_background);
   border-bottom: 1px dashed $(topic_border);
+/*  overflow: hidden;*/
+  text-overflow: ellipsis;
+/*  white-space: nowrap;*/
 }
 
 .qwebirc-qui .topic .emptytopic {
@@ -126,19 +142,59 @@ html {
 .qwebirc-qui .topic {
   color: gray;
   padding-left: 5px;
-  font-size: 0.7em;
+  padding-bottom: 3px;
+  font-size: 1.1em;
   cursor: default;
 }
 
 .qwebirc-qui .outertabbar {
-  border-bottom: 1px solid $(tabbar_border);
   background: $(tabbar_background);
 }
 
+.qwebirc-qui .outertabbar_top .dropdown-tab {
+  padding: 4px 3px 0 3px;
+}
+
+.qwebirc-qui .outertabbar_left .dropdown-tab {
+  padding: 3px 3px 0 3px;
+  margin-right: 2px;
+}
+
+.qwebirc-qui .outertabbar_left {
+  border-right: 1px solid $(tabbar_border);
+  overflow: auto;
+}
+
+.qwebirc-qui .outertabbar_left .tab {
+  display: block;
+  margin-right: 3px;
+  margin-top: 1px;
+  line-height: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 15px;
+}
+
+.qwebirc-qui .outertabbar_left .tabclose {
+  float: right;
+  padding-left: 5px;
+  margin-left: 0px;
+  margin-top: -2px;
+  position: relative;
+}
+
+.qwebirc-qui .outertabbar_left .tabbar {
+  margin-left: 2px;
+}
+
+.qwebirc-qui .outertabbar_top {
+  border-bottom: 1px solid $(tabbar_border);
+}
+
 .qwebirc-qui .tabbar {
   font-size: 0.8em;
   color: $(tabbar_text);
-  margin-left: 38px;
+  margin-left: 25px;
   line-height: 24px;
 }
 
@@ -180,33 +236,33 @@ html {
 
 .qwebirc-qui .tabclose {
   margin-left: 5px;
-  font-size: 0.7em;
   line-height: 150%;
   vertical-align: top;
   padding-left: 3px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
+  font-weight: normal;
+  color: $(tab_text);
 }
 
 .qwebirc-qui a.tab-hilight-activity {
-  color: #009900;
+  color: #22bb22;
+  font-weight: bold;
 }
 
 .qwebirc-qui a.tab-hilight-speech {
-  color: #0000ff;
+  color: #2222bb;
+  font-weight: bold;
 }
 
 .qwebirc-qui a.tab-hilight-us {
-  color: #ff0000;
+  color: #bb4444;
+  font-weight: bold;
 }
 
 .qwebirc-qui .nicklist {
   border-left: 1px solid $(nicklist_border);
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 140px;
   overflow: auto;
   background: $(nicklist_background);
   color: $(nicklist_text);
@@ -263,8 +319,7 @@ div#noscript {
   cursor: pointer;
   cursor: hand;
   float: left;
-  padding: 4px;
-  width: 30px;
+  width: 17px;
 }
 
 .qwebirc-qui .dropdownmenu {
@@ -278,7 +333,7 @@ div#noscript {
 
 .qwebirc-qui .dropdownmenu a {
   display: block;
-  font-size: 0.7em;
+  font-size: 0.8em;
   color: $(menu_text);
   cursor: pointer;
   cursor: hand;  
@@ -306,3 +361,65 @@ div#noscript {
   margin-left: 3em;
   margin-right: 3em;
 }
+
+iframe {
+  border: none;
+}
+
+.qwebirc-qui .spinner {
+  background: url($(base_url)../images/spinner.png) no-repeat $(lines_background);
+  background-position: top 5px right 5px;
+}
+
+@media screen and (max-width:1024px) {
+  .qwebirc-qui .lines {
+    font-size: 1.2em;
+  }
+
+  .qwebirc-qui .ircwindow div {
+    font-size: 0.8em;
+  }
+
+  .qwebirc-qui .tabbar {
+    line-height: 35px;
+  }
+
+  .qwebirc-qui .tabbar, .qwebirc-qui .nicklist {
+    font-size: 1.3em;
+  }
+
+  .qwebirc-qui .topic, .qwebirc-qui .dropdownmenu a, .qwebirc-qui .dropdownhint {
+    font-size: 1.4em;
+  }
+
+  .qwebirc-qui .input input.keyboard-input {
+    font-size: 1.6em;
+  }
+
+  .qwebirc-qui input {
+    font-size: 1.6em;
+  }
+
+  .qwebirc-qui .tabclose {
+    color: maroon;
+  }
+
+  .qwebirc-qui .tabclose:before {
+    content: "(";
+  }
+  .qwebirc-qui .tabclose:after {
+    content: ")";
+  }
+
+  .qwebirc-qui .dropdown-tab img {
+    width: 160%;
+  }
+
+  .qwebirc-qui .outertabbar_top .dropdown-tab {
+    padding-right: 13px;
+  }
+
+  .qwebirc-qui .outertabbar_left .dropdown-tab {
+    padding-right: 13px;
+  }
+}