addons/isl/src/stackEdit/ui/SplitStackEditPanel.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.interactive-split {
b69ab319 height: 100%;
b69ab3110 position: relative;
b69ab3111 min-width: calc((100vw / var(--zoom)) - 81px);
b69ab3112 min-height: calc((100vh / var(--zoom)) - 220px);
b69ab3113
b69ab3114 margin-inline: calc(0px - var(--pad));
b69ab3115 font-size: var(--editor-font-size);
b69ab3116}
b69ab3117
b69ab3118.modal .edit-stack-modal-contents {
b69ab3119 --split-vertical-overhead: 210px;
b69ab3120}
b69ab3121.modal .split-single-commit-modal-contents {
b69ab3122 --split-vertical-overhead: 150px;
b69ab3123}
b69ab3124
b69ab3125.split-commit-column {
b69ab3126 margin-inline: var(--pad);
b69ab3127 background-color: var(--tooltip-background);
b69ab3128 padding: var(--pad);
b69ab3129 padding-bottom: 0px;
b69ab3130 border-radius: var(--halfpad);
b69ab3131 min-width: 700px;
b69ab3132 max-width: 700px;
b69ab3133 flex-shrink: 0;
b69ab3134 height: 100%;
b69ab3135}
b69ab3136
b69ab3137.split-commit-header {
b69ab3138 font-size: 110%;
b69ab3139 display: flex;
b69ab3140 flex-direction: row;
b69ab3141 align-items: center;
b69ab3142 gap: var(--pad);
b69ab3143 margin: var(--pad) 0px;
b69ab3144 margin-bottom: calc(2 * var(--pad));
b69ab3145}
b69ab3146
b69ab3147.split-commit-header-stack-number {
b69ab3148 flex-shrink: 0;
b69ab3149 font-size: 140%;
b69ab3150 font-weight: 300;
b69ab3151 opacity: 0.8;
b69ab3152 margin: 0 var(--pad);
b69ab3153}
b69ab3154
b69ab3155.split-range-selector-button {
b69ab3156 font-size: 90%;
b69ab3157 display: flex;
b69ab3158 gap: var(--pad);
b69ab3159 align-items: center;
b69ab3160}
b69ab3161
b69ab3162.split-range-selector-info {
b69ab3163 display: flex;
b69ab3164 align-items: center;
b69ab3165 gap: var(--pad);
b69ab3166 background-color: var(--subtle-hover-darken);
b69ab3167 border-radius: 8px;
b69ab3168 padding: var(--pad);
b69ab3169}
b69ab3170
b69ab3171.split-range-selector {
b69ab3172 overflow: auto;
b69ab3173 display: flex;
b69ab3174 flex-direction: column;
b69ab3175 gap: var(--pad);
b69ab3176 max-height: 50vh;
b69ab3177}
b69ab3178.split-range-selector .inner-commit-group {
b69ab3179 margin-left: var(--halfpad);
b69ab3180}
b69ab3181.split-range-commit {
b69ab3182 display: flex;
b69ab3183 flex-direction: row;
b69ab3184 gap: var(--halfpad);
b69ab3185 align-items: center;
b69ab3186 padding-left: calc(3 * var(--pad));
b69ab3187 margin-left: -20px;
b69ab3188 user-select: none;
b69ab3189 cursor: pointer;
b69ab3190 padding-block: calc(var(--halfpad) / 2);
b69ab3191}
b69ab3192
b69ab3193.split-range-commit .commit-title {
b69ab3194 opacity: 0.7;
b69ab3195}
b69ab3196.split-range-commit:hover .commit-title {
b69ab3197 opacity: 0.9;
b69ab3198}
b69ab3199
b69ab31100.split-range-commit.selection-start .commit-title,
b69ab31101.split-range-commit.selection-end .commit-title,
b69ab31102.split-range-commit.selection-middle .commit-title {
b69ab31103 opacity: 1;
b69ab31104}
b69ab31105
b69ab31106.split-range-commit .commit-selection-avatar {
b69ab31107 position: absolute;
b69ab31108 z-index: 0;
b69ab31109 left: -21px;
b69ab31110 border-radius: 24px;
b69ab31111 height: 12px;
b69ab31112 width: 14px;
b69ab31113 box-sizing: border-box;
b69ab31114}
b69ab31115
b69ab31116.split-range-commit.selection-start .commit-selection-avatar,
b69ab31117.split-range-commit.selection-middle .commit-selection-avatar,
b69ab31118.split-range-commit.selection-end .commit-selection-avatar {
b69ab31119 background-color: var(--focus-border);
b69ab31120 border-color: var(--focus-border);
b69ab31121 width: 24px;
b69ab31122 height: 24px;
b69ab31123 left: -26px;
b69ab31124}
b69ab31125.split-range-commit.selection-start .commit-selection-avatar {
b69ab31126 border-top-right-radius: 0;
b69ab31127 border-top-left-radius: 0;
b69ab31128 height: 28px;
b69ab31129 transform: translateY(-2px);
b69ab31130}
b69ab31131
b69ab31132.split-range-commit.selection-end .commit-selection-avatar {
b69ab31133 border-bottom-right-radius: 0;
b69ab31134 border-bottom-left-radius: 0;
b69ab31135 height: 28px;
b69ab31136 transform: translateY(2px);
b69ab31137}
b69ab31138.split-range-commit.selection-middle .commit-selection-avatar {
b69ab31139 border-radius: 0;
b69ab31140 border-top-width: 17px;
b69ab31141 height: 28px;
b69ab31142}
b69ab31143.split-range-commit.selection-end.selection-start .commit-selection-avatar {
b69ab31144 border-radius: 24px;
b69ab31145 height: 24px;
b69ab31146 transform: none;
b69ab31147}
b69ab31148.split-range-commit.selection-end .commit-avatar,
b69ab31149.split-range-commit.selection-middle .commit-avatar,
b69ab31150.split-range-commit.selection-start .commit-avatar {
b69ab31151 border: none;
b69ab31152}
b69ab31153
b69ab31154label.split-range-label {
b69ab31155 font-size: 80%;
b69ab31156}
b69ab31157
b69ab31158.split-insert-blank-commit-container {
b69ab31159 height: auto;
b69ab31160 margin-top: var(--pad);
b69ab31161}
b69ab31162.split-insert-blank-commit-container > .tooltip-creator {
b69ab31163 height: calc(100% - 3 * var(--pad));
b69ab31164}
b69ab31165.split-insert-blank-commit {
b69ab31166 cursor: pointer;
b69ab31167 margin: calc(-1 * var(--pad) + var(--halfpad));
b69ab31168 padding: var(--halfpad);
b69ab31169 margin-top: calc(2 * var(--pad));
b69ab31170 padding-bottom: 0;
b69ab31171 margin-bottom: 0;
b69ab31172 height: 100%;
b69ab31173 transition: background-color 0.1s;
b69ab31174 border-radius: 4px;
b69ab31175}
b69ab31176.split-insert-blank-commit:hover {
b69ab31177 background-color: var(--tooltip-background);
b69ab31178}
b69ab31179.split-insert-blank-commit .codicon {
b69ab31180 transition: transform 0.1s;
b69ab31181 margin-left: 1px;
b69ab31182 margin-right: -1px;
b69ab31183}
b69ab31184.split-insert-blank-commit:hover .codicon {
b69ab31185 transform: scale(1.5);
b69ab31186}
b69ab31187
b69ab31188.split-commit-file,
b69ab31189.split-commit-file pre {
b69ab31190 font-family: var(--monospace-fontFamily);
b69ab31191}
b69ab31192
b69ab31193.split-commit-file {
b69ab31194 background-color: var(--background);
b69ab31195 margin-bottom: var(--pad);
b69ab31196}
b69ab31197.split-commit-file .split-diff-view-file-header {
b69ab31198 background-color: var(--background);
b69ab31199 border: 1px solid var(--panel-view-border);
b69ab31200 margin-left: 0;
b69ab31201 margin-right: 0;
b69ab31202}
b69ab31203.split-commit-file-arrows vscode-button {
b69ab31204 font-family: var(--monospace-fontFamily);
b69ab31205 opacity: 0.5;
b69ab31206 font-size: 120%;
b69ab31207 min-width: 25px;
b69ab31208}
b69ab31209.split-commit-file-arrows vscode-button:hover {
b69ab31210 opacity: 0.8;
b69ab31211}
b69ab31212.split-commit-file-arrows vscode-button:hover::part(content) {
b69ab31213 transform: scale(1.3);
b69ab31214}
b69ab31215
b69ab31216.split-file {
b69ab31217 border: 1px solid var(--panel-view-border);
b69ab31218 border-top-width: 0px;
b69ab31219}
b69ab31220
b69ab31221.split-commit-file table {
b69ab31222 white-space: pre-wrap;
b69ab31223 border-spacing: 0px;
b69ab31224}
b69ab31225.split-commit-file tr {
b69ab31226 /* Set line-height explicitly to avoid dynamic line heights based on (different) fonts decided by text content. */
b69ab31227 line-height: 1.2;
b69ab31228}
b69ab31229
b69ab31230.split-commit-file td {
b69ab31231 padding: 0;
b69ab31232}
b69ab31233
b69ab31234.split-commit-file .split-line-content {
b69ab31235 word-break: break-all;
b69ab31236}
b69ab31237
b69ab31238.split-file .split-left-lineno,
b69ab31239.split-file .split-right-lineno {
b69ab31240 vertical-align: top;
b69ab31241}
b69ab31242
b69ab31243.split-file .context-button {
b69ab31244 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 10 Q10 15 20 10 Q30 5 40 10' stroke='grey' fill='transparent' /%3E%3C/svg%3E");
b69ab31245 background-repeat: repeat-x;
b69ab31246 user-select: none;
b69ab31247 cursor: pointer;
b69ab31248 opacity: 0.8;
b69ab31249 position: relative;
b69ab31250 transition: opacity 0.1s;
b69ab31251}
b69ab31252.split-file .context-button:before {
b69ab31253 opacity: 0;
b69ab31254 transition: opacity 0.1s;
b69ab31255 display: block;
b69ab31256 position: absolute;
b69ab31257 left: calc(50% - 70px);
b69ab31258 right: calc(50% - 70px);
b69ab31259 text-align: center;
b69ab31260 padding: 0 var(--pad);
b69ab31261 content: 'Click to expand';
b69ab31262}
b69ab31263.split-file .context-button:hover {
b69ab31264 opacity: 1;
b69ab31265}
b69ab31266.split-file .context-button:hover:before {
b69ab31267 opacity: 1;
b69ab31268 background-color: var(--background);
b69ab31269}
b69ab31270
b69ab31271.split-file .lineno {
b69ab31272 padding-left: var(--halfpad);
b69ab31273 padding-right: var(--halfpad);
b69ab31274 text-align: right;
b69ab31275 user-select: none;
b69ab31276}
b69ab31277.split-right-lineno,
b69ab31278.split-left-lineno,
b69ab31279.split-right-button,
b69ab31280.split-left-button {
b69ab31281 background-color: var(--subtle-hover-darken);
b69ab31282 user-select: none;
b69ab31283}
b69ab31284
b69ab31285.split-file tr.add {
b69ab31286 background: var(--diffEditor-insertedLineBackground);
b69ab31287}
b69ab31288.split-file tr.del {
b69ab31289 background: var(--diffEditor-removedLineBackground);
b69ab31290}
b69ab31291.split-file tr:hover.add {
b69ab31292 background: var(--diffEditor-insertedLineHighlightBackground);
b69ab31293}
b69ab31294.split-file tr:hover.del {
b69ab31295 background: var(--diffEditor-removedLineHighlightBackground);
b69ab31296}
b69ab31297
b69ab31298.split-file tr.selected.add {
b69ab31299 background: var(--diffEditor-insertedLineHighlightBackground);
b69ab31300}
b69ab31301.split-file tr.selected.del {
b69ab31302 background: var(--diffEditor-removedLineHighlightBackground);
b69ab31303}
b69ab31304
b69ab31305.split-file .main-content {
b69ab31306 min-width: 200px;
b69ab31307 position: relative;
b69ab31308}
b69ab31309
b69ab31310.split-file .line {
b69ab31311 padding-left: var(--halfpad);
b69ab31312}
b69ab31313
b69ab31314.split-file .selected .button {
b69ab31315 opacity: 0.8;
b69ab31316}
b69ab31317
b69ab31318.split-file .button {
b69ab31319 user-select: none;
b69ab31320 cursor: pointer;
b69ab31321 opacity: 0.3;
b69ab31322 display: block;
b69ab31323 transition: transform 0.1s;
b69ab31324}
b69ab31325
b69ab31326.split-commit-file tr.selected .button {
b69ab31327 opacity: 0.6;
b69ab31328 transform: translateX(-2px) scale(1.25);
b69ab31329}
b69ab31330.split-commit-file tr:hover .button {
b69ab31331 opacity: 0.7;
b69ab31332 transform: translateX(-2px) scale(1.3);
b69ab31333}
b69ab31334.split-commit-file tr:hover .left .button {
b69ab31335 transform: translateX(2px) scale(1.3);
b69ab31336}
b69ab31337
b69ab31338.split-file .button:active {
b69ab31339 color: grey;
b69ab31340 opacity: 1;
b69ab31341}
b69ab31342
b69ab31343.split-file-row .filerev-title {
b69ab31344 padding-left: var(--pad);
b69ab31345 text-overflow: ellipsis;
b69ab31346}
b69ab31347
b69ab31348.split-header-hint {
b69ab31349 padding: var(--pad);
b69ab31350 border: 1px solid var(--panel-view-border);
b69ab31351 border-top: none;
b69ab31352 background: var(--hint-background);
b69ab31353}