Even prettier trip codes!

boards/abstracts/tripcode.py

@@ -1,30 +1,30 b''
 class Tripcode:
     def __init__(self, code_str):
         self.tripcode = code_str
 
     def get_color(self):
         return self.tripcode[:6]
 
     def get_background(self):
         code = self.get_color()
         result = ''
 
         for i in range(0, len(code), 2):
             p = code[i:i+2]
             background = hex(255 - int(p, 16))[2:]
             if len(background) < 2:
                 background = '0' + background
             result += background
 
         return result
 
     def get_short_text(self):
         return self.tripcode[:8]
 
     def get_full_text(self):
         return self.tripcode
 
     def get_view(self):
-        return '<span title="{}" style="color: #{}; background: #{}">{}</span>'\
-            .format(self.get_full_text(), self.get_color(), self.get_background(),
-                    self.get_short_text())
+        return '<span class="tripcode" title="{title}" style="border: solid 2px #{color}; border-left: solid 1ex #{color};">{text}</span>'\
+            .format(title=self.get_full_text(), color=self.get_color(),
+                    text=self.get_short_text())

boards/static/css/base.css

@@ -1,132 +1,136 b''
 .ui-button {
    display: none;
 }
 
 .ui-dialog-content {
     padding: 0;
     min-height: 0;
 }
 
 .mark_btn {
     cursor: pointer;
 }
 
 .img-full {
     position: fixed;
     background-color: #CCC;
     border: 1px solid #000;
     cursor: pointer;
 }
 
 .strikethrough {
     text-decoration: line-through;
 }
 
 .post_preview {
     z-index: 300;
     position:absolute;
 }
 
 .gallery_image {
     display: inline-block;
 }
 
 @media print {
     .post-form-w {
         display: none;
     }
 }
 
 input[name="image"] {
      display: block;
      width: 100px;
      height: 100px;
      cursor: pointer;
      position: absolute;
      opacity: 0;
      z-index: 1;
 }
 
 .file_wrap {
      width: 100px;
      height: 100px;
      border: solid 1px white;
      display: inline-block;
 }
 
 form > .file_wrap {
     float: left;
 }
 
 .file-thumb {
     width: 100px;
     height: 100px;
     background-size: cover;
     background-position: center;
 }
 
 .compact-form-text {
     margin-left:110px;
 }
 
 textarea, input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 .compact-form-text > textarea {
     height: 100px;
     width: 100%;
 }
 
 .post-button-form {
     display: inline;
 }
 
 .post-button-form > button, #autoupdate {
     border: none;
     margin: inherit;
     padding: inherit;
     background: none;
     font-size: inherit;
 }
 
 #form-close-button {
     display: none;
 }
 
 .post-image-full {
     width: 100%;
     height: auto;
 }
 
 #preview-text {
     display: none;
 }
 
 .random-images-table {
     text-align: center;
     width: 100%;
 }
 
 .random-images-table > div {
     margin-left: auto;
     margin-right: auto;
 }
 
 .tag-image, .tag-text-data {
     display: inline-block;
 }
 
 .tag-text-data > h2 {
     margin: 0;
 }
 
 .tag-image {
     margin-right: 5px;
 }
 
 .reply-to-message {
     display: none;
 }
+
+.tripcode {
+    padding: 2px;
+}
  No newline at end of file