tesscodes | Dreamwidth: Contextual Popup Overhaul

Information

Hey guys! As promised, here are overhauls for Dreamwidth's contextual popup in two version: Icons and Text, to match the control strip overhaul. Just like that revamp, these come with in-depth root replacements to make editing your contextual popup into what you want a cinch! Enjoy! ♥

I also forgot to mention on my navstrip overhauls that, like my sticky dropdowns, you are allowed to add this to your layouts with the intent to redistribute them as long as you leave my credit header in the CSS. I've updated the control strips to reflect that!

Contextual Popup: Icons

/* CONTEXTUAL POPUP RESTYLE [ICONS] - TESSISAMESS - 2019 */

:root .ContextualPopup{

/* COLORS */
	--bg: #eee;
	--light-bg: rgba(255,255,255,0.5);
	--text: #000;
	--link: #000;
	--hover: #68B9B9;
	--borders: rgba(0,0,0,0.1);
	--shadow: rgba(0,0,0,0.1);

/* DIMENSIONS */
	--pop-width: 250px;
	--pic-size: 90px;

/* TEXT */
	--font: Open Sans Condensed,helvetica,arial,sans-serif!important;
	--text-size: 12px;
	--case: uppercase;
	--spacing: 1px;
	--icons: Material Icons!important;
	--icon-size: 22px;

}

/* FONTS */

@font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:300;src:local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v13/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuXMRw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');}

/* CONTAINER */

.ui-tooltip{padding:8px;position:absolute;z-index:9999;box-shadow:none;}
* html .ui-tooltip{background-image:none;}
body .ui-tooltip{border:none;}

.ContextualPopup *{box-sizing:border-box;}
.ContextualPopup{width:var(--pop-width);text-align:center;overflow:auto;background:var(--bg);border:1px solid var(--borders)!important;box-shadow:1px 1px 2px 0 var(--shadow);font-family:var(--font);font-size:var(--text-size);}

/* USERPIC  */

.ContextualPopup .Userpic{border:none;float:left;margin:0 10px 0 0;padding:0;}
.ContextualPopup .Userpic a{display:block;line-height:0;padding:5px;margin:0;}
.ContextualPopup .Userpic img{height:auto;width:auto;max-height:var(--pic-size);max-width:var(--pic-size);border:0;margin:0;}

/* INFO */

.ContextualPopup .Actions{line-height:1;font-family:var(--icons);font-size:0;}
.ContextualPopup .Actions ul{list-style:none;margin:0 0 0 var(--pic-size);padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}

.ContextualPopup a{text-decoration:none;display:block;background:var(--light-bg);border:1px solid var(--borders);padding:5px;margin:2px;}
.ContextualPopup a:hover{color:var(--hover);}
.ContextualPopup a:after{font-size:var(--icon-size);}
.ContextualPopup a[href$='org']:after{content:'account_circle';}
.ContextualPopup a[href*='profile']:after{content:'star';}
.ContextualPopup a[href*='compose']:after{content:'sms';}
.ContextualPopup a[href*='access']:after{content:'add_circle';}
.ContextualPopup a[href*='subscribe']:after{content:'rss_feed';}
.ContextualPopup a[href*='ban']:after{content:'not_interested';}

.ContextualPopup .Relation{font-weight:bold;font-size:var(--text-size);line-height:1;margin:0 0 8px 0;text-transform:var(--case);letter-spacing:var(--spacing);}

Contextual Popup: Text

/* CONTEXTUAL POPUP RESTYLE [TEXT] - TESSISAMESS - 2019 */

:root .ContextualPopup{

/* COLORS */
	--bg: #eee;
	--light-bg: rgba(255,255,255,0.5);
	--text: #000;
	--link: #000;
	--hover: #68B9B9;
	--borders: rgba(0,0,0,0.1);
	--shadow: rgba(0,0,0,0.1);

/* DIMENSIONS */
	--pop-width: 120px;
	--pic-size: 100%;

/* TEXT */
	--font: Open Sans Condensed,helvetica,arial,sans-serif!important;
	--text-size: 11px;
	--case: uppercase;
	--spacing: 1px;

}

/* FONTS */

/* CONTAINER */

.ui-tooltip{padding:8px;position:absolute;z-index:9999;box-shadow:none;}
* html .ui-tooltip{background-image:none;}
body .ui-tooltip{border:none;}

/* USERPIC  */

.ContextualPopup .Userpic{border:none;float:none;margin:0;padding:0;}
.ContextualPopup .Userpic a{display:block;line-height:0;padding:5px;margin:0;}
.ContextualPopup .Userpic img{height:auto;width:auto;max-height:var(--pic-size);max-width:var(--pic-size);border:0;margin:0;}

/* INFO */

.ContextualPopup .Actions{line-height:1;}
.ContextualPopup .Actions ul{list-style:none;margin:0;padding:0;}

.ContextualPopup a{text-decoration:none;display:block;background:var(--light-bg);border:1px solid var(--borders);padding:3px;margin:2px 0 0 0;}
.ContextualPopup a:hover{color:var(--hover);}

.ContextualPopup .Relation{font-weight:bold;font-size:var(--text-size);line-height:1;margin:8px 0;}

Terms of Use

♡ Do not remove credit.
♡ You may add this to your layouts with the intent to redistribute them as long as you leave my credit header in the CSS.
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!