Cantr II Discussion Forum

A forum for discussion about the PBBRPG Cantr II
https://forum.cantr.org:443/

CalyxMod CSS

https://forum.cantr.org:443/viewtopic.php?f=1&t=26850

Page 1 of 3

CalyxMod CSS

Posted: Wed Mar 11, 2015 1:51 pm
by Calyx
I thought I'd try and update the UI a little bit, so please try this in your custom CSS and tell me what you all think? Tested on Chrome on PC & Android so far...

Image
Bugbears: Please change the <UL> Player Settings style to CSS please admins?

To apply:
> Player Settings > Interface > Check Use Custom CSS and paste this into the box:

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{
color: #eee;
background: #111111;
border: 2px solid #000;
padding: 2px;
}

input{
color: #eee;
background: #111111;
border: 2px solid #000;
padding: 2px
}

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

a:hover {
  color: #9beb00;
  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: #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: #0c360c;
  font-weight: bold;
  border-style: dashed;
  border-width: small;
  border-color: black;
  border: 1px solid black;
  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: #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;
}

.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;
  text-decoration: none;
}

a.button_charmenu {
  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;
  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: #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: #3a0000;
}
#charStateTiredness {
  background-color: #020;
}

#charStateDamage > div {
  background-color: #800;
  border-width: 0px;
}
#charStateTiredness > div {
  background-color: #2e582e;
  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 {

}


/*
 * 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=%239beb00&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=%239beb00&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: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,/* 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-size:1em;
}

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

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

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

.ui-widget-header
{
  background-color:#0c360c;
  border:1px solid #0c360c;
  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:#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:#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:#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);
}


Changes:
v0.1 Just colours and some updated bits: This isn't a huge change. Still ties in with all the old bits that can't be changed in this way. More may come depending on feedback.

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 2:30 pm
by Greek
Could you post a screenshot?

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 2:53 pm
by Calyx
Added, but I don't like giving anything away! The best way is to try it, it's easy to drop in...

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 3:39 pm
by Bmot
Not really a suggestion :P But I like it :) Maybe make a custom-CSS show-off thread in General Discussion?

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 3:49 pm
by Bmot
Besides that: looks good! I like it :) Though I think the link-text could stand to be a bit more green.

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 4:28 pm
by Calyx
I like it limey. ;) But please do move this wherever it needs to go!

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 7:41 pm
by Swingerzetta
Very pretty! I use a sort of green and brown custom skin, but I think I like yours better.

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 7:47 pm
by Bmot
Calyx wrote:I like it limey. ;) But please do move this wherever it needs to go!


Hmmm, I do like it now, I think the other compu screen just sucked :D it was a bit yellowish, now it's nice and limey :)

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 10:25 pm
by Chroma Key
*half an hour's scrolling later*

I like it.

Re: CalyxMod CSS

Posted: Wed Mar 11, 2015 11:42 pm
by computaertist
Image

...

Yeahhh, I don't think I'm gonna mess with my nice set up to test out a possible redesign. I'll take the screenshot's word for it being nice :)

I will also look through that code to see if there's any ideas I might like to add to my set up.

Re: CalyxMod CSS

Posted: Thu Mar 12, 2015 3:02 am
by returner
I've set my Cantr to this CalyxMod and it's fricken awesome. So happy. Shout out / thanks to the Cantr programmers for giving such flexibility over customising your own UI.

Re: CalyxMod CSS

Posted: Thu Mar 12, 2015 7:09 am
by Calyx
Thanks for the comments all, I'm glad you like it! :mrgreen: There will be more to follow!

Re: CalyxMod CSS

Posted: Thu Mar 12, 2015 9:30 am
by Finchington
Not sure if my phone is just being a dick or what, but the naming tab is coming up as white on white? Makes it hard to read :P

Also, loving it.

Re: CalyxMod CSS

Posted: Thu Mar 12, 2015 9:51 am
by Calyx
Finchington wrote:the naming tab is coming up as white on white? Makes it hard to read.

It's not just you... I heard about it a lttle earlier. I don't know if that bit doesn't use the same CSS tags or what, but I must be able to fix it somehow! Thanks.

Re: CalyxMod CSS

Posted: Fri Mar 13, 2015 3:09 pm
by Raynus
Looks awesome, thanks. If you did something with that olive green in characters page, I would love that.
All times are UTC
Page 1 of 3
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/