@ryusei/code
Version:
<div align="center"> <a href="https://code.ryuseijs.com"> <img alt="RyuseiCode" src="https://code.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
1 lines • 12.2 kB
CSS
.ryuseicode__background{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:0}.ryuseicode__body{flex:1 1 auto;height:100%;max-height:inherit;min-height:inherit;position:relative}.ryuseicode__button{align-items:center;background:#3d4e5e;border:1px solid transparent;border-radius:3px;box-sizing:border-box;color:#a9c7e3;display:inline-flex;font-family:inherit;height:2em;justify-content:center;margin:.3em .3em .3em 0;min-width:3em;outline:0;padding:0 1em;transition:color .15s ease,background .15s ease;vertical-align:middle}.ryuseicode__button:not(:disabled){cursor:pointer}.ryuseicode__button:not(:disabled):not(.is-active):hover{background:#647788;color:#a9c7e3}.ryuseicode__button:not(:disabled).is-active:hover{background:#5fbef5;color:#4a5c6d}.ryuseicode__button:focus{border:1px solid #a9c7e3}.ryuseicode__button:disabled{opacity:.5}.ryuseicode__button:last-child{margin-right:0}.ryuseicode__button.is-active{background:#4a5c6d;color:#5fbef5}.ryuseicode__button--icon{background:#3d4e5e;min-width:auto;padding:0;width:2em}.ryuseicode__button--icon svg{height:1.1em;width:1.1em}.ryuseicode__caret{-webkit-animation:ryuseicode-blink 1.1s step-end infinite;animation:ryuseicode-blink 1.1s step-end infinite;border-left:2px solid #93aec7;box-sizing:border-box;display:none;height:1.5em;pointer-events:none;position:absolute;width:0;z-index:2}.ryuseicode__caret.is-active{display:block}@-webkit-keyframes ryuseicode-blink{50%{opacity:0}}@keyframes ryuseicode-blink{50%{opacity:0}}.ryuseicode__container{display:flex;min-height:inherit}.ryuseicode__context-menu{background:#2b3742;border:1px solid #303f4d;border-radius:4px;box-shadow:0 0 10px 4px rgba(0,0,0,.15);color:#bdd7f0;display:none;min-width:18em;overflow:hidden;padding:0;position:absolute;z-index:1}.ryuseicode__context-menu.is-active{display:block;pointer-events:auto}.ryuseicode__context-menu__list{border-bottom:1px solid #303f4d;margin:0;padding:0}.ryuseicode__context-menu__list:last-child{border:0}.ryuseicode__context-menu__item{list-style:none}.ryuseicode__context-menu .ryuseicode__context-menu__button{background:transparent;border:0;border-radius:0;color:inherit;font-size:.9em;height:auto;justify-content:space-between;margin:0;padding:.5em 1em;transition:none;width:100%}.ryuseicode__context-menu .ryuseicode__context-menu__button:not(:disabled):not(.is-active):focus,.ryuseicode__context-menu .ryuseicode__context-menu__button:not(:disabled):not(.is-active):hover{background:#5fbef5;color:#303f4d}.ryuseicode__context-menu .ryuseicode__context-menu__button:focus{border:0}.ryuseicode__context-menu .ryuseicode__context-menu__button:disabled{opacity:.5}.ryuseicode__editor{box-sizing:border-box;cursor:text;flex:1 1 auto;font-family:SFMono-Regular,Consolas,monospace;line-height:1.5;min-height:100%;padding:1em 0;position:relative;z-index:0}.ryuseicode__editor ::-moz-selection{color:inherit}.ryuseicode__editor ::selection{color:inherit}.ryuseicode.is-initialized:not(.is-mobile) .ryuseicode__editor ::-moz-selection{background:transparent}.ryuseicode.is-initialized:not(.is-mobile) .ryuseicode__editor ::selection{background:transparent}.ryuseicode__line{font-feature-settings:"liga" 0,"calt" 0;font-kerning:none;height:1.5em;letter-spacing:0;padding:0 1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.ryuseicode__line{height:auto}}.ryuseicode__line.is-preserved{height:0;opacity:0}.ryuseicode__line:empty{height:0;visibility:hidden}.ryuseicode__line code{font-family:inherit;pointer-events:auto}.ryuseicode.has-gutter .ryuseicode__line{padding-left:5px}.ryuseicode__lines{border:0;caret-color:transparent;font-kerning:normal;letter-spacing:0;margin:0;outline:0;position:relative;transform:translateZ(0);-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:pre;z-index:1}@supports (overflow-anchor:none){.ryuseicode__lines{overflow-anchor:none}}.ryuseicode.is-mobile .ryuseicode__lines{caret-color:#93aec7}.ryuseicode__markers--selection .ryuseicode__marker{background:#2f4d61;z-index:1}.ryuseicode__markers--match .ryuseicode__marker{background:rgba(43,189,143,.3);border:0;border-radius:2px;z-index:2}.ryuseicode__markers--active-match .ryuseicode__marker{background:rgba(43,189,143,.3);border:1px solid #93aec7;border-radius:2px;z-index:2}.ryuseicode__markers--indent .ryuseicode__marker{background:transparent;border-right:1px solid #303f4d;z-index:3}.ryuseicode__markers--brackets .ryuseicode__marker{background:rgba(184,199,84,.3);border:0;border-radius:2px}.ryuseicode__marker{background:rgba(248,135,146,.3);box-sizing:border-box;min-height:1.5em;position:absolute;z-index:1}.ryuseicode.is-mobile .ryuseicode__markers--selection{display:none}.ryuseicode__icon,.ryuseicode__input{vertical-align:middle}.ryuseicode__input{background:#3d4e5e;border:1px solid transparent;border-radius:3px;box-sizing:border-box;color:#bdd7f0;font-family:inherit;height:2em;margin:.3em .3em .3em 0;max-width:90%;outline:0;padding:0 .5em;width:20em}.ryuseicode__input:focus{background:#3d4e5e;border:1px solid #a9c7e3}.ryuseicode__input:last-child{margin-right:0}.ryuseicode__input::-moz-placeholder{color:#7d95ab}.ryuseicode__input:-ms-input-placeholder{color:#7d95ab}.ryuseicode__input::placeholder{color:#7d95ab}.ryuseicode__overlay{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.ryuseicode__overlay.is-active{pointer-events:auto}.ryuseicode__placeholder{color:#7d95ab;display:none;left:0;padding:1em 1.5em;position:absolute;top:0;z-index:1}.ryuseicode.is-empty .ryuseicode__placeholder{display:block}.ryuseicode.has-gutter .ryuseicode__placeholder{padding-left:5px}.ryuseicode{color:#bdd7f0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Segoe UI,sans-serif;font-size:14px;letter-spacing:0;position:relative;text-align:left;touch-action:none}.ryuseicode ::-moz-selection{background:#3f7392}.ryuseicode ::selection{background:#3f7392}.ryuseicode__scroller{-ms-overflow-style:none;box-sizing:border-box;height:100%;max-height:inherit;min-height:inherit;overflow:hidden;position:relative;width:100%;z-index:0}@supports (scrollbar-width:none){.ryuseicode__scroller{scrollbar-width:none}}.ryuseicode__scroller::-webkit-scrollbar{height:0;width:0}.ryuseicode.is-initialized .ryuseicode__scroller{overflow:auto}.ryuseicode__scrollbars{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.ryuseicode__scrollbar{box-sizing:border-box;opacity:0;position:absolute;transition:opacity .1s linear;visibility:hidden}.ryuseicode__scrollbar:before{background:rgba(100,119,136,.8);border-radius:5px;contain:strict;content:"";display:block;transition:background-color .1s ease}.ryuseicode__scrollbar--vertical{min-height:64px;padding:12px 5px;right:0;top:0}.ryuseicode__scrollbar--vertical:before{height:100%;width:8px}.ryuseicode__scrollbar--horizontal{bottom:0;left:0;min-width:64px;padding:5px 12px}.ryuseicode__scrollbar--horizontal:before{height:8px;width:100%}.ryuseicode__scrollbar.is-active{opacity:1;pointer-events:auto;visibility:visible}.ryuseicode__scrollbar.is-dragging:before{background:#5fbef5}.ryuseicode__scrollbar:hover:before{background:rgba(95,190,245,.8)}.ryuseicode__source{display:none}.rc__keyword{color:#5fbef5}.rc__constant,.rc__symbol{color:#f88792}.rc__comment{color:#7b92a8}.rc__tag{color:#5fbef5}.rc__selector{color:#2abac4}.rc__atrule{color:#f88792}.rc__attr,.rc__prop{color:#549bf7}.rc__value{color:#b8c754}.rc__variable{color:#549bf7}.rc__entity{color:#9a68f5}.rc__cdata,.rc__prolog{color:#7b92a8}.rc__string{color:#b8c754}.rc__boolean,.rc__number{color:#f88792}.rc__function{color:#2abac4}.rc__class{color:#2bbd8f}.rc__decorator{color:#5d639e}.rc__regexp{color:#b8c754}.rc__operator{color:#549bf7}.rc__bracket,.rc__delimiter{color:#a9c7e3}.ryuseicode__view{background:#1f272f;display:flex;flex-direction:column;height:100%;max-height:inherit;min-height:inherit;overflow:hidden;position:relative;z-index:0}.ryuseicode__active-line{background:rgba(43,55,66,.5);display:none;height:1.5em;position:absolute;width:100%}.ryuseicode__active-line.is-active{display:block}.ryuseicode__dialog{background:#2b3742;border:0;border-radius:4px;box-shadow:0 0 10px 4px rgba(0,0,0,.08);box-sizing:border-box;color:#a9c7e3;left:50%;max-width:30em;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .1s ease;visibility:hidden;width:95%;z-index:2}.ryuseicode__dialog.is-active{opacity:1;pointer-events:auto;visibility:visible}.ryuseicode__dialog__group{position:relative}.ryuseicode__dialog__close{background:transparent;margin:0;position:absolute;right:8px;top:8px}.ryuseicode__dialog__header{border-bottom:1px solid #303f4d;padding:8px 3em 10px 16px}.ryuseicode__dialog__title{border:0;color:#bdd7f0;font-size:1em;font-weight:400;margin:0;padding-top:.2em}.ryuseicode__dialog__body{box-sizing:border-box;font-size:.9em;line-height:1.7;padding:16px}.ryuseicode__dialog__body ul{margin:.5em 0;padding-left:1.5em}.ryuseicode__dialog__body li,.ryuseicode__dialog__body p{margin:.5em 0}.ryuseicode__dialog__body li:first-child,.ryuseicode__dialog__body p:first-child{margin-top:0}.ryuseicode__dialog__body li:last-child,.ryuseicode__dialog__body p:last-child{margin-bottom:0}.ryuseicode__dialog__body em,.ryuseicode__dialog__body strong{font-style:normal;font-weight:400}.ryuseicode__dialog__body strong{color:#f88792}.ryuseicode__dialog__body em{color:#5fbef5}.ryuseicode__dialog__body code{font-family:SFMono-Regular,Consolas,monospace}.ryuseicode__dialog__footer{padding:5px 14px 14px;text-align:right}.ryuseicode__dialog__footer .ryuseicode__button{margin:0 .4em}.ryuseicode__dialog__footer .ryuseicode__button:last-child{margin-right:0}.ryuseicode__gutter{background:#222a33;border-right:1px solid #303f4d;box-sizing:border-box;flex:0 0 auto;font-family:SFMono-Regular,Consolas,monospace;height:100%;min-height:inherit;overflow:hidden;padding:1em 0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.ryuseicode__gutter--sticky{left:0;position:sticky}.ryuseicode__gutter__float{display:table;position:relative;transform:translateZ(0)}.ryuseicode__gutter__row{contain:strict;display:table-row;height:1.5em;line-height:1.5}.ryuseicode__gutter__row:last-child{visibility:hidden}.ryuseicode__gutter__row.is-active{background:#2b3742}.ryuseicode__gutter__row.is-active .ryuseicode__gutter__number{color:#a9c7e3}.ryuseicode__gutter__row.is-active span:first-child{border-left:2px solid #5fbef5}.ryuseicode__gutter__row span{box-sizing:border-box;display:table-cell;padding:0 .7em;vertical-align:middle}.ryuseicode__gutter__row span:first-child{border-left:2px solid transparent;padding-left:calc(.8em - 2px)}.ryuseicode__gutter__row span:last-child{padding-right:.8em}.ryuseicode__gutter__number{color:#7d95ab;font-size:.9em;min-width:1.5em;text-align:right}.ryuseicode__replace{display:none}.ryuseicode__replace.is-active{display:block}.ryuseicode__replace__controls{display:inline-block}.ryuseicode__search__matches{display:inline-block;min-width:5em;text-align:center}.ryuseicode__search__controls{display:inline-block}.ryuseicode__sizer.is-dragging{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.ryuseicode__sizer.is-dragging--vertical{cursor:row-resize}.ryuseicode__sizer.is-dragging--horizontal{cursor:col-resize}.ryuseicode__sizer__bar{background:transparent;pointer-events:auto;position:absolute}.ryuseicode__sizer__bar--vertical{bottom:-4px;cursor:row-resize;height:8px;left:0;width:100%}.ryuseicode__sizer__bar--horizontal{cursor:col-resize;height:100%;right:-4px;top:0;width:8px}.ryuseicode__toolbar{background:#2b3742;box-shadow:0 4px 10px -10px rgba(0,0,0,.4);display:none;flex-shrink:0;justify-content:space-between;overflow:hidden;padding:.15em .5em;position:relative;z-index:2}.ryuseicode__toolbar--sticky{position:sticky;top:0;z-index:1}.ryuseicode__toolbar.is-active{display:flex}.ryuseicode__toolbar__body{flex:1 1 90%;min-width:0}.ryuseicode__toolbar__replace{display:none}.ryuseicode__toolbar__replace.is-active{display:block}.ryuseicode__toolbar span{color:#93aec7;font-size:.9em;padding:0 .4em;vertical-align:middle}