Colorblind mode
This commit is contained in:
Mr. Stallion
parent
dab436f912
commit
8691469ff1
|
|
@ -1,5 +1,9 @@
|
|||
# Changelog
|
||||
|
||||
## 1.8.0
|
||||
* Added colorblind mode (settings -> rising -> colorblind mode)
|
||||
|
||||
|
||||
## 1.7.0
|
||||
* Option for serving ads in random order
|
||||
* Fixed Twitter previews crashing the app
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Download
|
||||
[Windows](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-win.exe) (75 MB)
|
||||
| [MacOS](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-macos.dmg) (76 MB)
|
||||
| [Linux](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-linux.AppImage) (76 MB)
|
||||
[Windows](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-win.exe) (75 MB)
|
||||
| [MacOS](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-macos.dmg) (76 MB)
|
||||
| [Linux](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-linux.AppImage) (76 MB)
|
||||
|
||||
|
||||
# F-Chat Rising
|
||||
|
|
@ -66,6 +66,7 @@ This repository contains a heavily customized version of the mainline F-Chat 3.0
|
|||
* PM list shows characters' online status as a colored icon
|
||||
* Use `Ctrl+Tab`, `Ctrl+Shift+Tab`, `Ctrl+PgDown`, and `Ctrl+PgUp` to switch between character tabs
|
||||
* Show number of unread notes and messages in the bottom right corner
|
||||
* Colorblind mode
|
||||
* Technical Details for Nerds
|
||||
* Upgraded to Electron 10.x
|
||||
* Replaced `node-spellchecker` with the built-in spellchecker that ships with Electron 8+
|
||||
|
|
|
|||
|
|
@ -362,6 +362,10 @@
|
|||
getClasses(conversation: Conversation): string {
|
||||
return conversation === core.conversations.selectedConversation ? ' active' : unreadClasses[conversation.unread];
|
||||
}
|
||||
|
||||
isColorblindModeActive(): boolean {
|
||||
return core.state.settings.risingColorblindMode;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -785,8 +785,8 @@
|
|||
padding-bottom: 2px;
|
||||
|
||||
&.unicorn {
|
||||
background-color: #00adad;
|
||||
border: solid 1px #1d9a9a;
|
||||
background-color: var(--scoreUnicornMatchBg);
|
||||
border: 1px solid var(--scoreUnicornMatchFg);
|
||||
box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.5);
|
||||
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -192,6 +192,13 @@
|
|||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="risingColorblindMode">
|
||||
<input type="checkbox" id="risingColorblindMode" v-model="risingColorblindMode"/>
|
||||
Colorblind mode
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-show="selectedTab === '3'">
|
||||
<template v-if="hidden.length">
|
||||
|
|
@ -260,6 +267,7 @@
|
|||
risingComparisonInSearch!: boolean;
|
||||
|
||||
risingShowUnreadOfflineCount!: boolean;
|
||||
risingColorblindMode!: boolean;
|
||||
|
||||
|
||||
async load(): Promise<void> {
|
||||
|
|
@ -295,6 +303,8 @@
|
|||
this.risingComparisonInUserMenu = settings.risingComparisonInUserMenu;
|
||||
this.risingComparisonInSearch = settings.risingComparisonInSearch;
|
||||
this.risingShowUnreadOfflineCount = settings.risingShowUnreadOfflineCount;
|
||||
|
||||
this.risingColorblindMode = settings.risingColorblindMode;
|
||||
}
|
||||
|
||||
async doImport(): Promise<void> {
|
||||
|
|
@ -347,7 +357,9 @@
|
|||
risingCharacterPreview: this.risingCharacterPreview,
|
||||
risingComparisonInUserMenu: this.risingComparisonInUserMenu,
|
||||
risingComparisonInSearch: this.risingComparisonInSearch,
|
||||
risingShowUnreadOfflineCount: this.risingShowUnreadOfflineCount
|
||||
risingShowUnreadOfflineCount: this.risingShowUnreadOfflineCount,
|
||||
|
||||
risingColorblindMode: this.risingColorblindMode
|
||||
};
|
||||
if(this.notifications) await core.notifications.requestPermission();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1">
|
||||
<defs>
|
||||
<filter id="protanopia">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.567, 0.433, 0, 0, 0
|
||||
0.558, 0.442, 0, 0, 0
|
||||
0, 0.242, 0.758, 0, 0
|
||||
0, 0, 0, 1, 0"/>
|
||||
</filter>
|
||||
<filter id="protanomaly">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.817, 0.183, 0, 0, 0
|
||||
0.333, 0.667, 0, 0, 0
|
||||
0, 0.125, 0.875, 0, 0
|
||||
0, 0, 0, 1, 0"/>
|
||||
</filter>
|
||||
<filter id="deuteranopia">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.625, 0.375, 0, 0, 0
|
||||
0.7, 0.3, 0, 0, 0
|
||||
0, 0.3, 0.7, 0, 0
|
||||
0, 0, 0, 1, 0"/>
|
||||
</filter>
|
||||
<filter id="deuteranomaly">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.8, 0.2, 0, 0, 0
|
||||
0.258, 0.742, 0, 0, 0
|
||||
0, 0.142, 0.858, 0, 0
|
||||
0, 0, 0, 1, 0"/>
|
||||
</filter>
|
||||
<filter id="tritanopia">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.95, 0.05, 0, 0, 0
|
||||
0, 0.433, 0.567, 0, 0
|
||||
0, 0.475, 0.525, 0, 0
|
||||
0, 0, 0, 1, 0"/>
|
||||
</filter>
|
||||
<filter id="tritanomaly">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.967, 0.033, 0, 0, 0
|
||||
0, 0.733, 0.267, 0, 0
|
||||
0, 0.183, 0.817, 0, 0
|
||||
0, 0, 0, 1, 0"/>
|
||||
</filter>
|
||||
<filter id="achromatopsia">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.299, 0.587, 0.114, 0, 0
|
||||
0.299, 0.587, 0.114, 0, 0
|
||||
0.299, 0.587, 0.114, 0, 0
|
||||
0, 0, 0, 1, 0"/>
|
||||
</filter>
|
||||
<filter id="achromatomaly">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.618, 0.320, 0.062, 0, 0
|
||||
0.163, 0.775, 0.062, 0, 0
|
||||
0.163, 0.320, 0.516, 0, 0
|
||||
0, 0, 0, 1, 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -53,6 +53,7 @@ export class Settings implements ISettings {
|
|||
risingComparisonInSearch = true;
|
||||
|
||||
risingShowUnreadOfflineCount = true;
|
||||
risingColorblindMode = false;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -219,6 +219,7 @@ export namespace Settings {
|
|||
readonly risingComparisonInSearch: boolean;
|
||||
|
||||
readonly risingShowUnreadOfflineCount: boolean;
|
||||
readonly risingColorblindMode: boolean;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ theme: jekyll-theme-slate
|
|||
changelog: https://github.com/mrstallion/fchat-rising/blob/master/CHANGELOG.md
|
||||
|
||||
download:
|
||||
version: 1.7.0
|
||||
version: 1.8.0
|
||||
|
||||
url: https://github.com/mrstallion/fchat-rising/releases/download/v%VERSION%/F-Chat-Rising-%VERSION%-%PLATFORM_TAIL%
|
||||
|
||||
|
|
|
|||
|
|
@ -443,11 +443,17 @@
|
|||
}
|
||||
|
||||
|
||||
getThemeClass(): string {
|
||||
return `theme-${this.settings.theme}`;
|
||||
getThemeClass(): Record<string, boolean> {
|
||||
try {
|
||||
return {
|
||||
[`theme-${this.settings.theme}`]: true,
|
||||
colorblindMode: core.state.settings.risingColorblindMode
|
||||
};
|
||||
} catch(err) {
|
||||
return { [`theme-${this.settings.theme}`]: true };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nextProfile(): void {
|
||||
if (!this.nextProfileAvailable()) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fchat",
|
||||
"version": "1.6.0",
|
||||
"version": "1.8.0",
|
||||
"author": "The F-List Team and Mister Stallion (Esq.)",
|
||||
"description": "F-List.net Chat Client",
|
||||
"main": "main.js",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "f-list-rising",
|
||||
"version": "1.6.0",
|
||||
"version": "1.8.0",
|
||||
"author": "The F-List Team and and Mister Stallion (Esq.)",
|
||||
"description": "A heavily modded F-Chat 3.0 client for F-List",
|
||||
"license": "MIT",
|
||||
|
|
|
|||
|
|
@ -1,55 +1,54 @@
|
|||
:root {
|
||||
--scoreMatchBg: #{$scoreMatchBg};
|
||||
--scoreMatchFg: #{$scoreMatchFg};
|
||||
--scoreWeakMatchBg: #{$scoreWeakMatchBg};
|
||||
--scoreWeakMatchFg: #{$scoreWeakMatchFg};
|
||||
--scoreWeakMismatchBg: #{$scoreWeakMismatchBg};
|
||||
--scoreWeakMismatchFg: #{$scoreWeakMismatchFg};
|
||||
--scoreMismatchBg: #{$scoreMismatchBg};
|
||||
--scoreMismatchFg: #{$scoreMismatchFg};
|
||||
--scoreTitleColor: #{$scoreTitleColor};
|
||||
--scoreMinimizeButtonFg: #{$scoreMinimizeButtonFg};
|
||||
--scoreMinimizeButtonBg: #{$scoreMinimizeButtonBg};
|
||||
--scoreReportBg: #{$scoreReportBg};
|
||||
$risingVariables: (
|
||||
scoreMatchBg: #{$scoreMatchBg},
|
||||
scoreMatchFg: #{$scoreMatchFg},
|
||||
scoreWeakMatchBg: #{$scoreWeakMatchBg},
|
||||
scoreWeakMatchFg: #{$scoreWeakMatchFg},
|
||||
scoreWeakMismatchBg: #{$scoreWeakMismatchBg},
|
||||
scoreWeakMismatchFg: #{$scoreWeakMismatchFg},
|
||||
scoreMismatchBg: #{$scoreMismatchBg},
|
||||
scoreMismatchFg: #{$scoreMismatchFg},
|
||||
scoreTitleColor: #{$scoreTitleColor},
|
||||
scoreMinimizeButtonFg: #{$scoreMinimizeButtonFg},
|
||||
scoreMinimizeButtonBg: #{$scoreMinimizeButtonBg},
|
||||
scoreReportBg: #{$scoreReportBg},
|
||||
|
||||
--scoreFadedMatchBg: #{$scoreFadedMatchBg};
|
||||
--scoreFadedMatchFg: #{$scoreFadedMatchFg};
|
||||
--scoreFadedWeakMatchBg: #{$scoreFadedWeakMatchBg};
|
||||
--scoreFadedWeakMatchFg: #{$scoreFadedWeakMatchFg};
|
||||
--scoreFadedWeakMismatchBg: #{$scoreFadedWeakMismatchBg};
|
||||
--scoreFadedWeakMismatchFg: #{$scoreFadedWeakMismatchFg};
|
||||
--scoreFadedMismatchBg: #{$scoreFadedMismatchBg};
|
||||
--scoreFadedMismatchFg: #{$scoreFadedMismatchFg};
|
||||
scoreFadedMatchBg: #{$scoreFadedMatchBg},
|
||||
scoreFadedMatchFg: #{$scoreFadedMatchFg},
|
||||
scoreFadedWeakMatchBg: #{$scoreFadedWeakMatchBg},
|
||||
scoreFadedWeakMatchFg: #{$scoreFadedWeakMatchFg},
|
||||
scoreFadedWeakMismatchBg: #{$scoreFadedWeakMismatchBg},
|
||||
scoreFadedWeakMismatchFg: #{$scoreFadedWeakMismatchFg},
|
||||
scoreFadedMismatchBg: #{$scoreFadedMismatchBg},
|
||||
scoreFadedMismatchFg: #{$scoreFadedMismatchFg},
|
||||
|
||||
--scoreStandoutMatchBorderColor: #{$scoreStandoutMatchBorderColor};
|
||||
--scoreStandoutMatchBgColor: #{$scoreStandoutMatchBgColor};
|
||||
--scoreStandoutWeakMatchBorderColor: #{$scoreStandoutWeakMatchBorderColor};
|
||||
--scoreStandoutWeakMatchBgColor: #{$scoreStandoutWeakMatchBgColor};
|
||||
--scoreStandoutNeutralBorderColor: #{$scoreStandoutNeutralBorderColor};
|
||||
--scoreStandoutWeakMismatchBorderColor: #{$scoreStandoutWeakMismatchBorderColor};
|
||||
--scoreStandoutWeakMismatchBgColor: #{$scoreStandoutWeakMismatchBgColor};
|
||||
--scoreStandoutMismatchBorderColor: #{$scoreStandoutMismatchBorderColor};
|
||||
scoreStandoutMatchBorderColor: #{$scoreStandoutMatchBorderColor},
|
||||
scoreStandoutMatchBgColor: #{$scoreStandoutMatchBgColor},
|
||||
scoreStandoutWeakMatchBorderColor: #{$scoreStandoutWeakMatchBorderColor},
|
||||
scoreStandoutWeakMatchBgColor: #{$scoreStandoutWeakMatchBgColor},
|
||||
scoreStandoutNeutralBorderColor: #{$scoreStandoutNeutralBorderColor},
|
||||
scoreStandoutWeakMismatchBorderColor: #{$scoreStandoutWeakMismatchBorderColor},
|
||||
scoreStandoutWeakMismatchBgColor: #{$scoreStandoutWeakMismatchBgColor},
|
||||
scoreStandoutMismatchBorderColor: #{$scoreStandoutMismatchBorderColor},
|
||||
|
||||
--characterImageWrapperBg: #{$characterImageWrapperBg};
|
||||
--characterGuestbookPostBg: #{$characterGuestbookPostBg};
|
||||
--characterGuestbookPostBorderColor: #{$characterGuestbookPostBorderColor};
|
||||
--characterGuestbookReplyBg: #{$characterGuestbookReplyBg};
|
||||
--characterGuestbookTimestampFg: #{$characterGuestbookTimestampFg};
|
||||
--characterKinkCustomColor: #{$characterKinkCustomColor};
|
||||
--characterKinkCustomBorderColor: #{$characterKinkCustomBorderColor};
|
||||
--characterKinkStockColor: #{$characterKinkStockColor};
|
||||
--characterKinkStockHighlightedColor: #{$characterKinkStockHighlightedColor};
|
||||
--characterInfotagColor: #{$characterInfotagColor};
|
||||
characterImageWrapperBg: #{$characterImageWrapperBg},
|
||||
characterGuestbookPostBg: #{$characterGuestbookPostBg},
|
||||
characterGuestbookPostBorderColor: #{$characterGuestbookPostBorderColor},
|
||||
characterGuestbookReplyBg: #{$characterGuestbookReplyBg},
|
||||
characterGuestbookTimestampFg: #{$characterGuestbookTimestampFg},
|
||||
characterKinkCustomColor: #{$characterKinkCustomColor},
|
||||
characterKinkCustomBorderColor: #{$characterKinkCustomBorderColor},
|
||||
characterKinkStockColor: #{$characterKinkStockColor},
|
||||
characterKinkStockHighlightedColor: #{$characterKinkStockHighlightedColor},
|
||||
characterInfotagColor: #{$characterInfotagColor},
|
||||
|
||||
--messageTimeBgColor: #{$messageTimeBgColor};
|
||||
--messageTimeFgColor: #{$messageTimeFgColor};
|
||||
messageTimeBgColor: #{$messageTimeBgColor},
|
||||
messageTimeFgColor: #{$messageTimeFgColor},
|
||||
|
||||
--headerBackgroundMaskColor: #{$headerBackgroundMaskColor};
|
||||
headerBackgroundMaskColor: #{$headerBackgroundMaskColor},
|
||||
|
||||
--linkForcedColor: #{$linkForcedColor};
|
||||
--tabSecondaryFgColor: #{$tabSecondaryFgColor};
|
||||
|
||||
--input-bg: #{$input-bg};
|
||||
--input-color: #{$input-color};
|
||||
}
|
||||
linkForcedColor: #{$linkForcedColor},
|
||||
tabSecondaryFgColor: #{$tabSecondaryFgColor},
|
||||
|
||||
input-bg: #{$input-bg},
|
||||
input-color: #{$input-color},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -34,6 +34,14 @@
|
|||
@import "../flist_overrides";
|
||||
@import "../rising";
|
||||
|
||||
|
||||
:root {
|
||||
@each $varName, $value in $risingVariables {
|
||||
--#{$varName}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 8px $card-border-color;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
$scoreUnicornMatchBg: #0093d2;
|
||||
$scoreUnicornMatchFg: #0093d2;
|
||||
$scoreMatchBg: #006cb7;
|
||||
$scoreMatchFg: #006cb7;
|
||||
$scoreWeakMatchBg: #015486;
|
||||
$scoreWeakMatchFg: #015486;
|
||||
$scoreWeakMismatchBg: #606060;
|
||||
$scoreWeakMismatchFg: #606060;
|
||||
$scoreMismatchBg: #ab0000;
|
||||
$scoreMismatchFg: #ab0000;
|
||||
|
||||
$scoreStandoutMatchBorderColor: #049ada;
|
||||
$scoreStandoutMatchBgColor: rgba(4, 132, 186, 0.47);
|
||||
$scoreStandoutWeakMatchBorderColor: #006cb7;
|
||||
$scoreStandoutWeakMatchBgColor: rgba(2, 91, 153, 0.4);
|
||||
$scoreStandoutNeutralBorderColor: rgba(0, 0, 0, 0);
|
||||
$scoreStandoutWeakMismatchBorderColor: #888;
|
||||
$scoreStandoutWeakMismatchBgColor: rgba(170, 170, 170, 0.0);
|
||||
$scoreStandoutMismatchBorderColor: #ab0000;
|
||||
|
||||
$genders: (
|
||||
"shemale": #e2445f,
|
||||
"herm": #d40759,
|
||||
"none": $gray-500,
|
||||
"female": #66ff74,
|
||||
"male": #6699ff,
|
||||
"male-herm": #007fff,
|
||||
"transgender": #ee8822,
|
||||
"cunt-boy": #63ee22,
|
||||
);
|
||||
|
||||
@each $gender, $color in $genders {
|
||||
.gender-#{$gender} {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.message-event .gender-#{$gender} {
|
||||
color: lighten($color, 5%)
|
||||
}
|
||||
}
|
||||
|
|
@ -31,3 +31,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colorblindMode {
|
||||
@import "../colorblind";
|
||||
@import "../../rising";
|
||||
|
||||
@each $varName, $value in $risingVariables {
|
||||
--#{$varName}: #{$value};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,3 +31,28 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colorblindMode {
|
||||
@import "../colorblind";
|
||||
@import "../../rising";
|
||||
|
||||
@each $varName, $value in $risingVariables {
|
||||
--#{$varName}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
//@import "../../util/accecss";
|
||||
//
|
||||
//@include accecss(
|
||||
// 'html body',
|
||||
// false,
|
||||
// false,
|
||||
// tritanopia
|
||||
//);
|
||||
|
||||
// deuteranomaly
|
||||
// protanomaly
|
||||
// protanopia
|
||||
// deuteranopia
|
||||
// tritanomaly
|
||||
// tritanopia
|
||||
|
|
|
|||
|
|
@ -31,3 +31,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colorblindMode {
|
||||
@import "../colorblind";
|
||||
@import "../../rising";
|
||||
|
||||
@each $varName, $value in $risingVariables {
|
||||
--#{$varName}: #{$value};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ $text-background-color: $gray-100;
|
|||
$text-background-color-disabled: $gray-200;
|
||||
|
||||
// F-List Rising
|
||||
$scoreUnicornMatchBg: rgb(0, 173, 173);
|
||||
$scoreUnicornMatchFg: rgb(29, 154, 154);
|
||||
$scoreMatchBg: rgb(0, 142, 0);
|
||||
$scoreMatchFg: rgb(0, 113, 0);
|
||||
$scoreWeakMatchBg: rgb(0, 80, 0);
|
||||
|
|
@ -73,6 +75,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
|
|||
$scoreMinimizeButtonBg: rgba(0,0,0,0.2);
|
||||
$scoreReportBg: rgba(0,0,0,0.2);
|
||||
|
||||
$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
|
||||
$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
|
||||
$scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
|
||||
$scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
|
||||
$scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
|
||||
|
|
|
|||
|
|
@ -59,6 +59,8 @@ $text-background-color: $gray-200;
|
|||
$text-background-color-disabled: $gray-100;
|
||||
|
||||
// F-List Rising
|
||||
$scoreUnicornMatchBg: rgb(0, 173, 173);
|
||||
$scoreUnicornMatchFg: rgb(29, 154, 154);
|
||||
$scoreMatchBg: rgb(0, 142, 0);
|
||||
$scoreMatchFg: rgb(0, 113, 0);
|
||||
$scoreWeakMatchBg: rgb(0, 80, 0);
|
||||
|
|
@ -72,6 +74,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
|
|||
$scoreMinimizeButtonBg: rgba(0,0,0,0.2);
|
||||
$scoreReportBg: rgba(0,0,0,0.2);
|
||||
|
||||
$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
|
||||
$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
|
||||
$scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
|
||||
$scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
|
||||
$scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ $text-muted: $gray-500;
|
|||
|
||||
|
||||
// F-List Rising
|
||||
$scoreUnicornMatchBg: rgb(0, 173, 173);
|
||||
$scoreUnicornMatchFg: rgb(29, 154, 154);
|
||||
$scoreMatchBg: rgba(0, 180, 0, 0.65);
|
||||
$scoreMatchFg: rgba(0, 133, 0, 0.4);
|
||||
$scoreWeakMatchBg: rgba(0, 180, 0, 0.22);
|
||||
|
|
@ -28,6 +30,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.6);
|
|||
$scoreMinimizeButtonBg: rgba(0,0,0,0.1);
|
||||
$scoreReportBg: rgba(0,0,0,0.08);
|
||||
|
||||
$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
|
||||
$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
|
||||
$scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
|
||||
$scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
|
||||
$scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,175 @@
|
|||
/// GRID
|
||||
|
||||
$path-to-filter: '../../../chat/assets';
|
||||
|
||||
@mixin log(){
|
||||
content:'.'attr(class);position: absolute;
|
||||
top: 0;left: 0;z-index: 99999999;padding: .1em;background: rgba(0,0,0, .9);
|
||||
opacity: .1;
|
||||
color: #fff !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@mixin grid(){
|
||||
|
||||
|
||||
box-shadow: inset 0 0 0 1px rgba(purple, .1) !important;
|
||||
&:hover{
|
||||
box-shadow: inset 0 0 0 1px rgba(purple, 1) !important;
|
||||
}
|
||||
*{
|
||||
box-shadow: inset 0 0 0 1px rgba(red, .1) !important;
|
||||
&:hover{
|
||||
box-shadow: inset 0 0 0 1px rgba(red, 1) !important;
|
||||
}
|
||||
+ *{
|
||||
box-shadow: inset 0 0 0 1px rgba(blue, .1) !important;
|
||||
&:hover{
|
||||
box-shadow: inset 0 0 0 1px rgba(blue, 1) !important;
|
||||
}
|
||||
+ *{
|
||||
box-shadow: inset 0 0 0 1px rgba(green, .1) !important;
|
||||
&:hover{
|
||||
box-shadow: inset 0 0 0 1px rgba(green, 1) !important;
|
||||
}
|
||||
+ *{
|
||||
box-shadow: inset 0 0 0 1px rgba(purple, .1) !important;
|
||||
&:hover{
|
||||
box-shadow: inset 0 0 0 1px rgba(purple, 1) !important;
|
||||
}
|
||||
+ *{
|
||||
box-shadow: inset 0 0 0 1px rgba(red, .1) !important;
|
||||
&:hover{
|
||||
box-shadow: inset 0 0 0 1px rgba(red, 1) !important;
|
||||
}
|
||||
+ *{
|
||||
box-shadow: inset 0 0 0 1px rgba(blue, .1) !important;
|
||||
&:hover{
|
||||
box-shadow: inset 0 0 0 1px rgba(blue, 1) !important;
|
||||
}
|
||||
+ *{
|
||||
box-shadow: inset 0 0 0 1px rgba(green, .1) !important;
|
||||
&:hover{
|
||||
box-shadow: inset 0 0 0 1px rgba(green, 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/// Mixin debug
|
||||
/// @include debug(<true:false>, <true:false>, <false:filterName>, <false:elementName>);
|
||||
/// Param :
|
||||
/// [1]: Specified debug element
|
||||
/// [2]: css zone
|
||||
/// [3]: Grayscale view
|
||||
/// [4]: Colorblind filters **
|
||||
///
|
||||
/// ** Available filters : `protanopia`, `protanomaly`, `deuteranopia`, `deuteranomaly`, `tritanopia`, `tritanomaly`, `achromatopsia`, `achromatomal
|
||||
///
|
||||
///
|
||||
/// Usage :
|
||||
/// `@include accecss(<element:false>, <true:false>, <true:false>, <filterName:false>);`
|
||||
///
|
||||
/// @group helpers
|
||||
|
||||
@mixin accecss($element: false, $zones: false, $grayscale: false, $cbFilter: false){
|
||||
|
||||
@if $grayscale == true and $cbFilter == false {
|
||||
@if $element != false {
|
||||
#{$element} {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
html body {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $grayscale == true and $cbFilter != false {
|
||||
@if $element != false {
|
||||
#{$element} {
|
||||
|
||||
|
||||
filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
html body {
|
||||
filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else if $grayscale == false and $cbFilter != false{
|
||||
@if $element != false {
|
||||
#{$element} {
|
||||
|
||||
|
||||
filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
html body {
|
||||
filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else if $cbFilter != false and $element != false {
|
||||
@if $element != false {
|
||||
#{$element} {
|
||||
|
||||
filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
html body {
|
||||
filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $zones == true or
|
||||
$zones == 'logs' or
|
||||
$grayscale == true and $cbFilter == false and $zones == true or
|
||||
$grayscale == true and $cbFilter != false and $zones == true or
|
||||
$grayscale == false and $cbFilter != false and $zones == true {
|
||||
/*
|
||||
CSS accecss : TRUE
|
||||
*/
|
||||
|
||||
@if $element == false {
|
||||
html, body{
|
||||
@include grid();
|
||||
}
|
||||
}
|
||||
|
||||
@else if $element != false {
|
||||
#{$element}{
|
||||
@include grid();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@else{
|
||||
/*
|
||||
CSS accecss : FALSE
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue