/* cms.css — chrome for the in-page editor. Nothing in here affects the public page except the login button: the rest only applies once the editor has added .cms-editing to . */ .cms-ui, .cms-ui * { font-family: "IBM Plex Mono", ui-monospace, monospace; box-sizing: border-box; } /* --- login button ---------------------------------------------------- */ .cms-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 237, 227, .55); background: rgba(11, 13, 10, .72); border: 1px solid rgba(242, 237, 227, .2); border-radius: 2px; padding: .5rem .85rem; cursor: pointer; opacity: .5; transition: opacity .2s, color .2s, border-color .2s; } .cms-fab:hover, .cms-fab:focus-visible { opacity: 1; color: #F2EDE3; border-color: rgba(242, 237, 227, .45); } /* --- login dialog ---------------------------------------------------- */ .cms-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(8, 10, 7, .82); } .cms-modal__box { width: min(26rem, 100%); background: #12160F; border: 1px solid rgba(242, 237, 227, .18); border-radius: 3px; padding: clamp(1.5rem, 4vw, 2.2rem); color: #F2EDE3; } .cms-modal__title { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 1.5rem; margin: 0 0 .6rem; letter-spacing: -.01em; } .cms-modal__note { font-size: .72rem; line-height: 1.6; letter-spacing: .04em; color: rgba(242, 237, 227, .55); margin: 0 0 1.4rem; } .cms-modal__field { display: block; margin: 0 0 1rem; } .cms-modal__field span { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 237, 227, .6); margin: 0 0 .45rem; } .cms-modal__field input { width: 100%; background: rgba(242, 237, 227, .05); color: #F2EDE3; border: 1px solid rgba(242, 237, 227, .28); border-radius: 2px; padding: .7rem .8rem; font-size: .95rem; } .cms-modal__field input:focus { outline: none; border-color: #D9722F; background: rgba(242, 237, 227, .08); } .cms-modal__row { display: flex; gap: .6rem; align-items: center; margin-top: 1.4rem; } .cms-modal__go, .cms-modal__cancel { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; padding: .75rem 1.4rem; cursor: pointer; border: 1px solid transparent; } .cms-modal__go { background: #D9722F; color: #12160F; border: 0; } .cms-modal__go[disabled] { opacity: .6; cursor: default; } .cms-modal__cancel { background: transparent; color: rgba(242, 237, 227, .7); border-color: rgba(242, 237, 227, .25); } .cms-modal__msg { font-size: .72rem; letter-spacing: .04em; margin: 1rem 0 0; min-height: 1.2em; color: rgba(242, 237, 227, .6); } .cms-modal__msg--err { color: #E9825A; } /* --- editor bar ------------------------------------------------------ */ .cms-bar { position: fixed; left: 1rem; bottom: 1rem; z-index: 110; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem; background: rgba(11, 13, 10, .94); border: 1px solid rgba(242, 237, 227, .22); border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); max-width: calc(100vw - 2rem); } .cms-bar__btn { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 237, 227, .8); background: transparent; border: 1px solid rgba(242, 237, 227, .22); border-radius: 2px; padding: .55rem .9rem; cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .cms-bar__btn:hover:not([disabled]), .cms-bar__btn:focus-visible { color: #12160F; background: #F2EDE3; border-color: #F2EDE3; } .cms-bar__btn--main { color: #12160F; background: #D9722F; border-color: #D9722F; } .cms-bar__btn--quiet { color: rgba(242, 237, 227, .55); } .cms-bar__btn[disabled] { opacity: .45; cursor: default; } .cms-bar__btn[hidden] { display: none; } .cms-bar__status { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 237, 227, .55); padding: 0 .4rem; } .cms-bar__status--ok { color: #8FBF7A; } .cms-bar__status--err { color: #E9825A; } /* --- editable state -------------------------------------------------- */ .cms-editing .cms-editable { outline: 1px dashed rgba(217, 114, 47, .55); outline-offset: 3px; border-radius: 2px; cursor: text; } .cms-editing .cms-editable:focus { outline: 2px solid #D9722F; outline-offset: 3px; background: rgba(217, 114, 47, .06); } .cms-editing .cms-image { outline: 2px dashed rgba(217, 114, 47, .7); outline-offset: -4px; cursor: pointer; } /* the reel pins its panels while scrolling; editing needs the page to sit still, so the hero is released to normal flow */ .cms-editing #reel .plate { pointer-events: auto; } .cms-editing .gal__item figcaption { opacity: 1; position: static; background: rgba(11, 13, 10, .9); padding: .6rem .8rem; pointer-events: auto; } /* --- inline tool clusters -------------------------------------------- */ .cms-tools { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem; background: rgba(11, 13, 10, .9); border-top: 1px solid rgba(242, 237, 227, .15); } .cms-tools--proj { grid-column: 1 / -1; background: rgba(27, 33, 21, .08); border-top: 1px dashed rgba(27, 33, 21, .3); margin-top: .8rem; } .cms-tool { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 237, 227, .8); background: rgba(242, 237, 227, .08); border: 1px solid rgba(242, 237, 227, .2); border-radius: 2px; padding: .4rem .6rem; cursor: pointer; } .cms-tools--proj .cms-tool { color: #1B2115; background: rgba(27, 33, 21, .06); border-color: rgba(27, 33, 21, .3); } .cms-tool:hover, .cms-tool:focus-visible { color: #12160F; background: #F2EDE3; border-color: #F2EDE3; } .gal__tabwrap { display: inline-flex; align-items: center; gap: .25rem; } .cms-tool--add { margin-left: .3rem; } .cms-add { display: inline-block; margin: 1.6rem 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #12160F; background: #D9722F; border: 0; border-radius: 2px; padding: .8rem 1.4rem; cursor: pointer; } .cms-addphoto { break-inside: avoid; border: 1px dashed rgba(242, 237, 227, .3); border-radius: 3px; padding: 1.5rem; margin: 0 0 var(--gal-gap, 1rem); display: flex; align-items: center; justify-content: center; } .cms-addphoto__btn { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 237, 227, .8); background: transparent; border: 1px solid rgba(242, 237, 227, .3); border-radius: 2px; padding: .7rem 1.1rem; cursor: pointer; } .cms-empty { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 237, 227, .5); } /* --- image menu ------------------------------------------------------ */ .cms-menu { position: absolute; z-index: 125; display: flex; flex-direction: column; min-width: 12rem; background: rgba(11, 13, 10, .97); border: 1px solid rgba(242, 237, 227, .25); border-radius: 3px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); } .cms-menu__item { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; text-align: left; color: rgba(242, 237, 227, .85); background: transparent; border: 0; border-bottom: 1px solid rgba(242, 237, 227, .12); padding: .7rem .9rem; cursor: pointer; } .cms-menu__item:last-child { border-bottom: 0; } .cms-menu__item:hover, .cms-menu__item:focus-visible { color: #12160F; background: #F2EDE3; } @media (max-width: 640px) { .cms-bar { left: .5rem; right: .5rem; bottom: .5rem; } .cms-bar__btn { flex: 1 1 auto; } }