mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-02-22 20:39:40 +01:00
Optimized CSS for Mastodon
This commit is contained in:
parent
c7901949cc
commit
fcac18f77f
@ -6,15 +6,15 @@ global_theming:
|
||||
base: "#001f3f"
|
||||
|
||||
# Sucess Color
|
||||
success: "#B2D3B2"
|
||||
success: "#B2D3B2"
|
||||
# As the warning color – a light brown (earth)
|
||||
warning: "#D2B48C"
|
||||
warning: "#D2B48C"
|
||||
# For error messages (standard red)
|
||||
error: "#DC3545"
|
||||
error: "#DC3545"
|
||||
# As the info color – a very light blue (symbolizing the sky)
|
||||
info: "#F0F8FF"
|
||||
info: "#F0F8FF"
|
||||
filters:
|
||||
saturation_change: 50
|
||||
saturation_change: 0
|
||||
hue_shift: 0
|
||||
|
||||
# Global Theming is default enabled for all roles
|
||||
|
||||
@ -196,92 +196,6 @@ HINT:
|
||||
--pf-v5-global--palette--black-900: var(--color-10); /* #151515 */
|
||||
--pf-v5-global--palette--black-1000: var(--color-05); /* #030303 */
|
||||
|
||||
/* --- Blue Palette --- */
|
||||
--pf-v5-global--palette--blue-50: var(--color-98); /* #e7f1fa */
|
||||
--pf-v5-global--palette--blue-100: var(--color-95); /* #bee1f4 */
|
||||
--pf-v5-global--palette--blue-200: var(--color-85); /* #73bcf7 */
|
||||
--pf-v5-global--palette--blue-300: var(--color-75); /* #2b9af3 */
|
||||
--pf-v5-global--palette--blue-400: var(--color-65); /* #06c */
|
||||
--pf-v5-global--palette--blue-500: var(--color-40); /* #004080 */
|
||||
--pf-v5-global--palette--blue-600: var(--color-30); /* #002952 */
|
||||
--pf-v5-global--palette--blue-700: var(--color-10); /* #001223 */
|
||||
|
||||
/* --- Cyan Palette --- */
|
||||
--pf-v5-global--palette--cyan-50: var(--color-98); /* #f2f9f9 */
|
||||
--pf-v5-global--palette--cyan-100: var(--color-85); /* #a2d9d9 */
|
||||
--pf-v5-global--palette--cyan-200: var(--color-75); /* #73c5c5 */
|
||||
--pf-v5-global--palette--cyan-300: var(--color-65); /* #009596 */
|
||||
--pf-v5-global--palette--cyan-400: var(--color-40); /* #005f60 */
|
||||
--pf-v5-global--palette--cyan-500: var(--color-30); /* #003737 */
|
||||
--pf-v5-global--palette--cyan-600: var(--color-20); /* #002323 */
|
||||
--pf-v5-global--palette--cyan-700: var(--color-10); /* #000f0f */
|
||||
|
||||
/* --- Gold Palette --- */
|
||||
--pf-v5-global--palette--gold-50: var(--color-98); /* #fdf7e7 */
|
||||
--pf-v5-global--palette--gold-100: var(--color-90); /* #f9e0a2 */
|
||||
--pf-v5-global--palette--gold-200: var(--color-80); /* #f6d173 */
|
||||
--pf-v5-global--palette--gold-300: var(--color-70); /* #f4c145 */
|
||||
--pf-v5-global--palette--gold-400: var(--color-60); /* #f0ab00 */
|
||||
--pf-v5-global--palette--gold-500: var(--color-50); /* #c58c00 */
|
||||
--pf-v5-global--palette--gold-600: var(--color-40); /* #795600 */
|
||||
--pf-v5-global--palette--gold-700: var(--color-30); /* #3d2c00 */
|
||||
|
||||
/* --- Green Palette --- */
|
||||
--pf-v5-global--palette--green-50: var(--color-98); /* #f3faf2 */
|
||||
--pf-v5-global--palette--green-100: var(--color-85); /* #bde5b8 */
|
||||
--pf-v5-global--palette--green-200: var(--color-75); /* #95d58e */
|
||||
--pf-v5-global--palette--green-300: var(--color-65); /* #6ec664 */
|
||||
--pf-v5-global--palette--green-400: var(--color-60); /* #5ba352 */
|
||||
--pf-v5-global--palette--green-500: var(--color-50); /* #3e8635 */
|
||||
--pf-v5-global--palette--green-600: var(--color-40); /* #1e4f18 */
|
||||
--pf-v5-global--palette--green-700: var(--color-20); /* #0f280d */
|
||||
|
||||
/* --- Light Blue Palette --- */
|
||||
--pf-v5-global--palette--light-blue-100: var(--color-95); /* #beedf9 */
|
||||
--pf-v5-global--palette--light-blue-200: var(--color-85); /* #7cdbf3 */
|
||||
--pf-v5-global--palette--light-blue-300: var(--color-75); /* #35caed */
|
||||
--pf-v5-global--palette--light-blue-400: var(--color-65); /* #00b9e4 */
|
||||
--pf-v5-global--palette--light-blue-500: var(--color-50); /* #008bad */
|
||||
--pf-v5-global--palette--light-blue-600: var(--color-40); /* #005c73 */
|
||||
--pf-v5-global--palette--light-blue-700: var(--color-20); /* #002d39 */
|
||||
|
||||
/* --- Light Green Palette --- */
|
||||
--pf-v5-global--palette--light-green-100: var(--color-95); /* #e4f5bc */
|
||||
--pf-v5-global--palette--light-green-200: var(--color-85); /* #c8eb79 */
|
||||
--pf-v5-global--palette--light-green-300: var(--color-75); /* #ace12e */
|
||||
--pf-v5-global--palette--light-green-400: var(--color-65); /* #92d400 */
|
||||
--pf-v5-global--palette--light-green-500: var(--color-50); /* #6ca100 */
|
||||
--pf-v5-global--palette--light-green-600: var(--color-40); /* #486b00 */
|
||||
--pf-v5-global--palette--light-green-700: var(--color-20); /* #253600 */
|
||||
|
||||
/* --- Orange Palette --- */
|
||||
--pf-v5-global--palette--orange-50: var(--color-98); /* #fff6ec */
|
||||
--pf-v5-global--palette--orange-100: var(--color-85); /* #f4b678 */
|
||||
--pf-v5-global--palette--orange-200: var(--color-75); /* #ef9234 */
|
||||
--pf-v5-global--palette--orange-300: var(--color-65); /* #ec7a08 */
|
||||
--pf-v5-global--palette--orange-400: var(--color-50); /* #c46100 */
|
||||
--pf-v5-global--palette--orange-500: var(--color-40); /* #8f4700 */
|
||||
--pf-v5-global--palette--orange-600: var(--color-30); /* #773d00 */
|
||||
--pf-v5-global--palette--orange-700: var(--color-20); /* #3b1f00 */
|
||||
|
||||
/* --- Purple Palette --- */
|
||||
--pf-v5-global--palette--purple-50: var(--color-98); /* #f2f0fc */
|
||||
--pf-v5-global--palette--purple-100: var(--color-90); /* #cbc1ff */
|
||||
--pf-v5-global--palette--purple-200: var(--color-80); /* #b2a3ff */
|
||||
--pf-v5-global--palette--purple-300: var(--color-70); /* #a18fff */
|
||||
--pf-v5-global--palette--purple-400: var(--color-60); /* #8476d1 */
|
||||
--pf-v5-global--palette--purple-500: var(--color-50); /* #6753ac */
|
||||
--pf-v5-global--palette--purple-600: var(--color-40); /* #40199a */
|
||||
--pf-v5-global--palette--purple-700: var(--color-20); /* #1f0066 */
|
||||
|
||||
/* --- Red Palette --- */
|
||||
--pf-v5-global--palette--red-50: var(--color-98); /* #faeae8 */
|
||||
--pf-v5-global--palette--red-100: var(--color-70); /* #c9190b */
|
||||
--pf-v5-global--palette--red-200: var(--color-50); /* #a30000 */
|
||||
--pf-v5-global--palette--red-300: var(--color-40); /* #7d1007 */
|
||||
--pf-v5-global--palette--red-400: var(--color-30); /* #470000 */
|
||||
--pf-v5-global--palette--red-500: var(--color-20); /* #2c0000 */
|
||||
|
||||
/* --- White --- */
|
||||
--pf-v5-global--palette--white: var(--color-99);
|
||||
|
||||
@ -337,23 +251,6 @@ HINT:
|
||||
--pf-v5-global--custom-color--200: var(--color-65);
|
||||
--pf-v5-global--custom-color--300: var(--color-30);
|
||||
|
||||
/* --- Success Colors --- */
|
||||
--pf-v5-global--success-color--100: var(--color-50);
|
||||
--pf-v5-global--success-color--200: var(--color-40);
|
||||
|
||||
/* --- Info Colors --- */
|
||||
--pf-v5-global--info-color--100: var(--color-75);
|
||||
--pf-v5-global--info-color--200: var(--color-30);
|
||||
|
||||
/* --- Warning Colors --- */
|
||||
--pf-v5-global--warning-color--100: var(--color-60);
|
||||
--pf-v5-global--warning-color--200: var(--color-40);
|
||||
|
||||
/* --- Danger Colors --- */
|
||||
--pf-v5-global--danger-color--100: var(--color-70);
|
||||
--pf-v5-global--danger-color--200: var(--color-50);
|
||||
--pf-v5-global--danger-color--300: var(--color-30);
|
||||
|
||||
/* --- Link Colors --- */
|
||||
--pf-v5-global--link--Color: var(--color-65);
|
||||
--pf-v5-global--link--Color--hover: var(--color-40);
|
||||
@ -533,8 +430,33 @@ HINT:
|
||||
}
|
||||
|
||||
/** Mastodon Overrides **/
|
||||
:root{
|
||||
--surface-variant-background-color: var(--color-80);
|
||||
div#mastodon, div#admin-wrapper {
|
||||
/* Dropdown */
|
||||
--dropdown-border-color: var(--color-35);
|
||||
--dropdown-background-color: rgba(var(--color-rgb-03), 0.9);
|
||||
--dropdown-shadow: 0 20px 25px -5px rgba(var(--color-rgb-01), 0.25),
|
||||
0 8px 10px -6px rgba(var(--color-rgb-01), 0.25);
|
||||
|
||||
/* Modal */
|
||||
--modal-background-color: rgba(var(--color-rgb-03), 0.7);
|
||||
--modal-background-variant-color: rgba(var(--color-rgb-05), 0.7);
|
||||
--modal-border-color: var(--color-35);
|
||||
|
||||
/* Background */
|
||||
--background-border-color: var(--color-82);
|
||||
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
|
||||
--background-color: var(--color-93);
|
||||
--background-color-tint: rgba(var(--color-rgb-03), 0.9);
|
||||
|
||||
/* Surface */
|
||||
--surface-background-color: var(--color-90);
|
||||
--surface-variant-background-color: var(--color-89);
|
||||
--surface-variant-active-background-color: var(--color-35);
|
||||
--on-surface-color: rgba(var(--color-rgb-05), 0.5);
|
||||
|
||||
/* Media & Overlay */
|
||||
--media-outline-color: rgba(var(--color-rgb-99), 0.15);
|
||||
--overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-rgb-01), 0.25));
|
||||
}
|
||||
|
||||
/* Modal Overwrittes */
|
||||
@ -719,11 +641,6 @@ h1, h2, h3, h4, h5, h6, p{
|
||||
color: var(--color-40) !important;
|
||||
}
|
||||
|
||||
/* Ensure the button itself uses the light text color. Occurred in Mastodon */
|
||||
button.icon-button {
|
||||
color: var(--color-99) !important;
|
||||
}
|
||||
|
||||
/* Keycloak Header */
|
||||
div#app header, div#app header *{
|
||||
background-color: var(--color-60) !important;
|
||||
@ -741,16 +658,6 @@ div#app header, div#app header *{
|
||||
background-color: var(--color-90) !important;
|
||||
}
|
||||
|
||||
|
||||
/** Mastodon Specific **/
|
||||
div#mastodon div.compose-panel div.compose-form__highlightable{
|
||||
background-color: var(--color-90) !important;
|
||||
}
|
||||
|
||||
div#mastodon strong{
|
||||
color: var(--color-40) !important;
|
||||
}
|
||||
|
||||
/** Nextcloud specific **/
|
||||
html.ng-csp header#header{
|
||||
color: var(--color-90) !important;
|
||||
@ -765,6 +672,38 @@ html.ng-csp div#postsetupchecks ul.info{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
div#mastodon .column-link{
|
||||
color: var(--color-55);
|
||||
}
|
||||
|
||||
div#mastodon .column-back-button {
|
||||
color: var(--color-58);
|
||||
}
|
||||
|
||||
div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
|
||||
background-color: var(--color-89);
|
||||
color: var(--color-19);
|
||||
}
|
||||
|
||||
div#mastodon .status-card__title, div#mastodon .display-name strong{
|
||||
color: var(--color-33);
|
||||
}
|
||||
|
||||
div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
|
||||
color: var(--color-29);
|
||||
}
|
||||
div#mastodon .dropdown-button{
|
||||
border: 1px solid #8c8dff;
|
||||
}
|
||||
|
||||
div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
|
||||
background-color: var(--color-71);
|
||||
}
|
||||
|
||||
.compose-form__actions .icon-button {
|
||||
color: var(--color-28);
|
||||
}
|
||||
|
||||
/** OpenProject **/
|
||||
header.op-app-header{
|
||||
background-color: var(--color-40) !important;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user