Darker style for nachodlv's "eye-killer" FFXIV Tracker.
Darker FFXIV Tracker by ryushanna
Details
Authorryushanna
LicenseNo License
CategoryFFXIV Tracker
Created
Updated
Size7.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Made this mainly for personal use with my FC.
Thought i might share it, should you find it useful.
Main modifications :
- Darker and sexy style for the tracker
- I decided to block* users from using "All" and "Feasts" radio input options.
- : Feasts was only showing limited mounts that were only available at the time and aren't anymore. There is no points showing mounts we can't obtain anymore in a FC tracker. Also limited mounts were not only bound to feasts but also other contents so i decided to block All as well so it will prevent us from running into mounts/minions we can't obtain anymore. Also, "All" doesn't tell which type of content is needed, which means "All" is mostly important for farming mounts we can only get on our own which isn't interesting for a FC dedicated tracker. I hope you understand this point.
I don't plan on making modifications on this style at the moment.
Feel free to make your own if you prefer different colors or placements.
Source code
/* ==UserStyle==
@name Darker FFXIV Tracker
@version 20220629.06.37
@namespace userstyles.world/user/ryushanna
@description Darker style for nachodlv's "eye-killer" FFXIV Tracker.
@author ryushanna
@license No License
==/UserStyle== */
@-moz-document url-prefix("https://nachodlv.github.io/ffxiv-tracker/") {
/*!
* Bootstrap v4.5.0 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*//*
* Thanks to nachodlv for his FC Dedicated Tracker for Mounts & Minions.
* And thanks for his style i used as a base to make this one.
*/
/* Body */
body{
color: #f8f9fa;
background-color: #343a40;
}
.h-100:not(#fc-seacher):not(.card) {
width: 90.5%!important;
margin-left: 4.75%!important;
margin-right: 4.75%!important;
}
.d-flex {
display: contents!important;
}
/* Search FC Title */
#fc-seacher #title {
color: #d30000;
text-shadow: 0 0 5px black;
margin: 0px 0px 10px 0px!important;
}
/* Search Your Free Company ! */
#fc-seacher form #search-input-label {
margin-top: -5px;
margin-bottom: 10px;
text-shadow: 0 0 5px red;
}
/* Loader Container */
.loader-container.ng-star-inserted {
display: none;
}
/* Altert Warning */
.alert-warning {
color: #850404;
background-color: #ffcdcd;
border-color: #ffbaba;
}
.alert {
border: 1px solid transparent;
box-shadow: 0px 0px 3px #f00;
}
.pt-5, .py-5 {
padding: 0px 0px 0px 0px!important;
}
/* FFXIV FC Card */
.clickable:hover {
background-color: #3e454d!important;
}
.clickable:focus-visible {
border: 1px solid #850404!important;
}
.card-shadow {
box-shadow: 2px 2px 5px rgba(0, 0, 0, .5)!important;
}
.card {
word-wrap: normal;
color: #f8f9fa;
background-color: #343a40;
border: 2px solid #850404;
}
/* Pagination Container */
#pagination-container {
border: none;
border-radius: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: transparent;
box-shadow: 0px 0px 0px transparent;
}
#pagination-container .ng-untouched.ng-pristine.ng-valid .pagination {
margin-bottom: 0px!important;
}
#pagination-container .ng-untouched.ng-valid.ng-dirty .pagination {
margin-bottom: 0px!important;
}
/* Progress Bar */
.col-sm-4 {
font-size: 18px;
border-radius: 15px;
text-shadow: 0 0 5px red;
padding: 5px 12px 5px 10px;
border: 2px solid #850404;
background-color: #2b3035;
box-shadow: 2px 2px 5px black inset;
margin: 10px 0px 20px 28%!important;
}
/* Members Loader */
.player-loader {
display: none;
}
/* FFXIV Tracker & FC Name */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 0px;
}
.ml-4, .mx-4 {
margin-left: 20px!important;
margin-top: 36.5px!important;
width: fit-content;
}
/* FFXIV Tracker */
.h4, h4 {
font-size: 32px;
color: #d30000;
text-shadow: 0 0 5px black;
margin-bottom: -21.5px;
}
/* FC Name */
.h5, h5 {
font-size: 22px;
}
.mt-1, .my-1 {
position: relative;
top: -13px;
left: 159px;
width: fit-content;
}
/* FC and Players Names */
#fc-name, #member-list .player-name {
margin-left: -18px!important;
margin-right: -5px;
margin-bottom: -35px;
text-shadow: 0 0 5px red;
}
#member-list .item-quantity {
border: none!important;
padding: 0px 0px 0px 0px!important;
text-shadow: 0 0 5px #007bff;
}
/* Forms */
#settings-container {
border: 2px inset #d30000;
border-radius: 15px;
box-shadow: 2px 2px 5px black inset;
padding: 10px!important;
margin-top: 10px;
margin-bottom: 20px;
background-color: #2b3035;
}
#sort-container {
border: 1px solid #007bff!important;
border-radius: 15px;
padding: 5px 10px 0px 7px!important;
margin: 10px 0px 0px 10px!important;
background-color: #24282c;
width: fit-content;
}
#sort-container .separator {
border-bottom: 2px solid rgb(0 123 255 / 50%)!important;
margin: -15px 0px 2px 0px!important;
padding-bottom: 2px!important;
}
#sort-container .row.m-0 input {
margin-top: 3px!important;
margin-left: -12px!important;
}
#sort-container .row.m-0 {
margin-top: 2px!important;
}
#sort-container .row:nth-child(4) {
margin-top: -15px!important;
margin-bottom: 5px!important;
}
[name="player-sort"] {
margin-top: 1px!important;
margin-left: -10px!important;
}
[name="player-sort"] [type="radio"] {
margin-top: 5.5px!important;
margin-left: -15px!important;
}
[name="item-sort"] {
margin-top: 1px!important;
margin-left: -7px!important;
}
[name="item-sort"] [type="radio"] {
margin-top: 5.5px!important;
margin-left: -15px!important;
}
/* Buttons */
.btn-info {
background-color: #007bff;
border-color: #007bff;
}
.btn-info.focus, .btn-info:focus, .btn-info:hover {
background-color: #007bff;
border-color: #004085;
}
.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
background-color: #004085;
border-color: #004085;
}
.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show>.btn-info.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 50%);
}
.btn-info.focus, .btn-info:focus {
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 50%);
}
.btn-info.disabled, .btn-info:disabled {
background-color: #007bff;
border-color: #007bff;
border-radius: 13px;
}
.btn-group-sm>.btn, .btn-sm {
border-radius: 13px;
}
.btn.btn-info.btn-sm.ml-4.mt-2 {
position: relative;
margin: -11px 0px 0px 10px!important;
}
/* Search Bar Input */
#search-input {
border: 2px solid #007bff;
border-radius: 10px;
}
#search-input:focus-visible {
outline: none;
}
/* Select Input */
select.col-auto.ml-3.ng-untouched.ng-pristine.ng-valid {
border: 2px solid #007bff;
border-radius: 5px;
}
select.col-auto.ml-3.ng-untouched.ng-valid.ng-dirty {
border: 2px solid #007bff;
border-radius: 5px;
}
select.col-auto.ml-3.ng-pristine.ng-valid.ng-touched {
border: 2px solid #007bff;
border-radius: 5px;
}
select.col-auto.ml-3.ng-valid.ng-touched.ng-dirty {
border: 2px solid #007bff;
border-radius: 5px;
}
select.col-auto.ml-3.ng-untouched.ng-pristine.ng-valid:focus-visible {
outline: none;
}
select.col-auto.ml-3.ng-untouched.ng-valid.ng-dirty:focus-visible {
outline: none;
}
select.col-auto.ml-3.ng-pristine.ng-valid.ng-touched:focus-visible {
outline: none;
}
select.col-auto.ml-3.ng-valid.ng-touched.ng-dirty:focus-visible {
outline: none;
}
/* Sorting Configuration */
b, strong {
text-shadow: 0 0 5px red;
}
/* Search Filter Radio Input */
.form-check-label {
text-shadow: 0 0 5px #007bff;
}
/* Both Mounts & Minions */
#All, #All+label {
pointer-events:none;
opacity:0.5;
}
/* Mounts */
#Feasts, #Feasts+label {
pointer-events:none;
opacity:0.5;
}
#mount+label {
position: relative;
left: 7px;
}
/* Minions */
#minion+label {
position: relative;
left: 9px;
}
#minion {
position: relative;
left: 3px;
}
/* End of Forms */
/* Icons */
.col-12 {
border: 1px outset #d30000;
border-radius: 15px;
box-shadow: 2px 2px 5px black;
background-color: #383d41;
padding: 2px 25px 10px 25px;
margin: 0px 0px 10px 0px;
}
.icon-container {
padding: 3px!important;
}
/* Footer */
footer {
visibility: hidden;
}
}