Cantr skins

General out-of-character discussion among players of Cantr II.

Moderators: Public Relations Department, Players Department

User avatar
EchoMan
Posts: 7768
Joined: Fri Aug 26, 2005 1:01 pm
Location: Stockholm, Sweden

Re: Cantr skins

Postby EchoMan » Sun Dec 02, 2012 12:33 am

Armulus Satchula wrote:Would it be possible to get unique names on all forms and possible some more ids and classes on fields or at least on the wrappers around things?


This is on the very long todo list. The problem is that most HTML in Cantr is severely mixed up in the PHP code. We are working on moving all HTML to template files and using a template engine to handle the presentational layer. This takes a lot of time though, but eventually we will be there. And we will make sure a lot more elements will have proper ID's.
Nalaris
Posts: 943
Joined: Sun Dec 04, 2005 3:08 am

Re: Cantr skins

Postby Nalaris » Mon Dec 03, 2012 2:58 pm

Personally I think that Cantr should default to the grey for new users for about three months, and then keep track of whether new accounts stick around longer. I've often wondered if maybe the bizarre color scheme is turning people off from the game. I've never cared, but the game suffers from being depopulated so I spend a lot of time trying to think of a way to reverse that trend.
User avatar
the_antisocial_hermit
Posts: 3695
Joined: Thu Sep 23, 2004 4:04 pm
Location: Hollow.
Contact:

Re: Cantr skins

Postby the_antisocial_hermit » Mon Dec 03, 2012 3:40 pm

Bizarre as compared to what? Most games are colorful. I'd think grey would turn a lot of people off more because it'd be very business-like and not game-like.
Glitch! is dead! Long live Glitch!
Remember guys and gals, it's all Pretendy Fun Time Games!
User avatar
HFrance
Posts: 3935
Joined: Sat Mar 25, 2006 10:24 pm
Location: No mato, à beira do rio.

Re: Cantr skins

Postby HFrance » Mon Dec 03, 2012 5:02 pm

Players are noticing that pages are loading faster with the new green skin. It has something to do with the css coding?
Cantr II is a social simulator. What is not working is due a problem in the society.
Cantr is like Vegas - what happens in the game should be in the game.
"It's a virtual world, not a theme park!" (Richard Bartle)
User avatar
EchoMan
Posts: 7768
Joined: Fri Aug 26, 2005 1:01 pm
Location: Stockholm, Sweden

Re: Cantr skins

Postby EchoMan » Tue Dec 04, 2012 12:21 pm

That sounds weird. The skins actually add more code for the browsers to render, so that defies all logic.
User avatar
NostalgicMelody7
Posts: 607
Joined: Sat Mar 17, 2012 1:54 am

Re: Cantr skins

Postby NostalgicMelody7 » Tue Dec 04, 2012 12:34 pm

Screw logic, this is Cantr!
User avatar
freiana
Posts: 766
Joined: Fri Dec 26, 2008 9:21 pm
Location: Delft, the Netherlands

Re: Cantr skins

Postby freiana » Tue Dec 04, 2012 1:33 pm

HFrance wrote:Players are noticing that pages are loading faster with the new green skin. It has something to do with the css coding?


Maybe they're just enjoying their waiting time more because they like the new skin? ;)
Don't remember where I was - I realized life was a game - The more seriously I took things - The harder the rules became
User avatar
Greek
Programming Dept. Member/Translator-Polish
Posts: 4726
Joined: Mon Feb 13, 2006 5:41 pm
Location: Kraków, Poland
Contact:

Re: Cantr skins

Postby Greek » Tue Dec 04, 2012 3:53 pm

How to easily change link color for green skin?

1. enter interface options
2. Make sure "Custom skin extends base instead of replacing" is enabled
3. check "Custom CSS skin" and copypaste code to textarea:

Code: Select all

a {
color: #ff9700;
}

("a" is selector for all links, and color sets color to the one specified by RGB hex value)
4. Save and be happy.
Of course you can try other colors :D If you not familiar with rgb you can try with english names i.e. color: white;

Of course that's not everything that can be done using the system, it gives possibility to do many nice things.
Check screenshots in this thread: viewtopic.php?f=43&t=24619 :D
‘Never! Run before you walk! Fly before you crawl! Keep moving forward! You think we should try to get a decent mail service in the city. I think we should try to send letters anywhere in the world! Because if we fail, I’d rather fail really hugely’
User avatar
Greek
Programming Dept. Member/Translator-Polish
Posts: 4726
Joined: Mon Feb 13, 2006 5:41 pm
Location: Kraków, Poland
Contact:

Re: Cantr skins

Postby Greek » Sat Dec 15, 2012 11:46 am

We have "new" skin: green-orange.css to make thing above easier. It's just the same as green.css but has orange links.

If you have created new nice skin and want to make it available for everyone - inform us. We'll review it and maybe it will be added to the base list.
‘Never! Run before you walk! Fly before you crawl! Keep moving forward! You think we should try to get a decent mail service in the city. I think we should try to send letters anywhere in the world! Because if we fail, I’d rather fail really hugely’
User avatar
EchoMan
Posts: 7768
Joined: Fri Aug 26, 2005 1:01 pm
Location: Stockholm, Sweden

Re: Cantr skins

Postby EchoMan » Sat Dec 22, 2012 6:02 pm

EchoMan wrote:... I noticed that the build menu doesn't look very good in Cantr Grey anymore. I will fix that soon.


I finally got around to fix this. Please do a hard refresh of your browsers to see the build menu items.
User avatar
Pies
Programming Dept. Member
Posts: 383
Joined: Sat Nov 29, 2008 1:32 pm
Location: https://314es.pl/irc
Contact:

Re: Cantr skins

Postby Pies » Sun Feb 16, 2014 11:03 pm

We have skins system for over a year now.
Anybody is using it? Anybody would like to show own? Maybe with comments?

Mine:
- changes cantr color to a bit blue
- make rounder some things like inputs
- make bigger icons on mobile phone (or rather on screens with below 1300px width)
- gray radio messages
as base I'm using green-orange

Code: Select all

/*make cantr more blue*/
body {
  background-color: #004444;
  background-image:none;
  color: #FFFFFF;
  /*font-family: Verdana,Arial,Helvetica,sans-serif;*/
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 10pt;
  margin: 0;
}
/*bigger input field*/
#messageField {
  min-height: 40px;
}
/*rounder inputs*/
input {
  border-radius: 5px;
}
/*again more blue*/
.txt-title {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 12pt;
  font-weight: bolder;
  text-shadow: 2px 2px 2px #006060;
}
.titlebar {
  background-color: #008888;
  box-shadow: 2px 2px 1px #116666;
}
div.greenListItem {
  background-color: #006666;
  color: #00F300;
  cursor: pointer;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-weight: bold;
  text-align: center;
}
.button_action, .button_charmenu, .button_suggmenu, .button_form {
  background-color: #006666;
  border: medium none;
  box-shadow: 1px 1px 3px #007777;
  color: #00F3F3;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-weight: bold;
}
center table, .page {
  background: none ;
  box-shadow: none ;
  text-align: justify;
}
.button_charmenuactive {
  background-color: #00F3F3;
  border: medium none;
  box-shadow: 1px 1px 3px #007777;
  color: #006600;
  cursor: pointer;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-style: italic;
  font-weight: bold;
  height: 40px;
}
.ui-widget-content {
  background-color: #052E2E;
  border: 1px solid #052E2E;
  color: #FFFFFF;
}
.ui-widget-header {
  background-color: #004444;
  border: 1px solid #004444;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default  {
  background-color: #052E2E;
  border: 1px solid #052E2E;
  color: #FFFFFF;
}
#charStateTiredness {
  background-color: #002222;
}
#character_menu, #player_menu {
  background: none repeat scroll 0 0 rgba(0, 58, 58, 0.86);
  box-shadow: 3px 3px 10px #004040, -3px -3px 10px #003A3A, 3px -3px 10px #003030;
  /*box-shadow: none;*/
}

/*make cantr more mobile firendly*/
@media (max-device-width: 1300px) {
  input {
    border-radius: 10px;
    min-height: 60px;
    min-width: 60px;
  }
  #char_1,#char_2,#char_3,#char_4,#char_5,#char_6,#char_7,#char_8,#char_9,#char_10,#char_11,#char_12,#char_13,#char_14,#char_15 {
    width: 60px;
  }
  img {
    min-height: 60px;
    min-width: 60px;
  }
  #eventTime img {
    min-height: 6px;
    min-width: 6px;
    max-height: 6px;
    max-width: 6px;
  }
}

/*make radio messages gray*/
.eventsgroup_9 {
    color: #aaaaaa;
}
dwudziestoletni mężczyzna wrote:"OOC: Jak ci się nie podoba, to nie graj. Ta gra nie szuka więcej graczy."

kaloryfer wrote:This game already has a lot of problems, new players would only bring new ones.
User avatar
w.w.g.d.w
Posts: 1356
Joined: Sun Oct 02, 2005 4:46 pm

Re: Cantr skins

Postby w.w.g.d.w » Mon Feb 17, 2014 3:32 pm

Changed classic.
If I change images like in grey I transform green-orange into something new. Maybe.

Code: Select all

BODY {
  familianty: Verdana, Arial, Helvetica, sans-serif;
  font-size:10pt;
   color: #00D8EC;
  background-color: #98425d;
  margin: 0;
}

/* BEGIN "Cantr II" on the top of every page */
.header-title {
  text-shadow: 3px 0px 3px #632D3D;
  text-shadow: -3px 0px 3px #632D3D;
  text-shadow: 0px -3px 3px #632D3D;
  text-shadow: 0px 3px 3px #632D3D;
  font-size:24pt;
  margin-top:0px;
  margin-bottom:0px;
}

.small-top  {
  font-size:8pt;
}

.tiny-top {
  font-size:7pt;
}
/* END "Cantr II" on the top of every page */

/* BEGIN overrides for the projects and project info pages */
.project_worked_on {
  color: #888;
  margin: 0;
}
.project_not_worked_on {
  color: #CCC;
  margin: 0;
}
.project_self_works_on {
  color: #FFF;
  margin: 0;
}
.tool {
  color: #FFF;
}
.tool_missing {
  color: #999;
}
/* END */

/* BEGIN manual events broadcaster */
dl {
    width:100%;
    overflow:hidden;
}

dd, dt {
    float:left;
    width:50%;
    padding:0;
    margin:0;
}
/* END manual events broadcaster */

.centered {
  text-align: center;
  margin: 20px auto;
}

TD, .txt {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

.p-txt {
  margin:0px;
  text-indent: 2.5em;
}

ul.plain {
  margin:0px;
  list-style-type:none;
}

.register-small {
  margin:0px;
  margin-left:20px;
  font-size:8pt;
}

.register-nec {
  color:#ff9700;
}

.txt-title {
  font-weight:bolder;
  text-shadow: 0px 2px 2px #632D3D;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
}

.txt-label {
  color:#fcff9d;
  font-size: 8pt;
}

.titlebar {
  width:700px;
  background-color:#35c435;
  margin:20px auto;
  padding: 2px 2px;
  text-align:center;
  box-shadow: 2px 2px 1px #00B100;
}

.errorbar {
  height:70px;
  text-align:center;
  width:100%;
}

#eventsList > div {
  word-wrap: break-word;
  width:700px;
  margin-bottom: 17px;
}

a:link, a:visited, a:active {
  color: #FF9700;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

CENTER TABLE, .page {
  text-align: justify;
}

.page {
  margin: auto;
  width: 700px;
}


/* BEGIN fixed position errors list */
#errorsList {
  position: fixed;
  width: 210px;
  top: 20px;
  right: 5px;
  list-style-type: none;
}

.errorMessage {
  padding: 8px;
  margin: 7px;
  background-color: #B33333;
}

/* END fixed position errors list */

/* BEGIN used on the bottom of page "player" */

.subcategory  {
  text-decoration:underline;
  line-height:200%;
  font-weight: bold;
  margin-top:5px;
  margin-bottom:5px;
}

/* END used on the bottom of page "player" */

/* BEGIN used on page "character settings" */

div.cantrdivlist {
  overflow:auto;
  margin:4px;
}

div.greenListItem {

  background-color: #006600;
  color: #00f300;
  cursor: pointer;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: none;
  width:145px;
  margin:8px;padding:5px;text-align:center;
}   
div.greenListItemactive {
margin:4px;       
  cursor: pointer;
  margin:8px;padding:5px;text-align:center;
  background-color: #00f300;
  color: #006600;   
  width:145px;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border:none;
}

.toolbarPanel {
  background-color: #006600;
  color: #006600;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border-style: dashed;
  border-width: small;
  border-color: black;
  border: 1px solid green;
  margin:4px;padding:4px;
}
.toolbarPanel img {
  cursor:pointer;
  border: 1px solid green;
}

/* END used on page "character settings" */

/* BEGIN all buttons */
.button_action, .button_charmenu, .button_suggmenu, .button_form {
  background-color: #35C435;
  color: #006000;
  cursor: pointer;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: none;
  box-shadow: 1px 1px 3px #007700;
}

.button_charmenu_unavailable {
  background-color: #225522;
  color: #559955;
  cursor: pointer;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  box-shadow: 1px 1px 3px #226622;
}

a.button_charmenu, a.button_charmenuactive {
  padding: 1px 9px 1px 9px;
  text-decoration: none;
}

a.button_charmenu {
  color: #006000;
}

.button_charmenuactive {
  background-color: #00f300;
  color: #006600;
  cursor: pointer;
  font-weight: bold;
  font-style: italic;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: none;
  box-shadow: 1px 1px 3px #007700;
}

a.button_charmenuactive {
  color: #006000;
}
/* END all buttons */

form {
  display: inline;
}

label {
  cursor: inherit;
}

img {
  border: 0px;
}

/* BEGIN signs for buildings&vehicles */
p.sign, p.sign_inline {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  font-size: 8pt;
  color: #8ab9e8;
  border: none;
}

p.sign {
  padding-left: 3em;
}

p.sign_inline {
  display: inline;
  padding-left: 1em;
}
/* END signs for buildings&vehicles */

/* BEGIN label for NDS one people page */
.people-label {
  font-size:8pt;
}
/* END label for NDS on people page */

.charPopup {
  display: none;
  width: 370px;
  position: absolute;
  color: white;
  border: 1px white solid;
}

#charPopupName {
  border-bottom: 1px white solid;
  color: black;
  font-weight: bold;
  background-image: url('/graphics/cantr/pictures/charnameback.png');
  padding: 2px;
}

#charPopupDesc {
  background-image: url('/graphics/cantr/pictures/chardescback.png');
  padding: 2px;
}

.charPersDesc {
  margin-left: 10px;
  font-size: 8pt;
}

.underline { text-decoration:underline }
.crossbutton { position:relative; top:-2px; width:21px;height:21px;float:right; }

.message-date {
  color: yellow;
}
.message-reply-to {
  margin-left: 7px;
}

/*
 * Configurable elements of events page chardesc box
 */

input.button_whisper {
  color: #444;
  background-color: #8a8;
}

.charStateBar > div {
  margin-top: 8px;
  display: inline-block;
  vertical-align: bottom;
}

.charStateBar > .stateName {
  width: 120px;
}

#charStateDamage, #charStateTiredness {
  display: inline-block;
  width: 350px;
  height: 13px;
  margin-right: 5px;
}

#charStateDamage {
  background-color: #3a0000;
}
#charStateTiredness {
  background-color: #020;
}

#charStateDamage > div {
  background-color: #800;
  border-width: 0px;
}
#charStateTiredness > div {
  background-color: #080;
  border-width: 0px;
}

/*
 * jQuery UI code
 */

/*! jQuery UI - v1.10.3 - 2013-10-27
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.button.css, jquery.ui.dialog.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif&fwDefault=normal&fsDefault=1em&cornerRadius=0px&bgColorHeader=%23004400&bgTextureHeader=flat&bgImgOpacityHeader=33&borderColorHeader=%23004400&fcHeader=%23ffffff&iconColorHeader=%23ffffff&bgColorContent=%23052e05&bgTextureContent=flat&bgImgOpacityContent=10&borderColorContent=%23052e05&fcContent=%23ffffff&iconColorContent=%2372b42d&bgColorDefault=%23052e05&bgTextureDefault=flat&bgImgOpacityDefault=60&borderColorDefault=%23052e05&fcDefault=%23FF9700&iconColorDefault=%23ffffff&bgColorHover=%23052e05&bgTextureHover=flat&bgImgOpacityHover=50&borderColorHover=%23052e05&fcHover=%23ffffff&iconColorHover=%23ffffff&bgColorActive=%23052e05&bgTextureActive=flat&bgImgOpacityActive=30&borderColorActive=%23052e05&fcActive=%23ffffff&iconColorActive=%23ffffff&bgColorHighlight=%23FF9700&bgTextureHighlight=flat&bgImgOpacityHighlight=55&borderColorHighlight=%23f9dd34&fcHighlight=%23363636&
iconColorHighlight=%234eb305&bgColorError=%23ffdc2e&bgTextureError=flat&bgImgOpacityError=95&borderColorError=%23ceaf14&fcError=%23111&iconColorError=%23cd0a0a&bgColorOverlay=%23444444&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=15&opacityOverlay=30&bgColorShadow=%23000&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=15&thicknessShadow=0px&offsetTopShadow=2px&offsetLeftShadow=2px&cornerRadiusShadow=2px
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden
{
  display:none;
}

.ui-helper-hidden-accessible
{
  border:0;
  clip:rect(0000);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
}

.ui-helper-reset
{
  border:0;
  font-size:100%;
  line-height:1.3;
  list-style:none;
  margin:0;
  outline:0;
  padding:0;
  text-decoration:none;
}

.ui-helper-clearfix:before,.ui-helper-clearfix:after
{
  border-collapse:collapse;
  content:"";
  display:table;
}

.ui-helper-clearfix:after
{
  clear:both;
}

.ui-helper-clearfix
{
  min-height:0;
}

.ui-helper-zfix
{
  filter:Alpha(Opacity=0);
  height:100%;
  left:0;
  opacity:0;
  position:absolute;
  top:0;
  width:100%;
}

.ui-front
{
  z-index:100;
}

.ui-state-disabled
{
  cursor:default!important;
}

.ui-icon
{
  background-repeat:no-repeat;
  display:block;
  overflow:hidden;
  text-indent:-99999px;
}

.ui-widget-overlay
{
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
}

.ui-resizable
{
  position:relative;
}

.ui-resizable-handle
{
  display:block;
  font-size:.1px;
  position:absolute;
}

.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle
{
  display:none;
}

.ui-resizable-n
{
  cursor:n-resize;
  height:7px;
  left:0;
  top:-5px;
  width:100%;
}

.ui-resizable-s
{
  bottom:-5px;
  cursor:s-resize;
  height:7px;
  left:0;
  width:100%;
}

.ui-resizable-e
{
  cursor:e-resize;
  height:100%;
  right:-5px;
  top:0;
  width:7px;
}

.ui-resizable-w
{
  cursor:w-resize;
  height:100%;
  left:-5px;
  top:0;
  width:7px;
}

.ui-resizable-se
{
  bottom:1px;
  cursor:se-resize;
  height:12px;
  right:1px;
  width:12px;
}

.ui-resizable-sw
{
  bottom:-5px;
  cursor:sw-resize;
  height:9px;
  left:-5px;
  width:9px;
}

.ui-resizable-nw
{
  cursor:nw-resize;
  height:9px;
  left:-5px;
  top:-5px;
  width:9px;
}

.ui-resizable-ne
{
  cursor:ne-resize;
  height:9px;
  right:-5px;
  top:-5px;
  width:9px;
}

.ui-selectable-helper
{
  border:1px dotted #000;
  position:absolute;
  z-index:100;
}

.ui-button
{
  cursor:pointer;
  display:inline-block;
  line-height:normal;
  margin-right:.1em;
  overflow:visible;
  padding:0;
  position:relative;
  text-align:center;
  vertical-align:middle;
}

.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active
{
  text-decoration:none;
}

.ui-button-icon-only
{
  width:2.2em;
}

button.ui-button-icon-only
{
  width:2.4em;
}

.ui-button-icons-only
{
  width:3.4em;
}

button.ui-button-icons-only
{
  width:3.7em;
}

.ui-button .ui-button-text
{
  display:block;
  line-height:normal;
}

.ui-button-text-only .ui-button-text
{
  padding:.4em 1em;
}

.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text
{
  padding:.4em;
  text-indent:-9999999px;
}

.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text
{
  padding:.4em 1em .4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text
{
  padding:.4em 2.1em .4em 1em;
}

.ui-button-text-icons .ui-button-text
{
  padding-left:2.1em;
  padding-right:2.1em;
}

input.ui-button
{
  padding:.4em 1em;
}

.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon
{
  margin-top:-8px;
  position:absolute;
  top:50%;
}

.ui-button-icon-only .ui-icon
{
  left:50%;
  margin-left:-8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary
{
  left:.5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary
{
  right:.5em;
}

.ui-buttonset
{
  margin-right:7px;
}

.ui-buttonset .ui-button
{
  margin-left:0;
  margin-right:-.3em;
}

input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner
{
  border:0;
  padding:0;
}

.ui-dialog
{
  left:0;
  outline:0;
  padding:.2em;
  position:absolute;
  top:0;
}

.ui-dialog .ui-dialog-titlebar
{
  padding:.4em 1em;
  position:relative;
}

.ui-dialog .ui-dialog-title
{
  float:left;
  margin:.1em 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:90%;
}

.ui-dialog .ui-dialog-titlebar-close
{
  height:20px;
  margin:-10px 0 0;
  padding:1px;
  position:absolute;
  right:.3em;
  top:50%;
  width:21px;
}

.ui-dialog .ui-dialog-content
{
  background:none;
  border:0;
  overflow:auto;
  padding:.5em 1em;
  position:relative;
}

.ui-dialog .ui-dialog-buttonpane
{
  background-image:none;
  border-width:1px 0 0;
  margin-top:.5em;
  padding:.3em 1em .5em .4em;
  text-align:left;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset
{
  float:right;
}

.ui-dialog .ui-dialog-buttonpane button
{
  cursor:pointer;
  margin:.5em .4em .5em 0;
}

.ui-dialog .ui-resizable-se
{
  background-position:16px 16px;
  bottom:-5px;
  height:12px;
  right:-5px;
  width:12px;
}

.ui-draggable .ui-dialog-titlebar
{
  cursor:move;
}

.ui-progressbar
{
  height:2em;
  overflow:hidden;
  text-align:left;
}

.ui-progressbar .ui-progressbar-value
{
  height:100%;
  margin:-1px;
}

.ui-progressbar .ui-progressbar-overlay
{
  filter:alpha(opacity=25);
  height:100%;
  opacity:0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value
{
  background-image:none;
}

.ui-slider
{
  position:relative;
  text-align:left;
}

.ui-slider .ui-slider-handle
{
  cursor:default;
  height:1.2em;
  position:absolute;
  width:1.2em;
  z-index:2;
}

.ui-slider .ui-slider-range
{
  background-position:0 0;
  border:0;
  display:block;
  font-size:.7em;
  position:absolute;
  z-index:1;
}

.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range
{
  filter:inherit;
}

.ui-slider-horizontal
{
  height:.8em;
}

.ui-slider-horizontal .ui-slider-handle
{
  margin-left:-.6em;
  top:-.3em;
}

.ui-slider-horizontal .ui-slider-range
{
  height:100%;
  top:0;
}

.ui-slider-horizontal .ui-slider-range-min
{
  left:0;
}

.ui-slider-horizontal .ui-slider-range-max
{
  right:0;
}

.ui-slider-vertical
{
  height:100px;
  width:.8em;
}

.ui-slider-vertical .ui-slider-handle
{
  left:-.3em;
  margin-bottom:-.6em;
  margin-left:0;
}

.ui-slider-vertical .ui-slider-range
{
  left:0;
  width:100%;
}

.ui-slider-vertical .ui-slider-range-min
{
  bottom:0;
}

.ui-slider-vertical .ui-slider-range-max
{
  top:0;
}

.ui-spinner
{
  display:inline-block;
  overflow:hidden;
  padding:0;
  position:relative;
  vertical-align:middle;
}

.ui-spinner-input
{
  background:none;
  border:none;
  color:inherit;
  margin:.2em 22px .2em .4em;
  padding:0;
  vertical-align:middle;
}

.ui-spinner-button
{
  cursor:default;
  display:block;
  font-size:.5em;
  height:50%;
  margin:0;
  overflow:hidden;
  padding:0;
  position:absolute;
  right:0;
  text-align:center;
  width:16px;
}

.ui-spinner a.ui-spinner-button
{
  border-bottom:none;
  border-right:none;
  border-top:none;
}

.ui-spinner .ui-icon
{
  left:0;
  margin-top:-8px;
  position:absolute;
  top:50%;
}

.ui-spinner-up
{
  top:0;
}

.ui-spinner-down
{
  bottom:0;
}

.ui-spinner .ui-icon-triangle-1-s
{
  background-position:-65px -16px;
}

.ui-tabs
{
  padding:.2em;
  position:relative;
}

.ui-tabs .ui-tabs-nav
{
  margin:0;
  padding:.2em .2em 0;
}

.ui-tabs .ui-tabs-nav li
{
  border-bottom-width:0;
  float:left;
  list-style:none;
  margin:1px .2em 0 0;
  padding:0;
  position:relative;
  top:0;
  white-space:nowrap;
}

.ui-tabs .ui-tabs-nav li a
{
  float:left;
  padding:.5em 1em;
  text-decoration:none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
  margin-bottom:-1px;
  padding-bottom:1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a,.ui-tabs .ui-tabs-nav li.ui-state-disabled a,.ui-tabs .ui-tabs-nav li.ui-tabs-loading a
{
  cursor:text;
}

.ui-tabs .ui-tabs-nav li a,/* first selector in group seems obsolete,but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a
{
  cursor:pointer;
}

.ui-tabs .ui-tabs-panel
{
  background:none;
  border-width:0;
  display:block;
  padding:1em 1.4em;
}

.ui-tooltip
{
  -webkit-box-shadow:0 0 5px #aaa;
  box-shadow:0 0 5px #aaa;
  max-width:300px;
  padding:8px;
  position:absolute;
  z-index:9999;
}

body .ui-tooltip
{
  border-width:2px;
}

.ui-widget
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:1em;
}

.ui-widget .ui-widget
{
  font-size:1em;
}

.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:1em;
}

.ui-widget-content
{
  background-color:#98425d;
  border:1px solid #00B100;
  color:#;
}

.ui-widget-header
{
  background-color:#35C435;
  border:1px solid #00B100;
  color:#fff;
  font-weight:700;
}

.ui-widget-header a
{
  color:#fff;
}

.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default
{
  background-color:#98425d;
  border:1px solid #052e05;
  color:#632D3D;
  font-weight:400;
}

.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited
{
  color:#FF9700;
  text-decoration:none;
}

.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus
{
  background-color:#98425d;
  border:1px solid #052e05;
  color:#fff;
  font-weight:400;
}

.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited
{
  color:#FF9700;
  text-decoration:none;
}

.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active
{
  background-color:#98425d;
  border:1px solid #052e05;
  color:#fff;
  font-weight:400;
}

.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited
{
  color:#fff;
  text-decoration:none;
}

.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight
{
  background-color:#FF9700;
  border:1px solid #f9dd34;
  color:#363636;
}

.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a
{
  color:#363636;
}

.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error
{
  background-color:#ffdc2e;
  border:1px solid #ceaf14;
  color:#111;
}

.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a
{
  color:#111;
}

.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text
{
  color:#111;
}

.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary
{
  font-weight:700;
}

.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary
{
  filter:Alpha(Opacity=70);
  font-weight:400;
  opacity:.7;
}

.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled
{
  background-image:none;
  filter:Alpha(Opacity=35);
  opacity:.35;
}

.ui-state-disabled .ui-icon
{
  filter:Alpha(Opacity=35);
}

User avatar
Masterpiece
Posts: 64
Joined: Wed Mar 27, 2013 10:18 pm

Re: Cantr skins

Postby Masterpiece » Tue Nov 09, 2021 6:33 pm

Hey, sorry for digging this thread up. I made a skin after migrating back to Cantr after playing Marosia. (Sorry Cantr, you're ugly but funny)

The skin is based on CalyxMod-dark. What I changed is a bit of colours, sizes, one like break. In my opinion looks a bit more readable. Might be the matter of opinion.

Code: Select all

@charset "UTF-8";
body {
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  font-size: 11pt;
  color: #eee;
  background-color: #222222;
  margin: 0; }

/* BEGIN Calyx Mod */
textarea, input, select {
  color: #eee;
  background: #111111;
  border: 2px solid #000;
  padding: 2px; }

input[type="text"] {
  color: #eee;
  background: #111111;
  border: 2px solid #000;
  padding: 2px; }

center {
  margin-top: 10px; }

/* BEGIN "Cantr II" on the top of every page */
.header-title {
  text-shadow: 3px 0px 3px #000000;
  text-shadow: -3px 0px 3px #000000;
  text-shadow: 0px -3px 3px #000000;
  text-shadow: 0px 3px 3px #000000;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  font-size: 36pt;
  margin-top: 4px;
  margin-bottom: 4px;
  color: #9beb00; }

.small-top {
  font-size: 10pt; }

.tiny-top {
  font-size: 8pt;
  margin-bottom: 10px; }

/* END "Cantr II" on the top of every page */
/* BEGIN overrides for the projects and project info pages */
.project_worked_on {
  color: #888;
  margin: 0; }

.project_not_worked_on {
  color: #CCC;
  margin: 0; }

.project_self_works_on {
  color: #FFF;
  margin: 0; }

.tool {
  color: #FFF; }

.tool_missing {
  color: #999; }

.project_resources_list {
  font-size: 7pt;
  word-spacing: 2px; }

.raw_missing {
  color: #999; }

/* END */
/* BEGIN manual events broadcaster */
dl {
  width: 100%;
  overflow: hidden; }

dd, dt {
  float: left;
  width: 50%;
  padding: 2;
  margin: 0; }

/* END manual events broadcaster */
.centered {
  text-align: center;
  margin: 20px auto; }

TD, .txt {
  font-size: 11pt; }

.p-txt {
  margin: 0; }

ul.plain {
  margin: 0px;
  list-style-type: none; }

.register-small {
  margin: 0px;
  margin-left: 20px;
  font-size: 10pt; }

.register-nec {
  color: #9beb00; }

.txt-title {
  font-weight: bolder;
  text-shadow: 2px 2px 2px #111;
  font-size: 14pt; }

.txt-label {
  color: #fcff9d;
  font-size: 10pt; }

.titlebar {
  width: 700px;
  background-color: #2e582e;
  margin: 20px auto;
  padding: 2px 2px;
  text-align: center;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  font-size: 20px;
  box-shadow: 2px 2px 1px #111; }

.inlined-icon {
  margin-bottom: -0.25em;
  height: 1.25em;
  width: auto; }

.weatherIcon {
  height: 2em;
  width: auto; }

.errorBarParent {
  text-align: center; }

.errorbar {
  background-color: #b33333;
  margin: 10px auto;
  padding: 15px;
  display: inline-block; }

.errorbar a {
  color: #ee5; }

#eventsList {
  min-height: 30px; }

#eventsList > div {
  word-wrap: break-word;
  width: 700px;
  margin-bottom: 17px;
  border: 0;
  border-radius: 3px;
  background-color: #2a2e33;
  color: grey !important;
  padding: 10px;
}

#eventsList > .eventsgroup_21 > a:after {
  content:"\a";
    white-space: pre;
}

#eventsList > .eventsgroup_21 {
  background-color: white;
  color: black !important;
}

#eventsList > .eventsgroup_1 {
  background-color: #f2dede;
  color: #a94442 !important;
}

#eventsList > .eventsgroup_30 {
  background-color: #fcf8e3;
  color: #8a6d3b !important;
}

#eventsList > .eventsgroup_2 {
  background-color: #fcf8e3;
  color: #8a6d3b !important;
}

a:link, a:visited, a:active {
  color: #eb7900;
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .4s; }

a:hover {
  color: #ffff00;
  text-decoration: none; }

CENTER TABLE {
  text-align: justify; }

.page, .page-left {
  margin: auto;
  width: 700px; }

.page {
  text-align: justify; }

.page-left {
  text-align: left; }

.page > table, .page-left > table {
  width: 100%; }

.action-buttons {
  white-space: nowrap;
  width: 0; }

.charInfoCaptionColumn {
  width: 20%; }

.charInfoDataColumn {
  width: 70%; }

.charInfoButtonColumn {
  width: 10%; }

.playerLinksColumn, .playerInfoColumn {
  width: 50%;
  display: inline-block;
  vertical-align: top; }

.accessListColumn {
  vertical-align: top;
  display: inline-block;
  width: 50%; }

#navigationPanel {
  display: table;
  width: auto;
  text-align: center; }

#navigationPanel input, #navigationSubpanel > a {
  margin: 2px 0;
  display: inline-block; }

#navigationSubpanel {
  padding: 3px; }

.locationDescription {
  overflow: auto; }

.locationDescription > div {
  display: inline-block;
  vertical-align: top; }

.locationDescriptionRaws {
  max-width: 28%; }

.locationDescriptionRaws li {
  margin: 5px; }

.locationDescriptionTerrain {
  width: 152px;
  float: right; }

#mapImage {
  max-width: 100%; }

.rawsList {
  text-align: left; }

.skillsColumn {
  display: inline-block;
  width: 50%; }

.huntingAnimals, .huntingWeapon {
  width: 50%;
  display: inline-block;
  vertical-align: top; }

.domesticationAnimals, .domesticationPanel {
  width: 50%;
  display: inline-block;
  vertical-align: top; }

.peopleTableButtons {
  white-space: nowrap;
  width: 0; }

.greyscaleFilter {
  filter: grayscale(1);
  -webkit-filter: grayscale(1); }

/* BEGIN fixed position errors list */
#errorsList {
  position: fixed;
  width: 210px;
  top: 20px;
  right: 5px;
  list-style-type: none; }

.errorMessage {
  padding: 8px;
  margin: 7px;
  background-color: #B33333; }

/* END fixed position errors list */
/* BEGIN retrieve page */
#objectsList > tbody .ui-sortable-helper {
  cursor: move; }

/* END retrieve page */
/* BEGIN used on the page "player" */
.subcategory {
  text-decoration: underline;
  line-height: 200%;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px; }

.characterOnList {
  color: #fff;
  cursor: pointer; }

.characterOnList-inactive {
  color: #777; }

/* END used on the page "player" */
/* BEGIN used on page "character settings" */
div.cantrdivlist {
  overflow: auto;
  margin: 4px; }

div.greenListItem {
  background-color: #0c360c;
  color: #9beb00;
  cursor: pointer;
  font-weight: bold;
  border: none;
  width: 145px;
  margin: 8px;
  padding: 5px;
  text-align: center; }

div.greenListItemactive {
  margin: 4px;
  cursor: pointer;
  margin: 8px;
  padding: 5px;
  text-align: center;
  background-color: #3f693f;
  color: #0c360c;
  width: 145px;
  font-weight: bold;
  border: none; }

.toolbarPanel {
  background-color: #0c360c;
  color: #eee;
  font-weight: bold;
  border-color: #111;
  border: 1px solid #111;
  margin: 4px;
  padding: 4px; }

.toolbarPanel img {
  cursor: pointer;
  border: 1px #0c360c; }

/* END used on page "character settings" */
/* BEGIN all buttons */
.button_action, .button_charmenu {
  background-color: #0c360c;
  color: #eee;
  cursor: pointer;
  font-weight: bold;
  moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 4px solid #0c360c;
  padding: 4px 12px 4px 12px;
  box-shadow: 1px 1px 3px #111111;
  /*Transition*/
  -webkit-transition: All 0.4s ease;
  -moz-transition: All 0.4s ease;
  -o-transition: All 0.4s ease;
  -ms-transition: All 0.4s ease;
  transition: All 0.4s ease; }

.button_charmenu_unavailable {
  background-color: #0c360c;
  color: #666666;
  cursor: pointer;
  font-weight: bold;
  moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 4px solid #0c360c;
  padding: 4px 12px 4px 12px;
  box-shadow: 1px 1px 3px #111111; }

.button_charmenuactive_unavailable {
  background-color: #afb7a7;
  color: #38413a; }

a.button_charmenu, a.button_charmenuactive {
  padding: 4px 16px 4px 16px;
  color: #9beb00;
  text-decoration: none; }

.button_charmenu:hover {
  color: #9beb00; }

.button_charmenuactive {
  background-color: #2e582e;
  color: #9beb00;
  cursor: pointer;
  font-weight: bold;
  border: none;
  moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 4px solid #2e582e;
  padding: 4px 16px 4px 16px;
  box-shadow: 1px 1px 3px #111111; }

a.button_charmenuactive {
  color: #9beb00; }

/* END all buttons */
form {
  display: inline; }

label {
  cursor: inherit; }

img {
  border: 0; }

/* BEGIN signs for buildings&vehicles */
p.sign, p.sign_inline {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  font-size: 8pt;
  color: #8ab9e8;
  border: none; }

p.sign {
  padding-left: 3em; }

p.sign_inline {
  display: inline;
  padding-left: 1em; }

/* END signs for buildings&vehicles */
/* BEGIN label for NDS one people page */
.people-label {
  font-size: 8pt; }

/* END label for NDS on people page */
.charPersDesc {
  color: #eee;
  background: #111111;
  border: 1px solid #000;
  padding: 2px;
  margin-left: 10px;
  background-color: #111;
  font-size: 8pt; }

.underline {
  text-decoration: underline; }

.crossbutton {
  position: relative;
  top: -2px;
  width: 21px;
  height: 21px;
  float: right; }

#footer_panel {
  font-size: 8pt;
  word-spacing: 0.25em; }

#character_menu, #player_menu {
  text-align: center; }

.message-date {
  color: yellow; }

.message-reply-to {
  margin-left: 7px; }

/*
 * Public messages
 */
.messageContent .scaled-image {
  text-align: center; }

.messageContent img {
  max-width: 90%;
  height: auto;
  display: block;
  margin: auto; }

/*
 * Configurable elements of events page chardesc box
 */
#charTabs, #locationTab {
  margin-top: 10px; }

#charAdditionalDesc {
  width: 100%;
  min-height: 48px; }

#changeNameDescConfirm, #changeLocNameConfirm {
  float: right; }

#charName, #locName, #charAdditionalDesc {
  background-color: #eee; }

.charTabPage {
  min-height: 100px; }

input.button_whisper {
  color: #9beb00; }

.charStateBar > div {
  margin-top: 8px;
  display: inline-block;
  vertical-align: bottom; }

.charStateBar > .stateName {
  width: 120px; }

#charStateDamage, #charStateTiredness {
  display: inline-block;
  width: 350px;
  height: 13px;
  margin-right: 5px; }

#charStateDamage {
  background-color: #000000; }

#charStateTiredness {
  background-color: #000000; }

#charStateDamage > div {
  background-color: #800;
  border-width: 0px; }

#charStateTiredness > div {
  background-color: #336699;
  border-width: 0px; }

#charName {
  width: 400px; }

#buttonToolbar {
  margin-bottom: 0;
  float: right; }

#buttonToolbar img {
  margin-right: 2px;
  cursor: pointer; }

.toolbarButtonsGap {
  width: 10px;
  display: inline-block; }

/*
 * Call-to-action buttons
 */
.ctaContainer {
  text-align: center;
  margin: 50px 5px; }

.cta {
  display: inline-block;
  background-color: #eb3;
  padding: 10px 40px;
  border-radius: 10px;
  box-shadow: 0 7px 0 #50631C;
  font-size: 20pt;
  line-height: 35px;
  font-variant: small-caps; }

a.ctaLink {
  color: #000; }

.cta:hover {
  background-color: #e0A24C; }

.cta:active {
  box-shadow: 0 3px 0 #50631C;
  position: relative;
  top: 4px; }

.ctaWithArrow {
  padding: 10px 20px 10px 37px; }

.ctaWithArrow::after {
  content: " »"; }

/*
 * Responsive styles
 */
@media all and (max-width: 768px) {
  .page, .page-left {
    width: auto;
    padding: 0 4px; }

  #navigationPanel {
    padding: 0; }

  .titlebar {
    width: auto; }

  #eventsList > div {
    width: auto; }

  #charName {
    width: 100%; }

  #navigationPanel input, #navigationSubpanel > a {
    margin: 4px 2px; }

  .playerLinksColumn {
    width: 100%; }

  .playerInfoColumn {
    width: 100%; }

  .playerInfoColumn > table {
    margin: 10px 20px; }

  .accessListColumn {
    width: 100%; }

  .locationDescription > div {
    display: inline-block;
    width: 100%; }

  .locationDescription {
    text-align: center; }

  .locationDescriptionRaws {
    margin: 20px 0;
    max-width: 100%; }

  .locationDescriptionRawsInside {
    display: inline-block; }

  .locationDescriptionTerrain {
    float: none; }

  .skillsColumn {
    width: 100%; }

  .huntingContainer div {
    width: 100%;
    margin: 10px 0; }

  .domesticationAnimals, .domesticationPanel {
    width: 100%; } }
@media all and (max-width: 480px) {
  .action-buttons {
    white-space: normal; }

  .action-buttons input {
    border: 1px solid #000;
    padding: 0; }

  .action-buttons-2 {
    width: 72px; }

  .action-buttons-3, .action-buttons-5, .action-buttons-6, .action-buttons-9, .action-buttons-10 {
    /* 3 cols */
    width: 108px; }

  .action-buttons-4, .action-buttons-7, .action-buttons-8 {
    /* 4 cols */
    width: 144px; }

  .navbarItem {
    width: 26%; } }
/**
 * Boostrap-compliant elements
 */
.table {
  border-spacing: 0;
  border-collapse: collapse; }

.table td, .table th {
  padding: 3px; }

.table-bordered td, .table-bordered th {
  border: 1px solid #2e582e; }

.sortable-object-placeholder {
  height: 38px;
  background-color: #020; }

/*
 * jQuery UI code
 */
/*! jQuery UI - v1.10.3 - 2013-10-27
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.button.css, jquery.ui.dialog.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif&fwDefault=normal&fsDefault=1em&cornerRadius=0px&bgColorHeader=%23004400&bgTextureHeader=flat&bgImgOpacityHeader=33&borderColorHeader=%23004400&fcHeader=%23ffffff&iconColorHeader=%23ffffff&bgColorContent=%23052e05&bgTextureContent=flat&bgImgOpacityContent=10&borderColorContent=%23052e05&fcContent=%23ffffff&iconColorContent=%2372b42d&bgColorDefault=%23052e05&bgTextureDefault=flat&bgImgOpacityDefault=60&borderColorDefault=%23052e05&fcDefault=%234e4&iconColorDefault=%23ffffff&bgColorHover=%23052e05&bgTextureHover=flat&bgImgOpacityHover=50&borderColorHover=%23052e05&fcHover=%23ffffff&iconColorHover=%23ffffff&bgColorActive=%23052e05&bgTextureActive=flat&bgImgOpacityActive=30&borderColorActive=%23052e05&fcActive=%23ffffff&iconColorActive=%23ffffff&bgColorHighlight=%234e4&bgTextureHighlight=flat&bgImgOpacityHighlight=55&borderColorHighlight=%23f9dd34&fcHighlight=%23363636&
iconColorHighlight=%234eb305&bgColorError=%23ffdc2e&bgTextureError=flat&bgImgOpacityError=95&borderColorError=%23ceaf14&fcError=%23111&iconColorError=%23cd0a0a&bgColorOverlay=%23444444&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=15&opacityOverlay=30&bgColorShadow=%23000&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=15&thicknessShadow=0px&offsetTopShadow=2px&offsetLeftShadow=2px&cornerRadiusShadow=2px
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none; }

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.ui-helper-reset {
  border: 0;
  font-size: 100%;
  line-height: 1.3;
  list-style: none;
  margin: 0;
  outline: 0;
  padding: 0;
  text-decoration: none; }

.ui-helper-clearfix:before, .ui-helper-clearfix:after {
  border-collapse: collapse;
  content: "";
  display: table; }

.ui-helper-clearfix:after {
  clear: both; }

.ui-helper-clearfix {
  min-height: 0; }

.ui-helper-zfix {
  filter: Alpha(Opacity=0);
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.ui-front {
  z-index: 100; }

.ui-state-disabled {
  cursor: default !important; }

.ui-icon {
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
  text-indent: -99999px; }

.ui-widget-overlay {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%; }

.ui-resizable {
  position: relative; }

.ui-resizable-handle {
  display: block;
  font-size: .1px;
  position: absolute; }

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
  display: none; }

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  left: 0;
  top: -5px;
  width: 100%; }

.ui-resizable-s {
  bottom: -5px;
  cursor: s-resize;
  height: 7px;
  left: 0;
  width: 100%; }

.ui-resizable-e {
  cursor: e-resize;
  height: 100%;
  right: -5px;
  top: 0;
  width: 7px; }

.ui-resizable-w {
  cursor: w-resize;
  height: 100%;
  left: -5px;
  top: 0;
  width: 7px; }

.ui-resizable-se {
  bottom: 1px;
  cursor: se-resize;
  height: 12px;
  right: 1px;
  width: 12px; }

.ui-resizable-sw {
  bottom: -5px;
  cursor: sw-resize;
  height: 9px;
  left: -5px;
  width: 9px; }

.ui-resizable-nw {
  cursor: nw-resize;
  height: 9px;
  left: -5px;
  top: -5px;
  width: 9px; }

.ui-resizable-ne {
  cursor: ne-resize;
  height: 9px;
  right: -5px;
  top: -5px;
  width: 9px; }

.ui-selectable-helper {
  border: 1px dotted #000;
  position: absolute;
  z-index: 100; }

.ui-button {
  cursor: pointer;
  display: inline-block;
  line-height: normal;
  margin-right: .1em;
  overflow: visible;
  padding: 0;
  position: relative;
  text-align: center;
  vertical-align: middle; }

.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active {
  text-decoration: none; }

.ui-button-icon-only {
  width: 2.2em; }

button.ui-button-icon-only {
  width: 2.4em; }

.ui-button-icons-only {
  width: 3.4em; }

button.ui-button-icons-only {
  width: 3.7em; }

.ui-button .ui-button-text {
  display: block;
  line-height: normal; }

.ui-button-text-only .ui-button-text {
  padding: .4em 1em; }

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
  padding: .4em;
  text-indent: -9999999px; }

.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
  padding: .4em 1em .4em 2.1em; }

.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
  padding: .4em 2.1em .4em 1em; }

.ui-button-text-icons .ui-button-text {
  padding-left: 2.1em;
  padding-right: 2.1em; }

input.ui-button {
  padding: .4em 1em; }

.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
  margin-top: -8px;
  position: absolute;
  top: 50%; }

.ui-button-icon-only .ui-icon {
  left: 50%;
  margin-left: -8px; }

.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary {
  left: .5em; }

.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
  right: .5em; }

.ui-buttonset {
  margin-right: 7px; }

.ui-buttonset .ui-button {
  margin-left: 0;
  margin-right: -.3em; }

input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0; }

.ui-dialog {
  left: 0;
  outline: 0;
  padding: .2em;
  position: absolute;
  top: 0; }

.ui-dialog .ui-dialog-titlebar {
  padding: .4em 1em;
  position: relative; }

.ui-dialog .ui-dialog-title {
  float: left;
  margin: .1em 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90%; }

.ui-dialog .ui-dialog-titlebar-close {
  height: 20px;
  margin: -10px 0 0;
  padding: 1px;
  position: absolute;
  right: .3em;
  top: 50%;
  width: 21px; }

.ui-dialog .ui-dialog-content {
  background: none;
  border: 0;
  overflow: auto;
  padding: .5em 1em;
  position: relative; }

.ui-dialog .ui-dialog-buttonpane {
  background-image: none;
  border-width: 1px 0 0;
  margin-top: .5em;
  padding: .3em 1em .5em .4em;
  text-align: left; }

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right; }

.ui-dialog .ui-dialog-buttonpane button {
  cursor: pointer;
  margin: .5em .4em .5em 0; }

.ui-dialog .ui-resizable-se {
  background-position: 16px 16px;
  bottom: -5px;
  height: 12px;
  right: -5px;
  width: 12px; }

.ui-draggable .ui-dialog-titlebar {
  cursor: move; }

.ui-progressbar {
  height: 2em;
  overflow: hidden;
  text-align: left; }

.ui-progressbar .ui-progressbar-value {
  height: 100%;
  margin: -1px; }

.ui-progressbar .ui-progressbar-overlay {
  filter: alpha(opacity=25);
  height: 100%;
  opacity: 0.25; }

.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none; }

.ui-slider {
  position: relative;
  text-align: left; }

.ui-slider .ui-slider-handle {
  cursor: default;
  height: 1.2em;
  position: absolute;
  width: 1.2em;
  z-index: 2; }

.ui-slider .ui-slider-range {
  background-position: 0 0;
  border: 0;
  display: block;
  font-size: .7em;
  position: absolute;
  z-index: 1; }

.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit; }

.ui-slider-horizontal {
  height: .8em; }

.ui-slider-horizontal .ui-slider-handle {
  margin-left: -.6em;
  top: -.3em; }

.ui-slider-horizontal .ui-slider-range {
  height: 100%;
  top: 0; }

.ui-slider-horizontal .ui-slider-range-min {
  left: 0; }

.ui-slider-horizontal .ui-slider-range-max {
  right: 0; }

.ui-slider-vertical {
  height: 100px;
  width: .8em; }

.ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-bottom: -.6em;
  margin-left: 0; }

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%; }

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0; }

.ui-slider-vertical .ui-slider-range-max {
  top: 0; }

.ui-spinner {
  display: inline-block;
  overflow: hidden;
  padding: 0;
  position: relative;
  vertical-align: middle; }

.ui-spinner-input {
  background: none;
  border: none;
  color: inherit;
  margin: .2em 22px .2em .4em;
  padding: 0;
  vertical-align: middle; }

.ui-spinner-button {
  cursor: default;
  display: block;
  font-size: .5em;
  height: 50%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  text-align: center;
  width: 16px; }

.ui-spinner a.ui-spinner-button {
  border-bottom: none;
  border-right: none;
  border-top: none; }

.ui-spinner .ui-icon {
  left: 0;
  margin-top: -8px;
  position: absolute;
  top: 50%; }

.ui-spinner-up {
  top: 0; }

.ui-spinner-down {
  bottom: 0; }

.ui-spinner .ui-icon-triangle-1-s {
  background-position: -65px -16px; }

.ui-tabs {
  padding: .2em;
  position: relative; }

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: .2em .2em 0; }

.ui-tabs .ui-tabs-nav li {
  border-bottom-width: 0;
  float: left;
  list-style: none;
  margin: 1px .2em 0 0;
  padding: 0;
  position: relative;
  top: 0;
  white-space: nowrap; }

.ui-tabs .ui-tabs-nav li a {
  float: left;
  padding: .5em 1em;
  text-decoration: none; }

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px; }

.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
  cursor: text; }

.ui-tabs .ui-tabs-nav li a,
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
  cursor: pointer; }

.ui-tabs .ui-tabs-panel {
  background: none;
  border-width: 0;
  display: block;
  padding: 1em 1.4em; }

.ui-tooltip {
  -webkit-box-shadow: 0 0 5px #aaa;
  box-shadow: 0 0 5px #aaa;
  max-width: 300px;
  padding: 8px;
  position: absolute;
  z-index: 9999; }

body .ui-tooltip {
  border-width: 2px; }

.ui-widget {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em; }

.ui-widget .ui-widget {
  font-size: 1em; }

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em; }

.ui-widget-content {
  background-color: #052e05;
  border: 1px solid #052e05;
  color: #fff; }

.ui-widget-header {
  background-color: #040;
  border: 1px solid #040;
  color: #fff;
  font-weight: 700; }

.ui-widget-header a {
  color: #fff; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background-color: #052e05;
  border: 1px solid #052e05;
  color: #FF9700;
  font-weight: 400; }

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
  color: #FF9700;
  text-decoration: none; }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  background-color: #052e05;
  border: 1px solid #052e05;
  color: #fff;
  font-weight: 400; }

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited {
  color: #fff;
  text-decoration: none; }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  background-color: #052e05;
  border: 1px solid #052e05;
  color: #fff;
  font-weight: 400; }

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  color: #fff;
  text-decoration: none; }

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  background-color: #FF9700;
  border: 1px solid #f9dd34;
  color: #363636; }

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
  color: #363636; }

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
  background-color: #ffdc2e;
  border: 1px solid #ceaf14;
  color: #111; }

.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
  color: #111; }

.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
  color: #111; }

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
  font-weight: 700; }

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
  filter: Alpha(Opacity=70);
  font-weight: 400;
  opacity: .7; }

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  background-image: none;
  filter: Alpha(Opacity=35);
  opacity: .35; }

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35); }

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 2px; }

.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
  cursor: pointer; }

.ui-widget {
  font-size: 1em; }

.ui-widget select, .ui-widget button, .ui-widget input {
  font-size: 1em; }

.ui-widget textarea, .ui-widget text, .ui-widget input[type="text"] {
  font-size: 1em;
  color: #111;
  border: 2px solid #000;
  padding: 2px; }

.ui-widget-content {
  background-color: #162c17;
  border: 2px solid #000;
  color: #eee; }

.ui-widget-header {
  background-color: #0c360c;
  border: 1px solid #222;
  color: #eee;
  font-weight: 700; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background-color: #2e582e;
  border: 1px solid #0c360c;
  color: #9beb00;
  font-weight: 400; }

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
  color: #9beb00;
  text-decoration: none; }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  background-color: #2e582e;
  border: 1px solid #0c360c;
  color: #fff;
  font-weight: 400; }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  background-color: #2e582e;
  border: 1px solid #0c360c;
  color: #fff;
  font-weight: 400; }

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  background-color: #222222;
  border: 1px solid #f9dd34;
  color: #363636; }

/*# sourceMappingURL=CalyxMod-dark.css.map */

Return to “General Discussion”

Who is online

Users browsing this forum: No registered users and 1 guest