mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
9265b0bfee
- Move docs graphics to appropriate place - Fix spacing of header anchors - Fix display of card grids in md - Fix display of badges - Fix theme-aware diagram coloring - Fix left table columns being line-broken too aggressively
339 lines
8.0 KiB
SCSS
339 lines
8.0 KiB
SCSS
// Diagram Styling =============================================================
|
|
//==============================================================================
|
|
// These styles control the display of diagrams in page contents.
|
|
|
|
article {
|
|
// Shrink images that would overflow the main column.
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
// Shrink or grow inlined SVG to fit the main column width.
|
|
svg {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.floating-diagram {
|
|
margin: 0.5rem;
|
|
float: left;
|
|
}
|
|
|
|
li {
|
|
clear: left; // avoid spilling to the side with floating diagrams
|
|
}
|
|
}
|
|
|
|
|
|
html:not(.light) article {
|
|
|
|
// Recolor UMLet diagrams for dark theme -------------------------------------
|
|
svg[fill="black"] {
|
|
fill: $white;
|
|
stroke: $white;
|
|
|
|
*[fill="white"] {
|
|
fill: $black;
|
|
}
|
|
*[stroke="white"] {
|
|
stroke: $black;
|
|
}
|
|
*[fill="black"] {
|
|
fill: $white;
|
|
}
|
|
*[stroke="black"] {
|
|
stroke: $white;
|
|
}
|
|
|
|
g[fill="blue"] {
|
|
fill: $blue-500;
|
|
}
|
|
g[stroke="blue"] {
|
|
stroke: $blue-500;
|
|
}
|
|
g[fill="rgb(120,120,120)"] {
|
|
fill: $gray-200;
|
|
}
|
|
g[stroke="rgb(120,120,120)"] {
|
|
stroke: $gray-200;
|
|
}
|
|
g[fill="rgb(200,200,200)"] {
|
|
fill: $gray-700;
|
|
}
|
|
g[fill="rgb(70,70,70)"] {
|
|
fill: $gray-500;
|
|
}
|
|
g[stroke="rgb(70,70,70)"] {
|
|
stroke: $gray-500;
|
|
}
|
|
g[fill="rgb(29,180,255)"] { // old Ripple blue. Change to green.
|
|
fill: $primary;
|
|
}
|
|
g[stroke="rgb(29,180,255)"] {
|
|
stroke: $primary;
|
|
}
|
|
rect[stroke="rgb(245,247,249)"] { // old off-white. change to black.
|
|
stroke: $black;
|
|
}
|
|
g[fill="lime"],
|
|
g[fill="rgb(0,255,0)"] { // standard green. change to primary green.
|
|
fill: $primary;
|
|
}
|
|
g[stroke="lime"] ,
|
|
g[stroke="rgb(0,255,0)"]{
|
|
stroke: $primary;
|
|
}
|
|
g[fill="yellow"],
|
|
g[fill="rgb(255,255,0)"] {
|
|
fill: $yellow-500;
|
|
|
|
// nested stroke should remain black so it's visible over yellow
|
|
path[stroke="black"] {
|
|
stroke: $black;
|
|
}
|
|
}
|
|
g[fill="red"],
|
|
g[fill="rgb(255,255,0)"] { // magenta-500 is our closest shade to pure red
|
|
fill: $magenta-500;
|
|
}
|
|
g[stroke="red"],
|
|
g[stroke="rgb(255,255,0)"] {
|
|
stroke: $magenta-500;
|
|
}
|
|
g[fill="yellow"] + g text,
|
|
g[fill="rgb(255,255,0)"] + g text { // On yellow notes, use black text
|
|
fill: $black;
|
|
}
|
|
g[fill="lime"] + g text { // same for green
|
|
fill: $black;
|
|
}
|
|
}
|
|
|
|
// Recolor Google Draw diagrams for dark theme, including ones using
|
|
// old Ripple color schemes. -------------------------------------------------
|
|
svg[fill="none"] {
|
|
path[fill="#000000"] { // white on black instead of black on white
|
|
fill: $white;
|
|
}
|
|
path[stroke="#000000"] {
|
|
stroke: $white;
|
|
}
|
|
path[fill="#ffffff"] {
|
|
fill: $black;
|
|
}
|
|
path[stroke="#ffffff"] {
|
|
stroke: $black;
|
|
}
|
|
path[fill="#23292f"],
|
|
path[fill="#23282f"] { // old XRP off-blacks: invert to white
|
|
fill: $white;
|
|
}
|
|
path[stroke="#23292f"],
|
|
path[stroke="#23282f"] {
|
|
stroke: $white;
|
|
}
|
|
path[fill="#2c3e50"],
|
|
path[fill="#2b3e51"] { // old dark blue-grays: change to light gray
|
|
fill: $secondary;
|
|
}
|
|
path[stroke="#2c3e50"],
|
|
path[stroke="#2b3e51"] {
|
|
stroke: $secondary;
|
|
}
|
|
path[fill="#1c2835"] { // old 90% gray; change to 10%
|
|
fill: $gray-100;
|
|
}
|
|
path[stroke="#1c2835"] {
|
|
stroke: $gray-100;
|
|
}
|
|
path[fill="#21aa47"] { // old green
|
|
fill: $green;
|
|
}
|
|
path[stroke="#21aa47"] {
|
|
stroke: $green;
|
|
}
|
|
path[fill="#e64b3b"] { // old red
|
|
fill: $red;
|
|
}
|
|
path[stroke="#e64b3b"] {
|
|
stroke: $red;
|
|
}
|
|
path[stroke="#27a2db"],
|
|
path[stroke="#00aae4"] { // old primary blues: change to primary green
|
|
stroke: $primary;
|
|
}
|
|
path[fill="#27a2db"],
|
|
path[fill="#00aae4"] {
|
|
fill: $primary;
|
|
}
|
|
path[fill="#e6e7e8"] { // old light gray: change to dark
|
|
fill: $gray-800;
|
|
}
|
|
path[stroke="#e6e7e8"] {
|
|
stroke: $gray-800;
|
|
}
|
|
path[stroke="#ffbf27"] { // old yellow-orange: change to red-purple
|
|
stroke: $red-purple-500; // (to complement green instead of blue)
|
|
}
|
|
path[fill="#00ff00"] { // standard "green"
|
|
fill: $green;
|
|
}
|
|
path[stroke="#00ff00"] {
|
|
stroke: $green;
|
|
}
|
|
path[fill="#ff00ff"] { // standard "magenta"
|
|
fill: $magenta;
|
|
}
|
|
path[stroke="#ff00ff"] {
|
|
stroke: $magenta;
|
|
}
|
|
|
|
linearGradient {
|
|
// White Box Top gradient: darken to dark gray
|
|
stop[stop-color="#ffffff"] {
|
|
stop-color: $gray-700;
|
|
}
|
|
stop[stop-color="#e6e7e8"] { // old gray-100
|
|
stop-color: $gray-800;
|
|
}
|
|
|
|
// White Box Side gradient: darken to near black
|
|
stop[stop-color="#dbdcdd"] { // old gray-200
|
|
stop-color: $black;
|
|
}
|
|
stop[stop-color="#b1b3b5"] { // old gray-300
|
|
stop-color: $gray-900;
|
|
}
|
|
|
|
// Primary Blue Side gradient: change to green
|
|
stop[stop-color="#29a1da"] {
|
|
stop-color: $green-600;
|
|
}
|
|
stop[stop-color="#2789b9"] {
|
|
stop-color: $green-400;
|
|
}
|
|
|
|
// Primary Blue Top gradient: change to green
|
|
stop[stop-color="#6bc1ec"] {
|
|
stop-color: $green-200;
|
|
}
|
|
stop[stop-color="#8ad6f4"] {
|
|
stop-color: $green-300;
|
|
}
|
|
|
|
// Secondary Y-O Top gradient: change to red-purple
|
|
stop[stop-color="#fab913"] {
|
|
stop-color: $red-purple-200;
|
|
}
|
|
stop[stop-color="#fad26b"] {
|
|
stop-color: $red-purple-300;
|
|
}
|
|
|
|
// Secondary Y-O Side gradient: change to red-purple
|
|
stop[stop-color="#f8a136"] {
|
|
stop-color: $red-purple-400;
|
|
}
|
|
stop[stop-color="#f7931a"] {
|
|
stop-color: $red-purple-600;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Less significant tweaks to color schemes for diagrams in light mode
|
|
// Recolor UMLet diagrams for dark theme -------------------------------------
|
|
html.light {
|
|
svg[fill="black"] {
|
|
|
|
g[fill="blue"] {
|
|
fill: $blue-700;
|
|
}
|
|
g[stroke="blue"] {
|
|
stroke: $blue-500;
|
|
}
|
|
g[fill="rgb(120,120,120)"] {
|
|
fill: $gray-700;
|
|
}
|
|
g[stroke="rgb(120,120,120)"] {
|
|
stroke: $gray-700;
|
|
}
|
|
g[fill="rgb(200,200,200)"] {
|
|
fill: $gray-400;
|
|
}
|
|
g[fill="rgb(70,70,70)"] {
|
|
fill: $gray-700;
|
|
}
|
|
g[stroke="rgb(70,70,70)"] {
|
|
stroke: $gray-700;
|
|
}
|
|
g[fill="rgb(29,180,255)"] { // old Ripple blue.
|
|
fill: $blue-500;
|
|
}
|
|
g[stroke="rgb(29,180,255)"] {
|
|
stroke: $blue-700;
|
|
}
|
|
rect[stroke="rgb(245,247,249)"] { // old off-white.
|
|
stroke: $gray-050;
|
|
}
|
|
g[fill="lime"],
|
|
g[fill="rgb(0,255,0)"] { // standard green.
|
|
fill: $green-400; // lighten backgrounds a little
|
|
}
|
|
g[stroke="lime"] ,
|
|
g[stroke="rgb(0,255,0)"]{
|
|
stroke: $green-700; // darken strokes
|
|
}
|
|
g[fill="yellow"],
|
|
g[fill="rgb(255,255,0)"] {
|
|
fill: $yellow-300; // lighten up yellow BGs a little
|
|
}
|
|
g[fill="red"],
|
|
g[fill="rgb(255,255,0)"] { // magenta-500 is our closest shade to pure red
|
|
fill: $magenta-400; // ... but let's lighten it a little as a bg
|
|
}
|
|
g[stroke="red"],
|
|
g[stroke="rgb(255,255,0)"] {
|
|
stroke: $magenta-500;
|
|
}
|
|
}
|
|
|
|
// Recolor Figma diagrams for light mode ------------------------------------
|
|
svg[fill="none"] {
|
|
rect[fill="#111112"] {
|
|
fill: $light-bg;
|
|
}
|
|
path[fill="white"] {
|
|
fill: $black;
|
|
}
|
|
path[fill="#343437"] {
|
|
fill: $gray-300;
|
|
}
|
|
path[fill="#A2A2A4"],
|
|
rect[fill="#A2A2A4"],
|
|
ellipse[fill="#A2A2A4"] {
|
|
fill: $gray-600;
|
|
}
|
|
path[fill="#232325"] {
|
|
fill: $gray-200;
|
|
}
|
|
path[fill="#F5F5F7"] {
|
|
fill: $gray-900;
|
|
}
|
|
path[stroke="#F5F5F7"] {
|
|
stroke: $gray-900;
|
|
}
|
|
path[stroke="#FF198B"] {
|
|
// slightly darken up this magenta for more contrast in light mode
|
|
stroke: $magenta-700;
|
|
}
|
|
|
|
linearGradient stop[stop-color="#F5F5F7"] {
|
|
stop-color: $gray-900;
|
|
}
|
|
linearGradient stop[stop-color="#C1C1C2"] {
|
|
stop-color: $gray-700;
|
|
}
|
|
}
|
|
}
|