$linkcolour: #4169E1; // A striking blue $hovercolour: DeepSkyBlue; // A deep blue $activecolour: #DD4B39; // A cooked red $visitedcolour: #6941e1; // A run-of-the-mill purple $visitedhovercolour: #E3E; // A fierce magenta tw-link, .link, tw-icon, .enchantment-clickblock { cursor: pointer; } @mixin enchantable-color { /* Links only inherit colours from styled elements that are inside the passage, so enchanting ?passage or ?story with (color:) won't affect them. */ tw-passage [style^="color"] &:not(:hover), tw-passage [style*=" color"] &:not(:hover), tw-passage [style^="color"][hover="true"] &:hover, tw-passage [style*=" color"][hover="true"] &:hover, { color: inherit; } } tw-link, .enchantment-link { color: $linkcolour; @include enchantable-color; font-weight: bold; text-decoration: none; transition: color 0.2s ease-in-out; &:hover { color: $hovercolour; } &:active { color: $activecolour; } } .visited { color: $visitedcolour; @include enchantable-color; &:hover { color: $visitedhovercolour; } } tw-broken-link { color: #993333; // A clotted blood colour @include enchantable-color; border-bottom: 2px solid #993333; cursor: not-allowed; } .enchantment-mouseover { border-bottom: 2px dashed #999; } .enchantment-mouseout { border: hsla(200,50%,50%,0.6) 1px solid; &:hover { background-color: hsla(200,25%,75%,0.75); border: transparent 1px solid; border-radius: 0.2em; } } // We need the clickblock frame to always be above the contents. So, a large pseudo-element is necessary. // Also, to account for the contents' padding, it needs to be attached to the contents itself. @mixin enchantment-block { content:""; width:100%; height:100%; top:0; left:0; display: block; box-sizing:border-box; // Because * has "position:relative" in main.css, this line is enough. position:absolute; // May not be necessary, but just in case... pointer-events:none; } .enchantment-clickblock { width:100%; height:100%; // This should always house a block element. display: block; & > :not(tw-enchantment)::after { @include enchantment-block; // The actual box-shadow is defined below. // 'box-shadow-color' doesn't exist (can't be animated), so we must overload 'color'. color: hsla(225, 73%, 57%,0.5); // $linkcolour at 0.5 opacity transition: color 0.2s ease-in-out; } // SCSS needs these to be separate for some reason? & > :not(tw-enchantment):hover::after { color: hsla(195, 100%, 50%, 0.5); // $hovercolour at 0.5 opacity } & > :not(tw-enchantment):active::after { color: hsla(7, 71%, 55%, 0.5); // $activecolour at 0.5 opacity } // Most targets, and importantly , have an inset box. & > :not(tw-enchantment)::after { box-shadow: inset 0 0 0 0.5vmax; } // and , which don't have padding, have normal box-shadows. & > tw-passage::after, & > tw-sidebar::after { // If no colour is specified, box-shadow uses 'color'. // Might as well use vmax because % doesn't work for box-shadow. box-shadow: 0 0 0 0.5vmax; } } .enchantment-mouseoverblock > :not(tw-enchantment)::after { @include enchantment-block; border: 2px dashed #999; } .enchantment-mouseoutblock > :not(tw-enchantment)::after { @include enchantment-block; border: hsla(200,50%,50%,0.6) 2px solid; } .enchantment-mouseoutblock:hover > :not(tw-enchantment)::after { @include enchantment-block; background-color: hsla(200,25%,75%,0.75); border: transparent 2px solid; border-radius: 0.2em; } /* Button styling is applied in three ways: by (button:) changing normal links and (click:) links as their second argument... */ tw-link.enchantment-button, .enchantment-link.enchantment-button, /* ...by link changers and (click:) links being enchanted by (enchant:), or link expressions changed by attached (button:) changers... */ .enchantment-button:not(.enchantment-link) > tw-link, .enchantment-button:not(.enchantment-link) > .enchantment-link, /* ...and links inside (dialog:) dialogs. */ tw-dialog-links { padding-top:1.5em; tw-link { border-radius: 16px; border-style: solid; border-width: 2px; text-align:center; display:inline-block; padding:0px 8px; } }