[v-cloak] { display: none; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { opacity: 0; } .commit-message { @include truncate(250px); } .tree-content-holder { border: 1px solid $border-color; border-radius: $border-radius-default; color: $almost-black; header { background: $gray-light; padding: 10px 15px; } .panel-right { display: inline-block; width: 80%; .monaco-editor.vs { .line-numbers { cursor: pointer; &:hover { text-decoration: underline; } } .cursor { display: none !important; } } &.edit-mode { .monaco-editor.vs { .cursor { background: $black; border-color: $black; } } } #tabs { height: 61px; border-bottom: 1px solid $white-normal; padding-left: 0; margin-bottom: 0; display: inline-block; white-space: nowrap; width: 100%; overflow-y: hidden; overflow-x: auto; &.overflown { height: 61px; li { padding: 20px 18px; } } li { animation: swipeRightAppear ease-in 0.1s; animation-iteration-count: 1; transform-origin: 0% 50%; list-style-type: none; background: $gray-normal; display: inline-block; padding: 20px 18px; border-right: 1px solid $border-color; white-space: nowrap; &.active { background: $white-light; } a { color: $black; display: inline-block; width: 100px; text-align: center; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; &.close { width: auto; font-size: 15px; } } i.fa.fa-times, i.fa.fa-circle { float: right; margin-top: 3px; margin-left: 15px; color: $gray-darkest; } } } #ide { height: 70vh; } #repo-file-buttons { background: $gray-light; border-bottom: 1px solid $white-normal; padding: 5px; padding: 10px 5px; position: relative; border-top: 1px solid $white-normal; margin-top: -5px; } #binary-viewer { height: 70vh; overflow: auto; margin-top: 5px; margin-left: 10px; .blob-viewer { padding-top: 20px; padding-left: 20px; } } } #commit-area { background: $gray-light; padding: 20px; } #view-toggler { height: 41px; position: relative; display: block; border-bottom: 1px solid $white-normal; background: $white-light; margin-top: -5px; } #binary-viewer { img { max-width: 100%; } } #sidebar { &.sidebar-mini { display: inline-block; vertical-align: top; width: 20%; border-right: 1px solid $white-normal; height: 80vh; overflow: auto; } tr { animation: fadein 0.5s; cursor: pointer; &.repo-file-options td { padding: 0; border-top: none; background: $gray-light; width: 190px; display: inline-block; &:hover { .title { width: 105px; } ul { display: inline-block; } } .title { display: inline-block; font-size: 10px; text-transform: uppercase; font-weight: bold; color: $gray-darkest; width: 185px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; padding: 2px 16px; } ul { display: none; float: right; margin: 0 10px 0 0; padding: 1px 0; li { display: inline-block; padding: 0 2px; border-bottom: none; } } } .fa { margin-right: 5px; } } a { color: $almost-black; display: inline-block; vertical-align: middle; } ul { list-style-type: none; padding: 0; li { border-bottom: 1px solid $border-gray-normal; padding: 10px 20px; a { color: $almost-black; } .fa { font-size: $code_font_size; margin-right: 5px; } } } } } .animation-container { background: $repo-editor-grey; height: 40px; overflow: hidden; position: relative; &.animation-container-small { height: 12px; } &::before { animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: blockTextShine; animation-timing-function: linear; background-image: $repo-editor-linear-gradient; background-repeat: no-repeat; background-size: 800px 45px; content: ' '; display: block; height: 100%; position: relative; } div { background: $white-light; height: 6px; left: 0; position: absolute; right: 0; } .line-of-code-1 { left: 0; top: 8px; } .line-of-code-2 { left: 150px; top: 0; height: 10px; } .line-of-code-3 { left: 0; top: 23px; } .line-of-code-4 { left: 0; top: 38px; } .line-of-code-5 { left: 200px; top: 28px; height: 10px; } .line-of-code-6 { top: 14px; left: 230px; height: 10px; } } @keyframes blockTextShine { 0% { transform: translateX(-468px); } 100% { transform: translateX(468px); } } @keyframes swipeRightAppear { 0% { transform: scaleX(0.00) ; } 45% { transform: scaleX(0.26) ; } 100% { transform: scaleX(1.00) ; } }