Same CSS as normal, just makes it compatible
Talkmodachi for old browsers by rlego
Details
Authorrlego
LicenseNo License
Categoryhttps://talkmodachi.dylanpdx.io/
Created
Updated
Code size13 kB
Code checksum28bc6e2a
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
background texture will not work on browsers that cannot handle complex linear gradients, range sliders will have default css as they cannot be themed, but the rest of the page sets you back to chrome 50
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Talkmodachi for old browsers
@namespace you.net
@version 1.0.1
@description Chrome 130 minimum is crazy work bro
@author rlego
==/UserStyle== */
@-moz-document url-prefix("https://talkmodachi.dylanpdx.io/") {
body {
background: linear-gradient(#fe4, #ffb);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
min-height: 100vh;
padding: 0;
perspective: 1000px;
overflow: hidden scroll;
width: 100vw;
scrollbar-width:thin;
}
body::-webkit-scrollbar {
width:0;
}
:focus {
outline:none;
}
header {
justify-self:start;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAALElEQVQoFWP8f7f8PwM6eH8WXYSBCUMEh8AAKmRhwOJwBkFjDJcOoBuJthoAjMwHJFS74ZsAAAAASUVORK5CYII=");
background-size: 10px 10px;
border-radius: calc(1em + 5px) / 50%;
box-shadow:
inset 0 3px 0 2px #ffb,
inset 0 -3px 0 2px #fb3;
height: fit-content;
width:calc(100% - 10px);
padding: 5px 0;
position: fixed;
}
h1 {
font-weight: normal;
margin: 0;
text-align: center;
}
main {
align-self: center;
background: #ffaa;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
/*gap: 10px;*/
justify-self: center;
max-width: 50vw;
padding: 20px;
z-index: 3;
}
main .pill {
background: #ffd;
border-radius: 1.5ch / 50%;
box-shadow: 0 2px 0 0 #dd9;
font-weight: normal;
height: fit-content;
margin: 0 auto;
padding: 5px 1ch;
text-align: center;
width: 50%;
justify-self:center;
align-self:center;
}
main .textBox {
--background: #fff;
--border: #fc7;
--shadow: #fed;
background: var(--background);
border: 2px solid var(--border);
border-radius: 1ch;
box-shadow:
inset 0 3px var(--shadow),
inset 3px 0 var(--shadow),
inset -3px 0 var(--shadow);
font-size: 16px;
padding: .5em;
transition: .1s all;
}
main textarea.textBox {
max-width: 80ch;
min-height: 7em;
resize: vertical;
width: calc(100% - 20px);
margin:10px 0;
}
main textarea.textBox:where(:focus, :hover) {
--background: #eff;
--border: #088;
--shadow: #cff;
}
main textarea.textBox:focus {
--background: #7dd;
outline: 0;
}
main .buttonContainer {
display: flex;
/*gap: 10px;*/
justify-content: center;
width: 100%;
margin-top:10px;
}
main button,
main .button {
--background: #f60;
--topborder: #d50;
--reflection: var(--topborder);
--midborder: #830;
--botborder: #620;
background: var(--background);
border: 4px solid;
border-color:
var(--topborder)
var(--midborder)
var(--botborder);
border-radius: 10px;
box-shadow:
inset 0 1px 0 0 var(--midborder),
inset 0 .6em 0 0 var(--reflection);
color: #000;
font-size: larger;
width: fit-content;
padding: .6em 2ch .3em;
text-align: center;
text-shadow: 2px 1px 0 var(--reflection);
transition: .1s all;
}
main button span,
main .button span {
display: block;
font-size: 2em;
position: absolute;
text-align: center;
width: 100%;
}
main .button, main button {
margin-right:10px;
}
main .button:last-child, main button:last-child {
margin-right:0
}
main button.yellow:not(:checked),
main .button.yellow:not(:checked) {
--background: #fc0;
--topborder: #da0;
--reflection: #fd3;
--midborder: #a80;
--botborder: #640;
text-shadow: 2px 1px 0 #ffa;
}
main button.yellow:has(:checked),
main .button.yellow:has(:checked) {
--background: #f60;
--topborder: #d50;
--reflection: var(--topborder);
--midborder: #830;
--botborder: #620;
background: var(--background);
text-shadow: 2px 1px 0 var(--reflection);
}
/* TODO: I clearly fucked up specificity here but fuck it we ball */
main button:not(:checked):hover,
main .button:not(:checked):hover {
--topborder: #aff;
--midborder: #6dd;
--botborder: #088;
--reflection: var(--topborder);
--background: #9ee;
cursor: pointer;
}
main button:has(:checked):hover,
main .button:has(:checked):hover {
--background: #f60;
--topborder: #d50;
--reflection: var(--topborder);
--midborder: #830;
--botborder: #620;
background: var(--background);
text-shadow: 2px 1px 0 var(--reflection);
}
button:disabled, button[disabled] {
--background: #ccc;
--topborder: #eee;
--reflection: #fff;
--midborder: #999;
--botborder: #666;
color: #000;
cursor: not-allowed;
}
#input,
#output:not([hidden]) {
display: flex;
flex-direction: column;
/*gap: 10px;*/
}
#input #controlsContainer:not([hidden]) {
display: grid;
/*gap: 20px;*/
grid-template-columns: 1fr 1fr;
}
#input #controlsContainer:not([hidden]) h2 {
grid-column: 1 / 3;
}
#input #controlsContainer:not([hidden]) label.control {
display: flex;
flex-direction: column;
/*gap: 15px;*/
margin-top:20px
}
#input #controlsContainer:not([hidden]) label.control:nth-child(2n+1) {
margin-right:0;
margin-left:10px;
}
#input #controlsContainer:not([hidden]) label.control:nth-child(2n) {
margin-right:10px;
}
#input #controlsContainer:not([hidden]) label.control .pill {
margin-bottom:15px
}
#input #controlsContainer:not([hidden]) label.control input[type="range"] {
appearance: none;
align-self: center;
background:
linear-gradient(
transparent calc(50% - 2px),
#222 calc(50% - 2px),
#555 calc(50% + 2px),
transparent calc(50% + 2px)
),
repeating-linear-gradient(
90deg,
#555 0px 4px,
transparent 4px 16px),
repeating-linear-gradient(
90deg,
#aaa 0px 4px,
transparent 4px 16px);
background-repeat:
repeat,
no-repeat;
background-size:
100% 100%,
100% 50%,
100% 100%;
height: 1em;
outline: none;
width: 90%;
position:relative;
}
#input #controlsContainer:not([hidden]) label.control input[type=range]::-moz-range-thumb,
#input #controlsContainer:not([hidden]) label.control input[type=range]::-webkit-slider-thumb {
--top: #fdc;
--border: #c60;
--bg: #f60;
appearance: none;
background: var(--bg);
border: 3px solid;
border-color: var(--top) var(--border) var(--border);
border-radius: 4px;
box-shadow: 0 0 0 2px #000;
cursor: grab;
width: 6px;
height: 200%;
}
#input #controlsContainer:not([hidden]) label.control input[type=range]:active::-moz-range-thumb,
#input #controlsContainer:not([hidden]) label.control input[type=range]:active::-webkit-slider-thumb {
--top: #cff;
--border: #088;
--bg: #0ff;
cursor: move;
}
#input #controlsContainer:not([hidden]) #intonation {
display: flex;
justify-content: center;
/*gap: 10px;*/
}
#input #controlsContainer:not([hidden]) #intonation label {
cursor: pointer;
height: 1.5em;
padding: 0;
position: relative;
width: 1.5em;
}
#input #controlsContainer:not([hidden]) #intonation label span { line-height: 0.7;}
#input #controlsContainer:not([hidden]) #intonation label input[type=radio] {
height: 0;
opacity: 0;
position: absolute;
width: 0;
}
#intonation .button:focus-within {
--background: #f60;
--topborder: #d50;
--reflection: var(--topborder);
--midborder: #830;
--botborder: #620;
text-shadow: 2px 1px 0 var(--reflection);
}
#status {
--border: #ccc;
--shadow: #eee;
color: #555;
margin: auto;
padding: .2em;
text-align: center;
width: 90%;
}
#output .pill {
margin:10px 0
}
#audioContainer #playButton {
height: 40px;
padding: 0;
position: relative;
width: 2.5em;
}
#audioContainer #playButton span {
line-height: 0;
width:40px;
}
#audioContainer #downloadButton {
height: 32px;
line-height: 1.7;
padding: 0 1ch;
}
footer {
display: flex;
inset: auto auto 0 0;
justify-content: space-between;
width: 100%;
z-index: 3;
position:absolute;
bottom:0px;
}
footer a.button {
background: #f60;
border: 6px solid;
border-color: #fdc #c60 transparent #c60;
border-radius: 8px 8px 0 0;
box-shadow: 0 0 0 4px #000;
color: #000;
font-size: 2em;
margin: 0 4px;
padding: 0.5ch 2ch 0;
text-decoration: none;
transition: 0.1s all;
}
footer a.button:hover {
background: #0ff;
border-color: #cff #088 transparent #088;
}
/* TODO: This is a mess lol */
footer #lensdeer {
color: #000;
display: flex;
filter: grayscale(1);
font-size: 16px;
/*gap: .5px;*/
height: 16px;
image-rendering: pixelated;
margin-right: 4px;
opacity: .5;
position: absolute;
text-align: right;
text-decoration: underline dotted;
transition: .2s all;
white-space: nowrap;
width: 16px;
right:-16px;
top:-24px;
}
footer #lensdeer img { width: 16px;}
footer #lensdeer:hover{
background: transparent;
filter: none;
opacity: 1;
width:136px;
}
body::before,
body::after {
inset: auto auto 0 -50%;
perspective: inherit;
position: fixed;
width: 200%;
}
/* Floor */
body::after {
background:
radial-gradient(transparent, #ff9 75%),
radial-gradient(
circle at 75% 25%,
#ff8 20%,
...