1209 lines
22 KiB
SCSS
1209 lines
22 KiB
SCSS
@import 'framework/variables';
|
|
@import 'framework/mixins';
|
|
@import './ide_mixins';
|
|
@import './ide_monaco_overrides';
|
|
@import './ide_theme_overrides';
|
|
|
|
@import './ide_themes/dark';
|
|
@import './ide_themes/solarized-light';
|
|
@import './ide_themes/solarized-dark';
|
|
@import './ide_themes/monokai';
|
|
|
|
$search-list-icon-width: 18px;
|
|
$ide-activity-bar-width: 60px;
|
|
$ide-context-header-padding: 10px;
|
|
$ide-project-avatar-end: $ide-context-header-padding + 48px;
|
|
$ide-tree-padding: $gl-padding;
|
|
$ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
|
|
$ide-commit-row-height: 32px;
|
|
$ide-commit-header-height: 48px;
|
|
|
|
.project-refs-form,
|
|
.project-refs-target-form {
|
|
display: inline-block;
|
|
}
|
|
|
|
.commit-message {
|
|
@include str-truncated(250px);
|
|
}
|
|
|
|
.ide-layout {
|
|
// Fix for iOS 13+, the height of the page is actually less than
|
|
// 100vh because of the presence of the bottom bar
|
|
max-height: 100%;
|
|
position: fixed;
|
|
}
|
|
|
|
.ide-view {
|
|
position: relative;
|
|
margin-top: 0;
|
|
padding-bottom: $ide-statusbar-height;
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
min-height: 0; // firefox fix
|
|
|
|
&.is-collapsed {
|
|
.ide-file-list {
|
|
max-width: 250px;
|
|
}
|
|
}
|
|
|
|
.file-status-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
|
|
.ide-file-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0; // firefox fix
|
|
}
|
|
|
|
.multi-file-loading-container {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.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 var(--ide-border-color, $white-dark);
|
|
border-right: 1px solid var(--ide-border-color, $white-dark);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.multi-file-tabs {
|
|
display: flex;
|
|
background-color: var(--ide-background, $gray-light);
|
|
box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
|
|
|
|
> ul {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: $grid-size $gl-padding;
|
|
background-color: var(--ide-background-hover, $gray-normal);
|
|
border-right: 1px solid var(--ide-border-color, $white-dark);
|
|
border-bottom: 1px solid var(--ide-border-color, $white-dark);
|
|
|
|
&.active,
|
|
.gl-tab-nav-item-active {
|
|
background-color: var(--ide-highlight-background, $white);
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
&:not(.disabled) {
|
|
.multi-file-tab {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
.multi-file-tab-close {
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gl-tab-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.gl-tabs-nav {
|
|
border-width: 0;
|
|
|
|
li {
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
border: 0 !important;
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: $grid-size $gl-padding !important;
|
|
box-shadow: none !important;
|
|
font-weight: normal !important;
|
|
|
|
background-color: var(--ide-background-hover, $gray-normal);
|
|
border-right: 1px solid var(--ide-border-color, $white-dark);
|
|
border-bottom: 1px solid var(--ide-border-color, $white-dark);
|
|
|
|
&.gl-tab-nav-item-active {
|
|
background-color: var(--ide-highlight-background, $white);
|
|
border-color: var(--ide-border-color, $white-dark);
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.multi-file-tab-close svg {
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-tab {
|
|
@include str-truncated(141px);
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.multi-file-tab-close {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
margin-left: $grid-size;
|
|
background: none;
|
|
border: 0;
|
|
border-radius: $border-radius-default;
|
|
color: var(--ide-text-color, $gray-900);
|
|
|
|
svg {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.ide-file-changed-icon {
|
|
display: block;
|
|
position: relative;
|
|
top: 1px;
|
|
right: -2px;
|
|
}
|
|
|
|
&:not([disabled]):hover {
|
|
background-color: var(--ide-input-border, $gray-100);
|
|
}
|
|
|
|
&:not([disabled]):focus {
|
|
background-color: var(--ide-link-color, $blue-500);
|
|
color: $white;
|
|
outline: 0;
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-file-edit-pane-content {
|
|
flex: 1;
|
|
height: 0;
|
|
}
|
|
|
|
.preview-container {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
|
|
.md-previewer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
padding: $gl-padding;
|
|
background-color: var(--ide-empty-state-background, transparent);
|
|
|
|
.md {
|
|
max-width: $limited-layout-width;
|
|
}
|
|
}
|
|
|
|
.file-container {
|
|
background-color: var(--ide-empty-state-background, $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%;
|
|
}
|
|
|
|
.file-info {
|
|
font-size: $label-font-size;
|
|
color: var(--ide-text-color, $diff-image-info-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-mode-tabs {
|
|
border-bottom: 1px solid var(--ide-border-color, $white-dark);
|
|
|
|
li a {
|
|
padding: $gl-padding-8 $gl-padding;
|
|
line-height: $gl-btn-line-height;
|
|
}
|
|
}
|
|
|
|
.ide-btn-group {
|
|
padding: $gl-padding-4 $gl-vert-padding;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.ide-status-bar {
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
border-top: 1px solid var(--ide-border-color, $white-dark);
|
|
padding: 2px $gl-padding-8 0;
|
|
background-color: var(--ide-footer-background, $white);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: $ide-statusbar-height;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
font-size: 12px;
|
|
line-height: 22px;
|
|
|
|
* {
|
|
font-size: inherit;
|
|
}
|
|
|
|
svg {
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.ide-status-avatar {
|
|
float: none;
|
|
margin: 0 0 1px;
|
|
}
|
|
}
|
|
|
|
.ide-status-list {
|
|
> div + div {
|
|
padding-left: $gl-padding;
|
|
}
|
|
}
|
|
// 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;
|
|
padding: 0;
|
|
background-color: var(--ide-background, $gray-light);
|
|
|
|
.context-header {
|
|
width: auto;
|
|
margin-right: 0;
|
|
|
|
> a,
|
|
> button {
|
|
text-decoration: none;
|
|
padding-top: $gl-padding-8;
|
|
padding-bottom: $gl-padding-8;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-panel-inner {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.multi-file-commit-panel-inner-content {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
background-color: var(--ide-highlight-background, $white);
|
|
border-left: 1px solid var(--ide-border-color, $white-dark);
|
|
border-top: 1px solid var(--ide-border-color, $white-dark);
|
|
border-top-left-radius: $border-radius-small;
|
|
min-height: 0; // firefox fix
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-panel-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.ide-commit-empty-state {
|
|
padding: 0 $gl-padding;
|
|
}
|
|
|
|
.ide-commit-empty-state-container {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.multi-file-commit-panel-header {
|
|
height: $ide-commit-header-height;
|
|
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.multi-file-commit-list {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: $grid-size 0;
|
|
min-height: 60px;
|
|
|
|
&.form-text.text-muted {
|
|
margin-left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-list-collapsed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: $gl-padding 0;
|
|
|
|
svg {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
color: var(--ide-text-color-secondary, $gray-500);
|
|
}
|
|
|
|
.file-status-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-list-path {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: -$grid-size;
|
|
margin-right: -$grid-size;
|
|
padding: $grid-size / 2 $grid-size;
|
|
border-radius: $border-radius-default;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
height: $ide-commit-row-height;
|
|
padding-right: 0;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: var(--ide-background, $gray-50);
|
|
|
|
outline: 0;
|
|
}
|
|
|
|
&:active {
|
|
background: var(--ide-background, $gray-100);
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: var(--ide-background, $white-normal);
|
|
}
|
|
|
|
svg {
|
|
min-width: 16px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-list-file-path {
|
|
@include str-truncated(calc(100% - 30px));
|
|
user-select: none;
|
|
|
|
&:active {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-form {
|
|
position: relative;
|
|
background-color: var(--ide-highlight-background, $white);
|
|
border-left: 1px solid var(--ide-border-color, $white-dark);
|
|
transition: all 0.3s ease;
|
|
|
|
> form,
|
|
> .commit-form-compact {
|
|
padding: $gl-padding 0;
|
|
margin-left: $gl-padding;
|
|
margin-right: $gl-padding;
|
|
border-top: 1px solid var(--ide-border-color-alt, $white-dark);
|
|
}
|
|
|
|
.btn {
|
|
font-size: $gl-font-size;
|
|
}
|
|
|
|
.multi-file-commit-panel-success-message {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.multi-file-commit-panel-bottom {
|
|
position: relative;
|
|
}
|
|
|
|
.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: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ide-empty-state {
|
|
display: flex;
|
|
height: 100vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--ide-empty-state-background, transparent);
|
|
}
|
|
|
|
.ide {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
.ide-commit-list-container {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 140px;
|
|
margin-left: $gl-padding;
|
|
margin-right: $gl-padding;
|
|
|
|
&.is-first {
|
|
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
|
|
}
|
|
}
|
|
|
|
.ide-staged-action-btn {
|
|
width: $ide-commit-row-height;
|
|
height: $ide-commit-row-height;
|
|
color: inherit;
|
|
background-color: var(--ide-background, $white-normal);
|
|
}
|
|
|
|
.ide-commit-options {
|
|
.is-disabled {
|
|
.ide-option-label {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-sidebar-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
height: 60px;
|
|
width: 100%;
|
|
padding: 0 $gl-padding;
|
|
color: var(--ide-text-color-secondary, $gl-text-color-secondary);
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
outline: 0;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
background-color: var(--ide-background-hover, $gray-50);
|
|
}
|
|
|
|
&:focus {
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
background-color: var(--ide-background-hover, $gray-100);
|
|
}
|
|
|
|
&.active {
|
|
// extend width over border of sidebar section
|
|
width: calc(100% + 1px);
|
|
padding-right: $gl-padding + 1px;
|
|
background-color: var(--ide-highlight-background, $white);
|
|
border-top-color: var(--ide-border-color, $white-dark);
|
|
border-bottom-color: var(--ide-border-color, $white-dark);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -1px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: var(--ide-highlight-background, $white);
|
|
}
|
|
}
|
|
|
|
&.is-right {
|
|
padding-right: $gl-padding;
|
|
padding-left: $gl-padding + 1px;
|
|
|
|
&::after {
|
|
right: auto;
|
|
left: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-activity-bar {
|
|
position: relative;
|
|
flex: 0 0 $ide-activity-bar-width;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ide-commit-message-field {
|
|
height: 200px;
|
|
background-color: var(--ide-highlight-background, $white);
|
|
|
|
.md-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-links,
|
|
.gl-tabs-nav {
|
|
height: 30px;
|
|
}
|
|
|
|
.form-text.text-muted {
|
|
margin-top: 2px;
|
|
color: var(--ide-link-color, $blue-500);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.ide-commit-message-textarea-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.note-textarea {
|
|
font-family: $monospace-font;
|
|
}
|
|
}
|
|
|
|
.ide-commit-message-highlights-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: -100px;
|
|
bottom: 0;
|
|
padding-right: 100px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
|
|
.highlights {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
color: transparent;
|
|
}
|
|
|
|
mark {
|
|
margin-left: -1px;
|
|
padding: 0 2px;
|
|
border-radius: $border-radius-small;
|
|
background-color: $orange-200;
|
|
color: transparent;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.ide-commit-message-textarea {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
background: transparent;
|
|
resize: none;
|
|
}
|
|
|
|
.ide-tree-header {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 12px 0;
|
|
margin-left: $ide-tree-padding;
|
|
margin-right: $ide-tree-padding;
|
|
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
|
|
|
|
svg {
|
|
color: var(--ide-text-color-secondary, $gray-500);
|
|
|
|
&:focus,
|
|
&:hover {
|
|
color: var(--ide-link-color, $blue-600);
|
|
}
|
|
}
|
|
|
|
.ide-new-btn {
|
|
margin-left: auto;
|
|
}
|
|
|
|
button {
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
}
|
|
}
|
|
|
|
.ide-nav-dropdown {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
|
|
.dropdown-menu {
|
|
width: 385px;
|
|
max-height: initial;
|
|
}
|
|
|
|
.dropdown-menu-toggle {
|
|
background-color: var(--ide-input-background, transparent);
|
|
|
|
&:hover {
|
|
background-color: var(--ide-dropdown-btn-hover-background, $white-normal);
|
|
}
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
|
|
&,
|
|
&:hover {
|
|
color: var(--ide-text-color-secondary, $gray-500);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-tree-body {
|
|
overflow: auto;
|
|
padding-left: $ide-tree-padding;
|
|
padding-right: $ide-tree-padding;
|
|
}
|
|
|
|
.ide-sidebar-branch-title {
|
|
font-weight: $gl-font-weight-normal;
|
|
|
|
svg {
|
|
position: relative;
|
|
top: 3px;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
.commit-form-compact {
|
|
.btn {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.commit-form-slide-up-enter-active,
|
|
.commit-form-slide-up-leave-active {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.is-full .commit-form-slide-up-enter,
|
|
.is-compact .commit-form-slide-up-leave-to {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.is-full .commit-form-slide-up-enter-to,
|
|
.is-compact .commit-form-slide-up-leave {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-to,
|
|
.commit-form-slide-up-enter,
|
|
.commit-form-slide-up-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.ide-review-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
.dropdown {
|
|
margin-left: auto;
|
|
}
|
|
|
|
a {
|
|
color: var(--ide-link-color, $blue-600);
|
|
}
|
|
}
|
|
|
|
.ide-review-sub-header {
|
|
color: var(--ide-text-color-secondary, $gl-text-color-secondary);
|
|
}
|
|
|
|
.ide-tree-changes {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.multi-file-commit-panel-success-message {
|
|
position: absolute;
|
|
top: 61px;
|
|
left: 1px;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
background-color: var(--ide-highlight-background, $white);
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ide-review-button-holder {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.ide-context-header {
|
|
.avatar-container {
|
|
flex: 0 0 auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.ide-sidebar-project-title {
|
|
margin-left: $ide-tree-text-start - $ide-project-avatar-end;
|
|
}
|
|
}
|
|
|
|
.ide-context-body {
|
|
min-height: 0; // firefox fix
|
|
}
|
|
|
|
.ide-sidebar-project-title {
|
|
min-width: 0;
|
|
|
|
.sidebar-context-title {
|
|
white-space: nowrap;
|
|
display: block;
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
|
|
&.text-secondary {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-external-link {
|
|
svg {
|
|
display: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
svg {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-sidebar {
|
|
min-width: 60px;
|
|
}
|
|
|
|
.ide-right-sidebar {
|
|
.multi-file-commit-panel-inner {
|
|
padding: $grid-size 0;
|
|
background-color: var(--ide-highlight-background, $white);
|
|
border-right: 1px solid var(--ide-border-color, $white-dark);
|
|
}
|
|
|
|
.ide-right-sidebar-jobs-detail {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ide-right-sidebar-terminal,
|
|
.ide-right-sidebar-clientside {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.ide-pipeline {
|
|
@include ide-trace-view();
|
|
|
|
svg {
|
|
--svg-status-bg: var(--ide-background, #{$white});
|
|
}
|
|
|
|
.empty-state {
|
|
p {
|
|
margin: $grid-size 0;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.btn,
|
|
h4 {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.gl-tab-content {
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
}
|
|
}
|
|
|
|
.ide-pipeline-header {
|
|
min-height: 55px;
|
|
padding-left: $gl-padding;
|
|
padding-right: $gl-padding;
|
|
}
|
|
|
|
.ide-job-item {
|
|
display: flex;
|
|
padding: 16px;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid var(--ide-border-color, $border-color);
|
|
}
|
|
|
|
.ci-status-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
min-width: 24px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.ide-stage {
|
|
.card-header {
|
|
display: flex;
|
|
cursor: pointer;
|
|
|
|
.ci-status-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ide-stage-collapse-icon {
|
|
margin: auto 0 auto auto;
|
|
}
|
|
|
|
.ide-job-header {
|
|
min-height: 60px;
|
|
padding: 0 $gl-padding;
|
|
}
|
|
|
|
.ide-nav-form {
|
|
.nav-links li,
|
|
.gl-tabs-nav li {
|
|
width: 50%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
a {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
|
|
&:not(.active),
|
|
&:not(.gl-tab-nav-item-active) {
|
|
background-color: var(--ide-dropdown-background, $gray-light);
|
|
}
|
|
|
|
&.gl-tab-nav-item-active {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-input {
|
|
padding-left: $gl-padding;
|
|
padding-right: $gl-padding;
|
|
|
|
.input-icon {
|
|
right: auto;
|
|
left: 10px;
|
|
top: 1rem;
|
|
}
|
|
}
|
|
|
|
.dropdown-input-field {
|
|
padding-left: $search-list-icon-width + $gl-padding;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.tokens-container {
|
|
padding-left: $search-list-icon-width + $gl-padding;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.btn-link {
|
|
padding-top: $gl-padding;
|
|
padding-bottom: $gl-padding;
|
|
}
|
|
}
|
|
|
|
.ide-search-list-current-icon {
|
|
min-width: $search-list-icon-width;
|
|
}
|
|
|
|
.ide-search-list-empty {
|
|
height: 69px;
|
|
}
|
|
|
|
.ide-merge-requests-dropdown-content {
|
|
max-height: 470px;
|
|
}
|
|
|
|
.ide-merge-request-project-path {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: var(--ide-text-color-secondary, $gl-text-color-secondary);
|
|
}
|
|
|
|
.ide-merge-request-info {
|
|
.detail-page-header {
|
|
line-height: initial;
|
|
min-height: 38px;
|
|
}
|
|
|
|
.issuable-details {
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.ide-entry-dropdown-toggle {
|
|
padding: $gl-padding-4;
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
background-color: var(--ide-background, $gray-50);
|
|
|
|
&:hover {
|
|
background-color: var(--ide-file-row-btn-hover-background, $gray-100);
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
color: $white-normal;
|
|
background-color: var(--ide-link-color, $blue-500);
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.ide-new-btn {
|
|
display: none;
|
|
|
|
.btn {
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
.dropdown.show .ide-entry-dropdown-toggle {
|
|
color: $white-normal;
|
|
background-color: var(--ide-link-color, $blue-500);
|
|
}
|
|
}
|
|
|
|
.ide-preview-header {
|
|
padding: 0 $grid-size;
|
|
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
|
|
background-color: var(--ide-highlight-background, $gray-light);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.ide-navigator-btn {
|
|
height: 24px;
|
|
min-width: 24px;
|
|
max-width: 24px;
|
|
padding: 0;
|
|
margin: 0 ($grid-size / 2);
|
|
color: var(--ide-text-color-secondary, $gray-600);
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.ide-navigator-location {
|
|
padding-top: ($grid-size / 2);
|
|
padding-bottom: ($grid-size / 2);
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
border-color: var(--ide-border-color, $gray-100);
|
|
}
|
|
}
|
|
|
|
.ide-preview-loading-icon {
|
|
right: $grid-size;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.ide-file-templates {
|
|
padding: $grid-size $gl-padding;
|
|
background-color: var(--ide-background, $gray-light);
|
|
border-bottom: 1px solid var(--ide-border-color, $white-dark);
|
|
|
|
.dropdown {
|
|
min-width: 180px;
|
|
}
|
|
|
|
.dropdown-content {
|
|
max-height: 222px;
|
|
}
|
|
}
|
|
|
|
.ide-commit-editor-header {
|
|
height: 65px;
|
|
padding: 8px 16px;
|
|
background-color: var(--ide-background, $gray-10);
|
|
box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
|
|
}
|
|
|
|
.ide-commit-list-changed-icon {
|
|
width: $ide-commit-row-height;
|
|
height: $ide-commit-row-height;
|
|
}
|
|
|
|
.ide-file-icon-holder {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--ide-text-color-secondary, $gray-500);
|
|
}
|
|
|
|
.file-row:active {
|
|
background: var(--ide-background, $gray-100);
|
|
}
|
|
|
|
.file-row.is-active {
|
|
background: var(--ide-background, $gray-50);
|
|
}
|
|
|
|
.file-row:hover,
|
|
.file-row:focus {
|
|
background: var(--ide-background, $gray-50);
|
|
|
|
.ide-new-btn {
|
|
display: block;
|
|
}
|
|
|
|
.folder-icon {
|
|
fill: var(--ide-text-color-secondary, $gl-text-color-secondary);
|
|
}
|
|
}
|
|
|
|
.ide-terminal {
|
|
@include ide-trace-view();
|
|
|
|
.terminal-wrapper {
|
|
background: $black;
|
|
color: $gray-darkest;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.xterm {
|
|
height: 100%;
|
|
padding: $grid-size;
|
|
}
|
|
|
|
.xterm-viewport {
|
|
overflow-y: auto;
|
|
}
|
|
}
|