addons/isl/src/UncommittedChanges.cssblame
View source
b69ab311/**
b69ab312 * Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab313 *
b69ab314 * This source code is licensed under the MIT license found in the
b69ab315 * LICENSE file in the root directory of this source tree.
b69ab316 */
b69ab317
b69ab318.head-commit-info {
b69ab319 margin-left: var(--halfpad);
b69ab3110}
b69ab3111.you-are-here-container {
b69ab3112 display: flex;
b69ab3113 gap: var(--pad);
b69ab3114 align-items: center;
b69ab3115}
b69ab3116
b69ab3117.uncommitted-changes {
b69ab3118 padding: var(--halfpad) 0;
b69ab3119 display: flex;
b69ab3120 flex-direction: column;
b69ab3121 gap: var(--halfpad);
b69ab3122}
b69ab3123.conflicts-header {
b69ab3124 display: flex;
b69ab3125 flex-direction: column;
b69ab3126 margin: var(--pad) 0;
b69ab3127}
b69ab3128.file-tree {
b69ab3129 margin-top: 4px;
b69ab3130}
b69ab3131.file-tree-section {
b69ab3132 margin-top: 4px;
b69ab3133}
b69ab3134.file-tree-level {
b69ab3135 --file-tree-indent: calc(2 * var(--pad));
b69ab3136 margin-left: var(--file-tree-indent);
b69ab3137 position: relative;
b69ab3138}
b69ab3139.changed-files > .file-tree > .file-tree-level {
b69ab3140 /* Override the top-level to not have indent */
b69ab3141 margin-left: 0;
b69ab3142}
b69ab3143.file-tree-level > .changed-file {
b69ab3144 margin-left: var(--halfpad);
b69ab3145}
b69ab3146.file-tree-folder-path {
b69ab3147 display: flex;
b69ab3148 align-items: center;
b69ab3149 gap: var(--halfpad);
b69ab3150}
b69ab3151.file-tree-folder-path vscode-button::part(control) {
b69ab3152 font-size: initial;
b69ab3153 max-width: unset;
b69ab3154}
b69ab3155
b69ab3156.changed-files-pages-buttons {
b69ab3157 display: flex;
b69ab3158 align-items: center;
b69ab3159 gap: var(--halfpad);
b69ab3160}
b69ab3161
b69ab3162.file-tree-level .file-tree-level:before {
b69ab3163 content: '';
b69ab3164 position: absolute;
b69ab3165 left: calc(var(--file-tree-indent) / -2);
b69ab3166 height: 100%;
b69ab3167 top: 0;
b69ab3168 border-left: 1px solid var(--divider-background);
b69ab3169}
b69ab3170.file-tree-level:hover > .file-tree-level:before {
b69ab3171 border-left: 1px solid var(--foreground);
b69ab3172}
b69ab3173
b69ab3174.changed-files {
b69ab3175 display: flex;
b69ab3176 flex-direction: column;
b69ab3177}
b69ab3178.changed-files .changed-file {
b69ab3179 display: flex;
b69ab3180 align-items: center;
b69ab3181 gap: var(--halfpad);
b69ab3182 margin-right: var(--halfpad);
b69ab3183 transition: color 0.1s;
b69ab3184 line-height: 25px;
b69ab3185 /* when files are expanded with chunk selection, use position sticky to keep showing path at the top */
b69ab3186 position: sticky;
b69ab3187 top: 0;
b69ab3188 background-color: var(--changed-files-overflow-color, var(--background));
b69ab3189 z-index: 10;
b69ab3190}
b69ab3191
b69ab3192.changed-files-list .changed-file:nth-child(n + 15):last-child {
b69ab3193 margin-bottom: 10px;
b69ab3194}
b69ab3195
b69ab3196.changed-files .banner {
b69ab3197 padding: var(--pad);
b69ab3198 margin: var(--pad) 0;
b69ab3199 max-width: 500px;
b69ab31100}
b69ab31101
b69ab31102.changed-files-list-container {
b69ab31103 display: flex;
b69ab31104 flex-direction: column;
b69ab31105 position: relative;
b69ab31106 overflow-y: hidden;
b69ab31107}
b69ab31108
b69ab31109.changed-files-list {
b69ab31110 --changed-files-list-height: 500px;
b69ab31111 --changed-files-overflow-color: var(--background);
b69ab31112 overflow-y: scroll;
b69ab31113 max-height: var(--changed-files-list-height);
b69ab31114}
b69ab31115
b69ab31116.changed-file:focus-visible {
b69ab31117 outline: var(--focus-border) 1px auto;
b69ab31118 outline-offset: -1px;
b69ab31119}
b69ab31120
b69ab31121.changed-files-list .collapsable {
b69ab31122 margin: var(--pad) 0;
b69ab31123}
b69ab31124.changed-files-list .collapsable-title {
b69ab31125 user-select: none;
b69ab31126
b69ab31127 font-weight: 500;
b69ab31128 opacity: 0.9;
b69ab31129 font-variant: all-small-caps;
b69ab31130}
b69ab31131.changed-files-list .collapsable-contents {
b69ab31132 margin-left: calc(2 * var(--pad));
b69ab31133}
b69ab31134
b69ab31135.changed-files-list:after {
b69ab31136 --overflow-gradient-height: 20px;
b69ab31137 display: block;
b69ab31138 content: ' ';
b69ab31139 width: 100%;
b69ab31140 height: var(--overflow-gradient-height);
b69ab31141 background: linear-gradient(transparent, var(--changed-files-overflow-color));
b69ab31142 z-index: 10;
b69ab31143 position: absolute;
b69ab31144 bottom: 0px;
b69ab31145 left: 0;
b69ab31146 top: calc(var(--changed-files-list-height) - var(--overflow-gradient-height));
b69ab31147 pointer-events: none;
b69ab31148}
b69ab31149
b69ab31150.changed-file-path {
b69ab31151 display: flex;
b69ab31152 align-items: center;
b69ab31153 gap: var(--halfpad);
b69ab31154 cursor: pointer;
b69ab31155 overflow: hidden;
b69ab31156}
b69ab31157
b69ab31158.changed-file-path-text {
b69ab31159 white-space: nowrap;
b69ab31160 overflow: hidden;
b69ab31161 text-overflow: ellipsis;
b69ab31162 /* ellipsis dots on the start of the file path rather than the end */
b69ab31163 direction: rtl;
b69ab31164 text-align: left;
b69ab31165}
b69ab31166.changed-file-path .tooltip-creator {
b69ab31167 overflow: hidden;
b69ab31168}
b69ab31169
b69ab31170.changed-file-path:hover {
b69ab31171 color: var(--highlight-foreground);
b69ab31172}
b69ab31173
b69ab31174.file-actions {
b69ab31175 display: flex;
b69ab31176 flex-wrap: nowrap;
b69ab31177 align-items: center;
b69ab31178 gap: var(--halfpad);
b69ab31179}
b69ab31180
b69ab31181.file-actions .tooltip-creator {
b69ab31182 display: inline-flex;
b69ab31183}
b69ab31184
b69ab31185.file-added {
b69ab31186 color: var(--scm-added-foreground);
b69ab31187}
b69ab31188.file-modified {
b69ab31189 color: var(--scm-modified-foreground);
b69ab31190}
b69ab31191.file-removed {
b69ab31192 color: var(--scm-removed-foreground);
b69ab31193}
b69ab31194.file-missing {
b69ab31195 color: var(--scm-missing-foreground);
b69ab31196}
b69ab31197.file-unresolved {
b69ab31198 color: var(--scm-modified-foreground);
b69ab31199}
b69ab31200.file-resolved {
b69ab31201 color: var(--scm-added-foreground);
b69ab31202}
b69ab31203.file-ignored {
b69ab31204 opacity: 0.9;
b69ab31205}
b69ab31206
b69ab31207.file-generated {
b69ab31208 opacity: 0.5;
b69ab31209}
b69ab31210.file-partial {
b69ab31211 opacity: 0.8;
b69ab31212}
b69ab31213
b69ab31214.show-on-hover,
b69ab31215.file-show-on-hover {
b69ab31216 opacity: 0;
b69ab31217 transition: opacity 0.1s;
b69ab31218}
b69ab31219.show-on-hover:focus-within,
b69ab31220.file-show-on-hover:focus-within {
b69ab31221 opacity: 1;
b69ab31222}
b69ab31223.uncommitted-changes:hover .show-on-hover {
b69ab31224 opacity: 1;
b69ab31225}
b69ab31226.changed-file:hover .file-show-on-hover {
b69ab31227 opacity: 1;
b69ab31228}
b69ab31229.uncommitted-changes:hover vscode-button:disabled.show-on-hover {
b69ab31230 opacity: 0.4;
b69ab31231}
b69ab31232/* make disabled buttons show up on hover for each changed file */
b69ab31233:is(button, vscode-button).file-show-on-hover:disabled {
b69ab31234 opacity: 0 !important;
b69ab31235}
b69ab31236.changed-file:hover :is(button, vscode-button).file-show-on-hover:disabled {
b69ab31237 opacity: 0.4 !important;
b69ab31238}
b69ab31239
b69ab31240.changed-file-list .button-rows,
b69ab31241.uncommitted-changes .button-rows {
b69ab31242 display: flex;
b69ab31243 flex-direction: column;
b69ab31244 gap: var(--halfpad);
b69ab31245}
b69ab31246
b69ab31247.changed-file-list .button-row,
b69ab31248.uncommitted-changes .button-row {
b69ab31249 display: flex;
b69ab31250 flex-wrap: wrap;
b69ab31251 gap: var(--halfpad) var(--pad);
b69ab31252 align-items: center;
b69ab31253}
b69ab31254
b69ab31255.changed-file-list .button-row {
b69ab31256 padding-bottom: var(--halfpad);
b69ab31257}
b69ab31258
b69ab31259.quick-commit-inputs input[type='text'] {
b69ab31260 opacity: 0;
b69ab31261 transition: opacity 0.1s;
b69ab31262 z-index: 1;
b69ab31263}
b69ab31264.uncommitted-changes:hover input[type='text'],
b69ab31265.uncommitted-changes input[type='text']:focus-within,
b69ab31266.quick-commit-inputs input[type='text']:not(:placeholder-shown) {
b69ab31267 opacity: 1;
b69ab31268}
b69ab31269
b69ab31270.quick-commit-inputs {
b69ab31271 transition: background-color 0.1s;
b69ab31272 display: flex;
b69ab31273 gap: var(--pad);
b69ab31274 align-items: center;
b69ab31275 padding: 4px;
b69ab31276 margin: -4px;
b69ab31277 border-radius: 4px;
b69ab31278 position: relative;
b69ab31279}
b69ab31280.quick-commit-inputs:before {
b69ab31281 content: '';
b69ab31282 position: absolute;
b69ab31283 left: 0;
b69ab31284 right: 0;
b69ab31285 height: 100%;
b69ab31286 width: 100%;
b69ab31287 border-radius: 4px;
b69ab31288 pointer-events: none;
b69ab31289 opacity: 0;
b69ab31290}
b69ab31291.quick-commit-inputs:hover:before {
b69ab31292 background-color: var(--button-icon-hover-background);
b69ab31293 transition: opacity 0.3s;
b69ab31294 opacity: 0.5;
b69ab31295}