841 lines
13 KiB
SCSS
841 lines
13 KiB
SCSS
.project-refs-form,
|
|
.project-refs-target-form {
|
|
display: inline-block;
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.commit-message {
|
|
@include str-truncated(250px);
|
|
}
|
|
|
|
.editable-mode {
|
|
display: inline-block;
|
|
}
|
|
|
|
.ide-view {
|
|
display: flex;
|
|
height: calc(100vh - #{$header-height});
|
|
margin-top: 0;
|
|
border-top: 1px solid $white-dark;
|
|
border-bottom: 1px solid $white-dark;
|
|
|
|
&.is-collapsed {
|
|
.ide-file-list {
|
|
max-width: 250px;
|
|
}
|
|
}
|
|
|
|
.file-status-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
|
|
.ide-file-list {
|
|
flex: 1;
|
|
|
|
.file {
|
|
cursor: pointer;
|
|
|
|
&.file-open {
|
|
background: $link-active-background;
|
|
}
|
|
|
|
&.file-active {
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
|
|
.ide-file-name {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: inherit;
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.loading-container {
|
|
margin-right: 4px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.ide-file-changed-icon {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.ide-new-btn {
|
|
display: none;
|
|
margin-bottom: -4px;
|
|
margin-right: -8px;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: $link-active-background;
|
|
|
|
.ide-new-btn {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.folder {
|
|
svg {
|
|
fill: $gl-text-color-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $gl-text-color;
|
|
}
|
|
|
|
th {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.file-name,
|
|
.file-col-commit-message {
|
|
display: flex;
|
|
overflow: visible;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.multi-file-loading-container {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
|
|
.animation-container {
|
|
background: $gray-light;
|
|
|
|
div {
|
|
background: $gray-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-table-col-commit-message {
|
|
white-space: nowrap;
|
|
width: 50%;
|
|
}
|
|
|
|
.multi-file-edit-pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
border-left: 1px solid $white-dark;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.multi-file-tabs {
|
|
display: flex;
|
|
background-color: $white-normal;
|
|
box-shadow: inset 0 -1px $white-dark;
|
|
|
|
> ul {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
li {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown {
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-bottom: 1px;
|
|
padding: 0 $grid-size;
|
|
border-left: 1px solid $white-dark;
|
|
background-color: $white-light;
|
|
|
|
&.shadow {
|
|
box-shadow: 0 0 10px $dropdown-shadow-color;
|
|
}
|
|
|
|
.btn {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-tab {
|
|
@include str-truncated(150px);
|
|
padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding;
|
|
background-color: $gray-normal;
|
|
border-right: 1px solid $white-dark;
|
|
border-bottom: 1px solid $white-dark;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&.active {
|
|
background-color: $white-light;
|
|
border-bottom-color: $white-light;
|
|
}
|
|
}
|
|
|
|
.multi-file-tab-close {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
background: none;
|
|
border: 0;
|
|
border-radius: $border-radius-default;
|
|
color: $theme-gray-900;
|
|
transform: translateY(-50%);
|
|
|
|
svg {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $theme-gray-200;
|
|
}
|
|
|
|
&:focus {
|
|
background-color: $blue-500;
|
|
color: $white-light;
|
|
outline: 0;
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-edit-pane-content {
|
|
flex: 1;
|
|
height: 0;
|
|
}
|
|
|
|
.blob-editor-container {
|
|
flex: 1;
|
|
height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.vertical-center {
|
|
min-height: auto;
|
|
}
|
|
|
|
.monaco-editor .lines-content .cigr {
|
|
display: none;
|
|
}
|
|
|
|
.monaco-diff-editor.vs {
|
|
.editor.modified {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.diagonal-fill {
|
|
display: none !important;
|
|
}
|
|
|
|
.diffOverview {
|
|
background-color: $white-light;
|
|
border-left: 1px solid $white-dark;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.diffViewport {
|
|
display: none;
|
|
}
|
|
|
|
.char-insert {
|
|
background-color: $line-added-dark;
|
|
}
|
|
|
|
.char-delete {
|
|
background-color: $line-removed-dark;
|
|
}
|
|
|
|
.line-numbers {
|
|
color: $black-transparent;
|
|
}
|
|
|
|
.view-overlays {
|
|
.line-insert {
|
|
background-color: $line-added;
|
|
}
|
|
|
|
.line-delete {
|
|
background-color: $line-removed;
|
|
}
|
|
}
|
|
|
|
.margin {
|
|
background-color: $gray-light;
|
|
border-right: 1px solid $white-normal;
|
|
|
|
.line-insert {
|
|
border-right: 1px solid $line-added-dark;
|
|
}
|
|
|
|
.line-delete {
|
|
border-right: 1px solid $line-removed-dark;
|
|
}
|
|
}
|
|
|
|
.margin-view-overlays .insert-sign,
|
|
.margin-view-overlays .delete-sign {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.cursors-layer {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-editor-holder {
|
|
height: 100%;
|
|
}
|
|
|
|
.preview-container {
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
.file-container {
|
|
background-color: $gray-darker;
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
text-align: center;
|
|
|
|
.file-content {
|
|
padding: $gl-padding;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
|
|
img {
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
}
|
|
|
|
.isZoomable {
|
|
cursor: pointer;
|
|
cursor: zoom-in;
|
|
|
|
&.isZoomed {
|
|
cursor: pointer;
|
|
cursor: zoom-out;
|
|
max-width: none;
|
|
max-height: none;
|
|
margin-right: $gl-padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
.file-info {
|
|
font-size: $label-font-size;
|
|
color: $diff-image-info-color;
|
|
}
|
|
}
|
|
|
|
.md-previewer {
|
|
padding: $gl-padding;
|
|
}
|
|
}
|
|
|
|
.ide-mode-tabs {
|
|
border-bottom: 1px solid $white-dark;
|
|
|
|
.nav-links {
|
|
border-bottom: 0;
|
|
|
|
li a {
|
|
padding: $gl-padding-8 $gl-padding;
|
|
line-height: $gl-btn-line-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-btn-group {
|
|
padding: $gl-padding-4 $gl-vert-padding;
|
|
}
|
|
|
|
.ide-status-bar {
|
|
border-top: 1px solid $white-dark;
|
|
padding: $gl-bar-padding $gl-padding;
|
|
background: $white-light;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
// Not great, but this is to deal with our current output
|
|
.multi-file-preview-holder {
|
|
height: 100%;
|
|
overflow: scroll;
|
|
|
|
.file-content.code {
|
|
display: flex;
|
|
|
|
i {
|
|
margin-left: -10px;
|
|
}
|
|
}
|
|
|
|
.line-numbers {
|
|
min-width: 50px;
|
|
}
|
|
|
|
.file-content,
|
|
.line-numbers,
|
|
.blob-content,
|
|
.code {
|
|
min-height: 100%;
|
|
}
|
|
}
|
|
|
|
.file-content.blob-no-preview {
|
|
a {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-panel {
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
width: 340px;
|
|
padding: 0;
|
|
background-color: $gray-light;
|
|
padding-right: 3px;
|
|
|
|
.projects-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.context-header {
|
|
width: auto;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-panel-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.multi-file-commit-panel-inner-scroll {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
}
|
|
|
|
&.is-collapsed {
|
|
width: 60px;
|
|
|
|
.multi-file-commit-list {
|
|
padding-top: $gl-padding;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.multi-file-context-bar-icon {
|
|
align-items: center;
|
|
|
|
svg {
|
|
float: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.branch-container {
|
|
border-left: 4px solid;
|
|
margin-bottom: $gl-bar-padding;
|
|
}
|
|
|
|
.branch-header {
|
|
background: $white-dark;
|
|
display: flex;
|
|
}
|
|
|
|
.branch-header-title {
|
|
flex: 1;
|
|
padding: $grid-size $gl-padding;
|
|
font-weight: $gl-font-weight-bold;
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.branch-header-btns {
|
|
padding: $gl-vert-padding $gl-padding;
|
|
}
|
|
|
|
.left-collapse-btn {
|
|
display: none;
|
|
background: $gray-light;
|
|
text-align: left;
|
|
border-top: 1px solid $white-dark;
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-context-bar-icon {
|
|
padding: 10px;
|
|
|
|
svg {
|
|
margin-right: 10px;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-panel-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.multi-file-commit-empty-state-container {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.multi-file-commit-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid $white-dark;
|
|
padding: $gl-btn-padding 0;
|
|
|
|
&.is-collapsed {
|
|
border-bottom: 1px solid $white-dark;
|
|
|
|
svg {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.multi-file-commit-panel-collapse-btn {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
border-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-panel-header-title {
|
|
display: flex;
|
|
flex: 1;
|
|
padding: 0 $gl-btn-padding;
|
|
|
|
svg {
|
|
margin-right: $gl-btn-padding;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-panel-collapse-btn {
|
|
border-left: 1px solid $white-dark;
|
|
}
|
|
|
|
.multi-file-commit-list {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: $gl-padding 0;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.multi-file-commit-list-item {
|
|
display: flex;
|
|
padding: 0;
|
|
align-items: center;
|
|
|
|
.multi-file-discard-btn {
|
|
display: none;
|
|
margin-left: auto;
|
|
color: $gl-link-color;
|
|
padding: 0 2px;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: $white-normal;
|
|
|
|
.multi-file-discard-btn {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-addition {
|
|
fill: $green-500;
|
|
}
|
|
|
|
.multi-file-modified {
|
|
fill: $orange-500;
|
|
}
|
|
|
|
.multi-file-commit-list-collapsed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
> svg {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.file-status-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-list-path {
|
|
padding: $grid-size / 2;
|
|
padding-left: $gl-padding;
|
|
background: none;
|
|
border: 0;
|
|
text-align: left;
|
|
width: 100%;
|
|
min-width: 0;
|
|
|
|
svg {
|
|
min-width: 16px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-list-file-path {
|
|
@include str-truncated(100%);
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:active {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-form {
|
|
padding: $gl-padding;
|
|
border-top: 1px solid $white-dark;
|
|
|
|
.btn {
|
|
font-size: $gl-font-size;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-message.form-control {
|
|
height: 160px;
|
|
resize: none;
|
|
}
|
|
|
|
.dirty-diff {
|
|
// !important need to override monaco inline style
|
|
width: 4px !important;
|
|
left: 0 !important;
|
|
|
|
&-modified {
|
|
background-color: $blue-500;
|
|
}
|
|
|
|
&-added {
|
|
background-color: $green-600;
|
|
}
|
|
|
|
&-removed {
|
|
height: 0 !important;
|
|
width: 0 !important;
|
|
bottom: -2px;
|
|
border-style: solid;
|
|
border-width: 5px;
|
|
border-color: transparent transparent transparent $red-500;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100px;
|
|
height: 1px;
|
|
background-color: rgba($red-500, 0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-loading {
|
|
display: flex;
|
|
height: 100vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ide-empty-state {
|
|
display: flex;
|
|
height: 100vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ide-new-btn {
|
|
.dropdown-toggle svg {
|
|
margin-top: -2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
left: auto;
|
|
right: 0;
|
|
|
|
label {
|
|
font-weight: $gl-font-weight-normal;
|
|
padding: 5px 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide {
|
|
overflow: hidden;
|
|
|
|
&.nav-only {
|
|
padding-top: $header-height;
|
|
|
|
.with-performance-bar & {
|
|
padding-top: $header-height + $performance-bar-height;
|
|
}
|
|
|
|
.flash-container {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.alert-wrapper .flash-container .flash-alert:last-child,
|
|
.alert-wrapper .flash-container .flash-notice:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.content-wrapper {
|
|
margin-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
&.flash-shown {
|
|
.content-wrapper {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ide-view {
|
|
height: calc(100vh - #{$header-height + $flash-height});
|
|
}
|
|
}
|
|
|
|
.projects-sidebar {
|
|
.multi-file-commit-panel-inner-scroll {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.with-performance-bar .ide.nav-only {
|
|
.flash-container {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.content-wrapper {
|
|
margin-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ide-view {
|
|
height: calc(100vh - #{$header-height + $performance-bar-height});
|
|
}
|
|
|
|
&.flash-shown {
|
|
.ide-view {
|
|
height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
|
|
}
|
|
}
|
|
}
|
|
|
|
.dragHandle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background-color: $white-dark;
|
|
|
|
&.dragright {
|
|
right: 0;
|
|
}
|
|
|
|
&.dragleft {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.ide-commit-radios {
|
|
label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.help-block {
|
|
margin-top: 0;
|
|
line-height: 0;
|
|
}
|
|
}
|
|
|
|
.ide-commit-new-branch {
|
|
margin-left: 25px;
|
|
}
|
|
|
|
.ide-external-links {
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.ide-sidebar-link {
|
|
padding: $gl-padding-8 $gl-padding;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|