Browse Source

add less stylesheet for tt-irc

Andrew Dolgov 2 years ago
parent
commit
173d1f6297
6 changed files with 1065 additions and 559 deletions
  1. 2 0
      Makefile
  2. 1 1
      index.php
  3. 2 2
      prefs.php
  4. 411 555
      tt-irc.css
  5. 648 0
      tt-irc.less
  6. 1 1
      users.php

+ 2 - 0
Makefile

@@ -0,0 +1,2 @@
+tt-irc.css: tt-irc.less
+	lessc $^ > [email protected]

+ 1 - 1
index.php

@@ -230,7 +230,7 @@
 		<div id="sidebar-inner">
 
 		<!-- fuck you very much, MSIE team -->
-		<form action="javascript:void(null);" method="post" class="connect-form">
+		<form action="javascript:void(null);" method="post" class="form form-inline">
 		<div id="connect">
 			<button class="btn btn-default"
 				id="connect-btn" data-bind="enable: toggleConnection, text: connectBtnLabel, click: toggleConnection"> </button>

+ 2 - 2
prefs.php

@@ -248,7 +248,7 @@
 
 		<h5><?php echo __('Servers') ?></h5>
 
-		<ul id="servers-list" class="list-unstyled scrollable">
+		<ul id="servers-list" class="list-unstyled scrollable panel panel-default">
 			<?php print_servers($id); ?>
 		</ul>
 
@@ -417,7 +417,7 @@
 
 		<h5><?php echo __('Connections') ?></h5>
 
-		<ul class="scrollable list-unstyled" id="connections-list"><?php print_connections() ?></ul>
+		<ul class="scrollable panel panel-default list-unstyled" id="connections-list"><?php print_connections() ?></ul>
 
 	</form>
 

+ 411 - 555
tt-irc.css

@@ -1,695 +1,551 @@
 div#errorBox textarea {
-	width : 100%;
-	height : 300px;
+  width: 100%;
+  height: 300px;
 }
-
 .modal-body {
-	max-height : 500px;
-	overflow : auto;
+  max-height: 500px;
+  overflow: auto;
 }
-
 #header {
-	margin : 5px 15px 5px 5px;
-	height : 15px;
-	text-align : right;
-	color : #555;
-	font-family : "Segoe WP", "Segoe UI Web", "Segoe UI",
-		Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 5px 15px 5px 5px;
+  height: 15px;
+  text-align: right;
+  color: #4d4d4d;
+  font-family: "Segoe WP", "Segoe UI Web", "Segoe UI", Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-
 #input {
-	bottom : 5px;
-	height : 25px;
-	left : 100px;
-	right : 155px;
-	position : absolute;
-	text-align : center;
-}
-
-/*#emoticon-prompt {
-	padding-top : 1px;
-	height : 24px;
-
+  bottom: 5px;
+  height: 25px;
+  left: 100px;
+  right: 155px;
+  position: absolute;
+  text-align: center;
 }
-	position : absolute;
-	right : 115px;
-	bottom : 6px;
-	text-align : center;
-	padding-top : 1px;
-	height : 24px;
+#input textarea {
+  padding: 0px;
+  width: 100%;
+  height: 24px;
+  margin: 0px;
+  font-size: 14px;
+  line-height: 24px;
+  resize: none;
+  font-family: sans-serif;
+  padding-left: 4px;
+  overflow: hidden;
+}
+#input textarea .emoticon-preview {
+  position: absolute;
+  width: 30%;
+  height: 220px;
+  overflow: hidden;
+  padding: 5px;
+  border: 1px dotted red;
+  right: 10px;
+  bottom: 10px;
+  text-align: left;
 }
-
-#chanmute-prompt {
-	position : absolute;
-	right : 70px;
-	bottom : 6px;
-	text-align : center;
-	padding-top : 1px;
-	height : 24px;
-}*/
-
-#chanmute-filter {
-	position : absolute;
-	bottom : 120px;
-	height : 16px;
-	left : 5px;
-	width : 16px;
+#input textarea.expanded {
+  bottom: 0px;
+  position: absolute;
+  height: 240px;
+  line-height: normal;
+  transition: height 0.1s ease;
+  overflow: auto;
+  padding: 4px;
 }
-
 #emoticons {
-	border-width : 1px 0px 1px 0px;
-	border-color : #ccc;
-	border-style : solid;
-	position : absolute;
-	bottom : 0px;
-	right : 0px;
-	width : 100%;
-	height : 250px;
-	overflow : auto;
+  border-width: 1px 0px 1px 0px;
+  border-color: rgba(0, 0, 0, 0.2);
+  border-style: solid;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  width: 100%;
+  height: 250px;
+  overflow: auto;
 }
-
 #emoticons img {
-	max-width : 40px;
-	max-height : 40px;
-	cursor : pointer;
-	vertical-align : middle;
+  max-width: 40px;
+  max-height: 40px;
+  cursor: pointer;
+  vertical-align: middle;
 }
-
 #emoticons .wrapper {
-	width : 33%;
-	height : 40px;
-	float : left;
-	text-align : center;
+  width: 33%;
+  height: 40px;
+  float: left;
+  text-align: center;
 }
-
 #sidebar {
-	position : absolute;
-	overflow : auto;
-	top : 0px;
-	right : 0px;
-	width : 155px;
-	overflow : auto;
-	bottom : 35px;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 155px;
+  overflow: auto;
+  bottom: 35px;
 }
-
-#sidebar-inner {
-	margin : 5px;
+#sidebar #sidebar-inner {
+  margin: 5px;
 }
-
 #connect {
-	text-align : center;
+  text-align: center;
 }
-
 #connect-btn {
-	width : 100%;
-	height : 24px;
-	padding-top : 1px;
+  width: 100%;
+  height: 24px;
+  padding-top: 1px;
 }
-
 #nick {
-	position : absolute;
-	left : 5px;
-	width : 90px;
-	bottom : 5px;
-	height : 25px;
-	line-height : 25px;
-	text-align : right;
-	cursor : pointer;
-	overflow : hidden;
-	font-family : "Segoe WP", "Segoe UI Web", "Segoe UI",
-		Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#input div.wrapper {
-
+  position: absolute;
+  left: 5px;
+  width: 90px;
+  bottom: 5px;
+  height: 25px;
+  line-height: 25px;
+  text-align: right;
+  cursor: pointer;
+  overflow: hidden;
+  font-family: "Segoe WP", "Segoe UI Web", "Segoe UI", Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-
-#input textarea.expanded {
-	bottom : 0px;
-	position : absolute;
-	height : 240px;
-	line-height : normal;
-	transition: height 0.1s ease;
-	overflow : auto;
-	padding : 4px;
-}
-
-#input textarea {
-	padding : 0px;
-	width : 100%;
-	height : 24px;
-	margin : 0px;
-	font-size : 14px;
-	line-height : 24px;
-	resize : none;
-	font-family : sans-serif;
-	padding-left : 4px;
-	overflow : hidden;
-}
-
-div.emoticon-preview {
-	position : absolute;
-	width : 30%;
-	height : 220px;
-	overflow : hidden;
-	padding : 5px;
-	border : 1px dotted red;
-	right : 10px;
-	bottom : 10px;
-	text-align : left;
-}
-
 #toolbar {
-	top : 40px;
-	right : 200px;
-	left : 0px;
-	position : absolute;
-	overflow : auto;
-	height : 30px;
-	border-collapse : collapse;
-	line-height : 30px;
-	padding-left : 5px;
-	font-size : 12px;
+  top: 40px;
+  right: 200px;
+  left: 0px;
+  position: absolute;
+  overflow: auto;
+  height: 30px;
+  border-collapse: collapse;
+  line-height: 30px;
+  padding-left: 5px;
+  font-size: 12px;
 }
-
 #tabs {
-	position : absolute;
-	top : 45px;
-	width : 156px;
-	left : 5px;
-	bottom : 5px;
-	overflow : auto;
+  position: absolute;
+  top: 45px;
+  width: 156px;
+  left: 5px;
+  bottom: 5px;
+  overflow: auto;
+}
+#tabs-list {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+  white-space: nowrap;
+  overflow: hidden;
 }
-
 #tabs-list span.conn-img.connected {
-	background : #B8F2B8;
+  background: #B8F2B8;
 }
-
 #tabs-list span.conn-img {
-	display : block;
-	vertical-align : middle;
-	margin-right : 7px;
-	font-size : 13px;
-	float : right;
-	text-align : center;
-	width : 11px;
-	height : 11px;
-	border : 1px solid #ccc;
-	border-radius : 20px;
-	margin-top : 4px;
-	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  display: block;
+  vertical-align: middle;
+  margin-right: 7px;
+  font-size: 13px;
+  float: right;
+  text-align: center;
+  width: 11px;
+  height: 11px;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  margin-top: 4px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
 }
-
 #tabs-list li.selected span.close-img {
-	color : gray;
+  color: gray;
 }
-
 #tabs-list span.close-img {
-	display : block;
-	vertical-align : middle;
-	margin-right : 8px;
-	font-size : 16px;
-	float : right;
-	font-weight : bold;
-	color : #e0e0e0;
-	position : relative;
-	top : -2px;
+  display: block;
+  vertical-align: middle;
+  margin-right: 8px;
+  font-size: 16px;
+  float: right;
+  font-weight: bold;
+  color: #e0e0e0;
+  position: relative;
+  top: -2px;
 }
-
 #tabs-list span.unread {
-	display : block;
-	float : right;
-	color : #ccc;
-	font-size : 9px;
-	font-weight : normal;
-	line-height : 21px;
-}
-
-#tabs-list {
-	list-style-type : none;
-	margin : 0px;
-	padding : 0px;
-	white-space : nowrap;
-	overflow : hidden;
+  display: block;
+  float: right;
+  color: #ccc;
+  font-size: 9px;
+  font-weight: normal;
+  line-height: 21px;
 }
-
 #tabs-list li {
-	font-family : "Segoe WP", "Segoe UI Web", "Segoe UI", Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
-	text-align : left;
-	text-indent : 10px;
-	padding : 5px 0px 5px 0px;
-	cursor : pointer;
-	z-index : 4;
-	position : relative;
-	right : -1px;
-}
-
-ul#tabs-list li.offline {
-	color : #aaa;
+  font-family: "Segoe WP", "Segoe UI Web", "Segoe UI", Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  text-align: left;
+  text-indent: 10px;
+  padding: 5px 0px 5px 0px;
+  cursor: pointer;
+  z-index: 4;
+  position: relative;
+  right: -1px;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px 0px 1px 1px;
+}
+#tabs-list li.offline {
+  color: #aaa;
 }
-
 #tabs-list li div {
-	overflow : hidden;
-	margin-right : 5px;
+  overflow: hidden;
+  margin-right: 5px;
 }
-
 #tabs-list li div.indented {
-	padding-left : 10px;
-	text-overflow : ellipsis;
+  padding-left: 10px;
+  text-overflow: ellipsis;
 }
-
 #tabs-list li.attention {
-	color : red;
+  color: red;
 }
-
 #tabs-list li.muted {
-	font-style : italic;
+  font-style: italic;
 }
-
 #tabs-list li.highlight {
-	color : blue;
+  color: blue;
 }
-
 #tabs-list li.selected {
-	color : black ! important;
-	background : #C4E0FF;
-	border-color : #5FA7CC;
-	font-weight : bold;
-	/*text-shadow : 0px 0px 4px #fff;*/
-	border-radius : 4px 0px 0px 4px;
-   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
+  color: black ! important;
+  background: #c4e0ff;
+  border-color: #5fa7cc;
+  font-weight: bold;
+  /*text-shadow : 0px 0px 4px #fff;*/
 
-body.main {
-	overflow : hidden;
+  border-radius: 4px 0px 0px 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
-
-body.main.filter_muted #tabs-list ul.sub-tabs li.muted {
-	display : none;
+#tabs-list ul.sub-tabs {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
 }
-
-body.main.active #tabs-list li.selected span.unread {
-	display : none;
-}
-
-#tabs-list li {
-	border-color : transparent;
-	border-style : solid;
-	border-width : 1px 0px 1px 1px;
+body.main {
+  overflow: hidden;
 }
-
-ul.sub-tabs {
-	list-style-type : none;
-	margin : 0px;
-	padding : 0px;
+body.main.filter_muted #tabs-list ul.sub-tabs li.muted,
+body.main.active #tabs-list li.selected span.unread {
+  display: none;
 }
-
 #content {
-	top : 30px;
-	right : 5px;
-	left : 160px;
-	position : absolute;
-	bottom : 5px;
-	word-wrap : break-word;
-	margin : 0px;
-	background : #C4E0FF;
-	border-color : #5FA7CC;
-	border-width : 1px;
-	border-style : solid;
-	border-radius : 4px;
-   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  top: 30px;
+  right: 5px;
+  left: 160px;
+  position: absolute;
+  bottom: 5px;
+  word-wrap: break-word;
+  margin: 0px;
+  background: #c4e0ff;
+  border-color: #5fa7cc;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
-
 #topic {
-	position : absolute;
-	top : 0px;
-	left : 5px;
-	height : 25px;
-	right : 155px;
-	text-align : center;
-	padding : 5px 0px 5px 0px;
+  position: absolute;
+  top: 0px;
+  left: 5px;
+  height: 25px;
+  right: 155px;
+  text-align: center;
+  padding: 5px 0px 5px 0px;
 }
-
 #topic #topic-input {
-	padding : 0px;
-	width : 100%;
-	height : 24px;
-	margin : 0px;
-	padding-top : 2px;
-	text-indent : 5px;
-	text-align : left;
-	cursor : pointer;
-	overflow : hidden;
-	white-space : nowrap;
-	color : #555;
+  padding: 0px;
+  width: 100%;
+  height: 24px;
+  margin: 0px;
+  padding-top: 2px;
+  text-indent: 5px;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #555;
 }
-
 #topic #topic-input-real {
-	padding : 0px;
-	width : 100%;
-	height : 24px;
-	margin : 0px;
-	padding-top : 2px;
-	font-size : 14px;
-	text-indent : 5px;
-	resize : none;
-	font-family : sans-serif;
-	position : absolute;
-	z-index : 2;
+  padding: 0px;
+  width: 100%;
+  height: 24px;
+  margin: 0px;
+  padding-top: 2px;
+  font-size: 14px;
+  text-indent: 5px;
+  resize: none;
+  font-family: sans-serif;
+  position: absolute;
+  z-index: 2;
 }
-
 #topic #topic-input-real.expanded {
-	position : absolute;
-	height : 120px;
-	text-indent : 0px;
-	line-height : normal;
-	transition: height 0.1s ease;
-	padding : 4px;
+  position: absolute;
+  height: 120px;
+  text-indent: 0px;
+  line-height: normal;
+  transition: height 0.1s ease;
+  padding: 4px;
 }
-
 #topic #topic-input img {
-	max-height : 100%;
-	height : auto;
-	width : auto;
+  max-height: 100%;
+  height: auto;
+  width: auto;
 }
-
 #topic #topic-input.disabled {
-	background : #f0f0f0;
+  background: #f0f0f0;
 }
-
 #topic div.wrapper {
-	padding-right : 1px;
+  padding-right: 1px;
 }
-
 #log {
-	position : absolute;
-	top : 35px;
-	right : 154px;
-	left : 5px;
-	bottom : 35px;
-	overflow : auto;
-	background : white;
-	border : 1px solid #ccc;
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-	border-radius : 4px;
+  position: absolute;
+  top: 35px;
+  right: 154px;
+  left: 5px;
+  bottom: 35px;
+  overflow: auto;
+  background: white;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  border-radius: 4px;
 }
-
-form.connect-form {
-	margin : 0px;
-	display : inline;
+#log ul#log-list {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+}
+#log span.timestamp {
+  color: #999;
+}
+#log span.pvt-sender,
+#log #log span.pvt-sender-out {
+  color: black;
+}
+#log span.sender {
+  color: green;
+}
+#log .lt,
+#log .gt {
+  color: blue;
+}
+#log span.message {
+  color: black;
+}
+#log span.sys-message {
+  color: #5fa7cc;
+}
+#log span.action {
+  color: gray;
+}
+#log .row {
+  margin: 0px;
+  border-width: 0px 0px 1px 0px;
+  border-style: solid;
+  border-color: #ddd;
+  border-collapse: collapse;
+  margin: 2px 5px 2px 5px;
+  display: table;
+}
+#log .row > * {
+  display: table-cell;
+  vertical-align: middle;
+}
+#log .row .message,
+#log .row .action,
+#log .row .sys-message {
+  padding-left: 3px;
+  width: 100%;
+  word-break: break-word;
+}
+#log .row .sender {
+  white-space: nowrap;
+}
+#log .row .timestamp {
+  padding-right: 3px;
+}
+#log .row.HL,
+#log .row.HL:nth-child(even) {
+  background-color: #fff7d5;
+  border-color: #e7d796;
+}
+#log .row:nth-child(even) {
+  background: #fafafa;
+}
+#log .row.LV {
+  border-bottom-width: 1px;
+  border-bottom-color: #ff3333;
+  border-bottom-style: dashed;
 }
-
 #userlist {
-	font-size : 12px;
-	margin-top : 5px;
-	font-family : "Segoe WP", "Segoe UI Web", "Segoe UI",
-		Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  margin-top: 5px;
+  font-family: "Segoe WP", "Segoe UI Web", "Segoe UI", Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-
 #userlist span.user-img {
-	display : inline-block;
-	vertical-align : middle;
-	width : 11px;
-	height : 11px;
-	border : 1px solid #ccc;
-	border-radius : 20px;
-	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-	background : #f0f0f0;
+  display: inline-block;
+  vertical-align: middle;
+  width: 11px;
+  height: 11px;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  background: #f0f0f0;
 }
-
 #userlist span.user-img.voice {
-	background : #EDE4B6;
+  background: #EDE4B6;
 }
-
 #userlist span.user-img.op {
-	background : #B8F2B8;
+  background: #B8F2B8;
 }
-
 #log-inner {
-	padding : 5px;
+  padding: 5px;
 }
-
 body.dark #log .message pre {
-	background : #181914;
-	color : #dccf8f;
-	border-color : #333;
+  background: #181914;
+  color: #dccf8f;
+  border-color: #333;
 }
-
 body #log .message pre {
-	padding : 8px;
-	margin : 4px;
-	border : 1px solid #ccc;
-	color : rgb(68,68,68);
-	display : table-cell;
+  padding: 8px;
+  margin: 4px;
+  border: 1px solid #ccc;
+  color: #444444;
+  display: table-cell;
 }
-
-
-#userlist-inner {
-}
-
 #dialog_overlay {
-	background : white;
-	opacity: 0.8;
-	left : 0;
-	top : 0;
-	height : 100%;
-	width : 100%;
-	z-index : 4;
-	position : absolute;
-}
-
-#overlay, #dnd_overlay {
-	background : white;
-	left : 0;
-	top : 0;
-	height : 100%;
-	width : 100%;
-	z-index : 100;
-	position : absolute;
+  background: white;
+  opacity: 0.8;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 4;
+  position: absolute;
+}
+#overlay,
+#dnd_overlay {
+  background: white;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+  position: absolute;
 }
-
 #dnd_overlay {
-	opacity : 0.75;
-	display : table;
-	text-align : center;
+  opacity: 0.75;
+  display: table;
+  text-align: center;
 }
-
 #dnd_overlay .inner {
-	font-weight : bold;
-	font-size : 36px;
-	display : table-cell;
-	vertical-align : middle;
+  font-weight: bold;
+  font-size: 36px;
+  display: table-cell;
+  vertical-align: middle;
 }
-
 #overlay_inner {
-	font-weight : bold;
-	margin : 10px;
-}
-
-#log ul#log-list {
-  list-style-type : none;
-  margin : 0px;
-  padding : 0px;
-}
-
-#log span.timestamp {
-	color : #999;
-}
-
-#log span.pvt-sender, #log span.pvt-sender-out {
-	color : black;
-}
-
-#log span.sender {
-	color : green;
-}
-
-#log .lt, #log .gt {
-	color : blue;
-}
-
-#log span.message {
-	color : black;
-}
-
-#log span.sys-message {
-	color : #5FA7CC;
-}
-
-#log span.action {
-	color : gray;
+  font-weight: bold;
+  margin: 10px;
 }
-
 ul#userlist-list {
-	list-style-type : none;
-	margin : 0px;
-	padding : 0px;
-	white-space : nowrap;
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+  white-space: nowrap;
 }
-
 ul#userlist-list li {
-	cursor : pointer;
-	margin-bottom : 2px;
-}
-
-ul#userlist-list li:hover {
-	color : #4684ff;
-}
-
-body.main .row {
-	margin : 0px;
-	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	border-color : #ddd;
-	border-collapse : collapse;
-	margin : 2px 5px 2px 5px;
-	display : table;
+  cursor: pointer;
+  margin-bottom: 2px;
 }
-
-body.main .row > * {
-	display : table-cell;
-	vertical-align : middle;
-}
-
-body.main .row .message,
-body.main .row .action,
-body.main .row .sys-message {
-	padding-left : 3px;
-	width : 100%;
-	word-break : break-word;
-}
-
-body.main .row .sender {
-	white-space : nowrap;
-}
-
-body.main .row .timestamp {
-	padding-right : 3px;
-}
-
-body.main .row.HL, body.main .row.HL:nth-child(even) {
-	background-color : #fff7d5;
-	border-color : #e7d796;
-}
-
-body.main .row:nth-child(even), .row:nth-child(even) td {
-	background : #fafafa;
-}
-
-body.main #log-list .row.LV {
-	border-bottom-width : 1px;
-	border-bottom-color : #ff3333;
-	border-bottom-style : dashed;
-}
-
 textarea.user-css {
-	display : block;
-	width : 510px;
-	height : 200px;
-	overflow : auto;
+  display: block;
+  width: 510px;
+  height: 200px;
+  overflow: auto;
 }
-
 .invisible {
-	display : none;
+  display: none;
 }
-
 .away {
-	font-style : italic;
+  font-style: italic;
 }
-
 ul.scrollable {
-	background-color: #ffffff;
-	border: 1px solid #cccccc;
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-	height : 120px;
-	overflow : auto;
-	border-radius: 3px;
+  height: 120px;
+  overflow: auto;
+  border-radius: 3px;
+  padding-left: 10px;
 }
-
 ul.scrollable li.Selected {
-	font-weight : bold;
+  font-weight: bold;
 }
-
 ul.scrollable li {
-	margin : 4px;
+  margin: 4px;
 }
-
 ul.scrollable li > input[type="checkbox"] {
-	margin-top : 0px;
-	margin-left : 4px;
+  margin-top: 0px;
+  margin-left: 4px;
 }
-
 ul.scrollable li > a {
-	vertical-align : middle;
+  vertical-align: middle;
 }
-
-span.message a:visited, span.sys-message a:visited, a[data-visited="true"] {
-	color : #6100D1;
+span.message a:visited,
+span.sys-message a:visited,
+a[data-visited="true"] {
+  color: #6100D1;
 }
-
 ul.emoticons-long {
-	overflow : auto;
-	padding : 10px;
-	list-style-type : none;
-	position : absolute;
-	top : 56px;
-	bottom : 0px;
-	left : 0px;
-	right : 0px;
+  overflow: auto;
+  padding: 10px;
+  list-style-type: none;
+  position: absolute;
+  top: 56px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
 }
-
 ul.emoticons-long li {
-	float : left;
-	width : 64px;
-	height : 64px;
-	font-size : 9px;
-	text-align : center;
-	cursor : pointer;
+  float: left;
+  width: 64px;
+  height: 64px;
+  font-size: 9px;
+  text-align: center;
+  cursor: pointer;
 }
-
 ul.emoticons-long .wrapper {
-	width : 48px;
-	height : 48px;
-	margin : 0 auto;
+  width: 48px;
+  height: 48px;
+  margin: 0 auto;
 }
-
 ul.emoticons-long .wrapper img {
-	max-width : 48px;
-	max-height : 48px;
-	margin : 0 auto;
+  max-width: 48px;
+  max-height: 48px;
+  margin: 0 auto;
 }
-
 ::-webkit-scrollbar {
-	width: 4px;
+  width: 4px;
 }
-
 ::-webkit-scrollbar-thumb {
-	background-color: rgba(0,0,0,0.2);
+  background-color: rgba(0, 0, 0, 0.2);
 }
-
 ::-webkit-scrollbar-track {
-	background-color:rgba(0,0,0,0.1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
-
-#alerts-indicator, #net-alert {
-	cursor : pointer;
-	font-size : 12px;
+#alerts-indicator,
+#net-alert {
+  cursor: pointer;
+  font-size: 12px;
 }
-
 .aux-buttons {
-	position : fixed;
-	right : 10px;
-	bottom : 13px;
-	height : 24px;
-	width : 140px;
+  position: fixed;
+  right: 10px;
+  bottom: 13px;
+  height: 24px;
+  width: 140px;
 }
-
 .aux-buttons > .btn {
-	padding-top : 1px;
-	height : 24px;
+  padding-top: 1px;
+  height: 24px;
 }
-
 #users-list {
-	height : 250px;
+  height: 250px;
 }
-

+ 648 - 0
tt-irc.less

@@ -0,0 +1,648 @@
[email protected]: "Segoe WP", "Segoe UI Web", "Segoe UI", Ubuntu, "DejaVu Sans", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
[email protected]: black;
[email protected]: #C4E0FF;
[email protected]: #5FA7CC;
+
+div#errorBox textarea {
+	width : 100%;
+	height : 300px;
+}
+
+.modal-body {
+	max-height : 500px;
+	overflow : auto;
+}
+
+#header {
+	margin : 5px 15px 5px 5px;
+	height : 15px;
+	text-align : right;
+	color : lighten(@default-fg, 30%);
+	font-family : @fonts-ui;
+}
+
+#input {
+	bottom : 5px;
+	height : 25px;
+	left : 100px;
+	right : 155px;
+	position : absolute;
+	text-align : center;
+
+	textarea {
+		padding : 0px;
+		width : 100%;
+		height : 24px;
+		margin : 0px;
+		font-size : 14px;
+		line-height : 24px;
+		resize : none;
+		font-family : sans-serif;
+		padding-left : 4px;
+		overflow : hidden;
+	
+		.emoticon-preview {
+			position : absolute;
+			width : 30%;
+			height : 220px;
+			overflow : hidden;
+			padding : 5px;
+			border : 1px dotted red;
+			right : 10px;
+			bottom : 10px;
+			text-align : left;
+		}
+	}
+	
+	textarea.expanded {
+		bottom : 0px;
+		position : absolute;
+		height : 240px;
+		line-height : normal;
+		transition: height 0.1s ease;
+		overflow : auto;
+		padding : 4px;
+	}
+	
+}
+
+#emoticons {
+	border-width : 1px 0px 1px 0px;
+	border-color : rgba(0,0,0,0.2);
+	border-style : solid;
+	position : absolute;
+	bottom : 0px;
+	right : 0px;
+	width : 100%;
+	height : 250px;
+	overflow : auto;
+
+	img {
+		max-width : 40px;
+		max-height : 40px;
+		cursor : pointer;
+		vertical-align : middle;
+	}
+
+	.wrapper {
+		width : 33%;
+		height : 40px;
+		float : left;
+		text-align : center;
+	}
+}
+
+#sidebar {
+	position : absolute;
+	overflow : auto;
+	top : 0px;
+	right : 0px;
+	width : 155px;
+	overflow : auto;
+	bottom : 35px;
+
+	#sidebar-inner {
+		margin : 5px;
+	}
+}
+
+#connect {
+	text-align : center;
+}
+
+#connect-btn {
+	width : 100%;
+	height : 24px;
+	padding-top : 1px;
+}
+
+#nick {
+	position : absolute;
+	left : 5px;
+	width : 90px;
+	bottom : 5px;
+	height : 25px;
+	line-height : 25px;
+	text-align : right;
+	cursor : pointer;
+	overflow : hidden;
+	font-family : @fonts-ui;
+}
+
+#toolbar {
+	top : 40px;
+	right : 200px;
+	left : 0px;
+	position : absolute;
+	overflow : auto;
+	height : 30px;
+	border-collapse : collapse;
+	line-height : 30px;
+	padding-left : 5px;
+	font-size : 12px;
+}
+
+#tabs {
+	position : absolute;
+	top : 45px;
+	width : 156px;
+	left : 5px;
+	bottom : 5px;
+	overflow : auto;
+}
+
+#tabs-list {
+	list-style-type : none;
+	margin : 0px;
+	padding : 0px;
+	white-space : nowrap;
+	overflow : hidden;
+
+	span.conn-img.connected {
+		background : #B8F2B8;
+	}
+	
+	span.conn-img {
+		display : block;
+		vertical-align : middle;
+		margin-right : 7px;
+		font-size : 13px;
+		float : right;
+		text-align : center;
+		width : 11px;
+		height : 11px;
+		border : 1px solid #ccc;
+		border-radius : 20px;
+		margin-top : 4px;
+		box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+	}
+	
+	li.selected span.close-img {
+		color : gray;
+	}
+	
+	span.close-img {
+		display : block;
+		vertical-align : middle;
+		margin-right : 8px;
+		font-size : 16px;
+		float : right;
+		font-weight : bold;
+		color : #e0e0e0;
+		position : relative;
+		top : -2px;
+	}
+	
+	span.unread {
+		display : block;
+		float : right;
+		color : #ccc;
+		font-size : 9px;
+		font-weight : normal;
+		line-height : 21px;
+	}
+	
+	li {
+		font-family : @fonts-ui;
+		text-align : left;
+		text-indent : 10px;
+		padding : 5px 0px 5px 0px;
+		cursor : pointer;
+		z-index : 4;
+		position : relative;
+		right : -1px;
+
+		border-color : transparent;
+		border-style : solid;
+		border-width : 1px 0px 1px 1px;
+	}
+	
+	li.offline {
+		color : #aaa;
+	}
+	
+	li div {
+		overflow : hidden;
+		margin-right : 5px;
+	}
+	
+	li div.indented {
+		padding-left : 10px;
+		text-overflow : ellipsis;
+	}
+	
+	li.attention {
+		color : red;
+	}
+	
+	li.muted {
+		font-style : italic;
+	}
+	
+	li.highlight {
+		color : blue;
+	}
+	
+	li.selected {
+		color : black ! important;
+		background : @panel-bg;
+		border-color : @panel-border;
+		font-weight : bold;
+		/*text-shadow : 0px 0px 4px #fff;*/
+		border-radius : 4px 0px 0px 4px;
+	   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	ul.sub-tabs {
+		list-style-type : none;
+		margin : 0px;
+		padding : 0px;
+	}
+}
+
+body.main {
+	overflow : hidden;
+}
+
+body.main.filter_muted #tabs-list ul.sub-tabs li.muted,
+body.main.active #tabs-list li.selected span.unread {
+	display : none;
+}
+
+#content {
+	top : 30px;
+	right : 5px;
+	left : 160px;
+	position : absolute;
+	bottom : 5px;
+	word-wrap : break-word;
+	margin : 0px;
+	background : @panel-bg;
+	border-color : @panel-border;
+	border-width : 1px;
+	border-style : solid;
+	border-radius : 4px;
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+#topic {
+	position : absolute;
+	top : 0px;
+	left : 5px;
+	height : 25px;
+	right : 155px;
+	text-align : center;
+	padding : 5px 0px 5px 0px;
+
+	#topic-input {
+		padding : 0px;
+		width : 100%;
+		height : 24px;
+		margin : 0px;
+		padding-top : 2px;
+		text-indent : 5px;
+		text-align : left;
+		cursor : pointer;
+		overflow : hidden;
+		white-space : nowrap;
+		color : #555;
+	}
+	
+	#topic-input-real {
+		padding : 0px;
+		width : 100%;
+		height : 24px;
+		margin : 0px;
+		padding-top : 2px;
+		font-size : 14px;
+		text-indent : 5px;
+		resize : none;
+		font-family : sans-serif;
+		position : absolute;
+		z-index : 2;
+	}
+	
+	#topic-input-real.expanded {
+		position : absolute;
+		height : 120px;
+		text-indent : 0px;
+		line-height : normal;
+		transition: height 0.1s ease;
+		padding : 4px;
+	}
+	
+	#topic-input img {
+		max-height : 100%;
+		height : auto;
+		width : auto;
+	}
+	
+	#topic-input.disabled {
+		background : #f0f0f0;
+	}
+	
+	div.wrapper {
+		padding-right : 1px;
+	}
+}
+
+#log {
+	position : absolute;
+	top : 35px;
+	right : 154px;
+	left : 5px;
+	bottom : 35px;
+	overflow : auto;
+	background : white;
+	border : 1px solid #ccc;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	border-radius : 4px;
+
+	ul#log-list {
+	  list-style-type : none;
+	  margin : 0px;
+	  padding : 0px;
+	}
+	
+	span.timestamp {
+		color : #999;
+	}
+	
+	span.pvt-sender, #log span.pvt-sender-out {
+		color : black;
+	}
+	
+	span.sender {
+		color : green;
+	}
+	
+	.lt, .gt {
+		color : blue;
+	}
+	
+	span.message {
+		color : black;
+	}
+	
+	span.sys-message {
+		color : @panel-border;
+	}
+	
+	span.action {
+		color : gray;
+	}
+	
+	.row {
+		margin : 0px;
+		border-width : 0px 0px 1px 0px;
+		border-style : solid;
+		border-color : #ddd;
+		border-collapse : collapse;
+		margin : 2px 5px 2px 5px;
+		display : table;
+	}
+
+	.row > * {
+		display : table-cell;
+		vertical-align : middle;
+	}
+
+	.row .message,
+	.row .action,
+	.row .sys-message {
+		padding-left : 3px;
+		width : 100%;
+		word-break : break-word;
+	}
+	
+	.row .sender {
+		white-space : nowrap;
+	}
+	
+	.row .timestamp {
+		padding-right : 3px;
+	}
+	
+	.row.HL, .row.HL:nth-child(even) {
+		background-color : #fff7d5;
+		border-color : #e7d796;
+	}
+	
+	.row:nth-child(even) {
+		background : #fafafa;
+	}
+	
+	.row.LV {
+		border-bottom-width : 1px;
+		border-bottom-color : #ff3333;
+		border-bottom-style : dashed;
+	}	
+
+}
+
+#userlist {
+	font-size : 12px;
+	margin-top : 5px;
+	font-family : @fonts-ui;
+
+	span.user-img {
+		display : inline-block;
+		vertical-align : middle;
+		width : 11px;
+		height : 11px;
+		border : 1px solid #ccc;
+		border-radius : 20px;
+		box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+		background : #f0f0f0;
+	}
+	
+	span.user-img.voice {
+		background : #EDE4B6;
+	}
+	
+	span.user-img.op {
+		background : #B8F2B8;
+	}
+	
+}
+
+#log-inner {
+	padding : 5px;
+}
+
+body.dark #log .message pre {
+	background : #181914;
+	color : #dccf8f;
+	border-color : #333;
+}
+
+body #log .message pre {
+	padding : 8px;
+	margin : 4px;
+	border : 1px solid #ccc;
+	color : rgb(68,68,68);
+	display : table-cell;
+}
+
+#dialog_overlay {
+	background : white;
+	opacity: 0.8;
+	left : 0;
+	top : 0;
+	height : 100%;
+	width : 100%;
+	z-index : 4;
+	position : absolute;
+}
+
+#overlay, #dnd_overlay {
+	background : white;
+	left : 0;
+	top : 0;
+	height : 100%;
+	width : 100%;
+	z-index : 100;
+	position : absolute;
+}
+
+#dnd_overlay {
+	opacity : 0.75;
+	display : table;
+	text-align : center;
+}
+
+#dnd_overlay .inner {
+	font-weight : bold;
+	font-size : 36px;
+	display : table-cell;
+	vertical-align : middle;
+}
+
+#overlay_inner {
+	font-weight : bold;
+	margin : 10px;
+}
+
+ul#userlist-list {
+	list-style-type : none;
+	margin : 0px;
+	padding : 0px;
+	white-space : nowrap;
+
+	li {
+		cursor : pointer;
+		margin-bottom : 2px;
+	}
+}
+
+textarea.user-css {
+	display : block;
+	width : 510px;
+	height : 200px;
+	overflow : auto;
+}
+
+.invisible {
+	display : none;
+}
+
+.away {
+	font-style : italic;
+}
+
+ul.scrollable {
+	height : 120px;
+	overflow : auto;
+	border-radius: 3px;
+	padding-left : 10px;
+
+	li.Selected {
+		font-weight : bold;
+	}
+
+	li {
+		margin : 4px;
+	}
+	
+	li > input[type="checkbox"] {
+		margin-top : 0px;
+		margin-left : 4px;
+	}
+	
+	li > a {
+		vertical-align : middle;
+	}
+}
+
+span.message a:visited, span.sys-message a:visited, a[data-visited="true"] {
+	color : #6100D1;
+}
+
+ul.emoticons-long {
+	overflow : auto;
+	padding : 10px;
+	list-style-type : none;
+	position : absolute;
+	top : 56px;
+	bottom : 0px;
+	left : 0px;
+	right : 0px;
+
+	li {
+		float : left;
+		width : 64px;
+		height : 64px;
+		font-size : 9px;
+		text-align : center;
+		cursor : pointer;
+	}
+	
+	.wrapper {
+		width : 48px;
+		height : 48px;
+		margin : 0 auto;
+	}
+	
+	.wrapper img {
+		max-width : 48px;
+		max-height : 48px;
+		margin : 0 auto;
+	}
+
+}
+
+::-webkit-scrollbar {
+	width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: rgba(0,0,0,0.2);
+}
+
+::-webkit-scrollbar-track {
+	background-color:rgba(0,0,0,0.1);
+}
+
+#alerts-indicator, #net-alert {
+	cursor : pointer;
+	font-size : 12px;
+}
+
+.aux-buttons {
+	position : fixed;
+	right : 10px;
+	bottom : 13px;
+	height : 24px;
+	width : 140px;
+
+	> .btn {
+		padding-top : 1px;
+		height : 24px;
+	}
+}
+
+#users-list {
+	height : 250px;
+}
+

+ 1 - 1
users.php

@@ -37,7 +37,7 @@
 	<div class="modal-body">
 		<div id="mini-notice" class="alert alert-warning" style='display : none'>&nbsp;</div>
 
-		<ul class="list-unstyled scrollable" id="users-list">
+		<ul class="list-unstyled scrollable panel panel-default" id="users-list">
 			<?php echo format_users(); ?>
 		</ul>
 	</div>