projects / KiwiIRC.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Client: Tab sizing when in narrow mode
[KiwiIRC.git] / client / assets / css / style.css
diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 90c6cdd00150e6b5bbce97424777075f1f980312..8cc10c7a7ac1587549103491d464a16ecda59d77 100644 (file)
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -95,6 +95,7 @@ html, body { height:100%; }
 
 /* A member/nick list per channel */
 #kiwi #memberlists { border-left: 1px solid #8A8A8A; }
+#kiwi #memberlists.disabled { display:none; }
 #kiwi #memberlists ul { display:none; }
 
 /* The active channels nicklist */
@@ -124,7 +125,7 @@ html, body { height:100%; }
 #kiwi #controlbox .input .input_wrap { display:inline; }
 
 /* The textarea input */
-#kiwi #controlbox .input .inp { }
+#kiwi #controlbox .input .inp { white-space: nowrap; }
 
 
 /* Nick change dialog showed when clicking the nick label */
@@ -158,12 +159,13 @@ html, body { height:100%; }
 #kiwi .server_select .more { display: none; }
 #kiwi .server_select button {  }
 #kiwi .server_select input { }
-#kiwi .server_select label { float:left; width:5em; }
+#kiwi .server_select label { }
 #kiwi .server_select br { clear:both; }
 #kiwi .server_select .basic input { }
 #kiwi .server_select .basic label { }
 #kiwi .server_select .basic { border-bottom: 1px solid gray; margin-bottom:1em; }
 #kiwi .server_select .basic .show_more { }
+#kiwi .server_select .basic tr.pass { display:none; }
 #kiwi .server_select.single_server .basic { border:none; }
 #kiwi .server_select .status {  }
 
@@ -314,9 +316,12 @@ html, body { height:100%; }
 
 #kiwi.theme_relaxed .messages .msg { border-bottom: 1px solid #DEDEDE; padding: 1px; font-family:arial; font-size:0.9em; }
 #kiwi.theme_relaxed .messages .msg .time { width:6em; float:left; color:#777; display:none; }
-#kiwi.theme_relaxed .messages .msg .nick { width:11em; float:left; font-size:12px; font-family:Arial; text-align:left; padding: 5px; }
+#kiwi.theme_relaxed .messages .msg .nick { width:11em; float:left; font-size:12px; font-family:Arial; text-align:left; padding: 5px; overflow:hidden; }
 #kiwi.theme_relaxed .messages .msg .text { display:block; margin-left:12em; border-left: 1px solid #DEDEDE; white-space:pre-wrap; word-wrap:break-word; font-family:arial; padding:5px; }
 
+#kiwi.theme_relaxed.narrow .messages .msg .nick { width: auto; }
+#kiwi.theme_relaxed.narrow .messages .msg .text { margin-left: 1em; border:none; }
+
 #kiwi.theme_relaxed .messages .msg.action .nick { }
 #kiwi.theme_relaxed .messages .msg.action .text { margin-left:9em; color:#009900; border-left:none; font-style:italic; }
 #kiwi.theme_relaxed .messages .msg.action.join { color:#009900; }
@@ -329,7 +334,7 @@ html, body { height:100%; }
 #kiwi.theme_relaxed .messages .msg.topic .text { color:#009900; margin-left:9em; font-style: italic; border-left:none; }
 #kiwi.theme_relaxed .messages .msg.motd { border:none; }
 /*#kiwi.theme_relaxed .messages .msg.motd .nick { display:none; }*/
-#kiwi.theme_relaxed .messages .msg.motd .text { color:#666; }
+#kiwi.theme_relaxed .messages .msg.motd .text { color:#666; font-family:monospace; }
 #kiwi.theme_relaxed .messages .msg.whois .nick { font-weight:normal; }
 #kiwi.theme_relaxed .messages .msg.whois .text { margin-left:18em; padding-left:1em; border-left:1px dashed #999; }
 #kiwi.theme_relaxed .messages .msg.error .text {
@@ -340,17 +345,49 @@ html, body { height:100%; }
 #kiwi.theme_relaxed .messages .msg.global_nick_highlight,
 #kiwi.theme_relaxed .messages .msg.highlight { background:#D9D9D9; }
 
+/* Narrow styling (window width < 400px) */
+#kiwi.theme_relaxed.narrow .messages .msg .nick { width: auto; }
+#kiwi.theme_relaxed.narrow .messages .msg .text { margin-left: 1em; border:none; }
+#kiwi.theme_relaxed.narrow .messages .msg.action .text { margin-left: 1em; }
+
 
 #kiwi.theme_relaxed .messages .msg .media { margin-left:0.5em; }
 #kiwi.theme_relaxed .messages .msg .media .media_close { font-size:0.9em; }
-#kiwi.theme_relaxed .messages .msg .media .media_content { margin:10px 0 0 10px; }
+#kiwi.theme_relaxed .messages .msg .media .media_content { margin:10px 0 0 10px; overflow:hidden; }
 #kiwi.theme_relaxed .messages .msg .media .media_content img { padding:3px; border:1px solid gray; }
+#kiwi.theme_relaxed .messages .msg .media .media_content > .content {
+    background: white;
+    overflow: hidden;
+    padding: 10px;
+    border: #DDD 1px solid;
+    border-top-color: #EEE;
+    border-bottom-color: #BBB;
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    float: left;
+}
+
+#kiwi.theme_relaxed .messages .msg .media.twitter .media_content > .content {
+    background: transparent;
+    border:none;
+    overflow: hidden;
+    box-shadow: none;
+    padding: 0;
+}
+#kiwi.theme_relaxed .messages .msg .media.reddit .thumbnail_nsfw {
+    display: inline-block;
+    float: left;
+}
+#kiwi.theme_relaxed .messages .msg .media.reddit .thumbnail { float:left; margin-right: 0.5em; }
 
 
 #kiwi.theme_relaxed #memberlists {
     background-color: #DADADA;
     border-left: 1px solid #8A8A8A;
 }
+#kiwi.theme_relaxed.narrow #memberlists { display:none; }
 #kiwi.theme_relaxed #memberlists ul { list-style: none; }
 #kiwi.theme_relaxed #memberlists ul.active { }
 #kiwi.theme_relaxed #memberlists ul li { padding: 0.2em 1em; }
@@ -377,8 +414,12 @@ html, body { height:100%; }
     -webkit-border-radius:5px;
     -khtml-border-radius:5px;
 }
-#kiwi.theme_relaxed #controlbox .input .nick { text-align: right; width:11em; left:0px; position:absolute; padding:2px; }
+#kiwi.theme_relaxed #controlbox .input .nick { text-align: right; width:11em; left:0px; position:absolute; padding:2px; overflow:hidden; }
 #kiwi.theme_relaxed #controlbox .input .nick a { text-decoration:none; color:black; }
+
+#kiwi.theme_relaxed.narrow #controlbox .input .nick { display:none; }
+#kiwi.theme_relaxed.narrow #controlbox .input .input_wrap { left:7px; }
+
 #kiwi.theme_relaxed #controlbox .input .input_wrap {
     position:absolute;
     right:7px; left: 12.2em;
@@ -430,6 +471,8 @@ html, body { height:100%; }
 
 
 #kiwi.theme_relaxed #toolbar .app_tools { width:200px; padding-left:10px; color:#D4D4D4; }
+#kiwi.theme_relaxed.narrow #toolbar #tabs { margin-right:0; }
+#kiwi.theme_relaxed.narrow #toolbar .app_tools { width:auto; }
 #kiwi.theme_relaxed #toolbar .app_tools ul li {
     font-size:26px;
     -webkit-transition: all .3s ease;
@@ -444,15 +487,18 @@ html, body { height:100%; }
 /* The server select dialog */
 #kiwi.theme_relaxed .server_select { width:730px;  padding:3em 0 2em 0; margin: 0 auto; }
 #kiwi.theme_relaxed .server_select .more { display: none; width:270px; margin:0 auto; }
-#kiwi.theme_relaxed .server_select button { float:right; padding:3px 7px; margin-top:10px; }
-#kiwi.theme_relaxed .server_select input { float:right; margin-bottom:5px; padding:3px 7px; width:150px; }
-#kiwi.theme_relaxed .server_select label { float:left; width:5em; padding-top:3px }
+#kiwi.theme_relaxed .server_select table tr td { padding:5px; }
+#kiwi.theme_relaxed .server_select button { float:right; padding:3px 7px; }
+#kiwi.theme_relaxed .server_select input { padding:3px 7px; width:150px; }
+#kiwi.theme_relaxed .server_select label { }
 #kiwi.theme_relaxed .server_select br { clear:both; }
 #kiwi.theme_relaxed .server_select .basic input, .server_select .basic button { font-size:1em; padding:0.5em 1em; }
 #kiwi.theme_relaxed .server_select .basic input { width:170px; }
 #kiwi.theme_relaxed .server_select .basic label { font-size:1.3em; margin-top:4px; }
+#kiwi.theme_relaxed .server_select .basic tr.have_pass { font-size:0.8em; }
+#kiwi.theme_relaxed .server_select .basic tr.channel td { padding-top:1em; }
 #kiwi.theme_relaxed .server_select .basic { border-bottom: 1px dashed gray; margin-bottom:1em; }
-#kiwi.theme_relaxed .server_select .basic .show_more { display: block; width:40px; margin:10px 0 0 0; font-size:0.8em; background: url(../img/more.png) no-repeat right 7px; }
+#kiwi.theme_relaxed .server_select .basic .show_more { display: block; width:110px; margin:10px 0 0 0; font-size:0.8em; background: url(../img/more.png) no-repeat right 7px; }
 #kiwi.theme_relaxed .server_select.single_server .basic { border:none; }
 #kiwi.theme_relaxed .server_select .status { text-align: center; font-weight: bold; padding:1em; }
 #kiwi.theme_relaxed .server_select .status.ok { }
@@ -669,6 +715,10 @@ html, body { height:100%; }
 #kiwi.theme_mini .server_select label { display:none; }
 #kiwi.theme_mini .server_select br { clear:both; }
 #kiwi.theme_mini .server_select .basic { border:none; }
+#kiwi.theme_mini .server_select .basic table { width:100%; }
+#kiwi.theme_mini .server_select .basic table tr.channel,
+#kiwi.theme_mini .server_select .basic table tr.pass,
+#kiwi.theme_mini .server_select .basic table tr.have_pass { display:none; }
 #kiwi.theme_mini .server_select .basic .show_more { display:none !important; }
 #kiwi.theme_mini .server_select.single_server .basic { border:none; }
 #kiwi.theme_mini .server_select .status { text-align: center; font-weight: bold; padding:1em; }
@@ -711,14 +761,14 @@ html, body { height:100%; }
 #kiwi.theme_cli #controlbox { background:#111111; border-top:1px solid #444444; color:#909090; font-size:1.3em; line-height:2em; margin:3px; }
 #kiwi.theme_cli #controlbox .input_wrap:before { content:"> " }
 #kiwi.theme_cli #controlbox .input { background:none; border:none;}
-#kiwi.theme_cli #controlbox .input .nick { line-height:1.7em; padding:0; text-align: right; width:11em; left:0px; position:absolute; }
+#kiwi.theme_cli #controlbox .input .nick { line-height:1.7em; padding:0; text-align: right; width:11em; left:0px; position:absolute; overflow:hidden; }
 #kiwi.theme_cli #controlbox .input .input_wrap {
     position:absolute;
     right:7px; left: 12.2em;
     height:1.7em;
 }
 #kiwi.theme_cli #controlbox .input .inp {
-    line-height:1.7em;
+    line-height:1.4em;
     font-size:1.3em;
     background:transparent; color:#909090;
     border: medium none;
@@ -727,7 +777,7 @@ html, body { height:100%; }
     outline:none; resize:none;
     overflow:hidden;
     position:absolute;
-    height:100%; width:98%;
+    height:99%; width:98%;
     display: inline;
     padding-left:0.5em;
 }
@@ -855,18 +905,55 @@ html, body { height:100%; }
 #kiwi.theme_cli .messages .msg.global_nick_highlight { background:#111111; }
 
 
+
+#kiwi.theme_cli .messages .msg .media { margin-left:0.5em; }
+#kiwi.theme_cli .messages .msg .media .media_close { font-size:0.9em; }
+#kiwi.theme_cli .messages .msg .media .media_content { margin:10px 0 0 6em; overflow:hidden; }
+#kiwi.theme_cli .messages .msg .media .media_content img { padding:3px; border:1px solid gray; }
+#kiwi.theme_cli .messages .msg .media .media_content > .content {
+    background: white;
+    overflow: hidden;
+    padding: 10px;
+    border: #DDD 1px solid;
+    border-top-color: #EEE;
+    border-bottom-color: #BBB;
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    float: left;
+}
+
+#kiwi.theme_cli .messages .msg .media.twitter .media_content > .content {
+    background: transparent;
+    border:none;
+    overflow: hidden;
+    box-shadow: none;
+    padding: 0;
+}
+#kiwi.theme_cli .messages .msg .media.reddit .thumbnail_nsfw {
+    display: inline-block;
+    float: left;
+}
+#kiwi.theme_cli .messages .msg .media.reddit .thumbnail { float:left; margin-right: 0.5em; }
+
+
+
 /* The server select dialog */
 #kiwi.theme_cli .server_select { width:730px;  padding:3em 0 2em 0; margin: 0 auto; }
 #kiwi.theme_cli .server_select .more { display: none; width:270px; margin:0 auto; }
+#kiwi.theme_cli .server_select table tr td { padding:5px; }
 #kiwi.theme_cli .server_select button { float:right; padding:3px 7px; margin-top:10px; }
-#kiwi.theme_cli .server_select input { float:right; margin-bottom:5px; padding:3px 7px; width:150px; }
-#kiwi.theme_cli .server_select label { float:left; width:5em; padding-top:3px }
+#kiwi.theme_cli .server_select input { padding:3px 7px; width:150px; }
+#kiwi.theme_cli .server_select label { width:5em; padding-top:3px }
 #kiwi.theme_cli .server_select br { clear:both; }
 #kiwi.theme_cli .server_select .basic input, .server_select .basic button { font-size:1em; padding:0.5em 1em; }
 #kiwi.theme_cli .server_select .basic input { width:170px; }
 #kiwi.theme_cli .server_select .basic label { font-size:1.3em; margin-top:4px; }
+#kiwi.theme_cli .server_select .basic tr.have_pass { font-size:0.8em; }
+#kiwi.theme_cli .server_select .basic tr.channel td { padding-top:1em; }
 #kiwi.theme_cli .server_select .basic { border-bottom: 1px dashed gray; margin-bottom:1em; }
-#kiwi.theme_cli .server_select .basic .show_more { display: block; width:40px; margin:10px 0 0 0; font-size:0.8em; background: url(../img/more.png) no-repeat right 7px; }
+#kiwi.theme_cli .server_select .basic .show_more { display: block; width:116px; margin:10px 0 0 0; font-size:0.8em; background: url(../img/more.png) no-repeat right 7px; }
 #kiwi.theme_cli .server_select.single_server .basic { border:none; }
 #kiwi.theme_cli .server_select .status { text-align: center; font-weight: bold; padding:1em; }
 #kiwi.theme_cli .server_select .status.ok { }
@@ -882,4 +969,15 @@ html, body { height:100%; }
     line-height:48px; vertical-align: middle;
     color: #555555;
 }
-#kiwi.theme_cli .server_select .kiwi_logo img { }
\ No newline at end of file
+#kiwi.theme_cli .server_select .kiwi_logo img { }
+
+
+#kiwi.theme_cli .divider-verticle {
+    border-left: 1px solid #303030;
+    border-right: 1px solid #1B1B1B;
+}
+
+#kiwi.theme_cli .divider-horizontal {
+    border-top: 1px solid #303030;
+    border-bottom: 1px solid #1B1B1B;
+}
\ No newline at end of file