debian-mirror-gitlab/app/assets/stylesheets/page_bundles/ide.scss

1210 lines
22 KiB
SCSS
Raw Normal View History

2018-11-18 11:00:15 +05:30
@import 'framework/variables';
@import 'framework/mixins';
2019-02-15 15:39:39 +05:30
@import './ide_mixins';
2020-04-08 14:13:33 +05:30
@import './ide_monaco_overrides';
2020-05-24 23:13:21 +05:30
@import './ide_theme_overrides';
@import './ide_themes/dark';
2021-01-29 00:20:46 +05:30
@import './ide_themes/solarized-light';
2020-06-23 00:09:42 +05:30
@import './ide_themes/solarized-dark';
2021-01-29 00:20:46 +05:30
@import './ide_themes/monokai';
2018-11-18 11:00:15 +05:30
$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;
2018-11-20 20:47:30 +05:30
$ide-commit-row-height: 32px;
$ide-commit-header-height: 48px;
2018-11-18 11:00:15 +05:30
2017-09-10 17:25:29 +05:30
.project-refs-form,
.project-refs-target-form {
display: inline-block;
}
.commit-message {
@include str-truncated(250px);
}
2020-06-23 00:09:42 +05:30
.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;
}
2018-03-17 18:26:18 +05:30
.ide-view {
2018-10-15 14:42:47 +05:30
position: relative;
2018-05-09 12:01:36 +05:30
margin-top: 0;
2018-10-15 14:42:47 +05:30
padding-bottom: $ide-statusbar-height;
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color, $gl-text-color);
2018-11-20 20:47:30 +05:30
min-height: 0; // firefox fix
2018-03-17 18:26:18 +05:30
&.is-collapsed {
.ide-file-list {
max-width: 250px;
}
}
2018-05-09 12:01:36 +05:30
.file-status-icon {
width: 10px;
height: 10px;
}
2017-09-10 17:25:29 +05:30
}
2018-03-17 18:26:18 +05:30
.ide-file-list {
2018-11-18 11:00:15 +05:30
display: flex;
flex-direction: column;
2018-03-17 18:26:18 +05:30
flex: 1;
2018-11-20 20:47:30 +05:30
min-height: 0; // firefox fix
2018-03-17 18:26:18 +05:30
}
.multi-file-loading-container {
margin-top: 10px;
padding: 10px;
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
.multi-file-table-col-commit-message {
white-space: nowrap;
width: 50%;
}
.multi-file-edit-pane {
display: flex;
flex-direction: column;
flex: 1;
2020-05-24 23:13:21 +05:30
border-left: 1px solid var(--ide-border-color, $white-dark);
2020-06-23 00:09:42 +05:30
border-right: 1px solid var(--ide-border-color, $white-dark);
2018-03-17 18:26:18 +05:30
overflow: hidden;
}
.multi-file-tabs {
display: flex;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-background, $gray-light);
box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
> ul {
display: flex;
overflow-x: auto;
}
li {
display: flex;
2018-10-15 14:42:47 +05:30
align-items: center;
padding: $grid-size $gl-padding;
2020-05-24 23:13:21 +05:30
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);
2018-05-09 12:01:36 +05:30
2021-03-11 19:13:27 +05:30
&.active,
.gl-tab-nav-item-active {
2020-05-24 23:13:21 +05:30
background-color: var(--ide-highlight-background, $white);
2020-06-23 00:09:42 +05:30
border-bottom-color: transparent;
2018-05-09 12:01:36 +05:30
}
2018-11-18 11:00:15 +05:30
&:not(.disabled) {
.multi-file-tab {
cursor: pointer;
}
}
&.disabled {
.multi-file-tab-close {
cursor: default;
}
}
2018-05-09 12:01:36 +05:30
}
2021-03-11 19:13:27 +05:30
.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;
}
}
}
}
2018-03-17 18:26:18 +05:30
}
.multi-file-tab {
2018-10-15 14:42:47 +05:30
@include str-truncated(141px);
2018-03-17 18:26:18 +05:30
svg {
vertical-align: middle;
}
}
.multi-file-tab-close {
2018-05-09 12:01:36 +05:30
width: 16px;
height: 16px;
2018-03-17 18:26:18 +05:30
padding: 0;
2018-10-15 14:42:47 +05:30
margin-left: $grid-size;
2018-03-17 18:26:18 +05:30
background: none;
border: 0;
2018-05-09 12:01:36 +05:30
border-radius: $border-radius-default;
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color, $gray-900);
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
svg {
position: relative;
2018-11-08 19:23:39 +05:30
top: -2px;
2018-05-09 12:01:36 +05:30
}
2018-10-15 14:42:47 +05:30
.ide-file-changed-icon {
display: block;
position: relative;
top: 1px;
right: -2px;
}
&:not([disabled]):hover {
2020-07-28 23:09:34 +05:30
background-color: var(--ide-input-border, $gray-100);
2018-03-17 18:26:18 +05:30
}
2018-10-15 14:42:47 +05:30
&:not([disabled]):focus {
2020-05-24 23:13:21 +05:30
background-color: var(--ide-link-color, $blue-500);
2020-04-22 19:07:51 +05:30
color: $white;
2018-05-09 12:01:36 +05:30
outline: 0;
svg {
fill: currentColor;
}
2018-03-17 18:26:18 +05:30
}
}
.multi-file-edit-pane-content {
flex: 1;
height: 0;
}
2018-05-09 12:01:36 +05:30
.preview-container {
2018-11-08 19:23:39 +05:30
flex-grow: 1;
position: relative;
.md-previewer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: $gl-padding;
2021-01-29 00:20:46 +05:30
background-color: var(--ide-empty-state-background, transparent);
2021-03-08 18:12:59 +05:30
.md {
max-width: $limited-layout-width;
}
2018-11-08 19:23:39 +05:30
}
2018-05-09 12:01:36 +05:30
.file-container {
2021-01-29 00:20:46 +05:30
background-color: var(--ide-empty-state-background, $gray-darker);
2018-05-09 12:01:36 +05:30
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;
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color, $diff-image-info-color);
2018-05-09 12:01:36 +05:30
}
}
}
.ide-mode-tabs {
2020-05-24 23:13:21 +05:30
border-bottom: 1px solid var(--ide-border-color, $white-dark);
2018-05-09 12:01:36 +05:30
2020-03-13 15:44:24 +05:30
li a {
padding: $gl-padding-8 $gl-padding;
line-height: $gl-btn-line-height;
2018-05-09 12:01:36 +05:30
}
}
.ide-btn-group {
padding: $gl-padding-4 $gl-vert-padding;
2018-10-15 14:42:47 +05:30
line-height: 24px;
2018-03-17 18:26:18 +05:30
}
.ide-status-bar {
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color, $gl-text-color);
border-top: 1px solid var(--ide-border-color, $white-dark);
2018-11-08 19:23:39 +05:30
padding: 2px $gl-padding-8 0;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-footer-background, $white);
2018-03-17 18:26:18 +05:30
display: flex;
justify-content: space-between;
2018-10-15 14:42:47 +05:30
height: $ide-statusbar-height;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
2018-11-08 19:23:39 +05:30
font-size: 12px;
line-height: 22px;
* {
font-size: inherit;
}
2018-03-17 18:26:18 +05:30
svg {
2018-11-08 19:23:39 +05:30
vertical-align: sub;
2018-03-17 18:26:18 +05:30
}
2019-03-02 22:35:43 +05:30
.ide-status-avatar {
float: none;
margin: 0 0 1px;
}
2018-03-17 18:26:18 +05:30
}
2019-09-04 21:01:54 +05:30
.ide-status-list {
> div + div {
padding-left: $gl-padding;
}
}
2018-03-17 18:26:18 +05:30
// 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;
2017-09-10 17:25:29 +05:30
}
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
.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;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-background, $gray-light);
2018-10-15 14:42:47 +05:30
.context-header {
width: auto;
margin-right: 0;
2018-11-08 19:23:39 +05:30
> a,
> button {
2018-11-18 11:00:15 +05:30
text-decoration: none;
padding-top: $gl-padding-8;
padding-bottom: $gl-padding-8;
2018-10-15 14:42:47 +05:30
}
}
2018-03-17 18:26:18 +05:30
.multi-file-commit-panel-inner {
2018-10-15 14:42:47 +05:30
position: relative;
2018-03-17 18:26:18 +05:30
display: flex;
flex-direction: column;
2018-11-18 11:00:15 +05:30
min-height: 100%;
2018-10-15 14:42:47 +05:30
min-width: 0;
width: 100%;
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-11-18 11:00:15 +05:30
.multi-file-commit-panel-inner-content {
2018-03-17 18:26:18 +05:30
display: flex;
flex: 1;
flex-direction: column;
2020-05-24 23:13:21 +05:30
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);
2018-10-15 14:42:47 +05:30
border-top-left-radius: $border-radius-small;
2018-11-20 20:47:30 +05:30
min-height: 0; // firefox fix
2017-09-10 17:25:29 +05:30
}
2018-03-17 18:26:18 +05:30
}
.multi-file-commit-panel-section {
display: flex;
flex-direction: column;
flex: 1;
2018-05-09 12:01:36 +05:30
max-height: 100%;
overflow: auto;
}
2018-10-15 14:42:47 +05:30
.ide-commit-empty-state {
padding: 0 $gl-padding;
}
.ide-commit-empty-state-container {
margin-top: auto;
margin-bottom: auto;
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
.multi-file-commit-panel-header {
2018-11-20 20:47:30 +05:30
height: $ide-commit-header-height;
2020-05-24 23:13:21 +05:30
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
2018-11-08 19:23:39 +05:30
padding: 12px 0;
2018-03-17 18:26:18 +05:30
}
.multi-file-commit-list {
flex: 1;
overflow: auto;
2018-11-08 19:23:39 +05:30
padding: $grid-size 0;
2018-05-09 12:01:36 +05:30
min-height: 60px;
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
&.form-text.text-muted {
margin-left: 0;
right: 0;
2018-05-09 12:01:36 +05:30
}
2018-03-17 18:26:18 +05:30
}
.multi-file-commit-list-collapsed {
display: flex;
flex-direction: column;
2018-10-15 14:42:47 +05:30
padding: $gl-padding 0;
2018-03-17 18:26:18 +05:30
2018-10-15 14:42:47 +05:30
svg {
display: block;
2018-03-17 18:26:18 +05:30
margin-left: auto;
margin-right: auto;
2020-10-24 23:57:45 +05:30
color: var(--ide-text-color-secondary, $gray-500);
2018-03-17 18:26:18 +05:30
}
2018-05-09 12:01:36 +05:30
.file-status-icon {
width: 10px;
height: 10px;
margin-left: 3px;
}
2018-03-17 18:26:18 +05:30
}
2018-12-05 23:21:45 +05:30
.multi-file-commit-list-path {
2018-11-08 19:23:39 +05:30
display: flex;
align-items: center;
margin-left: -$grid-size;
margin-right: -$grid-size;
padding: $grid-size / 2 $grid-size;
border-radius: $border-radius-default;
2018-05-09 12:01:36 +05:30
text-align: left;
2018-11-08 19:23:39 +05:30
cursor: pointer;
2018-11-20 20:47:30 +05:30
height: $ide-commit-row-height;
padding-right: 0;
2018-11-08 19:23:39 +05:30
2018-05-09 12:01:36 +05:30
&:hover,
&:focus {
2020-06-23 00:09:42 +05:30
background: var(--ide-background, $gray-50);
2018-12-05 23:21:45 +05:30
2018-05-09 12:01:36 +05:30
outline: 0;
}
2018-11-08 19:23:39 +05:30
2018-12-05 23:21:45 +05:30
&:active {
2020-07-28 23:09:34 +05:30
background: var(--ide-background, $gray-100);
2018-12-05 23:21:45 +05:30
}
&.is-active {
2020-05-24 23:13:21 +05:30
background-color: var(--ide-background, $white-normal);
2018-12-05 23:21:45 +05:30
}
2018-11-08 19:23:39 +05:30
svg {
min-width: 16px;
vertical-align: middle;
display: inline-block;
}
2018-05-09 12:01:36 +05:30
}
.multi-file-commit-list-file-path {
2018-11-08 19:23:39 +05:30
@include str-truncated(calc(100% - 30px));
2018-11-20 20:47:30 +05:30
user-select: none;
2018-05-09 12:01:36 +05:30
&:active {
text-decoration: none;
}
2018-03-17 18:26:18 +05:30
}
.multi-file-commit-form {
2018-10-15 14:42:47 +05:30
position: relative;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-highlight-background, $white);
border-left: 1px solid var(--ide-border-color, $white-dark);
2018-10-15 14:42:47 +05:30
transition: all 0.3s ease;
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
> form,
> .commit-form-compact {
padding: $gl-padding 0;
margin-left: $gl-padding;
margin-right: $gl-padding;
2020-05-24 23:13:21 +05:30
border-top: 1px solid var(--ide-border-color-alt, $white-dark);
2018-11-08 19:23:39 +05:30
}
2018-03-17 18:26:18 +05:30
.btn {
2018-05-09 12:01:36 +05:30
font-size: $gl-font-size;
2017-09-10 17:25:29 +05:30
}
2018-10-15 14:42:47 +05:30
.multi-file-commit-panel-success-message {
top: 0;
}
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-10-15 14:42:47 +05:30
.multi-file-commit-panel-bottom {
position: relative;
2018-03-17 18:26:18 +05:30
}
.dirty-diff {
// !important need to override monaco inline style
width: 4px !important;
left: 0 !important;
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
&-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;
2018-05-09 12:01:36 +05:30
background-color: rgba($red-500, 0.5);
2017-09-10 17:25:29 +05:30
}
2018-03-17 18:26:18 +05:30
}
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
.ide-loading {
display: flex;
2018-11-20 20:47:30 +05:30
height: 100%;
2018-03-17 18:26:18 +05:30
align-items: center;
justify-content: center;
}
.ide-empty-state {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
2021-01-29 00:20:46 +05:30
background-color: var(--ide-empty-state-background, transparent);
2018-03-17 18:26:18 +05:30
}
2018-05-09 12:01:36 +05:30
.ide {
overflow: hidden;
2018-11-20 20:47:30 +05:30
flex: 1;
2017-09-10 17:25:29 +05:30
}
2018-10-15 14:42:47 +05:30
.ide-commit-list-container {
display: flex;
flex: 1;
flex-direction: column;
min-height: 140px;
2018-11-08 19:23:39 +05:30
margin-left: $gl-padding;
margin-right: $gl-padding;
2018-10-15 14:42:47 +05:30
&.is-first {
2020-05-24 23:13:21 +05:30
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
2018-10-15 14:42:47 +05:30
}
}
.ide-staged-action-btn {
2018-11-20 20:47:30 +05:30
width: $ide-commit-row-height;
height: $ide-commit-row-height;
color: inherit;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-background, $white-normal);
2018-10-15 14:42:47 +05:30
}
2019-09-04 21:01:54 +05:30
.ide-commit-options {
2022-07-23 23:45:48 +05:30
.is-disabled {
.ide-option-label {
text-decoration: line-through;
2018-10-15 14:42:47 +05:30
}
2018-05-09 12:01:36 +05:30
}
}
2018-10-15 14:42:47 +05:30
.ide-sidebar-link {
display: flex;
align-items: center;
2020-03-13 15:44:24 +05:30
justify-content: center;
2018-10-15 14:42:47 +05:30
position: relative;
height: 60px;
width: 100%;
padding: 0 $gl-padding;
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color-secondary, $gl-text-color-secondary);
2018-10-15 14:42:47 +05:30
background-color: transparent;
border: 0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
outline: 0;
2018-11-08 19:23:39 +05:30
cursor: pointer;
2018-10-15 14:42:47 +05:30
svg {
margin: 0 auto;
}
&:hover {
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color, $gl-text-color);
2020-06-23 00:09:42 +05:30
background-color: var(--ide-background-hover, $gray-50);
2018-10-15 14:42:47 +05:30
}
&:focus {
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color, $gl-text-color);
2020-07-28 23:09:34 +05:30
background-color: var(--ide-background-hover, $gray-100);
2018-10-15 14:42:47 +05:30
}
&.active {
// extend width over border of sidebar section
width: calc(100% + 1px);
padding-right: $gl-padding + 1px;
2020-05-24 23:13:21 +05:30
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);
2018-10-15 14:42:47 +05:30
&::after {
content: '';
position: absolute;
right: -1px;
top: 0;
bottom: 0;
width: 1px;
2020-05-24 23:13:21 +05:30
background: var(--ide-highlight-background, $white);
2018-10-15 14:42:47 +05:30
}
2020-06-23 00:09:42 +05:30
}
2018-11-08 19:23:39 +05:30
2020-06-23 00:09:42 +05:30
&.is-right {
padding-right: $gl-padding;
padding-left: $gl-padding + 1px;
&::after {
right: auto;
left: -1px;
2018-11-08 19:23:39 +05:30
}
2018-10-15 14:42:47 +05:30
}
}
.ide-activity-bar {
position: relative;
2018-11-18 11:00:15 +05:30
flex: 0 0 $ide-activity-bar-width;
2018-10-15 14:42:47 +05:30
z-index: 1;
}
.ide-commit-message-field {
height: 200px;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-highlight-background, $white);
2018-10-15 14:42:47 +05:30
.md-area {
display: flex;
flex-direction: column;
height: 100%;
}
2021-03-11 19:13:27 +05:30
.nav-links,
.gl-tabs-nav {
2018-10-15 14:42:47 +05:30
height: 30px;
}
2018-11-08 19:23:39 +05:30
.form-text.text-muted {
2018-10-15 14:42:47 +05:30
margin-top: 2px;
2020-05-24 23:13:21 +05:30
color: var(--ide-link-color, $blue-500);
2018-10-15 14:42:47 +05:30
cursor: pointer;
}
}
.ide-commit-message-textarea-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.note-textarea {
2018-11-18 11:00:15 +05:30
font-family: $monospace-font;
2018-10-15 14:42:47 +05:30
}
}
.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 {
2018-11-18 11:00:15 +05:30
flex: 0 0 auto;
2018-10-15 14:42:47 +05:30
display: flex;
align-items: center;
2018-11-18 11:00:15 +05:30
flex-wrap: wrap;
2018-11-08 19:23:39 +05:30
padding: 12px 0;
2018-11-18 11:00:15 +05:30
margin-left: $ide-tree-padding;
margin-right: $ide-tree-padding;
2020-05-24 23:13:21 +05:30
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
2018-10-15 14:42:47 +05:30
2020-01-01 13:55:28 +05:30
svg {
2020-10-24 23:57:45 +05:30
color: var(--ide-text-color-secondary, $gray-500);
2020-01-01 13:55:28 +05:30
&:focus,
&:hover {
2020-05-24 23:13:21 +05:30
color: var(--ide-link-color, $blue-600);
2020-01-01 13:55:28 +05:30
}
}
2018-10-15 14:42:47 +05:30
.ide-new-btn {
margin-left: auto;
}
2018-11-18 11:00:15 +05:30
2020-04-08 14:13:33 +05:30
button {
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color, $gl-text-color);
2020-04-08 14:13:33 +05:30
}
}
2018-11-18 11:00:15 +05:30
2020-04-08 14:13:33 +05:30
.ide-nav-dropdown {
width: 100%;
margin-bottom: 12px;
2018-11-18 11:00:15 +05:30
2020-04-08 14:13:33 +05:30
.dropdown-menu {
width: 385px;
max-height: initial;
}
2020-01-01 13:55:28 +05:30
2020-04-08 14:13:33 +05:30
.dropdown-menu-toggle {
2021-09-30 23:02:18 +05:30
background-color: var(--ide-input-background, transparent);
&:hover {
background-color: var(--ide-dropdown-btn-hover-background, $white-normal);
}
2020-04-08 14:13:33 +05:30
svg {
vertical-align: middle;
2018-11-18 11:00:15 +05:30
2020-05-24 23:13:21 +05:30
&,
2018-11-18 11:00:15 +05:30
&:hover {
2020-10-24 23:57:45 +05:30
color: var(--ide-text-color-secondary, $gray-500);
2018-11-18 11:00:15 +05:30
}
}
}
}
.ide-tree-body {
overflow: auto;
padding-left: $ide-tree-padding;
padding-right: $ide-tree-padding;
2018-10-15 14:42:47 +05:30
}
.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;
}
2018-05-09 12:01:36 +05:30
p {
2018-10-15 14:42:47 +05:30
margin-bottom: 0;
2018-05-09 12:01:36 +05:30
}
}
2018-10-15 14:42:47 +05:30
.commit-form-slide-up-enter-active,
.commit-form-slide-up-leave-active {
position: absolute;
2018-11-08 19:23:39 +05:30
top: 0;
left: 0;
right: 0;
2018-10-15 14:42:47 +05:30
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);
}
2020-04-08 14:13:33 +05:30
.fade-enter,
.fade-leave-to,
2018-10-15 14:42:47 +05:30
.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 {
2020-05-24 23:13:21 +05:30
color: var(--ide-link-color, $blue-600);
2018-10-15 14:42:47 +05:30
}
}
.ide-review-sub-header {
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color-secondary, $gl-text-color-secondary);
2018-10-15 14:42:47 +05:30
}
.ide-tree-changes {
2018-05-09 12:01:36 +05:30
display: flex;
align-items: center;
2018-10-15 14:42:47 +05:30
font-size: 12px;
}
.multi-file-commit-panel-success-message {
position: absolute;
top: 61px;
left: 1px;
bottom: 0;
right: 0;
z-index: 10;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-highlight-background, $white);
2018-10-15 14:42:47 +05:30
overflow: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.ide-review-button-holder {
display: flex;
width: 100%;
align-items: center;
}
.ide-context-header {
2018-11-18 11:00:15 +05:30
.avatar-container {
2018-11-20 20:47:30 +05:30
flex: 0 0 auto;
2018-11-18 11:00:15 +05:30
margin-right: 0;
}
.ide-sidebar-project-title {
margin-left: $ide-tree-text-start - $ide-project-avatar-end;
}
}
.ide-context-body {
2018-11-20 20:47:30 +05:30
min-height: 0; // firefox fix
2018-10-15 14:42:47 +05:30
}
.ide-sidebar-project-title {
min-width: 0;
.sidebar-context-title {
white-space: nowrap;
2018-11-18 11:00:15 +05:30
display: block;
2022-01-26 12:08:38 +05:30
color: var(--ide-text-color, $gl-text-color);
2018-11-08 19:23:39 +05:30
2018-11-18 11:00:15 +05:30
&.text-secondary {
font-weight: normal;
}
2018-11-08 19:23:39 +05:30
}
}
.ide-external-link {
svg {
display: none;
}
&:hover,
&:focus {
svg {
display: inline-block;
}
}
}
2020-03-13 15:44:24 +05:30
.ide-sidebar {
2018-11-08 19:23:39 +05:30
min-width: 60px;
2020-03-13 15:44:24 +05:30
}
2018-11-08 19:23:39 +05:30
2020-03-13 15:44:24 +05:30
.ide-right-sidebar {
2018-11-08 19:23:39 +05:30
.multi-file-commit-panel-inner {
2020-05-24 23:13:21 +05:30
padding: $grid-size 0;
background-color: var(--ide-highlight-background, $white);
2020-06-23 00:09:42 +05:30
border-right: 1px solid var(--ide-border-color, $white-dark);
2020-05-24 23:13:21 +05:30
}
.ide-right-sidebar-jobs-detail {
padding-bottom: 0;
2018-11-08 19:23:39 +05:30
}
2018-11-18 11:00:15 +05:30
2020-06-23 00:09:42 +05:30
.ide-right-sidebar-terminal,
2018-11-18 11:00:15 +05:30
.ide-right-sidebar-clientside {
padding: 0;
}
2018-11-08 19:23:39 +05:30
}
.ide-pipeline {
2019-02-15 15:39:39 +05:30
@include ide-trace-view();
2018-11-08 19:23:39 +05:30
2020-05-24 23:13:21 +05:30
svg {
2020-06-23 00:09:42 +05:30
--svg-status-bg: var(--ide-background, #{$white});
2020-05-24 23:13:21 +05:30
}
2018-11-08 19:23:39 +05:30
.empty-state {
p {
margin: $grid-size 0;
text-align: center;
line-height: 24px;
}
.btn,
h4 {
margin: 0;
}
}
2022-01-26 12:08:38 +05:30
.gl-tab-content {
color: var(--ide-text-color, $gl-text-color);
}
2018-11-08 19:23:39 +05:30
}
.ide-pipeline-header {
min-height: 55px;
padding-left: $gl-padding;
padding-right: $gl-padding;
}
.ide-job-item {
display: flex;
padding: 16px;
&:not(:last-child) {
2020-05-24 23:13:21 +05:30
border-bottom: 1px solid var(--ide-border-color, $border-color);
2018-11-08 19:23:39 +05:30
}
.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;
2020-05-24 23:13:21 +05:30
padding: 0 $gl-padding;
2018-11-08 19:23:39 +05:30
}
2018-11-18 11:00:15 +05:30
.ide-nav-form {
2021-03-11 19:13:27 +05:30
.nav-links li,
.gl-tabs-nav li {
2018-11-08 19:23:39 +05:30
width: 50%;
padding-left: 0;
padding-right: 0;
a {
text-align: center;
2021-03-11 19:13:27 +05:30
font-size: 14px;
line-height: 30px;
2018-11-08 19:23:39 +05:30
2021-03-11 19:13:27 +05:30
&:not(.active),
&:not(.gl-tab-nav-item-active) {
2020-05-24 23:13:21 +05:30
background-color: var(--ide-dropdown-background, $gray-light);
2018-11-08 19:23:39 +05:30
}
2021-03-11 19:13:27 +05:30
&.gl-tab-nav-item-active {
font-weight: bold;
}
2018-11-08 19:23:39 +05:30
}
}
.dropdown-input {
padding-left: $gl-padding;
padding-right: $gl-padding;
2018-11-18 11:00:15 +05:30
.input-icon {
right: auto;
left: 10px;
2021-04-17 20:07:23 +05:30
top: 1rem;
2018-11-08 19:23:39 +05:30
}
}
2018-11-18 11:00:15 +05:30
.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;
}
2018-11-08 19:23:39 +05:30
.btn-link {
padding-top: $gl-padding;
padding-bottom: $gl-padding;
}
}
2018-11-18 11:00:15 +05:30
.ide-search-list-current-icon {
min-width: $search-list-icon-width;
2018-11-08 19:23:39 +05:30
}
2018-11-18 11:00:15 +05:30
.ide-search-list-empty {
2019-10-12 21:52:04 +05:30
height: 69px;
2018-11-08 19:23:39 +05:30
}
.ide-merge-requests-dropdown-content {
max-height: 470px;
}
.ide-merge-request-project-path {
font-size: 12px;
line-height: 16px;
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color-secondary, $gl-text-color-secondary);
2018-11-08 19:23:39 +05:30
}
.ide-merge-request-info {
.detail-page-header {
line-height: initial;
min-height: 38px;
}
.issuable-details {
overflow: auto;
}
2018-05-09 12:01:36 +05:30
}
2018-11-18 11:00:15 +05:30
.ide-entry-dropdown-toggle {
padding: $gl-padding-4;
2020-05-24 23:13:21 +05:30
color: var(--ide-text-color, $gl-text-color);
2020-06-23 00:09:42 +05:30
background-color: var(--ide-background, $gray-50);
2018-11-18 11:00:15 +05:30
&:hover {
2020-07-28 23:09:34 +05:30
background-color: var(--ide-file-row-btn-hover-background, $gray-100);
2018-11-18 11:00:15 +05:30
}
&:active,
&:focus {
color: $white-normal;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-link-color, $blue-500);
2018-11-18 11:00:15 +05:30
outline: 0;
}
}
2018-12-05 23:21:45 +05:30
.ide-new-btn {
display: none;
.btn {
padding: 2px 5px;
}
.dropdown.show .ide-entry-dropdown-toggle {
color: $white-normal;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-link-color, $blue-500);
2018-12-05 23:21:45 +05:30
}
2018-11-18 11:00:15 +05:30
}
.ide-preview-header {
padding: 0 $grid-size;
2020-05-24 23:13:21 +05:30
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
background-color: var(--ide-highlight-background, $gray-light);
2018-11-18 11:00:15 +05:30
min-height: 44px;
}
.ide-navigator-btn {
height: 24px;
min-width: 24px;
max-width: 24px;
padding: 0;
margin: 0 ($grid-size / 2);
2020-11-24 15:15:51 +05:30
color: var(--ide-text-color-secondary, $gray-600);
2018-11-18 11:00:15 +05:30
&:first-child {
margin-left: 0;
}
}
.ide-navigator-location {
padding-top: ($grid-size / 2);
padding-bottom: ($grid-size / 2);
&:focus {
outline: 0;
box-shadow: none;
2020-07-28 23:09:34 +05:30
border-color: var(--ide-border-color, $gray-100);
2018-11-18 11:00:15 +05:30
}
}
.ide-preview-loading-icon {
right: $grid-size;
top: 50%;
transform: translateY(-50%);
}
2018-11-20 20:47:30 +05:30
.ide-file-templates {
padding: $grid-size $gl-padding;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-background, $gray-light);
border-bottom: 1px solid var(--ide-border-color, $white-dark);
2018-11-20 20:47:30 +05:30
.dropdown {
min-width: 180px;
}
.dropdown-content {
max-height: 222px;
}
}
.ide-commit-editor-header {
height: 65px;
padding: 8px 16px;
2020-05-24 23:13:21 +05:30
background-color: var(--ide-background, $gray-10);
box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
2018-11-20 20:47:30 +05:30
}
.ide-commit-list-changed-icon {
width: $ide-commit-row-height;
height: $ide-commit-row-height;
}
2018-12-05 23:21:45 +05:30
.ide-file-icon-holder {
display: flex;
align-items: center;
2020-10-24 23:57:45 +05:30
color: var(--ide-text-color-secondary, $gray-500);
2020-05-24 23:13:21 +05:30
}
.file-row:active {
2020-07-28 23:09:34 +05:30
background: var(--ide-background, $gray-100);
2020-05-24 23:13:21 +05:30
}
.file-row.is-active {
2020-06-23 00:09:42 +05:30
background: var(--ide-background, $gray-50);
2018-12-05 23:21:45 +05:30
}
.file-row:hover,
.file-row:focus {
2020-06-23 00:09:42 +05:30
background: var(--ide-background, $gray-50);
2020-05-24 23:13:21 +05:30
2018-12-05 23:21:45 +05:30
.ide-new-btn {
display: block;
}
.folder-icon {
2020-05-24 23:13:21 +05:30
fill: var(--ide-text-color-secondary, $gl-text-color-secondary);
2018-12-05 23:21:45 +05:30
}
}
2020-06-23 00:09:42 +05:30
.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;
}
}