#radial-menu {
--color-text-primary: #fff; --color-bg-dark: #1c1d28; --color-text-disabled: #888994; --color-element-bg: #eaeaea; --color-red: #f85212; --color-green: #78ff10; --color-blue: #0c6be7; --color-yellow: #fc0; --font-number: "Ruda", sans-serif; } #radial-menu .button { background: var(--color-element-bg) !important; border: 0px; } #radial-menu .button.button-1 { border-radius: 0px 0px 25px 25px; } #radial-menu .button.button-2 { border-radius: 25px 25px 0px 0px; } #radial-menu .button.button-1, #radial-menu .button.button-2 { box-shadow: 0px 0px 5px var(--color-text-disabled); top: 150px !important; left: -60px; } #radial-menu .button.button-2 { top: 111px !important; } #radial-menu .button.button-1 { top: 33px; } #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 { left: -60px; } #radial-menu .button.button-3 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-green), inset 0px 0px 10px var(--color-green), inset 0px 0px 15px var(--color-green) !important; top: 15px; } #radial-menu .button.button-4 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-blue), inset 0px 0px 10px var(--color-blue), inset 0px 0px 15px var(--color-blue) !important; top: 60px; z-index: 1; } #radial-menu .button.button-5 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-red), inset 0px 0px 10px var(--color-red), inset 0px 0px 15px var(--color-red) !important; top: -30px; z-index: 1; } #radial-menu .button.button-1 div.inner, #radial-menu .button.button-2 div.inner { margin-top: 2px; } #radial-menu .button div.inner span { font-size: 24px; } #radial-menu .markermenu { background: var(--color-element-bg) !important; box-shadow: 0px 0px 5px var(--color-text-disabled); } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { border: 5px; } #radial-menu .popupvalue { position: absolute; top: 5px; left: 45px; width: 55px; height: 30px; z-index: 1005 } #radial-menu .popupvalue input { width: 100%; font-size: 16px } #radial-menu { position: fixed; top: 380px !important; left: 80px !important; } #radial-menu .markermenu.open { width: 268px; height: 265px; border-radius: 15px; } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { border: 5px; } #radial-menu .markermenu .markericon.active, #radial-menu .markermenu .markercolor.active { outline: 2px dashed var(--color-yellow); outline-offset: -2px; border: 0px; background-color: var(--color-yellow); border-radius: 5px; } #radial-menu .markermenu .markercolor.dead { top: -2px; } #radial-menu .button.button-1:after { position: relative; content: ""; font-size: 24px; z-index: 9999 !important; top: -138px; left: -19px; border-radius: 25px 25px 25px 25px; padding: 3px; text-shadow: 0px 0px 2px #000, 0px 0px 5px #000; color: white; } #radial-menu .button.button-2:after { position: relative; content: "❤️"; font-size: 24px; z-index: -1 !important; top: -138px; left: -19px; border-radius: 25px 25px 25px 25px; padding: 3px; text-shadow: 0px 0px 2px #000, 0px 0px 5px #000; color: white; } #radial-menu .button.button-3:after { position: relative; content: "️"; font-size: 24px; z-index: 9999 !important; top: -90px; left: -15px; border-radius: 25px 25px 25px 25px; padding: 3px; text-shadow: 0px 0px 2px #000, 0px 0px 5px #000; color: white; }
That is what i'm talking about.
It is your code with shadows and z-indexes.