Browse Source

add less stylesheet for tt-irc

Andrew Dolgov 1 year 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>
 

File diff suppressed because it is too large
+ 411 - 555
tt-irc.css


+ 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>