Migrate assets to use Webpacker

app/javascript/src/styles/common/000_vars.scss

@@ -0,0 +1,92 @@
+@charset "UTF-8";
+
+$menu_color: #F5F5FF;
+$link_color: hsl(213, 100%, 50%);
+$link_hover_color: lighten($link_color, 25%);
+$link_dark_color: darken($link_color, 25%);
+$highlight_color: lighten($link_color, 45%);
+$h1_size: 2em;
+$h2_size: 1.5em;
+$h3_size: 1.16667em;
+$h4_size: 1em;
+$dtext_h1_size: 2em;
+$dtext_h2_size: 1.8em;
+$dtext_h3_size: 1.6em;
+$dtext_h4_size: 1.4em;
+$dtext_h5_size: 1.2em;
+$dtext_h6_size: 1em;
+$h1_padding: 0.8em 0 0.25em 0;
+$h2_padding: 0.8em 0 0.25em 0;
+$h3_padding: 0.8em 0 0.25em 0;
+$h4_padding: 0.8em 0 0.25em 0;
+$baseline: 1em;
+$basefont: 100%;
+$base_font_family: Verdana, Helvetica, sans-serif;
+$preview_has_children_color: #0F0;
+$preview_has_parent_color: #CC0;
+$preview_deleted_color: #000;
+$preview_pending_color: #00F;
+$preview_flagged_color: #F00;
+$preview_sample_warning_color:  hsl(0,  100%, 90%); // light red
+$preview_quality_warning_color: hsl(50, 100%, 90%); // light yellow
+
+$note_highlight_color: $preview_pending_color;
+
+$error_color: hsl(0, 100%, 95%); // light red
+$success_color: hsl(120, 100%, 95%); // light green
+
+@mixin border-radius($val) {
+  -moz-border-radius: $val;
+  -webkit-border-radius: $val;
+  -ms-border-radius: $val;
+  -o-border-radius: $val;
+  border-radius: $val;
+}
+
+@mixin box-shadow($val) {
+  -moz-box-shadow: $val;
+  -webkit-box-shadow: $val;
+  -ms-box-shadow: $val;
+  -o-box-shadow: $val;
+  box-shadow: $val;
+}
+
+@mixin text-shadow($val) {
+  -moz-text-shadow: $val;
+  -webkit-text-shadow: $val;
+  -ms-text-shadow: $val;
+  -o-text-shadow: $val;
+  text-shadow: $val;
+}
+
+@mixin inline-block {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+}
+
+@mixin animated-icon {
+  content: "►";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  color: white; 
+  background-color: rgba(0,0,0,0.5);
+  margin: 2px;
+  text-align: center;
+}
+
+@mixin sound-icon {
+  content: "♪";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  color: white; 
+  background-color: rgba(0,0,0,0.5);
+  margin: 2px;
+  text-align: center;
+}

app/javascript/src/styles/common/010_reset.scss

@@ -0,0 +1,171 @@
+// Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass
+
+@import "000_vars.scss";
+
+// Reset.sass
+// Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an
+// adapted version here	that cuts out some of the reset HTML elements we will
+// never need here (i.e., dfn, samp, etc).
+
+// ERIC MEYER RESET
+// ----------------
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+/*  font-weight: normal;*/
+/*  font-style: normal;*/
+  font-size: 100%;
+  line-height: 1.25em;
+  font-family: inherit;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+}
+
+// Normalize.css
+// Pulling in select resets form the normalize.css project
+// --------------------------------------------------
+
+// Display in IE6-9 and FF3
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+html {
+  overflow-y: scroll;
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+// Focus states
+a:focus {
+  outline: thin dotted;
+}
+
+// Hover & Active
+
+a:hover,
+a:active {
+  outline: 0;
+}
+
+// Display in IE6-9 and FF3
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+  display: block;
+}
+
+// Prevents sub and sup affecting line-height in all browsers
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Img border in a's and image quality
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+
+// Forms
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+
+// Font size in all browsers, margin changes, misc consistency
+
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: middle;
+}
+
+button,
+input {
+  line-height: normal;
+  // FF3/4 have !important on line-height in UA stylesheet
+  *overflow: visible;
+  // Inner spacing ie IE6/7
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  // Inner padding and border oddities in FF3/4
+  border: 0;
+  padding: 0;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  // Cursors on all buttons applied consistently
+  -webkit-appearance: button;
+  // Style clickable inputs in iOS
+}
+
+input[type="search"] {
+  // Appearance in Safari/Chrome
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  // Inner-padding issues in Chrome OSX, Safari 5
+}
+
+textarea {
+  overflow: auto;
+  // Remove vertical scrollbar in IE6-9
+  vertical-align: top;
+  // Readability and alignment cross-browser
+}

app/javascript/src/styles/common/020_base.scss

@@ -0,0 +1,136 @@
+@import "000_vars.scss";
+
+body {
+  background-color: #FFF;
+  font-family: $base_font_family;
+  padding: 0;
+  margin: 0;
+  font-size: 87.5%;
+  line-height: 1.25em;
+}
+
+article, section {
+  display: block;
+}
+
+abbr[title=required] {
+  display: none;
+}
+
+blockquote {
+  margin: 0 0 1em 0;
+  padding: 1em 1em 0.2em;
+  border: 1px solid #666;
+  background: #EEE;
+}
+
+code {
+  font-family: monospace;
+  font-size: 1.2em;
+}
+
+dd {
+  margin-bottom: 1em;
+}
+
+dt {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Tahoma, Verdana, Helvetica, sans-serif;
+  font-weight: bold;
+  line-height: 1.5em;
+}
+
+h1 {
+  font-size: $h1_size;
+}
+
+h2 {
+  font-size: $h2_size;
+}
+
+h3, h4, h5, h6 {
+  font-weight: bold;
+  font-size: $h3_size;
+}
+
+fieldset {
+  margin-bottom: 1em;
+}
+
+header {
+  margin: 0 0 1em 0;
+  padding: 0;
+  display: block;
+}
+
+img {
+  border: none;
+  vertical-align: middle;
+}
+
+img.wait {
+  margin-left: 5px;
+}
+
+legend {
+  font-size: $h2_size;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+menu {
+  margin: 0;
+  padding: 0;
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin: 0;
+    padding: 0 0.2em;
+    list-style-type: none;
+    display: inline;
+  }
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+section {
+  display: block;
+}
+
+strong {
+  font-weight: bold;
+}
+
+table tfoot {
+  margin-top: 2em;
+}
+
+.hint {
+  color: #666;
+  font-style: italic;
+  max-width: 70%;
+}
+
+.tn {
+  font-size: 0.8em;
+  color: gray;
+}
+
+p.info {
+  color: #AAA;
+  font-style: italic;
+  font-size: 80%;
+}

app/javascript/src/styles/common/030_links.scss

@@ -0,0 +1,38 @@
+@import "000_vars.scss";
+
+a:link {
+  color: $link_color;
+  text-decoration: none;
+}
+
+a:visited {
+  color: $link_color;
+  text-decoration: none;
+}
+
+a:hover {
+  color: $link_hover_color;
+  text-decoration: none;
+}
+
+a:active {
+  color: $link_color;
+  text-decoration: none;
+}
+
+a.active {
+  font-weight: bold;
+}
+
+a.login {
+  font-weight: bold;
+  color: #e00;
+}
+
+a.forum-updated {
+  font-style: italic;
+}
+
+a.wiki-link {
+  margin-right: 0.3em;
+}

app/javascript/src/styles/common/autocomplete.scss

@@ -0,0 +1,19 @@
+.ui-autocomplete {
+  font-size: 0.9em;
+
+  .ui-state-active {
+    border: none;
+    margin: 0 -1px;
+    background-color: #F0F0F0;
+    border-left: 1px solid #C5C5C5;
+    border-right: 1px solid #C5C5C5;
+  }
+
+  .ui-menu-item a {
+    padding: 1px .2em;
+  }
+
+  .autocomplete-arrow {
+    color: black;
+  }
+}

app/javascript/src/styles/common/diffs.scss

@@ -0,0 +1,21 @@
+.diff-list {
+  ins, ins a {
+    color: green;
+    text-decoration: none;
+    margin-right: 0.5em;
+  }
+
+  ins.obsolete, ins.obsolete a {
+    color: darkGreen;
+  }
+
+  del, del a {
+    color: red;
+    text-decoration: line-through;
+    margin-right: 0.5em;
+  }
+
+  del.obsolete, del.obsolete a {
+    color: darkRed;
+  }
+}

app/javascript/src/styles/common/dtext.scss

@@ -0,0 +1,95 @@
+@import "000_vars.scss";
+
+div.prose {
+  line-height: 1.4em;
+
+  h1, h2, h3 {
+    line-height: 1em;
+  }
+
+  h1 {
+    font-size: $dtext_h1_size;
+    padding: $h1_padding;
+  }
+
+  h2 {
+    font-size: $dtext_h2_size;
+    padding: $h2_padding;
+  }
+
+  h3 {
+    font-size: $dtext_h3_size;
+    padding: $h3_padding;
+  }
+
+  h4 {
+    font-size: $dtext_h4_size;
+    padding: $h4_padding;
+  }
+
+  h5 {
+    font-size: $dtext_h5_size;
+    padding: $h4_padding;
+  }
+
+  h6 {
+    font-size: $dtext_h6_size;
+    padding: $h4_padding;
+  }
+
+  ul {
+    margin-left: 1em;
+    margin-bottom: 1em;
+
+    ul {
+      margin-bottom: 0;
+    }
+  }
+
+  li {
+    list-style-type: disc;
+  }
+  
+  pre {
+    font-family: monospace;
+    font-size: 1.2em;
+    margin: 0.5em 0;
+    padding: 0.5em 1em;
+    background: #EEE;
+    white-space: pre-wrap;
+  }
+
+  code {
+    font-family: monospace;
+    background: #EEE;
+  }
+
+  div.expandable {
+    margin-bottom: 1em;
+    border: 1px inset #666;
+  }
+
+  div.expandable-header {
+    padding: 0.4em;
+
+    span {
+      margin-right: 0.5em;
+      font-weight: bold;
+    }
+  }
+
+  div.expandable-content {
+    padding: 0.4em;
+    border-top: 1px solid #666;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+div.dtext-preview {
+  ul {
+    margin-left: 1em;
+  }
+}

app/javascript/src/styles/common/inline.scss

@@ -0,0 +1,43 @@
+@import "000_vars.scss";
+
+span.error {
+  display: block;
+  font-weight: bold;
+  color: red;
+}
+
+span.link {
+  color: $link_color;
+  cursor: pointer;
+}
+
+span.wait {
+  color: #CCC;
+}
+
+span.count {
+  color: #CCC;
+  margin-left: 0.5em;
+}
+
+span.edit-options {
+}
+
+kbd.key {
+  background: #333;
+  border: 1px solid #333;
+  padding: 1px 6px;
+  color: white;
+/*  width: 1em;*/
+  text-align: center;
+  @include inline-block;
+  @include border-radius(3px);
+}
+
+span.inactive {
+  color: #AAA;
+}
+
+td a.last-page {
+  color: #666;
+}

app/javascript/src/styles/common/jquery_ui_custom.scss

@@ -0,0 +1,66 @@
+@import "./000_vars.scss";
+
+.ui-widget {
+  font-family: $base_font_family;
+
+  input, select, textarea, button {
+    font-family: $base_font_family;
+  }
+}
+
+div.ui-dialog {
+  height: auto! important;
+  overflow: visible;
+  font-size: 1em;
+  z-index: 999 !important;
+  box-shadow: 2px 2px 1px grey;
+
+  ul {
+    margin-left: 1em;
+    margin-bottom: 1em;
+  }
+}
+
+.ui-state-highlight {
+  border: 1px solid #FCEEC1;
+  background: #FDF5D9;
+  color: #363636;
+}
+
+.ui-state-error {
+  border: 1px solid #FBC7C6;
+  background: #FDDFDE;
+}
+
+.ui-button {
+  margin: 0;
+  padding: 0.25em 1em;
+  background-color: #f6f6f6;
+  border: 1px solid #c5c5c5;
+
+  &.sub {
+    font-size: 90%;
+  }
+
+  &.tiny {
+    font-size: 90%;
+    padding: 0.25em 0.5em;
+  }
+
+  &.gradient {
+    background: linear-gradient(#f6f6f6, #e5e5e5);
+  }
+}
+
+.ui-button:hover {
+  box-shadow: 1px 1px grey;
+  transform: translateY(-1px);
+
+  &.gradient {
+    background: linear-gradient(#fefefe, #f0f0f0);
+  }
+}
+
+.ui-front {
+  z-index: 1000;
+}

app/javascript/src/styles/common/main_layout.scss

@@ -0,0 +1,114 @@
+@import "000_vars.scss";
+
+div#search {
+  margin-bottom: 1em;
+}
+
+div#search-box button {
+  -webkit-appearance: button;
+  border: 1px solid $link_color;
+  background-color: $link_color;
+  color: #FFF;
+  &:hover, &:focus {
+    border: 1px solid $link_hover_color;
+    background-color: $link_hover_color;
+  }
+}
+
+div#page {
+  overflow: visible;
+  margin: 0 20px;
+  padding: 0 10px;
+
+  div#upgrade-account-notice, div#sign-up-notice, div#tos-notice, div#ban-notice, div#dmail-notice, div#mod-notice {
+    margin: 1em 0;
+    padding: 1em;
+    text-align: center;
+    position: relative;
+
+    h1 {
+      font-size: $h2_size;
+      font-weight: bold;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  aside#sidebar {
+    width: 15em;
+    float: left;
+
+    h1 {
+      font-size: $h3_size;
+    }
+
+    ul {
+      list-style-type: none;
+    }
+
+    input[type=text] {
+      /* ensure expanded search box renders above post thumbnails. */
+      z-index: 1;
+      position: relative;
+    }
+
+    button[type=submit] {
+      padding: 2px 6px;
+      background: #EEE;
+      border-left: none;
+    }
+  }
+
+  aside#sidebar > section {
+    margin-bottom: 1em;
+  }
+
+  aside#sidebar > section#blacklist-box ul {
+    margin-left: 1em;
+
+    li {
+      list-style-type: disc;
+    }
+
+    a {
+      color: $link_color;
+      cursor: pointer;
+    }
+
+    span {
+      color: #AAA;
+    }
+  }
+
+  section#content {
+    overflow: visible;
+    margin-left: 15em;
+    padding-left: 1em;
+  }
+}
+
+footer#page-footer {
+  clear: both;
+  width: 100%;
+  margin-top: 1em;
+  text-align: center;
+  padding: 1em 0 1em;
+  border-top: 1px solid #EEE;
+}
+
+div.clearfix {
+  clear: both;
+}
+
+div#more-links {
+  z-index: 5000;
+  position: absolute;
+  background: white;
+  border: 1px solid #999;
+  width: 8em;
+  line-height: 1.3em;
+  padding: 0.2em 0.6em;
+  @include box-shadow(2px 2px 2px #ccc);
+}

app/javascript/src/styles/common/news.scss

@@ -0,0 +1,24 @@
+div#news-updates {
+  padding: 5px;
+  background: #EEE;
+  border-bottom: 2px solid #666;
+  overflow: hidden;
+  font-size: 0.8em;
+
+  ul {
+    float: left;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    list-style-type: none;
+    float: left;
+    margin: 0 2em 0 0;
+    padding: 0;
+  }
+
+  a#close-news-ticker-link {
+    float: right;
+  }
+}

app/javascript/src/styles/common/notices.scss

@@ -0,0 +1,28 @@
+div.error-messages {
+  margin: 1em 0;
+  padding: 1em;
+
+  h1 {
+    font-size: 1em;
+    color: #A00;
+  }
+}
+
+div#notice {
+  padding: 0.25em;
+  position: fixed;
+  top: 0.5em;
+  left: 25%;
+  width: 50%;
+  z-index: 100;
+
+  &:not(.ui-state-error) {
+    background-color: #FFFBBF;
+    border: 1px solid #CCC999;
+  }
+}
+
+a#close-notice-link {
+  position: absolute;
+  right: 1em;
+}

app/javascript/src/styles/common/page_header.scss

@@ -0,0 +1,45 @@
+@import "000_vars.scss";
+
+#maintoggle {
+  display: none;
+}
+
+header#top {
+  h1 {
+    font-size: 2.5em;
+    margin: 5px 30px 0 30px;
+  }
+
+  menu {
+    margin-top: -2px;
+    background: $menu_color;
+    padding: 6px 20px;
+
+    form {
+      display: inline-block;
+
+      input {
+        width: 9.5em;
+      }
+    }
+
+    li {
+      margin: 0;
+      padding: 0;
+    }
+
+    li a {
+      padding: 6px 10px;
+    }
+  }
+
+  menu.main {
+    margin-top: 0;
+    background: none;
+
+    li.current a {
+      background: $menu_color;
+      font-weight: bold;
+    }
+  }
+}

app/javascript/src/styles/common/paginator.scss

@@ -0,0 +1,35 @@
+@import "000_vars.scss";
+
+div.paginator {
+  display: block;
+  padding: 2em 0 1em 0;
+  text-align: center;
+  clear: both;
+
+  li {
+    a {
+      margin: 0 0.25em;
+      padding: 0.25em 0.75em;
+    }
+
+    &.more {
+      color: grey;
+    }
+
+    a.arrow:hover {
+      background: white;
+      color: $link_color;
+    }
+
+    a:hover {
+      background: $link_color;
+      color: white;
+    }
+
+    span {
+      margin: 0 0.25em;
+      padding: 0.25em 0.75em;
+      font-weight: bold;
+    }
+  }
+}

app/javascript/src/styles/common/simple_form.scss

@@ -0,0 +1,92 @@
+form.simple_form {
+  margin: 0 0 1em 0;
+
+  div.input.boolean {
+    label {
+      display: inline;
+      vertical-align: middle;
+      margin-left: 0.5em;
+
+      input {
+        margin-right: 0.25em;
+      }
+    }
+  }
+
+  div.input {
+    margin-bottom: 1em;
+
+    input[type=text], input[type=file], input[type=password], input[type=email] {
+      max-width: 20em;
+    }
+
+    span.hint {
+      display: block;
+      font-size: 70%;
+    }
+
+    textarea {
+      width: 70%;
+      font-size: 1.2em;
+    }
+
+    label {
+      display: block;
+      font-weight: bold;
+      line-height: 1.5em;
+    }
+
+    fieldset {
+      border: none;
+      display: inline;
+      margin: 0;
+      padding: 0;
+
+      label {
+        font-weight: normal;
+        width: auto;
+        margin-right: 2em;
+        display: inline;
+      }
+    }
+  }
+}
+
+form.inline-form {
+  display: table;
+
+  > div.input {
+    display: table-row;
+    line-height: 2em;
+
+    label {
+      text-align: right;
+    }
+
+    label, input {
+      display: table-cell;
+      padding-right: 1em;
+      white-space: nowrap;
+    }
+  }
+}
+
+form.one-line-form {
+  > input, > div.input {
+    display: inline;
+
+    label {
+      display: inline;
+      margin-right: 1em;
+    }
+  }
+}
+
+div.ui-dialog {
+  div.input {
+    input[type="text"] {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}

app/javascript/src/styles/common/spoiler.scss

@@ -0,0 +1,16 @@
+.spoiler {
+  color: black;
+  background: black;
+}
+
+.spoiler a {
+  color: black;
+}
+
+.spoiler:hover {
+  color: white;
+}
+
+.spoiler:hover a{
+  color: white;
+}

app/javascript/src/styles/common/tables.scss

@@ -0,0 +1,85 @@
+@import "000_vars.scss";
+
+table.striped {
+  p {
+    margin: 0;
+  }
+
+  td, th {
+    padding: 4px 6px;
+  }
+
+  tbody {
+    tr {
+      border-bottom: 1px solid #CCC;
+
+      &:hover {
+        background-color: $highlight_color;
+      }
+    }
+  }
+
+  .number, .links {
+    text-align: right;
+  }
+
+  thead {
+    tr {
+      border-bottom: 2px solid #666;
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      color: #333;
+    }
+  }
+
+  tr.even {
+    background-color: #FAFAFA;
+  }
+}
+
+/*
+ * A table where one column expands to fill the screen, while the
+ * other columns shrink to fit their contents.
+ */
+table.autofit {
+  td, th, .col-fit {
+    white-space: nowrap;
+    padding-right: 2em;
+  }
+
+  .col-expand {
+    white-space: normal;
+    width: 100%;
+  }
+
+  .col-normal {
+    white-space: normal;
+  }
+}
+
+table.search {
+  tr {
+    height: 2em;
+  }
+
+  th {
+    text-align: right;
+    padding-right: 1em;
+    vertical-align: top;
+  }
+
+  td {
+    vertical-align: top;
+  }
+}
+
+table.aligned-vertical {
+  @extend table.search;
+
+  tr {
+    height: 1.75em;
+  }
+}

app/javascript/src/styles/common/tags.scss.erb

@@ -0,0 +1,35 @@
+@import "./000_vars.scss";
+
+<% TagCategory.css_mapping.each do |category,cssmap| %>
+  .category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-active a.tag-type-<%= category %> {
+    color: <%= cssmap["color"] %>;
+
+    &:hover {
+      color: <%= cssmap["hover"] %>;
+    }
+  }
+<% end %>
+
+.category-banned a, a.tag-type-banned, .ui-state-active a.tag-type-banned {
+  color: black;
+  background-color: red;
+}
+
+.inline-tag-list {
+  ul {
+    display: inline;
+
+    li {
+      display: inline;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+.split-inline-tag-list {
+  @extend .inline-tag-list;
+
+  ul {
+    display: block;
+  }
+}

app/javascript/src/styles/common/user_styles.scss

@@ -0,0 +1,27 @@
+a.user-admin.with-style {
+  color: red;
+}
+
+a.user-moderator.with-style {
+  color: orange;
+}
+
+a.user-contributor.with-style {
+  color: purple;
+}
+
+a.user-builder.with-style {
+  color: #6633FF;
+}
+
+a.user-platinum.with-style {
+  color: gray;
+}
+
+a.user-gold.with-style {
+  color: #0000FF;
+}
+
+a.user-member.with-style {
+  color: auto;
+}