Reversi

Summary:

Light on dark with blue key, default skin Please DO copy and reuse and modify this code any way you like!# code adapted from 'colour flip combos' by lim @ ao3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend porta hendrerit. Phasellus vehicula eros ante, in ultricies arcu convallis non. In mollis metus ut euismod iaculis. Ut tempus rhoncus lectus, sit amet faucibus purus. Mauris nulla enim, sollicitudin non enim nec, viverra viverra lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eu ullamcorper tellus, nec scelerisque libero.

Vestibulum quis varius nisi, in tincidunt enim. Sed lobortis ante massa, at semper nisl hendrerit nec. Aliquam in velit dictum mauris ultrices faucibus. Donec in nisl eget nunc viverra posuere quis id odio. Nam eleifend mattis leo a hendrerit. Fusce magna massa, aliquet nec congue sed, iaculis sed ex. Nam tincidunt eget ex pellentesque egestas. Suspendisse tincidunt luctus eros, ac scelerisque enim ullamcorper eu. Integer lorem nulla, sodales quis lorem in, rhoncus lacinia est. Nam posuere aliquam lorem in mattis. Morbi ullamcorper, justo sed laoreet suscipit, odio nunc egestas dui, ac facilisis quam enim non ex. Nullam dui sapien, facilisis nec placerat eget, posuere ac lectus. Etiam maximus dictum nisl sed condimentum.

Quisque egestas, sem ut ornare posuere, sem mauris varius ipsum, eu egestas ligula erat id elit. Duis elementum nisi euismod enim tempor blandit. Nullam eleifend erat vitae dignissim porttitor. Curabitur tincidunt, metus vel elementum tincidunt, est nisl volutpat leo, quis fermentum est ipsum blandit metus. Etiam eu tellus dolor. Sed vestibulum, mi convallis dapibus egestas, ipsum metus imperdiet neque, sed tincidunt mauris orci ut nisl. Phasellus lobortis vestibulum ante a tristique. Curabitur non tristique ipsum. Donec id lobortis quam, vel rhoncus ligula. Phasellus scelerisque gravida ligula vitae vehicula. Phasellus eget magna at tellus vehicula tincidunt. Pellentesque feugiat, leo ac rhoncus ornare, tellus est cursus mi, in mollis tortor mauris ut magna. Etiam tellus ex, tristique at risus congue, dignissim pellentesque eros. Vivamus sodales odio ultrices, porttitor quam non, maximus lorem.

Sed non suscipit magna. Sed nec nunc pharetra, gravida odio sed, molestie lectus. Curabitur fringilla lacinia vehicula. Morbi imperdiet orci eget blandit tempor. Pellentesque iaculis pellentesque nulla, eu molestie enim. Suspendisse potenti. Nullam facilisis tortor ut rhoncus finibus. Pellentesque mattis, metus ut pharetra egestas, risus nulla ultrices lacus, quis pharetra purus sapien id lorem. Aenean sit amet neque tincidunt, tincidunt purus sed, accumsan lorem. Nullam aliquet lacus vitae massa feugiat fringilla. Quisque mollis metus a dui commodo cursus. Integer congue felis ac sapien porta consectetur. Aenean dictum risus nec molestie viverra. Praesent at eros et sem pharetra eleifend.

Nam maximus massa non dolor condimentum, nec hendrerit mi molestie. Curabitur vel nisi sit amet urna semper placerat. In finibus a nisl luctus auctor. Nulla a dui mollis, molestie nisi non, facilisis lorem. Ut pretium nulla mi, non suscipit ante pretium id. Ut eget imperdiet est. Sed nec consequat ligula. Vivamus vel pharetra sapien, eu auctor quam. Sed ultrices aliquam cursus. Suspendisse egestas, lectus quis accumsan fermentum, metus ipsum dapibus est, eget egestas odio nisi vel mauris. Donec quis malesuada metus, ac laoreet elit. Sed volutpat, velit sit amet cursus elementum, urna mauris fringilla mauris, eu varius felis neque at ante. Ut ipsum mi, efficitur et dolor vitae, iaculis iaculis diam. Vivamus faucibus libero nec facilisis facilisis.


#outer .region,
#footer .group,
.post fieldset fieldset,
fieldset fieldset {
  background: none;
}

body,
.group,
.group .group,
.region,
.flash,
fieldset,
fieldset fieldset ul,
form dl,
textarea,
#main .verbose legend,
.verbose fieldset,
.notice,
ul.notes,
input,
textarea,
table,
th,
td:hover,
tr:hover,
.symbol .question:hover,
#modal,
.ui-sortable li,
.required .autocomplete,
.autocomplete .notice,
.system .intro,
.comment_error,
.kudos_error,
div.dynamic,
.dynamic form,
#ui-datepicker-div,
.ui-datepicker table {
  background: #333;
  color: #eee;
  border-color: #222;
  outline: #111;
  box-shadow: none;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu,
#small_login,
.group.listbox,
fieldset fieldset.listbox,
form blockquote.userstuff,
input:focus,
textarea:focus,
li.relationships a,
.group.listbox .index,
.dashboard fieldset fieldset.listbox .index,
#dashboard a:hover,
th,
#dashboard .secondary,
.secondary,
.thread .even,
.system .tweet_list li,
.ui-datepicker tr:hover {
  background: #2a2a2a;
}

#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
.splash .favorite li:nth-of-type(odd) a,
.ui-datepicker td:hover,
#tos_prompt .heading,
#tos_prompt [disabled] {
  background: #111;
}

#outer,
.javascript,
.statistics .index li:nth-of-type(even),
#tos_prompt,
.announcement input[type='submit'],
.nomination dt {
  background: #333;
}

#header ul.primary,
#outer #footer,
.toggled form {
  background: url('/images/skins/textures/tiles/black-noise.jpg');
}

#header ul.primary,
#footer,
#dashboard ul,
dl.meta,
.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
form blockquote.userstuff,
div.comment,
li.comment,
.toggled form,
form dl dt,
form.single fieldset,
#inner .module .heading,
.bookmark .status span,
.splash .news li,
.filters .group dt.bookmarker {
  border-color: #555;
}

.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
.wrapper,
#dashboard .secondary,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form {
  box-shadow: 1px 1px 3px #000;
}

#dashboard .current,
.actions a:active,
#outer .current,
a.current,
.current a:visited,
span.unread,
.replied,
span.claimed,
dl.index dd,
.own,
.draft,
.draft .unread,
.child,
.unwrangled,
.unreviewed,
.ui-sortable li:hover {
  background: #000;
  border-color: #555;
  box-shadow: -1px -1px 3px #000;
}

input,
textarea {
  box-shadow: inset 0 1px 2px #000;
}

li.blurb,
.blurb .blurb,
.listbox .index,
fieldset fieldset.listbox,
.dashboard .listbox .index {
  box-shadow: inset 1px 1px 3px #000;
}

#footer a:hover,
#footer a:focus,
.autocomplete .dropdown ul li:hover,
.autocomplete .dropdown li.selected,
a.tag:hover,
.listbox .heading a.tag:visited:hover,
.symbol .question,
.qtip-content {
  background: #5998d6;
  color: #111;
}

.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus {
  background: #5998d6;
  color: #111;
}

#header #greeting img,
#header .heading a,
#header .heading a:visited,
#header .user a:hover,
#header .user a:focus,
#header fieldset,
#header form,
#header p,
#dashboard a:hover,
.actions a:hover,
.actions button:hover,
.actions input:hover,
.delete a,
span.delete,
span.unread,
.replied,
span.claimed,
.draggable,
.droppable,
span.requested,
a.work,
.blurb h4 a:link,
.blurb h4 img,
.splash .module h3,
.splash .browse li a:before,
.required,
.error,
.comment_error,
.kudos_error,
a.cloud7,
a.cloud8,
#tos_prompt .heading {
  color: #5998d6;
}

#greeting .icon,
#dashboard,
#dashboard.own,
.error,
.comment_error,
.kudos_error,
.LV_invalid,
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
.qtip-content {
  border-color: #5998d6;
}

a,
a:link,
a.tag,
#header a,
#header a:visited,
#header .primary .open a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus,
#header #search input:focus,
#header #search input:hover,
#dashboard a,
#dashboard span,
#dashboard .current,
.heading,
.group .heading,
.filters dt a:hover {
  color: #fff;
}

a:visited,
.actions a:visited,
.action a:link,
.action a:visited,
.listbox .heading a:visited,
span.series .divider {
  color: #999;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions button,
.actions input,
input[type='submit'],
button,
.current,
.actions label,
#header .actions a {
  background: #555;
  border-color: #222;
  color: #eee;
  box-shadow:
    inset 0 -8px 4px #232323,
    inset 0 8px 7px #555;
  text-shadow: none;
}

.actions a:hover,
.actions button:hover,
.actions input:hover,
#dashboard a:hover,
label.action:hover,
.action:hover,
.actions a:focus,
.actions button:focus,
.actions input:focus,
#dashboard a:focus,
.actions .disabled select {
  color: #999;
  border-color: #000;
  box-shadow: inset 2px 2px 2px #000;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  color: #fff;
  background: #555;
  border-color: #fff;
  box-shadow: inset 1px 1px 3px #333;
}

.delete a,
span.delete {
  box-shadow: -1px -1px 2px rgba(255, 255, 255.25);
}

.actions label.disabled {
  background: #222;
  box-shadow: none;
}

ul.required-tags,
.bookmark .status span,
.blurb .icon {
  opacity: 0.9;
  border: 0;
}

#outer .group .heading,
#header .actions a,
fieldset.listbox .heading,
.userstuff .heading,
.heading,
.userstuff h2 {
  text-shadow: none;
  color: #fff;
  background: none;
}

#header .actions a,
fieldset fieldset,
.mce-container button,
.filters .expander,
.actions .disabled select {
  box-shadow: none;
}

fieldset fieldset.listbox {
  outline: none;
}

form dd.required {
  color: #eee;
}

.mce-container input:focus {
  background: #f3efec;
}

.announcement .userstuff a,
.announcement .userstuff a:link,
.announcement .userstuff a:visited:hover {
  color: #111;
}

.announcement .userstuff a:visited {
  color: #666;
}

.announcement .userstuff a:hover,
.announcement .userstuff a:focus {
  color: #999;
}

.event.announcement .userstuff a,
.filters .expander {
  color: #eee;
}

.caution {
  border-color: #807640;
  color: #dbbc54;
}