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