Browse Source
Former-commit-id: afe89532f949937d4b9ca2ccb0f428bca5bd7b3e Former-commit-id: 6a997fd1400740a52797ce7e20d208196fa4244cbeta
jlukic
11 years ago
70 changed files with 2446 additions and 1433 deletions
@ -0,0 +1,306 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'chatroom' |
|||
|
|||
title : 'Chatroom' |
|||
type : 'UI Module' |
|||
--- |
|||
|
|||
<link rel="stylesheet" type="text/css" href="/components/semantic/modules/chatroom.css"> |
|||
|
|||
<script src="http://js.pusher.com/2.1/pusher.min.js" type="text/javascript"></script> |
|||
<script src="/components/semantic/modules/chatroom.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Chatroom <span class="ui red label">Incomplete</span></h1> |
|||
<p>A chatroom allows users to communicate to each other.</p> |
|||
<div class="ui teal basic labeled icon overview toggle button"> |
|||
Definition |
|||
<i class="book icon"></i> |
|||
</div> |
|||
<div class="ui black basic download buttons"> |
|||
<a class="ui button">Download</a> |
|||
<div class="ui top right pointing dropdown icon button"> |
|||
<i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<a class="item">Download |
|||
<span class="ui small label">ZIP</span> |
|||
</a> |
|||
<a class="item">View Source</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Usage</a> |
|||
<a class="item">Types</a> |
|||
<a class="item">Examples</a> |
|||
<a class="item">Settings</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h3 class="ui header">Initializing a chat room</h3> |
|||
<p>Using chatroom requires an account with <a href="http://www.pusher.com" target="_blank">pusher</a>, a company that provides turn-key web socket access.</p> |
|||
|
|||
<div class="code" data-type="javascript" data-demo="true"> |
|||
// modify these for your api settings received from pusher |
|||
$('.ui.chatroom') |
|||
.chatroom({ |
|||
key : 'f812089c851866cc2f3e', |
|||
endpoint: { |
|||
authentication : '/chat/authentication', |
|||
message : '/chat/send' |
|||
} |
|||
}) |
|||
; |
|||
</div> |
|||
<div class="ui chatroom"> |
|||
<div class="actions"> |
|||
<div class="message"> |
|||
<span class="ui mini inline loader"></span> |
|||
Joining chat |
|||
</div> |
|||
<div class="ui secondary mini right floated icon buttons"> |
|||
<div class="ui button"> |
|||
<i class="users icon"></i> |
|||
</div> |
|||
<div class="ui button"> |
|||
<i class="full resize icon"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="room"> |
|||
<div class="container"> |
|||
<div class="user-list"> |
|||
<div class="ui small text loader">Loading</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="talk"> |
|||
<div class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</div> |
|||
<input type="text" maxlength="200"> |
|||
<div class="ui send button"> |
|||
<i class="ui icon comment"></i> |
|||
Send |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Settings</h2> |
|||
|
|||
<div class="no example"> |
|||
|
|||
<h4 class="ui header">Chatroom Settings</h4> |
|||
<p>Chatroom settings modify the chatroom's behavior</p> |
|||
<table class="ui celled definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="four wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>key</td> |
|||
<td>false</td> |
|||
<td>Pusher API key</td> |
|||
</tr> |
|||
<tr> |
|||
<td>key</td> |
|||
<td>presence-chat</td> |
|||
<td>Channel to use. Pusher requires chatrooms to use channels beginning with presence-</td> |
|||
</tr> |
|||
<tr> |
|||
<td>scrollArea</td> |
|||
<td>9999</td> |
|||
<td>If a user is this many pixels away from bottom of the page it will automatically scroll when a message is receieved</td> |
|||
</tr> |
|||
<tr> |
|||
<td>customEvents</td> |
|||
<td>{}</td> |
|||
<td>An object containing custom events and functions to use with pusher</td> |
|||
</tr> |
|||
<tr> |
|||
<td>endpoint</td> |
|||
<td> |
|||
<div class="code"> |
|||
{ |
|||
message: false, |
|||
authentication: false |
|||
} |
|||
</div> |
|||
</td> |
|||
<td>Endpoints used to communicate authentication and chat messages</td> |
|||
</tr> |
|||
<tr> |
|||
<td>partingMessages</td> |
|||
<td>false</td> |
|||
<td>Whether to display messages when a user has joined chat</td> |
|||
</tr> |
|||
<tr> |
|||
<td>userCount</td> |
|||
<td>true</td> |
|||
<td>Whether to display the current logged in user count</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<div class="ui horizontal section icon divider"><i class="icon setting"></i></div> |
|||
<h4 class="ui header">Callbacks</h4> |
|||
<p>Callback settings specify a function to occur after a specific behavior.</p> |
|||
|
|||
<table class="ui celled definition table segment"> |
|||
<thead> |
|||
<th class="four wide">Setting</th> |
|||
<th>Context</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onJoin(user)</td> |
|||
<td>Chatroom</td> |
|||
<td>Called after each user joins a chat room</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
<div class="no example"> |
|||
|
|||
<h4 class="ui header">DOM Settings</h4> |
|||
<p>DOM settings specify how this module should interface with the DOM</p> |
|||
<table class="ui celled definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="four wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>chatroom</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>selector</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
selector : { |
|||
icon : '.icon' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>className</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
className : { |
|||
active : 'active', |
|||
hover : 'hover', |
|||
loading : 'loading' |
|||
}, |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
<div class="no example"> |
|||
|
|||
<h4 class="ui header">Debug Settings</h4> |
|||
<p>Debug settings controls debug output to the console</p> |
|||
<table class="ui celled definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="four wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>name</td> |
|||
<td>Chatroom</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>True</td> |
|||
<td>Provides performance output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>True</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>selector</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
selector : { |
|||
userCount : '.actions .message', |
|||
userListButton : '.actions .list.button', |
|||
expandButton : '.actions .expand.button', |
|||
room : '.room', |
|||
userList : '.room .list', |
|||
log : '.room .log', |
|||
message : '.room .log .message', |
|||
author : '.room log .message .author', |
|||
messageInput : '.talk input', |
|||
messageButton : '.talk .send.button' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>className</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
className : { |
|||
expand : 'expand', |
|||
active : 'active', |
|||
hover : 'hover', |
|||
down : 'down', |
|||
loading : 'loading' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>error</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
error: { |
|||
method : 'The method you called is not defined', |
|||
endpoint : 'Please define a message and authentication endpoint.', |
|||
key : 'You must specify a pusher key and channel.', |
|||
pusher : 'You must include the Pusher library.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,317 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'rating' |
|||
|
|||
title : 'Rating' |
|||
type : 'UI Module' |
|||
--- |
|||
|
|||
<script src="/javascript/rating.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Rating</h1> |
|||
<p>A rating allows a user to assess and view the desirability of content.</p> |
|||
<div class="ui teal basic labeled icon overview toggle button"> |
|||
Definition |
|||
<i class="book icon"></i> |
|||
</div> |
|||
<div class="ui black basic download buttons"> |
|||
<a class="ui button">Download</a> |
|||
<div class="ui top right pointing dropdown icon button"> |
|||
<i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<a class="item">Download |
|||
<span class="ui small label">ZIP</span> |
|||
</a> |
|||
<a class="item">View Source</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Usage</a> |
|||
<a class="item">Types</a> |
|||
<a class="item">Examples</a> |
|||
<a class="item">Settings</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h3 class="ui header">Initializing a rating</h3> |
|||
<p>To change the range of your rating, simply adjust the number of icons in the initialized html</p> |
|||
<div class="ui warning message"> |
|||
To use any variations besides the basic rating <a href="/elements/icon.html">ui icons</a> must be included to provide the additional icons required. |
|||
</div> |
|||
<div class="code" data-type="javascript"> |
|||
$('.ui.rating') |
|||
.rating() |
|||
; |
|||
</div> |
|||
<div class="code" data-type="html"> |
|||
<div class="ui rating"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Types</h2> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Rating</h4> |
|||
<p>A basic rating</p> |
|||
<div class="ui rating"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Star</h4> |
|||
<p>A star rating uses a set of star glyphs to show a rating</p> |
|||
<div class="ui star rating"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Heart</h4> |
|||
<p>A heart rating uses a set of heart glyphs to show a rating</p> |
|||
<div class="ui heart rating"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Examples</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Setting existing values</h4> |
|||
<p>Starting ratings can be set either using metadata values or the setting <code>initialRating</code>.</p> |
|||
<div class="ui ignored info message">If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.</div> |
|||
<div class="ui divided list"> |
|||
<div class="item"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
<div class="ui heart rating" data-rating="5"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">New York Dog Fair</div> |
|||
A fun day at the fair |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<img src="/images/demo/avatar3.jpg"> |
|||
<div class="ui heart rating" data-rating="2"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Dog Appreciation Day</div> |
|||
I night to tell your dog he's great |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>A rating can vary in size</p> |
|||
<div class="ui small rating"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui large rating"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Behavior</h2> |
|||
<div class="no example"> |
|||
<h4 class="ui header">Set Rating</h4> |
|||
<p>A rating can be set programatically</p> |
|||
<div class="ignore code"> |
|||
$('.ui.rating') |
|||
.rating('set rating', 3) |
|||
; |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Settings</h2> |
|||
|
|||
<div class="no example"> |
|||
|
|||
<h4 class="ui header">Rating Settings</h4> |
|||
<p>Rating settings modify the rating's behavior</p> |
|||
<table class="ui celled definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="four wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>initialRating</td> |
|||
<td>0</td> |
|||
<td>A number representing the default rating to apply</td> |
|||
</tr> |
|||
<tr> |
|||
<td>interactive</td> |
|||
<td>true</td> |
|||
<td>Whether to enable user's ability to rate</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<div class="ui horizontal section icon divider"><i class="icon setting"></i></div> |
|||
<h4 class="ui header">Callbacks</h4> |
|||
<p>Callback settings specify a function to occur after a specific behavior.</p> |
|||
|
|||
<table class="ui celled definition table segment"> |
|||
<thead> |
|||
<th class="four wide">Setting</th> |
|||
<th>Context</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onRate(value)</td> |
|||
<td>Rating</td> |
|||
<td>Is called after user selects a new rating</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
<div class="no example"> |
|||
|
|||
<h4 class="ui header">DOM Settings</h4> |
|||
<p>DOM settings specify how this module should interface with the DOM</p> |
|||
<table class="ui celled definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="four wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>rating</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>selector</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
selector : { |
|||
icon : '.icon' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>className</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
className : { |
|||
active : 'active', |
|||
hover : 'hover', |
|||
loading : 'loading' |
|||
}, |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
<div class="no example"> |
|||
|
|||
<h4 class="ui header">Debug Settings</h4> |
|||
<p>Debug settings controls debug output to the console</p> |
|||
<table class="ui celled definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="four wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>name</td> |
|||
<td>Rating</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>True</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>error</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
error : { |
|||
action : 'You called a rating action that was not defined' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,257 @@ |
|||
/******************************* |
|||
Chat Room |
|||
*******************************/ |
|||
.ui.chatroom { |
|||
background-color: #F8F8F8; |
|||
width: 330px; |
|||
height: 370px; |
|||
padding: 0px; |
|||
} |
|||
.ui.chatroom .room { |
|||
position: relative; |
|||
overflow: hidden; |
|||
height: 286px; |
|||
border: 1px solid #999999; |
|||
border-top: none; |
|||
border-bottom: none; |
|||
} |
|||
.ui.chatroom .room .loader { |
|||
display: none; |
|||
margin: -25px 0px 0px -25px; |
|||
} |
|||
/* Chat Room Actions */ |
|||
.ui.chatroom .actions { |
|||
overflow: hidden; |
|||
background-color: #EEEEEE; |
|||
padding: 4px; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.chatroom .actions .button { |
|||
float: right; |
|||
margin-left: 3px; |
|||
} |
|||
/* Online User Count */ |
|||
.ui.chatroom .actions .message { |
|||
float: left; |
|||
margin-left: 6px; |
|||
font-size: 11px; |
|||
color: #AAAAAA; |
|||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); |
|||
line-height: 28px; |
|||
} |
|||
.ui.chatroom .actions .message .loader { |
|||
display: inline-block; |
|||
margin-right: 8px; |
|||
} |
|||
/* Chat Room Text Log */ |
|||
.ui.chatroom .log { |
|||
float: left; |
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.ui.chatroom .log .message { |
|||
padding: 3px 0px; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chatroom .log .message:first-child { |
|||
border-top: none; |
|||
} |
|||
/* status event */ |
|||
.ui.chatroom .status { |
|||
padding: 5px 0px; |
|||
color: #AAAAAA; |
|||
font-size: 12px; |
|||
font-style: italic; |
|||
line-height: 1.33; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chatroom .log .status:first-child { |
|||
border-top: none; |
|||
} |
|||
.ui.chatroom .log .flag { |
|||
float: left; |
|||
} |
|||
.ui.chatroom .log p { |
|||
margin-left: 0px; |
|||
} |
|||
.ui.chatroom .log .author { |
|||
font-weight: bold; |
|||
-webkit-transition: color 0.3s ease-out; |
|||
-moz-transition: color 0.3s ease-out; |
|||
-o-transition: color 0.3s ease-out; |
|||
-ms-transition: color 0.3s ease-out; |
|||
transition: color 0.3s ease-out; |
|||
} |
|||
.ui.chatroom .log a.author:hover { |
|||
opacity: 0.8; |
|||
} |
|||
.ui.chatroom .log .message.admin p { |
|||
font-weight: bold; |
|||
margin: 1px 0px 0px 23px; |
|||
} |
|||
.ui.chatroom .log .divider { |
|||
margin: -1px 0px; |
|||
font-size: 11px; |
|||
padding: 10px 0px; |
|||
border-top: 1px solid #F8F8F8; |
|||
border-bottom: 1px solid #F8F8F8; |
|||
} |
|||
.ui.chatroom .log .divider .rule { |
|||
top: 50%; |
|||
width: 15%; |
|||
} |
|||
.ui.chatroom .log .divider .label { |
|||
color: #777777; |
|||
margin: 0px; |
|||
} |
|||
/* Chat Room User List */ |
|||
.ui.chatroom .room .list { |
|||
position: relative; |
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
float: left; |
|||
background-color: #EEEEEE; |
|||
border-left: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chatroom .room .list .user { |
|||
display: table; |
|||
padding: 3px 7px; |
|||
border-bottom: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chatroom .room .list .user:hover { |
|||
background-color: #F8F8F8; |
|||
} |
|||
.ui.chatroom .room .list .image { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
width: 20px; |
|||
} |
|||
.ui.chatroom .room .list .image img { |
|||
width: 20px; |
|||
height: 20px; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.chatroom .room .list p { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
padding-left: 7px; |
|||
padding-right: 14px; |
|||
font-size: 11px; |
|||
line-height: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
.ui.chatroom .room .list a:hover { |
|||
opacity: 0.8; |
|||
} |
|||
/* User List Loading */ |
|||
.ui.chatroom.loading .loader { |
|||
display: block; |
|||
} |
|||
/* Chat Room Talk Input */ |
|||
.ui.chatroom .talk { |
|||
border: 1px solid #999999; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding: 5px 0px 0px; |
|||
background-color: #CCCCCC; |
|||
background: #ffffff -webkit-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; |
|||
background: #ffffff -moz-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; |
|||
background: #ffffff -o-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; |
|||
background: #ffffff -ms-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; |
|||
background: #ffffff linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; |
|||
-webkit-box-shadow: 0px 1px 0px #FFFFFF inset; |
|||
-moz-box-shadow: 0px 1px 0px #FFFFFF inset; |
|||
box-shadow: 0px 1px 0px #FFFFFF inset; |
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
} |
|||
.ui.chatroom .talk .avatar, |
|||
.ui.chatroom .talk input, |
|||
.ui.chatroom .talk .button { |
|||
float: left; |
|||
} |
|||
.ui.chatroom .talk .avatar { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
width: 30px; |
|||
height: 30px; |
|||
margin: 0px 0px 0px 5px; |
|||
background-color: #DADADA; |
|||
} |
|||
.ui.chatroom .talk .avatar img { |
|||
display: block; |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 4px; |
|||
} |
|||
.ui.chatroom .talk input { |
|||
border: 1px solid #CCCCCC; |
|||
margin: 0px; |
|||
width: 196px; |
|||
height: 14px; |
|||
padding: 8px 5px; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
} |
|||
.ui.chatroom .talk input.focus { |
|||
border: 1px solid #AAAAAA; |
|||
} |
|||
.ui.chatroom .send { |
|||
width: 80px; |
|||
height: 32px; |
|||
margin-left: -1px; |
|||
padding: 4px 12px; |
|||
font-size: 12px; |
|||
line-height: 23px; |
|||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
border-radius: 0 5px 5px 0; |
|||
} |
|||
.ui.chatroom .talk .log-in.button { |
|||
display: block; |
|||
float: none; |
|||
margin-top: -6px; |
|||
height: 22px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.ui.chatroom .talk .log-in.button i { |
|||
vertical-align: text-top; |
|||
} |
|||
/* Quirky Flags */ |
|||
.ui.chatroom .log .team.flag { |
|||
width: 18px; |
|||
} |
|||
/* Chat room Loaded */ |
|||
.ui.chatroom.loading .loader { |
|||
display: block; |
|||
} |
|||
/* Standard Size */ |
|||
.ui.chatroom { |
|||
width: 330px; |
|||
height: 370px; |
|||
} |
|||
.ui.chatroom .room .container { |
|||
width: 3000px; |
|||
} |
|||
.ui.chatroom .log { |
|||
width: 314px; |
|||
height: 278px; |
|||
padding: 4px 7px; |
|||
} |
|||
.ui.chatroom .room .list { |
|||
width: 124px; |
|||
height: 278px; |
|||
padding: 4px 0px; |
|||
} |
|||
.ui.chatroom .room .list .user { |
|||
width: 110px; |
|||
} |
|||
.ui.chatroom .talk { |
|||
height: 40px; |
|||
} |
|||
@ -0,0 +1,120 @@ |
|||
/******************************* |
|||
Star Rating |
|||
*******************************/ |
|||
.ui.rating { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0em 0.5em; |
|||
} |
|||
.ui.rating:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.rating:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
.ui.rating:after { |
|||
display: block; |
|||
content: ''; |
|||
visibility: hidden; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
/* Icon */ |
|||
.ui.rating .icon { |
|||
cursor: default; |
|||
float: left; |
|||
margin: 0em; |
|||
width: 1em; |
|||
height: auto; |
|||
padding: 0em; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.ui.rating .icon:after { |
|||
content: "\2605"; |
|||
color: rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-moz-transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-ms-transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-o-transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
} |
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
/*------------------- |
|||
Star |
|||
--------------------*/ |
|||
.ui.star.rating .icon:after { |
|||
content: '\e800'; |
|||
font-family: 'Icons'; |
|||
} |
|||
.ui.star.rating .active.icon:after { |
|||
content: '\e801'; |
|||
font-family: 'Icons'; |
|||
} |
|||
/*------------------- |
|||
Heart |
|||
--------------------*/ |
|||
.ui.heart.rating .icon:after { |
|||
content: '\2661'; |
|||
font-family: 'Icons'; |
|||
} |
|||
.ui.heart.rating .active.icon:after { |
|||
content: '\2665'; |
|||
font-family: 'Icons'; |
|||
color: #EF404A; |
|||
} |
|||
.ui.heart.rating .hover.icon:after, |
|||
.ui.heart.rating .active.hover.icon:after { |
|||
color: #FF2733; |
|||
} |
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
/*------------------- |
|||
Active |
|||
--------------------*/ |
|||
/* active rating */ |
|||
.ui.active.rating .icon { |
|||
cursor: pointer; |
|||
} |
|||
/* active icons */ |
|||
.ui.rating .active.icon:after { |
|||
color: #FFCB08; |
|||
} |
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
/* rating */ |
|||
.ui.rating.hover .active.icon:after { |
|||
opacity: 0.5; |
|||
} |
|||
/* icon */ |
|||
.ui.rating .icon.hover:after, |
|||
.ui.rating .icon.hover.active:after { |
|||
opacity: 1; |
|||
color: #FFB70A; |
|||
} |
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
.ui.small.rating { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.rating { |
|||
font-size: 1.5rem; |
|||
} |
|||
.ui.large.rating { |
|||
font-size: 2rem; |
|||
} |
|||
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1 @@ |
|||
9a6c31d42f6ed94672a29cb4c9e2068548232c4e |
|||
@ -0,0 +1 @@ |
|||
b5e4b5dab16b2525052c7d8267c030afbfe73927 |
|||
@ -0,0 +1,16 @@ |
|||
semantic.dropdown = {}; |
|||
|
|||
// ready event
|
|||
semantic.dropdown.ready = function() { |
|||
|
|||
$('.ui.rating') |
|||
.rating() |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(semantic.dropdown.ready) |
|||
; |
|||
@ -1,337 +0,0 @@ |
|||
|
|||
/******************************* |
|||
Chat Room |
|||
*******************************/ |
|||
|
|||
.ui.chat { |
|||
background-color: #F8F8F8; |
|||
width: 330px; |
|||
height: 370px; |
|||
padding: 0px; |
|||
} |
|||
.ui.chat .room { |
|||
position: relative; |
|||
overflow: hidden; |
|||
height: 286px; |
|||
border: 1px solid #999999; |
|||
border-top: none; |
|||
border-bottom: none; |
|||
} |
|||
.ui.chat .room .throbber { |
|||
display: none; |
|||
margin: -25px 0px 0px -25px; |
|||
} |
|||
/* Chat Room Actions */ |
|||
.ui.chat .actions { |
|||
overflow: hidden; |
|||
background-color: #EEEEEE; |
|||
padding: 4px; |
|||
border: 1px solid #BBBBBB; |
|||
|
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.chat .actions .button { |
|||
float: right; |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
/* Online User Count */ |
|||
.ui.chat .actions .message { |
|||
float: left; |
|||
margin-left: 6px; |
|||
font-size: 11px; |
|||
color: #AAAAAA; |
|||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); |
|||
line-height: 28px; |
|||
} |
|||
.ui.chat .actions .message .throbber { |
|||
display: inline-block; |
|||
margin-right: 8px; |
|||
vertical-align: middle; |
|||
vertical-align: text-bottom; |
|||
} |
|||
|
|||
|
|||
/* Chat Room Text Log */ |
|||
.ui.chat .log { |
|||
float: left; |
|||
|
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.ui.chat .log .message { |
|||
padding: 3px 0px; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chat .log .message:first-child { |
|||
border-top: none; |
|||
} |
|||
/* status event */ |
|||
.ui.chat .status { |
|||
padding: 5px 0px; |
|||
color: #AAAAAA; |
|||
|
|||
font-size: 12px; |
|||
font-style: italic; |
|||
line-height: 1.33; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chat .log .status:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
|
|||
.ui.chat .log .flag { |
|||
float: left; |
|||
} |
|||
.ui.chat .log p { |
|||
margin-left: 0px; |
|||
} |
|||
.ui.chat .log .author { |
|||
font-weight: bold; |
|||
-webkit-transition: color 0.3s ease-out; |
|||
-moz-transition: color 0.3s ease-out; |
|||
-o-transition: color 0.3s ease-out; |
|||
-ms-transition: color 0.3s ease-out; |
|||
transition: color 0.3s ease-out; |
|||
} |
|||
.ui.chat .log a.author:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
.ui.chat .log .message.admin p { |
|||
font-weight: bold; |
|||
margin: 1px 0px 0px 23px; |
|||
} |
|||
.ui.chat .log .divider { |
|||
margin: -1px 0px; |
|||
font-size: 11px; |
|||
padding: 10px 0px; |
|||
border-top: 1px solid #F8F8F8; |
|||
border-bottom: 1px solid #F8F8F8; |
|||
} |
|||
.ui.chat .log .divider .rule { |
|||
top: 50%; |
|||
width: 15%; |
|||
} |
|||
|
|||
.ui.chat .log .divider .label { |
|||
color: #777777; |
|||
margin: 0px; |
|||
} |
|||
|
|||
/* Chat Room User List */ |
|||
.ui.chat .room .user-list { |
|||
position: relative; |
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
|
|||
float: left; |
|||
background-color: #EEEEEE; |
|||
border-left: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chat .room .user-list .user { |
|||
display: table; |
|||
padding: 3px 7px; |
|||
border-bottom: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chat .room .user-list .user:hover { |
|||
background-color: #F8F8F8; |
|||
} |
|||
.ui.chat .room .user-list .image { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
width: 20px; |
|||
} |
|||
.ui.chat .room .user-list .image img { |
|||
width: 20px; |
|||
height: 20px; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.chat .room .user-list p { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
padding-left: 7px; |
|||
padding-right: 14px; |
|||
font-size: 11px; |
|||
line-height: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
.ui.chat .room .user-list a:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
/* User List Loading */ |
|||
.ui.chat.loading .throbber { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
|
|||
/* Chat Room Talk Input */ |
|||
.ui.chat .talk { |
|||
border: 1px solid #999999; |
|||
border-top: 1px solid #BBBBBB; |
|||
padding: 5px 0px 0px; |
|||
|
|||
background-color: #CCCCCC; |
|||
background: #FFFFFF -webkit-linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; |
|||
background: #FFFFFF -moz-linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; |
|||
background: #FFFFFF -o-linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; |
|||
background: #FFFFFF -ms-linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; |
|||
background: #FFFFFF linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; |
|||
|
|||
-webkit-box-shadow: 0px 1px 0px #FFFFFF inset; |
|||
-moz-box-shadow: 0px 1px 0px #FFFFFF inset; |
|||
box-shadow: 0px 1px 0px #FFFFFF inset; |
|||
|
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
} |
|||
.ui.chat .talk .avatar, |
|||
.ui.chat .talk input, |
|||
.ui.chat .talk .button { |
|||
float: left; |
|||
} |
|||
.ui.chat .talk .avatar { |
|||
border-top: 1px solid #BBBBBB; |
|||
border-left: 1px solid #BBBBBB; |
|||
width: 30px; |
|||
height: 30px; |
|||
margin: 0px 0px 0px 5px; |
|||
background-color: #DADADA; |
|||
} |
|||
|
|||
.ui.chat .talk .avatar img { |
|||
display: block; |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 4px; |
|||
} |
|||
.ui.chat .talk input { |
|||
border: 1px solid #CCCCCC; |
|||
margin: 0px; |
|||
width: 196px; |
|||
height: 14px; |
|||
padding: 8px 5px; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
} |
|||
.ui.chat .talk input.focus { |
|||
border: 1px solid #AAAAAA; |
|||
} |
|||
.ui.chat .send { |
|||
margin-left: -2px; |
|||
width: 54px; |
|||
height: 22px; |
|||
line-height: 23px; |
|||
|
|||
font-size: 12px; |
|||
padding: 4px 12px; |
|||
|
|||
-moz-box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.3); |
|||
-webkit-box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.3); |
|||
box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.3); |
|||
border-radius: 0px 5px 5px 0px; |
|||
} |
|||
.ui.chat .talk .log-in.button { |
|||
display: block; |
|||
float: none; |
|||
margin-top: -6px; |
|||
height: 22px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.ui.chat .talk .log-in.button i { |
|||
vertical-align: text-top; |
|||
} |
|||
|
|||
/* Quirky Flags */ |
|||
.ui.chat .log .team.flag { |
|||
width: 18px; |
|||
} |
|||
|
|||
/* Chat room Loaded */ |
|||
.ui.chat.loading .throbber { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/* Standard Size */ |
|||
.ui.chat { |
|||
width: 330px; |
|||
height: 370px; |
|||
} |
|||
.ui.chat .room .container { |
|||
width: 3000px; |
|||
} |
|||
.ui.chat .log { |
|||
width: 314px; |
|||
height: 278px; |
|||
padding: 4px 7px; |
|||
} |
|||
.ui.chat .room .user-list { |
|||
width: 124px; |
|||
height: 278px; |
|||
padding: 4px 0px; |
|||
} |
|||
.ui.chat .room .user-list .user { |
|||
width: 110px; |
|||
} |
|||
.ui.chat .talk { |
|||
height: 40px; |
|||
} |
|||
|
|||
/* Full Width (Based off 960) */ |
|||
|
|||
/* |
|||
.ui.chat.expand { |
|||
width: 665px; |
|||
height: 368px; |
|||
} |
|||
.ui.chat.expand .room { |
|||
width: 663px; |
|||
height: 283px; |
|||
} |
|||
.ui.chat.expand .room .user-list, |
|||
.ui.chat.expand .room .log { |
|||
height: 275px; |
|||
} |
|||
.ui.chat.expand .room .log { |
|||
width: 650px; |
|||
} |
|||
.ui.chat.expand .talk input { |
|||
width: 530px; |
|||
} |
|||
.ui.chat.expand .send { |
|||
width: 50px; |
|||
} |
|||
|
|||
.ui.chat.massive { |
|||
width: 960px; |
|||
height: 415px; |
|||
} |
|||
.ui.chat.massive .room { |
|||
width: 958px; |
|||
height: 330px; |
|||
} |
|||
.ui.chat.massive .room .user-list, |
|||
.ui.chat.massive .room .log { |
|||
height: 321px; |
|||
} |
|||
.ui.chat.massive .room .log { |
|||
width: 944px; |
|||
} |
|||
.ui.chat.massive .talk input { |
|||
width: 830px; |
|||
} |
|||
.ui.chat.massive .send { |
|||
width: 50px; |
|||
} |
|||
|
|||
*/ |
|||
@ -1,62 +0,0 @@ |
|||
/******************************* |
|||
Star Rating |
|||
*******************************/ |
|||
|
|||
.star.module { |
|||
min-width: 88px; |
|||
height: 42px; |
|||
|
|||
unicode-bidi: bidi-override; |
|||
direction: rtl; |
|||
font-size: 26px; |
|||
} |
|||
.star.module i, |
|||
.ui.star { |
|||
cursor: default; |
|||
float: left; |
|||
padding: 2px 1px; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
content: "\2605"; |
|||
color: transparent; |
|||
} |
|||
|
|||
/* Non Selected Star */ |
|||
.star.module i:after, |
|||
.ui.star:after { |
|||
content: "\2605"; |
|||
color: #8C8C8C; |
|||
|
|||
-webkit-transition: all 0.25s; |
|||
-moz-transition: all 0.25s; |
|||
-o-transition: all 0.25s; |
|||
-ms-transition: all 0.25s; |
|||
transition: all 0.25s; |
|||
} |
|||
|
|||
/*-------------- |
|||
States |
|||
---------------*/ |
|||
|
|||
/* Initialized is now clickable */ |
|||
.star.module.initialize, |
|||
.star.module.initialize i { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* Current Star Rating */ |
|||
|
|||
.star.module i.active:after { |
|||
color: #FFCB08; |
|||
} |
|||
.star.module.hover i.active:after { |
|||
opacity: 0.5; |
|||
} |
|||
/* Hover */ |
|||
.star.module i.hover:after, |
|||
.star.module i.hover.active:after { |
|||
opacity: 1; |
|||
color: #FFB70A; |
|||
text-shadow: 0px 0px 7px #FFCB08; |
|||
} |
|||
|
|||
Loading…
Reference in new issue