/*
_______________________________________
↓ 🔗test-datapad
Rev:
20201111 playing around
20201112 ping
Also see:
🔗test-datapad-postapple-css !!! this is too much :D (does not work, maybe due to line breaks .. an Etherpad bug)
_______________________________________
test-datapad-css
↓ 🔗test-datapad
Rev:
20201111 playing around
20201112 ping
Also see:
🔗test-datapad-postapple-css !!! this is too much :D (does not work, maybe due to line breaks .. an Etherpad bug)
Table of Contents
_______________________________________
*/
¶:root {
¶/* SIMPLE1 ... "testing" sign */
--SIMPLE1: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22><text y=%221em%22 font-size=%2222%22 fill=%22violet%22 stroke=%22red%22 style=%22text-shadow: 0 0 blue; %22>liesispiss</text></svg>") !important;
--SIMPLE1: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22><text y=%221em%22 font-size=%2222%22 fill=%22violet%22 stroke=%22red%22 style=%22text-shadow: 0 0 blue; %22>liesispiss</text></svg>") !important;
¶/* SIMPLE2 ... radial gradient */
--SIMPLE2: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='150' width='500'%3E%3Cdefs%3E%3CradialGradient id='grad1' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255); stop-opacity:0' /%3E%3Cstop offset='100%25' style='stop-color:rgb(0,0,255);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='200' cy='70' rx='85' ry='55' fill='url(%23grad1)' /%3E%3C/svg%3E ") !important;
--SIMPLE2: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='150' width='500'%3E%3Cdefs%3E%3CradialGradient id='grad1' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255); stop-opacity:0' /%3E%3Cstop offset='100%25' style='stop-color:rgb(0,0,255);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='200' cy='70' rx='85' ry='55' fill='url(%23grad1)' /%3E%3C/svg%3E ") !important;
¶/* NICE ... nice alt-rainbow matrioshka egg in egg in egg */
--NICE:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E") !important;
--NICE:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E") !important;
¶/* BLA2 ... ??? */
--BLA2: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+CjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgZmlsbD0iIzliYTdiNCI+PC9yZWN0Pgo8Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI2RlZiI+PC9jaXJjbGU+CjxwYXRoIGQ9Ik0wIDQwIEE0MCA0MCA0NSAwIDAgNDAgMCBBNDAgNDAgMzE1IDAgMCA4MCA0MCBBNDAgNDAgNDUgMCAwIDQwIDgwIEE0MCA0MCAyNzAgMCAwIDAgNDBaIiBmaWxsPSIjOWJhN2I0Ij48L3BhdGg+Cjwvc3ZnPg==") !important;
--BLA2: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+CjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgZmlsbD0iIzliYTdiNCI+PC9yZWN0Pgo8Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI2RlZiI+PC9jaXJjbGU+CjxwYXRoIGQ9Ik0wIDQwIEE0MCA0MCA0NSAwIDAgNDAgMCBBNDAgNDAgMzE1IDAgMCA4MCA0MCBBNDAgNDAgNDUgMCAwIDQwIDgwIEE0MCA0MCAyNzAgMCAwIDAgNDBaIiBmaWxsPSIjOWJhN2I0Ij48L3BhdGg+Cjwvc3ZnPg==") !important;
¶/* ABC ... simple graph: a>b>c */
--ABC: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjhwdCIgaGVpZ2h0PSIyMzZwdCIgdmlld0JveD0iMCAwIDY4IDIzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxnIGlkPSJncmFwaDAiIGNsYXNzPSJncmFwaCIgdHJhbnNmb3JtPSJzY2FsZSguNTgzMyAuNTgzMykgcm90YXRlKDApIHRyYW5zbGF0ZSg0IDQwMCkiPgo8IS0tIGImIzQ1OyZndDtjIC0tPgo8ZyBpZD0iZWRnZTEiIGNsYXNzPSJlZGdlIj4KPHRpdGxlPmItJmd0O2M8L3RpdGxlPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNiZDA0N2MiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLW9wYWNpdHk9IjAuNTMzMzMzIiBkPSJNNTQsLTE0My45N0M1NCwtMTM1LjY4NjQgNTQsLTEyNy4wNjM4IDU0LC0xMTguNTgwMSI+PC9wYXRoPgo8cG9seWdvbiBmaWxsPSIjYmQwNDdjIiBmaWxsLW9wYWNpdHk9IjAuNTMzMzMzIiBzdHJva2U9IiNiZDA0N2MiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLW9wYWNpdHk9IjAuNTMzMzMzIiBwb2ludHM9IjU4LjM3NTEsLTExOC4zMzI4IDU0LC0xMDguMzMyOCA0OS42MjUxLC0xMTguMzMyOCA1OC4zNzUxLC0xMTguMzMyOCI+PC9wb2x5Z29uPgo8L2c+CjwhLS0gYSYjNDU7Jmd0O2IgLS0+CjxnIGlkPSJlZGdlMiIgY2xhc3M9ImVkZ2UiPgo8dGl0bGU+YS0mZ3Q7YjwvdGl0bGU+CjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM4YTk2ZSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2Utb3BhY2l0eT0iMC41MzMzMzMiIGQ9Ik01NCwtMjg3Ljk3QzU0LC0yNzkuNjg2NCA1NCwtMjcxLjA2MzggNTQsLTI2Mi41ODAxIj48L3BhdGg+Cjxwb2x5Z29uIGZpbGw9IiMzOGE5NmUiIGZpbGwtb3BhY2l0eT0iMC41MzMzMzMiIHN0cm9rZT0iIzM4YTk2ZSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2Utb3BhY2l0eT0iMC41MzMzMzMiIHBvaW50cz0iNTguMzc1MSwtMjYyLjMzMjggNTQsLTI1Mi4zMzI4IDQ5LjYyNTEsLTI2Mi4zMzI4IDU4LjM3NTEsLTI2Mi4zMzI4Ij48L3BvbHlnb24+CjwvZz4KPCEtLSBiIC0tPgo8ZyBpZD0ibm9kZTEiIGNsYXNzPSJub2RlIG5vbmUiPgo8dGl0bGU+YjwvdGl0bGU+CjxnIGlkPSJhX25vZGUxX25vbmUiPjxhIHhsaW5rOnRpdGxlPSJiIChpbjogYTsgb3V0OiBjKSIgdGFyZ2V0PSJfYmxhbmsiPgo8ZWxsaXBzZSBmaWxsPSIjYmQwNDdjIiBmaWxsLW9wYWNpdHk9IjAuNjAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iLjQiIGN4PSI1NCIgY3k9Ii0xOTgiIHJ4PSI1NCIgcnk9IjU0Ij48L2VsbGlwc2U+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjU0IiB5PSItMTk0LjMiIGZvbnQtZmFtaWx5PSJUaW1lcyxzZXJpZiIgZm9udC1zaXplPSIxNC4wMCIgZmlsbD0iIzAwMDAwMCI+YjwvdGV4dD4KPC9hPgo8L2c+CjwvZz4KPCEtLSBjIC0tPgo8ZyBpZD0ibm9kZTIiIGNsYXNzPSJub2RlIG5vbmUiPgo8dGl0bGU+YzwvdGl0bGU+CjxnIGlkPSJhX25vZGUyX25vbmUiPjxhIHhsaW5rOnRpdGxlPSJjIChpbjogYikiIHRhcmdldD0iX2JsYW5rIj4KPGVsbGlwc2UgZmlsbD0iIzRkMTBmMSIgZmlsbC1vcGFjaXR5PSIwLjYwMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9Ii40IiBjeD0iNTQiIGN5PSItNTQiIHJ4PSI1NCIgcnk9IjU0Ij48L2VsbGlwc2U+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjU0IiB5PSItNTAuMyIgZm9udC1mYW1pbHk9IlRpbWVzLHNlcmlmIiBmb250LXNpemU9IjE0LjAwIiBmaWxsPSIjMDAwMDAwIj5jPC90ZXh0Pgo8L2E+CjwvZz4KPC9nPgo8IS0tIGEgLS0+CjxnIGlkPSJub2RlMyIgY2xhc3M9Im5vZGUgbm9uZSI+Cjx0aXRsZT5hPC90aXRsZT4KPGcgaWQ9ImFfbm9kZTNfbm9uZSI+PGEgeGxpbms6dGl0bGU9ImEgKG91dDogYikiIHRhcmdldD0iX2JsYW5rIj4KPGVsbGlwc2UgZmlsbD0iIzM4YTk2ZSIgZmlsbC1vcGFjaXR5PSIwLjYwMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9Ii40IiBjeD0iNTQiIGN5PSItMzQyIiByeD0iNTQiIHJ5PSI1NCI+PC9lbGxpcHNlPgo8dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB4PSI1NCIgeT0iLTMzOC4zIiBmb250LWZhbWlseT0iVGltZXMsc2VyaWYiIGZvbnQtc2l6ZT0iMTQuMDAiIGZpbGw9IiMwMDAwMDAiPmE8L3RleHQ+CjwvYT4KPC9nPgo8L2c+CjwvZz4KPC9zdmc+") !important;
}
--ABC: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjhwdCIgaGVpZ2h0PSIyMzZwdCIgdmlld0JveD0iMCAwIDY4IDIzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxnIGlkPSJncmFwaDAiIGNsYXNzPSJncmFwaCIgdHJhbnNmb3JtPSJzY2FsZSguNTgzMyAuNTgzMykgcm90YXRlKDApIHRyYW5zbGF0ZSg0IDQwMCkiPgo8IS0tIGImIzQ1OyZndDtjIC0tPgo8ZyBpZD0iZWRnZTEiIGNsYXNzPSJlZGdlIj4KPHRpdGxlPmItJmd0O2M8L3RpdGxlPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNiZDA0N2MiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLW9wYWNpdHk9IjAuNTMzMzMzIiBkPSJNNTQsLTE0My45N0M1NCwtMTM1LjY4NjQgNTQsLTEyNy4wNjM4IDU0LC0xMTguNTgwMSI+PC9wYXRoPgo8cG9seWdvbiBmaWxsPSIjYmQwNDdjIiBmaWxsLW9wYWNpdHk9IjAuNTMzMzMzIiBzdHJva2U9IiNiZDA0N2MiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLW9wYWNpdHk9IjAuNTMzMzMzIiBwb2ludHM9IjU4LjM3NTEsLTExOC4zMzI4IDU0LC0xMDguMzMyOCA0OS42MjUxLC0xMTguMzMyOCA1OC4zNzUxLC0xMTguMzMyOCI+PC9wb2x5Z29uPgo8L2c+CjwhLS0gYSYjNDU7Jmd0O2IgLS0+CjxnIGlkPSJlZGdlMiIgY2xhc3M9ImVkZ2UiPgo8dGl0bGU+YS0mZ3Q7YjwvdGl0bGU+CjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM4YTk2ZSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2Utb3BhY2l0eT0iMC41MzMzMzMiIGQ9Ik01NCwtMjg3Ljk3QzU0LC0yNzkuNjg2NCA1NCwtMjcxLjA2MzggNTQsLTI2Mi41ODAxIj48L3BhdGg+Cjxwb2x5Z29uIGZpbGw9IiMzOGE5NmUiIGZpbGwtb3BhY2l0eT0iMC41MzMzMzMiIHN0cm9rZT0iIzM4YTk2ZSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2Utb3BhY2l0eT0iMC41MzMzMzMiIHBvaW50cz0iNTguMzc1MSwtMjYyLjMzMjggNTQsLTI1Mi4zMzI4IDQ5LjYyNTEsLTI2Mi4zMzI4IDU4LjM3NTEsLTI2Mi4zMzI4Ij48L3BvbHlnb24+CjwvZz4KPCEtLSBiIC0tPgo8ZyBpZD0ibm9kZTEiIGNsYXNzPSJub2RlIG5vbmUiPgo8dGl0bGU+YjwvdGl0bGU+CjxnIGlkPSJhX25vZGUxX25vbmUiPjxhIHhsaW5rOnRpdGxlPSJiIChpbjogYTsgb3V0OiBjKSIgdGFyZ2V0PSJfYmxhbmsiPgo8ZWxsaXBzZSBmaWxsPSIjYmQwNDdjIiBmaWxsLW9wYWNpdHk9IjAuNjAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iLjQiIGN4PSI1NCIgY3k9Ii0xOTgiIHJ4PSI1NCIgcnk9IjU0Ij48L2VsbGlwc2U+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjU0IiB5PSItMTk0LjMiIGZvbnQtZmFtaWx5PSJUaW1lcyxzZXJpZiIgZm9udC1zaXplPSIxNC4wMCIgZmlsbD0iIzAwMDAwMCI+YjwvdGV4dD4KPC9hPgo8L2c+CjwvZz4KPCEtLSBjIC0tPgo8ZyBpZD0ibm9kZTIiIGNsYXNzPSJub2RlIG5vbmUiPgo8dGl0bGU+YzwvdGl0bGU+CjxnIGlkPSJhX25vZGUyX25vbmUiPjxhIHhsaW5rOnRpdGxlPSJjIChpbjogYikiIHRhcmdldD0iX2JsYW5rIj4KPGVsbGlwc2UgZmlsbD0iIzRkMTBmMSIgZmlsbC1vcGFjaXR5PSIwLjYwMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9Ii40IiBjeD0iNTQiIGN5PSItNTQiIHJ4PSI1NCIgcnk9IjU0Ij48L2VsbGlwc2U+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjU0IiB5PSItNTAuMyIgZm9udC1mYW1pbHk9IlRpbWVzLHNlcmlmIiBmb250LXNpemU9IjE0LjAwIiBmaWxsPSIjMDAwMDAwIj5jPC90ZXh0Pgo8L2E+CjwvZz4KPC9nPgo8IS0tIGEgLS0+CjxnIGlkPSJub2RlMyIgY2xhc3M9Im5vZGUgbm9uZSI+Cjx0aXRsZT5hPC90aXRsZT4KPGcgaWQ9ImFfbm9kZTNfbm9uZSI+PGEgeGxpbms6dGl0bGU9ImEgKG91dDogYikiIHRhcmdldD0iX2JsYW5rIj4KPGVsbGlwc2UgZmlsbD0iIzM4YTk2ZSIgZmlsbC1vcGFjaXR5PSIwLjYwMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9Ii40IiBjeD0iNTQiIGN5PSItMzQyIiByeD0iNTQiIHJ5PSI1NCI+PC9lbGxpcHNlPgo8dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB4PSI1NCIgeT0iLTMzOC4zIiBmb250LWZhbWlseT0iVGltZXMsc2VyaWYiIGZvbnQtc2l6ZT0iMTQuMDAiIGZpbGw9IiMwMDAwMDAiPmE8L3RleHQ+CjwvYT4KPC9nPgo8L2c+CjwvZz4KPC9zdmc+") !important;
}
¶/* ***CONFIG !!! */
background: var(--YELLO) !important;
background: var(--SIMPLE1) !important;
background: var(--SIMPLE2) !important;
background: var(--NICE) !important;
--BG2: var(--BLA2) !important;
background: var(--ABC) !important;
}
background: var(--YELLO) !important;
background: var(--SIMPLE1) !important;
background: var(--SIMPLE2) !important;
background: var(--NICE) !important;
--BG2: var(--BLA2) !important;
background: var(--ABC) !important;
}
¶/* ***RANDOM */
/*
background-size: 80px !important;
background-size:cover !important;
background-repeat: repeat !important;
*/
/*
background-size: 80px !important;
background-size:cover !important;
background-repeat: repeat !important;
*/