File size: 3,031 Bytes
1c64d9e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | /* Scribin' v2 — styles */
:root {
--ash: #1B1C1A;
--ash2: #252623;
--ash3: #33342F;
--orange: #C45C1A;
--orange-hover: #D9681F;
--green: #4A8C5C;
--green-text: #6BC488;
--card-text: #EDE8E0;
--card-muted: #8C897F;
--card-sub: #5E605A;
--scrim: rgba(240,237,230,.55);
--ink: #EBDCC7;
--paper: #241812;
--plum: #8A5A3B;
--gold: #C89B6D;
--sage: #6F8A5C;
--rose: #A9563C;
--line: #3E2C20;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
margin: 0;
font-family: Georgia, 'Times New Roman', serif;
background: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--gold); }
input, select, textarea, button { font-family: inherit; }
input[type="range"] { accent-color: var(--orange); }
input[type="checkbox"] { accent-color: var(--gold); }
/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ash3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }
/* Selection */
::selection { background: rgba(200,155,109,.35); color: #FFF3E2; }
/* Focus visible */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Dock tile animation */
.scribin-tile {
animation: scribinTilePulse 1.8s ease-in-out infinite !important;
}
.scribin-wave { animation: scribinWave 1.8s ease-in-out infinite !important; }
.scribin-wave-far { animation: scribinWaveFar 1.8s ease-in-out 0.6s infinite !important; }
.scribin-horn { animation: scribinHorn 1.8s ease-in-out infinite !important; transform-origin: 7px 12px !important; }
.scribin-name { animation: scribinNameShimmer 1.8s ease-in-out 0.3s infinite !important; }
@keyframes scribinWave {
0%, 100% { opacity: .25; transform: scale(.94); }
50% { opacity: 1; transform: scale(1.1); }
}
@keyframes scribinWaveFar {
0%, 100% { opacity: 0; transform: scale(.9); }
45%, 60% { opacity: .5; transform: scale(1.14); }
}
@keyframes scribinHorn {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.045) translateX(.3px); }
}
@keyframes scribinTilePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(196,92,26,0); }
50% { box-shadow: 0 0 0 4px rgba(196,92,26,.12); }
}
@keyframes scribinNameShimmer {
0%, 100% { text-shadow: 0 0 0 rgba(196,92,26,0); }
50% { text-shadow: 0 0 14px rgba(196,92,26,.35); }
}
/* Sentence highlighting */
.sentence-current {
background: rgba(200,155,109,.22) !important;
color: #FFF3E2 !important;
box-shadow: 0 0 18px rgba(200,155,109,.25), inset 0 -2px 0 rgba(200,155,109,.7) !important;
}
.sentence-read {
color: #6E5844 !important;
} |