From b0925c3de28f3d02845c84c900220d72431290d5 Mon Sep 17 00:00:00 2001 From: "Mr. Stallion" Date: Sun, 30 Jun 2019 14:15:23 -0500 Subject: [PATCH] Better styling --- chat/image-preview-mutator.ts | 4 +- readme.md | 5 +- site/character_page/character_page.vue | 105 ++++++++++++++----------- site/character_page/kink.vue | 6 +- 4 files changed, 65 insertions(+), 55 deletions(-) diff --git a/chat/image-preview-mutator.ts b/chat/image-preview-mutator.ts index fd42d96..d7e3ce0 100644 --- a/chat/image-preview-mutator.ts +++ b/chat/image-preview-mutator.ts @@ -51,9 +51,7 @@ export class ImagePreviewMutator { this.add('www.sex.com', this.getBaseJsMutatorScript('.image_frame img, .image_frame video')); this.add('sex.com', this.getBaseJsMutatorScript('.image_frame img, .image_frame video')); this.add('redirect.media.tumblr.com', this.getBaseJsMutatorScript('picture img, picture video')); - - // this fixes videos only -- images are fine as is - this.add('i.imgur.com', this.getBaseJsMutatorScript('video')); + this.add('i.imgur.com', this.getBaseJsMutatorScript('img, video')); this.add( 'imgur.com', diff --git a/readme.md b/readme.md index 8d1f947..5296372 100644 --- a/readme.md +++ b/readme.md @@ -14,14 +14,13 @@ This repository contains a modified version of the mainline F-Chat 3.0 client. * Profile * Kinks are auto-compared when profile is loaded * Custom kink explanations can be expanded inline - * Custom kinks are highlighted - * Gender, fur/human status, age, and sexual preference are highlighted if compatible or incompatible + * Custom kinks are highlighted + * Gender, anthro/human preference, age, and sexual preference are highlighted if compatible or incompatible * Guestbook, friend, and group counts are visible on tabs * Character pictures are expanded inline * Cleaner presentation for the side bar details (age, etc.), sorted in most relevant order * Less informative side bar details (views, contact) are separated and shown in a less prominent way * Cleaner guestbook view - * Link previews diff --git a/site/character_page/character_page.vue b/site/character_page/character_page.vue index 05d8cd1..ba31892 100644 --- a/site/character_page/character_page.vue +++ b/site/character_page/character_page.vue @@ -255,6 +255,17 @@ p:last-child { margin-bottom:0; } + + + &.comparison-result { + margin: -4px; + padding: 4px; + padding-top: 2px; + padding-bottom: 2px; + margin-top: 1px; + margin-bottom: 1px; + border-radius: 3px; + } } } @@ -408,16 +419,16 @@ } .character-images { + column-width: auto; + column-count: 2; + column-gap: 0.5rem; + .character-image-wrapper { display: inline-block; background-color: rgba(0,0,0, 0.2); border-radius: 5px; - width: calc(50% - 20px); box-sizing: border-box; margin: 5px; - // float: left; - /* margin-bottom: auto; */ - /* margin-top: auto; */ a { border: none; @@ -460,28 +471,6 @@ margin-bottom: 0; } } - - &.match { - background-color: rgba(0, 255, 0, 0.5); - border: solid 1px rgba(0, 255, 0, 0.15); - } - - &.mismatch { - background-color: rgba(255, 0, 0, 0.6); - border: 1px solid rgba(255, 0, 0, 0.3); - } - - - &.weak-match { - background-color: rgba(0, 162, 0, 0.35); - border: 1px solid rgba(0, 162, 0, 0.15); - } - - - &.weak-mismatch { - background-color: rgba(255, 225, 0, 0.6); - border: 1px solid rgba(255, 225, 0, 0.3); - } } @@ -555,28 +544,6 @@ color: white; font-weight: bold; } - - &.match { - background-color: rgba(0, 255, 0, 0.5); - border: solid 1px rgba(0, 255, 0, 0.15); - } - - &.mismatch { - background-color: rgba(255, 0, 0, 0.6); - border: 1px solid rgba(255, 0, 0, 0.3); - } - - - &.weak-match { - background-color: rgba(0, 162, 0, 0.35); - border: 1px solid rgba(0, 162, 0, 0.15); - } - - - &.weak-mismatch { - background-color: rgba(255, 225, 0, 0.6); - border: 1px solid rgba(255, 225, 0, 0.3); - } } } @@ -593,4 +560,46 @@ font-family: 'Times New Roman', Georgia, serif; } } + + + .character-kinks-block .character-kink.comparison-favorite, + .match-report .scores .match-score.match, + .infotag.match { + background-color: rgb(0, 142, 0); + border: solid 1px rgb(0, 113, 0); + + // background-color: #007700; + // border: 1px solid #003e00; + } + + .character-kinks-block .character-kink.comparison-yes, + .match-report .scores .match-score.weak-match, + .infotag.weak-match { + background-color: rgb(0, 80, 0); + border: 1px solid rgb(0, 64, 0); + + // background-color: #004200; + // border: 1px solid #002900; + } + + .character-kinks-block .character-kink.comparison-maybe, + .match-report .scores .match-score.weak-mismatch, + .infotag.weak-mismatch { + background-color: rgb(152, 134, 0); + border: 1px solid rgb(142, 126, 0); + + // border: 1px solid #613e00; + // background-color: #905d01; + } + + .character-kinks-block .character-kink.comparison-no, + .match-report .scores .match-score.mismatch, + .infotag.mismatch { + background-color: rgb(171, 0, 0); + border: 1px solid rgb(128, 0, 0); + + // border: 1px solid #420200; + // background-color: #710300; + } + \ No newline at end of file diff --git a/site/character_page/kink.vue b/site/character_page/kink.vue index 90f0ce3..1ee9fdf 100644 --- a/site/character_page/kink.vue +++ b/site/character_page/kink.vue @@ -65,8 +65,12 @@ }; classes[`kink-id-${this.kinkId}`] = true; classes[`kink-group-${this.kink.group}`] = true; - if(!this.kink.isCustom && typeof this.comparisons[this.kink.id] !== 'undefined') + + if(!this.kink.isCustom && typeof this.comparisons[this.kink.id] !== 'undefined') { + classes['comparison-result'] = true; classes[`comparison-${this.comparisons[this.kink.id]}`] = true; + } + return classes; }