CalyxMod CSS

[BeepBeep]

I like the way this looks, but after I copied and pasted the code the background of my interface became white instead of the dark color shown here. Any suggestions?

[Calyx]

Looks awesome, thanks. If you did something with that olive green in characters page, I would love that.

Done!

I also set the text back so that it can be read in the Player Naming Popup as requested... I still want that to be inline with the rest, but I just can't pinpoint it yet.

Update v0.2 below: Bug Fixes, trimmed down a little and some fade transitions added! Bit nicer...

Code: Select all

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;
}
/* 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:0px;
  text-indent: 2.5em;
}

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;
}

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

.errorbar a {
  color: #dd5;
}

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

a:link, a:visited, a:active {
  color: #9beb00;
  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, .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: #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-style: dashed;
  border-width: small;
  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, .button_suggmenu, .button_form {
  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;
}

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: 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;
  border: 1px white solid;
}

#charPopupName {
  border-bottom: 1px white solid;
  color: #9beb00;
  font-weight: bold;
  background-color: #111;
  padding: 2px;
}

#charPopupDesc {
  background-color: #111;
  padding: 2px;
}

.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; }

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

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

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;
}


/**
 * 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;
}

.table-condensed {

}


/* 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:2px;
}

.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-size:1em;
}

.ui-widget .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-widget-header a
{
  color:#fff;
}

.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-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:#2e582e;
  border:1px solid #0c360c;
  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:#222222;
  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);
}

[Raynus]

Hm. Didn't really change anything.

Also I would like the fix for character popups. Thanks

[Calyx]

Hm. Didn't really change anything.

Also I would like the fix for character popups. Thanks

That is what I changed! Please screenshot so that I know what needs fixing?

[Calyx]

I like the way this looks, but after I copied and pasted the code the background of my interface became white instead of the dark color shown here. Any suggestions?

Which browser are you using? A few lines seem to get fragmented in the copy/paste. I fixed it in the post now. Alternatively, get it here http://pastebin.com/NJKvq9Xj

[Cdls]

Looks great, playing around with different styles is always fun!

[Bmot]

I like the way this looks, but after I copied and pasted the code the background of my interface became white instead of the dark color shown here. Any suggestions?

Which browser are you using? A few lines seem to get fragmented in the copy/paste. I fixed it in the post now. Alternatively, get it here http://pastebin.com/NJKvq9Xj

Nope, not fixed in Chrome for me... White text in a white field doesn't show up so well

[Calyx]

Version 0.2 above is the short term fix! Tested in Chrome... Dark text until I fix it...

[Bmot]

I think it needed a few refreshes or something to work, it's working now Dark text on a white field

[Bmot]

And I moved this to General Discussion as it's not exactly a suggestion

[Raynus]

Here's what I meant:

[Felixis]

I like current colour. It is so faded, which matches the background. Anyway I think the text colour on the project (in character profile, below the location) is too bright compared to the rest.

[Cdls]

There are a few things I should be doing right now, but once again I am drawn back in to customize my Cantr experience. *sigh*

Credit to you, though, I do like the dark theme and am gonna be playing around with it a bit. :D

[Calyx]

And I moved this to General Discussion as it's not exactly a suggestion

The suggestion would be to add it to the CSS dropdown selection please! If people are relatively happy with it/using it of course?

[Swingerzetta]

I would like this. I'd be in favor of having a whole collection of community-made CSS skins available on the page somewhere, actually. This could be the first one of many! Or, well, the first of a few, perhaps. I seem to remember reading that custom css's are actually used only rarely.