diff --git a/src/index.html b/src/index.html index 61c68b6..7ff6f4d 100644 --- a/src/index.html +++ b/src/index.html @@ -29,6 +29,16 @@ .fr { float: right; } + .caret { + display: inline-block; + width: 0; + height: 0; + border: 6px solid transparent; + border-top-color: currentColor; + position: relative; + top: 5px; + margin-left: 7px; + } .main-container { position: absolute; left: 0; right: 0; @@ -59,9 +69,9 @@ height: 33%; overflow: hidden; position: relative; - animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s; - animation: pop-in 0.4s ease forwards 0.2s; - opacity: 0; + /*animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;*/ + /*animation: pop-in 0.4s ease forwards 0.2s;*/ + /*opacity: 0;*/ } .layout-2 .code-wrap { height: auto; @@ -74,17 +84,12 @@ animation-delay: 0.4s; } - .code-wrap:after { - content: attr(data-type); - text-transform: uppercase; - font-size: 65px; - display: block; - position: absolute; - top: 4px; - color: rgba(255,255,255,0.04); - left: 52px; - z-index: 3; - pointer-events: none; + .code-wrap__header { + padding: 5px 20px; + background: rgba(0,0,0,0.55); + color: #888; + border-bottom: 1px solid rgba(0,0,0,0.3); + font-weight: bold; } @keyframes pop-in { from { transform: scale(0.9); opacity: 0; } @@ -94,7 +99,7 @@ /* Codemirror */ .Codemirror { width: 100%; - height: 100%; + height: calc(100% - 25px); /* 25px for header */ font-size: 16px; } .cm-s-monokai .CodeMirror-linenumber { @@ -167,6 +172,9 @@ .mode-btn.selected svg { fill: rgba(255, 255, 255, 0.45); } + .gutter { + background: rgba(0,0,0,0.2); + } .gutter-horizontal { cursor: ew-resize; } @@ -274,6 +282,49 @@ top: 2px; left: 2px; } + .btn-group { + position: relative; + } + .btn-group { + cursor: pointer; + } + .dropdown__menu { + position: absolute; + top: 100%; + left: 0; + padding: 0; + margin: 0; + min-width: 200px; + display: block; + list-style: none; + border-radius: 4px; + overflow: hidden; + opacity: 0; + visibility: hidden; + transition: 0.3s ease; + transform: translateY(10px); + z-index: 5; + background: white; + } + .dropdown__menu > li > a { + display: block; + padding: 15px; + color: #333; + cursor: pointer; + } + .dropdown__menu > li > a:hover { + background: #ff8c00; + color: white; + } + .dropdown__menu > li:not(:last-child) { + border-bottom: 1px solid rgba(0,0,0,0.05); + } + + .open .dropdown__menu { + opacity: 1; + visibility: visible; + transform: translateY(0); + } @@ -281,9 +332,33 @@