css/general/textColors.css

+/* Colors are made as css classes, to allow them to be changed for a light color scheme (for example). */
+/* a version is for this case: <span class="..."><a>text</a></span> */
+
+/* TODO: remove all color class names (e.g. ".cyan") once all instances are removed in code */
+
+/* link color */
+.link, .link a {
+	color: var(--link-color)
+}
+
+.aquamarine, .aquamarine a, .skill, .skill a {
+	color: aquamarine
+}
+
+.coral, .coral a, .fetish.loss, .fetish.loss a {
+	color: coral
+}
+
+/* used for aphrodisiac & neighbor arcs */
+.cyan, .cyan a, .hotkey {
+	color: cyan
+}
+
+.darkgoldenrod, .darkgoldenrod a, .trust.extremely-terrified, .trust.extremely-terrified a {
+	color: darkgoldenrod
+}
+
+.darkred, .darkred a, .defiant.full, .defiant.full a {
+	color: darkred
+}
+
+.darkviolet, .darkviolet a, .devotion.hateful, .devotion.hateful a {
+	color: darkviolet
+}
+
+/* used for devotion once & agent */
+.deeppink, .deeppink a, .devotion.devoted, .devotion.devoted a {
+	color: deeppink
+}
+
+.steelblue, .steelblue a {
+	color: steelblue
+}
+
+.deepskyblue, .deepskyblue a, .intelligent, .intelligent a {
+	color: deepskyblue
+}
+
+.dodgerblue, .dodgerblue a {
+	color: dodgerblue
+}
+
+.blue, .blue a {
+	color: blue
+}
+
+.gold, .gold a, .trust.dec, .trust.dec a, .trust.frightened, .trust.frightened a {
+	color: gold
+}
+
+.goldenrod, .goldenrod a, .trust.terrified, .trust.terrified a {
+	color: goldenrod
+}
+
+.gray, .gray a {
+	color: gray
+}
+
+.green, .green a, .reputation.inc, .reputation.inc a, .improvement, .improvement a, .flaw.break, .flaw.break a,
+.skill.inc, .skill.inc a, .fuckdoll, .fuckdoll a, .positive, .positive a, .health.inc, .health.inc a, .prestigious,
+.prosperity.inc {
+	color: green
+}
+
+.hotpink, .hotpink a, .devotion.inc, .devotion.inc a, .devotion.accept, .devotion.accept a {
+	color: hotpink
+}
+
+.lawngreen, .lawngreen a {
+	color: lawngreen
+}
+
+.lightblue, .lightblue a {
+	color: lightblue
+}
+
+/* compare pink for fetish */
+.lightcoral, .lightcoral a, .fetish.gain, .fetish.gain a {
+	color: lightcoral
+}
+
+.lightgreen, .lightgreen a, .relationship, .relationship a, .rivalry.dec, .rivalry.dec a {
+	color: lightgreen
+}
+
+.lightpink, .lightpink a {
+	color: lightpink
+}
+
+.lightsalmon, .lightsalmon a, .fetish.inc, .fetish.inc a, .rivalry.inc, .rivalry.inc a,
+.relationship.dec, .relationship.dec a {
+	color: lightsalmon
+}
+
+/* tight orifices, breast changes, take virginity, not sure on good aliases */
+.lime, .lime a, .change.positive, .change.positive a, .virginity.loss, .virginity.loss a, .puberty, .puberty a,
+.pregnant, .pregnant a {
+	color: lime
+}
+
+/* multiple questionable uses */
+.limegreen, .limegreen a {
+	color: limegreen
+}
+
+.magenta, .magenta a, .devotion.worship, .devotion.worship a {
+	color: magenta
+}
+
+.mediumaquamarine, .mediumaquamarine a, .trust.inc, .trust.inc a, .trust.careful, .trust.careful a {
+	color: mediumaquamarine
+}
+
+.mediumorchid, .mediumorchid a, .devotion.dec, .devotion.dec a, .devotion.resistant, .devotion.resistant a {
+	color: mediumorchid
+}
+
+.mediumseagreen, .mediumseagreen a, .trust.trusting, .trust.trusting a {
+	color: mediumseagreen
+}
+
+/* generally between red and green, and a lot of other places */
+.orange, .orange a, .stupid, .stupid a, .change.negative, .change.negative a, .defiant.careful, .defiant.careful a,
+.ncs, .ncs a, .miscarriage, .miscarriage a, .period, .period a, .hindrance.mid, .intro.question {
+	color: orange
+}
+
+.orangered, .orangered a, .defiant.inc, .defiant.inc a, .defiant.bold, .defiant.bold a, .education.neg a, .unintelligent, .hindrance.high {
+	color: orangered
+}
+
+/* also fetish start ??? , and a lot of other stuff */
+.pink, .pink a, .slave.name.simple {
+	color: pink
+}
+
+/* generally bad stuff */
+/* note: .error is for unexpected behavior, .warning for player feedback */
+.red, .red a, .health.dec, .health.dec a, .cash.dec, .cash.dec a, .food.dec, .food.dec a, .stat.drop, .stat.drop a, .flaw, .flaw a, .flaw.gain, .flaw.gain a,
+.mindbreak, .mindbreak a, .error, .error a, .elites.loss, .elites.loss a, .reputation.dec, .reputation.dec a, .immobile, .hindrance.max,
+.warning, .warning a, .prosperity.dec {
+	color: red
+}
+
+.seagreen, .seagreen a, .trust.prof-trusting, .trust.prof-trusting a {
+	color: seagreen
+}
+
+.springgreen, .springgreen a, .skill.player, .skill.player a {
+	color: springgreen
+}
+
+/* some ethnicity */
+.tan, .tan a {
+	color: tan
+}
+
+.chocolate, .chocolate a, .food {
+	color: chocolate
+}
+
+.saddlebrown, .saddlebrown a {
+	color: saddlebrown
+}
+
+.teal, .teal a {
+	color: teal
+}
+
+.yellow, .yellow a, .noteworthy, .noteworthy a, .paraphilia.gain, .paraphilia.gain a, .hindrance.low,
+.devotion.ambivalent, .devotion.ambivalent a, .trust.fearful, .trust.fearful a, .job.change {
+	color: yellow
+}
+
+.yellowgreen, .yellowgreen a, .cash.inc, .cash.inc a, .cash, .cash a {
+	color: yellowgreen
+}
+
+.cash.note {
+	color: seagreen;
+}
+
+.white a {
+	color: white
+}
+
+.violet, .libido.inc {
+	color: violet
+}
+
+.khaki, .libido.dec {
+	color: khaki
+}
+
+.race, .nationality {
+	color: tan
+}

css/gui/accordion.css

+/* --- base functionality --- */
+
+.accordion-content.hidden {
+	display: none;
+}
+
+/* --- no button case --- */
+
+:not(button).accordion {
+	cursor: pointer;
+}
+
+/* --- button/div case --- */
+
+/* style button */
+button.accordion {
+	width: 100%;
+	margin: 5px 0;
+	border: 2px solid var(--button-border-color);
+	padding: 10px;
+	padding-left: 2.2em;
+	background-color: var(--button-selected-color);
+	/* to position the open/close symbol */
+	position: relative;
+}
+
+button.accordion.closed {
+	background-color: var(--button-color);
+}
+
+button.accordion.empty {
+	background-color: var(--button-disabled-color);
+	cursor: default;
+}
+
+button.accordion:hover:not(.empty) {
+	background-color: var(--button-hover-color);
+}
+
+/* open/close symbol */
+button.accordion::before {
+	font-family: "sc-icons";
+	position: absolute;
+	left: 10px;
+	content: "\f078";
+}
+
+button.accordion.closed::before {
+	content: "\f054";
+}
+
+button.accordion.empty::before {
+	content: none;
+}
+
+/* hide content */
+div.accordion-content {
+	margin: 0 15px;
+}
+
+/* modifiers for the toggle button */
+button.accordion span.title {
+	float: left;
+}
+
+button.accordion span.info {
+	float: right;
+}
+
+button.assignment-report-btn {
+	display: block;
+	margin-top: 1em;
+	margin-bottom: 1em;
+}

css/gui/buttons.css

+.purchase-button {
+	font-style: normal;
+	margin: 0.25em 1em;
+	outline: none;
+	transition: 0.2s;
+}
+
+.purchase-button.disabled, .purchase-button.disabled:hover {
+	background-color: black;
+	cursor: not-allowed;
+}

css/gui/encyclopedia.css

+.encyclopedia.topic {
+	font-weight: bold;
+}
+
+/* mark text that is a link/button somewhere else */
+/* Click <span class="encyclopedia interaction">X</span> to do Y */
+.encyclopedia.interaction {
+	background: #203e6c;
+	border-radius: 5px;
+	border: hidden;
+	padding: 2px 4px;
+	white-space: nowrap;
+	font-size: smaller;
+}
+
+.encyclopedia-source::before {
+	content: "— ";
+}
+
+.encyclopedia-source .article {
+	font-style: italic;
+}
+
+.encyclopedia.emphasize {
+	text-decoration-line: underline
+}

css/gui/favorite.css

+.favorite, .favorite:hover {
+	color: yellow;
+	text-decoration: none;
+}
+
+.not-favorite, .not-favorite:hover {
+	color: grey;
+	text-decoration: none;
+}

css/gui/hotkeySettings.css

+div.hotkey-settings {
+	display: grid;
+	grid-template-columns: repeat(3, max-content) auto;
+}
+
+@media only screen and (min-width: 1600px) {
+	div.hotkey-settings {
+		grid-template-columns: repeat(3, max-content) auto repeat(3, max-content) auto;
+	}
+}
+
+div.hotkey-settings div.description {
+	margin-right: 10px;
+	/* center text vertically */
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+}
+
+div.hotkey-settings button {
+	margin: 5px;
+	border-width: 2px;
+	width: 70px;
+}
+
+div.hotkey-settings button.combination {
+	min-width: 150px;
+	border-width: 0;
+}
+
+div.hotkey-settings button:disabled {
+	background-color: var(--button-selected-color);
+}

css/gui/linksStrip.css

+ul.choices-strip {
+	display: inline;
+	list-style-type: none;
+	padding: 0;
+	margin-left: 0;
+}
+
+ul.choices-strip li {
+	display: inline;
+}
+
+ul.choices-strip li + li:before {
+	content: " | ";
+}
+
+a.disabled {
+	color: white;
+	pointer-events: none;
+	cursor: default;
+}

css/gui/lists.css

+.no-bullet {
+	list-style-type: none;
+}

css/gui/options.css

+div.options-group {
+	display: grid;
+	grid-template-columns: auto auto;
+	align-items: center;
+}
+
+@media only screen and (min-width: 768px) {
+	div.options-group {
+		grid-template-columns: max-content auto;
+	}
+}
+
+/* left side */
+div.options-group div.description {
+	margin-right: 10px;
+}
+
+/* right side */
+div.options-group div.button-group {
+	margin: 6px 0;
+}
+
+.button-group button {
+	color: var(--link-color);
+	border: none; /* outline instead of border */
+	/* left & right outline overlap each other so we don't have a double border */
+	outline: solid 2px var(--button-border-color);
+	margin-left: 2px;
+	/* half the outline width for multirow buttongroups */
+	margin-top: 1px;
+	margin-bottom: 1px;
+}
+
+.button-group button:hover {
+	color: var(--link-hover-color)
+}
+
+.button-group button.selected {
+	background-color: var(--button-selected-color);
+}
+
+.button-group button.disabled {
+	color: white;
+	pointer-events: none;
+	cursor: default;
+}
+
+div.options-group button.selected.on {
+	background-color: #103d10;
+}
+
+div.options-group button.on:hover {
+	background-color: #1b651b;
+}
+
+div.options-group button.selected.off {
+	background-color: #40100d;
+}
+
+div.options-group button.off:hover {
+	background-color: #6a1b16;
+}
+
+div.options-group .comment {
+	color: gray;
+	font-style: italic;
+	margin-left: 10px;
+}
+
+/* input box */
+div.options-group input {
+	border: 2px solid var(--button-border-color);
+	min-width: unset; /* remove SC styling */
+	width: 12em;
+	/* move back so that the outline of a potential select overlaps in front */
+	position: relative;
+	z-index: 0;
+}
+
+.options-group input:hover, .options-group input:focus {
+	/* show highlighted border in front of neighbours */
+	z-index: 1
+}
+
+div.options-group input.number {
+	width: 4em;
+}
+
+div.options-group input.full-width {
+	width: 100%;
+}
+
+/* custom row */
+.options-group .custom-row {
+	grid-column-start: span 2;
+	width: 70vw
+}
+
+.options-group select {
+	border: none; /* outline instead of border */
+	/* left & right outline overlap each other so we don't have a double border */
+	outline: solid 2px var(--button-border-color);
+	margin-left: 2px;
+	min-width: 12em;
+	/* move in front of a potential textbox, so the outline overlaps the border of the textbox */
+	position: relative;
+	z-index: 1;
+}
+
+.options-group select:hover {
+	outline: solid 2px #eee;
+}
+
+/* double column */
+@media only screen and (min-width: 1600px) {
+	.options-group.double {
+		grid-template-columns: max-content auto max-content auto;
+	}
+
+	.options-group.double .custom-row {
+		width: 35vw
+	}
+}
+
+/* slider */
+/* very static styling, won't work well on very small screens */
+.slider-div {
+	display: flex;
+	gap: 1em;
+}
+
+.slider-div input[type="range"] {
+	width: 50%;
+	min-width: 12em;
+}
+
+.slider-div span {
+	width: 100%;
+	max-width: 8em;
+	align-self: center;
+}
+
+.slider-div span:first-child {
+	text-align: end;
+}
+
+
+/* other */
+.subHeading {
+	width: 85%;
+	text-align: center;
+	margin-top: 1.5em;
+}
+
+.scLink {
+	width: 85%;
+	text-align: center;
+}
+.scLink2 {
+	width: 73%;
+	text-align: center;
+}
+
+table.invisible {
+	table-layout: fixed;
+	border-collapse: separate;
+	border-spacing: 5px;
+	margin:1em auto;
+}

css/gui/personalLog.css

+.personal-log-dialog .log-entry-save {
+    text-align: right;
+}
+
+.personal-log-dialog dl {
+    list-style-type: decimal;
+}
+.personal-log-dialog dt {
+    font-weight: normal;
+    list-style-type: decimal;
+}
+
+.personal-log-dialog dt .log-entry-created {
+    font-weight: bold;
+}
+
+.personal-log-dialog dt .log-entry-edited {
+    font-style: italic;
+    margin-left: 0.5rem;
+}
+
+.personal-log-dialog dt .choices-strip {
+    margin-left: 1.5rem;
+}
+
+.personal-log-dialog dt::after {
+    content: "";
+}
+
+.personal-log-dialog dd {
+    margin-left: 2rem;
+}
+
+.personal-log-dialog #log-entry-editor {
+    width: 95%;
+    height: 10rem;
+}
\ No newline at end of file

css/gui/quicklinks.css

+.quick-links {
+	/* Give quick links as much space as possible, any more and it start looking wrong. */
+	margin-right: -7px;
+	margin-left: -7px;
+}
+
+.quick-links .toggle {
+	position: relative; /* so ::before/::after works in relation to this element */
+	background-color: #444444;
+	border: none;
+	width: 100%;
+	padding: 0;
+	line-height: unset;
+}
+
+.quick-links .toggle:hover {
+	background-color: #5f5f5f;
+}
+
+.quick-links .toggle::before {
+	font-family: "sc-icons";
+	position: absolute;
+	left: 5px;
+	content: "\f0d7";
+}
+
+.quick-links div.collapsed .toggle::before {
+	content: "\f0da";
+}
+
+.quick-links div.content {
+	margin: 0 5px;
+}
+
+.quick-links div.collapsed div.content {
+	display: none
+}
+
+.quick-links div.menu-link {
+	background-color: #2b2b2b;
+	border: solid #3c3c3c;
+	border-width: 0 2px;
+	margin: 0 2px;
+	/* we cannot detect if an element has something after it, so we just add a shadow to every element. Only for the
+		last element the shadow is not hidden behind another element. */
+	box-shadow: 0 2px 0 0 #3c3c3c;
+	/* make sure the notification is relative to the correct element */
+	position: relative;
+}
+
+.quick-links > div.menu-link:first-child, /* give the very first link an upper border */
+.quick-links div:not(.menu-link):not(.collapsed) + div.menu-link /* give the link directly after an opened toggle an upper border */
+{
+	border-top-width: 2px;
+}
+
+/* notification */
+.quick-links div.notification:not(.category)::after /* notification for entry */,
+.quick-links div.category.notification.collapsed > .toggle::after /* notification for category, disable when not collapsed */
+{
+	font-family: "sc-icons";
+	position: absolute;
+	right: 5px;
+	top: 0;
+	content: "\f06a";
+	color: yellow;
+}

css/gui/sidebar.css

+.sidebar-grid {
+	display: grid;
+	grid-template-columns: max-content max-content max-content;
+	grid-column-gap: 0.2em;
+	justify-content: center;
+}

css/gui/slaveList/cardStyle.css

+.card {
+	border: 2px solid #333333;
+	background-color: #1a1a1a;
+	padding: 1em;
+	margin-bottom: 1em;
+}

css/gui/slaveList/quickList.css

+button.quick-button {
+	width: auto;
+	margin-left: 10px;
+}
+
+.quick-list {
+	text-align: center;
+}
+
+.quick-list button {
+	margin: 10px;
+}
+
+.quick-list.devotion .mindbroken {
+	background-color: red;
+}
+
+.quick-list.devotion .very-hateful {
+	background-color: darkviolet;
+}
+
+.quick-list.devotion .hateful {
+	background-color: darkviolet;
+}
+
+.quick-list.devotion .resistant {
+	background-color: mediumorchid;
+}
+
+.quick-list.devotion .ambivalent {
+	background-color: yellow;
+	color: #111;
+}
+
+.quick-list.devotion .accepting {
+	background-color: hotpink;
+}
+
+.quick-list.devotion .devoted {
+	background-color: deeppink;
+}
+
+.quick-list.devotion .worshipful {
+	background-color: magenta;
+}
+
+.quick-list.trust .mindbroken {
+	background-color: red;
+}
+
+.quick-list.trust .extremely-terrified {
+	background-color: darkgoldenrod;
+}
+
+.quick-list.trust .terrified {
+	background-color: goldenrod;
+	color: #111;
+}
+
+.quick-list.trust .frightened {
+	background-color: gold;
+	color: #111;
+}
+
+.quick-list.trust .fearful {
+	background-color: yellow;
+	color: #111;
+}
+
+.quick-list.trust .hate-careful {
+	background-color: orange;
+}
+
+.quick-list.trust .careful {
+	background-color: mediumaquamarine;
+	color: #111;
+}
+
+.quick-list.trust .bold {
+	background-color: orangered;
+}
+
+.quick-list.trust .trusting {
+	background-color: mediumseagreen;
+}
+
+.quick-list.trust .defiant {
+	background-color: darkred;
+}
+
+.quick-list.trust .profoundly-trusting {
+	background-color: seagreen;
+}

css/gui/slaveList/slaveList.css

+div.slaveSummary {
+	clear: both;
+}
+
+/* slave summary paragraph when "see images" is enabled */
+p.si {
+	margin-bottom: 0;
+	margin-top: 0;
+	text-indent: 1.5em;
+}
+
+span.freeAssignment {
+	color: lawngreen;
+	text-decoration: underline;
+	font-weight: bold;
+}
+
+/* Slave Summary Block */
+.ssb {
+	display: inline-block;
+	margin-right: 2em;
+	text-indent: 0;
+}

css/gui/tabs.css

+div.tab-bar {
+	overflow: hidden;
+	margin-top: 5px;
+}
+
+div.tab-bar button {
+	color: var(--link-color);
+	float: left;
+	outline: none;
+	cursor: pointer;
+	padding: 1ex 1ex;
+	transition: 0.2s;
+	font-size: large;
+}
+
+div.tab-bar button:not(:first-child) {
+	border-left: none;
+}
+
+div.tab-bar button.card {
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
+	border: none;
+	margin-bottom: 0;
+}
+
+div.tab-bar button.card.active {
+	background-color: #1a1a1a;
+}
+
+div.tab-bar button:hover {
+	background-color: var(--button-hover-color);
+}
+
+div.tab-bar button.active {
+	background-color: var(--button-selected-color);
+	color: #c7cedf;
+}
+
+div.tab-bar button.show-warning { /* dumb name, but warning and error already exist */
+	background-color: #b30000;
+	border-color: #b30000;
+}
+
+div.tab-bar button.show-warning:hover {
+	background-color: #e60000
+}
+
+div.tab-bar button.show-warning.active {
+	background-color: #4d0000;
+}
+
+div.tab-bar a.active {
+	color: white;
+	pointer-events: none;
+	cursor: default;
+}
+
+.tab-content {
+	display: none;
+}
+
+.tab-content.active {
+	display: block;
+}
+
+.tab-content:not(.no-fade) {
+	padding: 6px 12px;
+	-webkit-animation: fadeEffect 0.3s;
+	animation: fadeEffect 0.3s;
+}
+
+.tab-content.card {
+	border-radius: 0 8px 8px 8px;
+	background-color: #1a1a1a;
+	border: 0;
+}
+
+.tab-content.card .slaveSummary.card {
+	background-color: #252525;
+}
+
+@-webkit-keyframes fadeEffect {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeEffect {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}

css/gui/tooltips/tippy.css

+.has-tooltip {
+	text-decoration: underline dotted;
+	white-space: nowrap;
+}
+
+/* Fix links */
+a.has-tooltip {
+	text-decoration: none;
+}
+a.has-tooltip:hover {
+	text-decoration: underline;
+}
+
+.tippy-content {
+	text-indent: initial;
+	font-weight: initial;
+}
+
+.tippy-content ul {
+	margin: 5px;
+}
+.tippy-content ul:not(.choices-strip) {
+	padding-left: 10px;
+}
+
+.tippy-content .tip-details {
+	font-size: smaller;
+	/* if there isn't enough space vertically, add a scrollbar */
+	overflow-y: auto;
+	max-height: 95vh;
+}

css/icons/unicode_icons.css

+/* Scale Font up, since some Unicode Icons are a bit small (depending on font) */
+.unicode-icons {
+	font-size: 1.5em;
+}

css/interaction/export.css

+.export-field {
+	width: 100vw;
+	max-width: 100%;
+	word-break: break-all;
+	white-space: normal;
+	height: 80vh;
+}

css/interaction/familyTree.css

+#edit-family {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}