/* Contextual toolbar /* ---------------------------------------------------------- */ .gh-toolbar { position: absolute; display: flex; align-items: center; text-align: center; color: color(var(--lightgrey) l(-10%)); background: linear-gradient( color(var(--darkgrey) l(-3%)), color(var(--darkgrey) l(-8%)) ); border-radius: 5px; box-shadow: 0 0 0 1px color(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset; } .gh-toolbar:after { display: block; content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -10px; width: 0; height: 0; border-left: transparent 10px solid; border-right: transparent 10px solid; border-top: color(var(--darkgrey) l(-10%)) 8px solid; } .gh-toolbar.is-link { width: 263px; height: 40px; } .gh-toolbar.is-link input { width: 100%; background-color: transparent; outline: none; border: none; padding:5px; } .gh-toolbar-btn { display: flex; justify-content: center; align-items: center; height: 40px; width: 32px; font-size: 1.6rem; line-height: 40px; transition: text-shadow 0.3s ease; } .gh-toolbar-btn:first-child { width: 43px; padding-left: 8px; } .gh-toolbar-btn:last-child { width: 43px; padding-right: 8px; } .gh-toolbar-btn svg { height: 1.4rem; } .gh-toolbar-btn svg g { stroke-width: 2px; stroke: color(var(--lightgrey) l(-10%)); } .gh-toolbar-btn:hover { color: #fff; cursor: pointer; text-shadow: #000 0 1px 6px; } .gh-toolbar-btn:hover svg g { stroke: #fff; } .gh-toolbar-btn-bold { font-weight: 700; } .gh-toolbar-btn-italic { width: 31px; font-size: 1.7rem; text-indent: -1px; font-style: italic; font-family: Georgia, Times, serif; font-weight: 500; } .gh-toolbar-btn-strike { text-decoration: line-through; font-weight: 400; -webkit-font-smoothing: antialiased; } .gh-toolbar-btn-h1 { font-variant: small-caps; font-weight: 700; -webkit-font-smoothing: antialiased; } .gh-toolbar-btn-h2 { font-weight: 700; font-size: 0.9em; font-variant: small-caps; line-height: 42px; -webkit-font-smoothing: antialiased; } .gh-toolbar-btn-quote { font-size: 4rem; line-height: 62px; font-family: Georgia, Times, serif; -webkit-font-smoothing: antialiased; } .gh-toolbar-divider { height: 40px; width: 1px; margin: 0 9px 0 8px; background: color(var(--darkgrey) l(-10%)); box-shadow: rgba(255,255,255,0.04) 1px 0 0 0; }