Forum › Posts by kasumitheia
I love this manga a lot.
Of course first you have to throw realism out the window, but that's the point of a story, it doesn't need to be like the real world.
That said what it really does well is get the complex feelings of the main characters across, it makes them feel alive.
Especially Komaki, her fear of one day being abandoned by Wakaba, while she desperately tries to hold on and leave as much of herself behind as she can, to not be forgotten in the future when Wakaba will eventually have another boyfriend (in her mind at least).
Like the scene where she hugs Wakaba and calls her name, even though she is right there, I do the same and I could never really say why, but seeing Komaki helped me understand my own feelings better as well.
And I just love a good Yuri manga that shows a lot of the characters feelings by using the story itself, without having to rely on words.
uhm so, here you go.
There's a css part and a javascript part, you can apply them with extensions that allow for css and javascript injection such as "User JavaScript and CSS" for chrome.
Obviously this comes with no guarantee whatsoever, it may or may not work in your browser.
Tested on Chromium.
css
/**
* @name DynastyDark
* @description Dark theme for Dynasty Scans
* @author kasumitheia
*/
:root {
--bg-badge: #53516c;
--divider-color: #707070;
--bg-body: #191a1c;
--bg-dark: #121114;
--bg-content: #1c1c1e;
--bg-button: #222;
--bg-active: #2c2c2c;
--bg-highlight: #2c2c3c;
--bg-highlight-light: #38384d;
--bg-hint: #7c7c9738;
--text-body: #bdbdbd;
--text-content: #d7d7d7;
--text-active: #ddd;
--text-highlight: #fff;
}
/* GLOBAL */
body {
background-color: var(--bg-body);
background-image: none;
color: var(--text-body);
}
#content.container {
padding: 16px 20px;
background-color: var(--bg-dark);
box-shadow: unset;
border-radius: 8px;
}
a,
h2,
h4 {
color: var(--text-content);
}
a:hover,
a:focus {
color: unset;
}
.label,
.badge {
background-color: var(--bg-badge);
color: unset;
}
.pagination ul {
box-shadow: none;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.pagination ul > li > a,
.pagination ul > li > span {
background-color: var(--bg-button);
border-color: #474747;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: var(--bg-highlight);
color: var(--text-active);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
background-color: var(--bg-content);
}
/* managing nav bar margin and colour */
.brand img {
display: none;
}
.navbar.navbar-inverse .navbar-inner {
background: var(--bg-dark);
border-radius: 8px;
}
.navbar {
width: 1210px;
margin-left: auto;
margin-right: auto;
margin-top: 32px;
margin-bottom: 20px;
}
.navbar-inner {
min-height: 36px;
padding: 8px 20px;
}
.navbar .nav > li > a {
padding: 8px 15px 8px;
}
.navbar .nav > li {
margin-right: 8px;
}
.navbar .nav .custom-link:hover {
background-color: var(--bg-highlight);
border-radius: 16px;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
color: var(--text-highlight);
}
.navbar-search {
margin-top: 2px;
}
.navbar-inverse .navbar-search .search-query {
border: none;
background-color: var(--bg-content);
box-shadow: none;
padding: 6px 14px;
}
.navbar-inverse .navbar-search .search-query:focus,
.navbar-inverse .navbar-search .search-query.focused {
padding: 6px 14px;
color: var(--text-active);
text-shadow: none;
background-color: var(--bg-active);
box-shadow: none;
}
.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
background-color: var(--bg-highlight);
border-radius: 16px;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
color: var(--text-highlight);
}
.navbar .nav .divider-vertical {
height: 24px;
margin: 6px 20px;
border-left: unset;
border-right: 1px solid;
border-right-color: var(--divider-color);
}
.icon-bullhorn {
background-position: center;
background-size: contain;
background-image: url(https://assets-global.website-files.com/6257adef93867e50d84d30e2/653714c1f22aef3b6921d63d_636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg);
}
/* Nav Bar -> account toggle */
.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
color: var(--text-active);
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-to,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color: var(--bg-highlight);
color: var(--text-highlight);
border-radius: 16px;
}
.navbar .nav > li > .dropdown-menu:after {
border-bottom: 6px solid var(--bg-content);
}
.dropdown-menu {
padding: 4px 0;
background-color: var(--bg-content);
border: none;
}
.dropdown-menu .divider {
margin: 8px 6px;
background-color: var(--divider-color);
border-bottom: none;
}
.dropdown-menu > li > a {
padding: 6px 14px;
margin: 4px 8px;
color: var(--text-active);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
background-color: var(--bg-highlight);
border-radius: 16px;
background-image: none;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
/* Main Page */
#main.chapters .chapter {
color: var(--text-content);
}
#main.chapters .chapter .title,
#main.chapters .chapter .title small,
.thumbnail .caption {
color: inherit;
}
.thumbnail {
border: none;
background-color: var(--bg-content);
border-radius: 8px;
padding: 8px;
}
a.thumbnail:hover,
a.thumbnail:focus {
box-shadow: none;
background-color: var(--bg-hint);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
/* Main page -> recently added */
div.span4 {
margin-left: auto;
}
.nav-list > li > a {
padding: 8px 15px;
}
.nav-list > li > a,
.nav-list .nav-header {
text-shadow: none;
}
a:hover,
a:focus {
color: var(--text-highlight);
}
.nav > li > a:hover,
.nav > li > a:focus {
color: var(--text-highlight);
background-color: var(--bg-highlight);
border-radius: 8px;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
li.filtered_results {
padding: 4px 0;
}
/* Directory */
#main.tags.index .row {
margin: 16px 0;
}
.nav-tabs > li,
.nav-pills > li {
margin-right: 8px;
}
.nav-pills > li > a {
margin-top: unset;
margin-bottom: unset;
margin-right: unset;
border-radius: 16px;
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav.nav-pills > li > a:hover,
.nav-pills > .active > a:focus,
.nav.nav-pills > li > a:focus {
color: var(--text-highlight);
background-color: var(--bg-highlight);
border-radius: 16px;
}
/* Lists */
#main.lists.index .table tbody {
display: flex;
flex-direction: column;
}
.table.table-striped .trow {
background-color: var(--bg-content);
display: flex;
margin: 8px 0;
border-radius: 8px;
cursor: pointer;
}
.table.table-striped .trow:hover {
background-color: var(--bg-hint);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
.table.table-striped .trow div {
flex: 1;
}
.table .trow div .btn-mini {
background-color: var(--bg-active);
}
.table .trow div .btn-mini:hover {
background-color: var(--bg-highlight-light);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
.table .trow div {
width: 124px;
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
color: var(--text-content);
border-top: none;
}
.table .trow div:last-child {
text-align: center;
}
/* Forum */
#main.topics.index .forum_topic:nth-child(odd) {
background-color: var(--bg-dark);
}
#main.topics.index .forum_topic {
border-bottom: none;
padding: 10px 20px;
}
.row {
margin-left: unset;
display: flex;
}
[class*='span'] {
float: unset;
margin-left: unset;
}
#main.topics.index .forum_topic .info {
margin-left: auto;
}
#main.topics.index .forum_topic .info > span {
border-radius: 8px;
background: var(--bg-content);
color: var(--text-content);
padding: 2px 8px;
margin-left: 4px;
}
.toolbar {
background: var(--bg-dark);
border-bottom: none;
padding: 20px;
}
.span9 {
width: 846px;
background-color: var(--bg-content);
padding: 8px;
border-radius: 8px;
}
/* Forum -> Posts */
.topics-toolbar {
background: var(--bg-dark);
padding: 20px;
margin: -20px -20px 0 -20px;
display: flex;
align-items: center;
}
.pull-right {
margin-left: auto;
}
h2 {
line-height: unset;
margin: unset;
}
#main .posts .forum_post .info {
margin: unset;
padding: 8px;
background-color: var(--bg-content);
border-top: none;
border-bottom: none;
border-radius: 8px;
}
#main.topics.show .posts .forum_post p,
#main.topics.show .posts .forum_post code {
color: var(--text-content);
}
.span5.align-right.actions.bulleted {
margin-left: auto;
}
.body.row {
border-radius: 0 0 8px 8px;
margin: 12px 0 20px;
}
#main .posts .forum_post .message,
#main .posts .forum_post .details {
margin-top: unset;
margin-bottom: unset;
}
#main .posts .forum_post .avatar {
text-align: unset;
margin-bottom: unset;
}
.span2.details .bulleted {
background-color: var(--bg-content);
padding: 8px 8px 0;
border-radius: 8px 8px 0 0;
}
.span2.details .joined {
background-color: var(--bg-content);
padding: 0 8px 8px;
border-radius: 0 0 8px 8px;
}
.forum_post .message {
word-wrap: break-word;
/* padding: 8px; */
/* background-color: var(--bg-content); */
border-radius: 8px;
margin-left: 12px;
}
/* Forum -> Posts -> Composing */
#main .posts::after {
margin: unset;
background: var(--divider-color);
}
#main.new #new_forum_topic,
#main.new #new_forum_post {
margin-top: 20px;
}
textarea {
color: var(--text-active);
background-color: var(--bg-content);
padding: 6px 14px;
border: none;
border-radius: 16px;
}
/* Forum -> Posts -> Composing -> Preview */
#main.create #new_forum_topic p,
#main.create #new_forum_topic code,
#main.create #new_forum_post p,
#main.create #new_forum_post code {
color: var(--text-content);
}
pre {
background-color: var(--bg-body);
border: none;
border-radius: 8px;
}
hr {
border-top: none;
border-bottom: 1px solid var(--divider-color);
}
/* Buttons */
.btn {
color: var(--text-active);
background-color: var(--bg-button);
background-image: none;
border: none;
box-shadow: none;
padding: 6px 14px;
text-shadow: none;
border-radius: 16px;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
color: var(--text-highlight);
background-color: var(--bg-highlight);
outline: none;
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
.btn-group > .btn:first-child {
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.btn-group + .btn-group {
margin-left: 12px;
}
.btn-group.open .btn.dropdown-toggle {
background-color: var(--bg-highlight);
color: var(--text-highlight);
border-radius: 16px;
}
.btn-group > .btn-mini,
.btn-group > .btn-small {
padding: 4px 12px;
}
.caret {
border-top: 4px solid var(--text-active);
}
/* manga details */
.cover-chapters .span10 {
margin-left: auto;
}
/* author page */
.thumbnails {
margin-left: unset;
}
.thumbnails.cover-list {
display: flex;
}
.thumbnails > li {
margin-right: 24px;
}
/* chapter reading -> pages-list */
#reader .pages-list a {
color: #767676;
}
#reader .pages-list a.active {
background: var(--bg-highlight);
color: var(--text-active);
}
#reader .pages-list a:hover {
background: var(--bg-highlight-light);
color: var(--text-highlight);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
/* chapter reading -> chapter-action buttons */
#main.chapters.show {
padding-right: unset;
min-height: 64px;
display: flex;
}
.chapter-info-wrapper {
display: flex;
flex-direction: column;
}
#main.chapters.show #chapter-actions {
position: relative;
display: flex;
flex-direction: row-reverse;
right: unset;
top: unset;
margin-left: auto;
}
#main.chapters.show #chapter-actions .btn-toolbar {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#main.chapters.show #next_select {
margin: unset;
width: 111px;
}
[class^='icon-']:not(.icon-white) {
filter: invert(1);
}
.nav-pills > .active > a > [class^='icon-'],
.nav-pills > .active > a > [class*=' icon-'],
.nav-list > .active > a > [class^='icon-'],
.nav-list > .active > a > [class*=' icon-'],
.navbar-inverse .nav > .active > a > [class^='icon-'],
.navbar-inverse .nav > .active > a > [class*=' icon-'],
.dropdown-menu > li > a:hover > [class^='icon-'],
.dropdown-menu > li > a:focus > [class^='icon-'],
.dropdown-menu > li > a:hover > [class*=' icon-'],
.dropdown-menu > li > a:focus > [class*=' icon-'],
.dropdown-menu > .active > a > [class^='icon-'],
.dropdown-menu > .active > a > [class*=' icon-'],
.dropdown-submenu:hover > a > [class^='icon-'],
.dropdown-submenu:focus > a > [class^='icon-'],
.dropdown-submenu:hover > a > [class*=' icon-'],
.dropdown-submenu:focus > a > [class*=' icon-'] {
background-image: url(/assets/twitter/bootstrap/glyphicons-halflings-b4c22a0ed1f42188864f0046f0862ecb.png);
}
/* chapter reading -> fullscreen */
#reader.fullscreen #image img {
max-height: 100vh;
}
#reader.noresize #image img {
max-height: unset;
}
/* account settings */
#main.users.show > h2 {
margin-bottom: 16px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: var(--bg-content);
color: var(--text-body);
}
input[type='text'],
input[type='password'],
input[type='datetime'],
input[type='datetime-local'],
input[type='date'],
input[type='month'],
input[type='time'],
input[type='week'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='tel'],
input[type='color'],
.uneditable-input {
color: var(--text-active);
background-color: var(--bg-active);
border: none;
border-radius: 16px;
}
textarea:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='time']:focus,
input[type='week']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='color']:focus,
.uneditable-input:focus {
box-shadow: none;
}
select {
color: var(--text-active);
background-color: var(--bg-button);
padding: 6px 14px;
border: none;
border-radius: 16px;
}
select:focus,
input[type='file']:focus,
input[type='radio']:focus,
input[type='checkbox']:focus {
outline: none;
}
.form-horizontal .help-block {
width: fit-content;
padding: 8px;
background-color: var(--bg-content);
border-radius: 8px;
}
.chzn-container .chzn-drop {
background: var(--bg-content);
border: none;
border-radius: 16px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: none;
margin-top: 8px;
}
.chzn-container .chzn-results li {
padding: 6px 14px;
margin: 4px 8px;
color: var(--text-active);
}
.chzn-container-multi .chzn-choices {
background-color: var(--bg-button);
border: none;
border-radius: 16px;
box-shadow: none;
}
.chzn-container-multi .chzn-choices .search-choice {
color: unset;
background-color: var(--bg-badge);
border: none;
background-image: none;
box-shadow: none;
font-weight: bold;
font-size: 12px;
line-height: 14px;
margin: 5px 0 3px 8px;
padding: 2px 20px 2px 4px;
}
.chzn-container-active .chzn-choices {
border: none;
background-color: var(--bg-highlight);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
box-shadow: none;
}
.chzn-container .chzn-results .highlighted {
background-color: unset;
color: var(--text-active);
}
ul.chzn-choices:active,
ul.chzn-choices:focus {
background-color: var(--bg-highlight);
}
.chzn-container .chzn-results .group-result:hover {
background-color: unset;
color: #999;
transition: none;
}
.chzn-container .chzn-results li:hover {
background-color: var(--bg-highlight);
border-radius: 16px;
color: var(--text-highlight);
transition: background-color 0.2s cubic-bezier(0, 0.58, 0.58, 1);
}
select#user_time_zone:focus {
outline: none;
}
.form-actions,
/* signin */
.well .form-actions,
.well legend {
color: var(--text-content);
background-color: var(--bg-dark);
border-top: 1px solid var(--divider-color);
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: unset;
background-color: unset;
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 8px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: none;
}
javascript
/**
* @name DynastyDark
* @description JS code for DynastyDark, dark theme for Dynasty Scans
* @author kasumitheia
*/
function fixTableRowHover(contentContainer) {
const table = contentContainer.querySelector('#main.lists.index .table tbody');
if (!table) return;
const trArray = Array.from(table.rows);
for (const trElement of trArray) {
const divRow = document.createElement('div');
divRow.className = 'trow';
for (const tdElement of trElement.children) {
const divCell = document.createElement('div');
divCell.className = tdElement.className;
divCell.innerHTML = tdElement.innerHTML;
divRow.appendChild(divCell);
}
trElement.parentNode.replaceChild(divRow, trElement);
}
}
function forumToolbar(contentContainer) {
let main = contentContainer.querySelector('#main.topics.show');
if (!main) return;
let topicTitle = contentContainer.querySelector('#main.topics.show > h2');
let topicButton = contentContainer.querySelector(
'#main.topics.show > div.pull-right.bulleted.middle'
);
let topicToolbar = document.createElement('div');
topicToolbar.className = 'topics-toolbar';
topicToolbar.appendChild(topicTitle);
topicToolbar.appendChild(topicButton);
main.parentNode.insertBefore(topicToolbar, main);
}
function chapterInfoWrapper(contentContainer) {
let main = contentContainer.querySelector('#main.chapters.show');
if (!main) return;
let chapterTitle = main.querySelector('#chapter-title');
let chapterDetails = main.querySelector('#chapter-details');
let chapterActions = main.querySelector('#chapter-actions');
let wrapper = document.createElement('div');
wrapper.className = 'chapter-info-wrapper';
wrapper.appendChild(chapterTitle);
wrapper.appendChild(chapterDetails);
main.insertBefore(wrapper, chapterActions);
}
function homepageLink(navbar) {
let navElement = navbar.querySelector('.nav .added ');
let link = document.createElement('a');
link.textContent = 'Dynasty Scans';
link.href = '/';
let listItem = document.createElement('li');
listItem.className = 'custom-link';
listItem.appendChild(link);
navElement.parentNode.insertBefore(listItem, navElement);
}
function navbarFix() {
let contentContainer = document.getElementById('content');
let navbar = contentContainer.querySelector('div.navbar.navbar-inverse');
contentContainer.parentNode.insertBefore(navbar, contentContainer);
return { navbar, contentContainer };
}
// Separate navbar from content container
let { navbar, contentContainer } = navbarFix();
// Add Dynasty Scans homepage link to navbar
homepageLink(navbar);
// Wrap chapter-title and chapter-details in another container for inline styling with chapter-actions
chapterInfoWrapper(contentContainer);
// Separate Forum discussion title & button into own toolbar
forumToolbar(contentContainer);
// Switch Lists table row element to div
fixTableRowHover(contentContainer);
last edited at Jun 20, 2024 7:35PM