addons/isl/src/CommitInfoView/CommitInfoView.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.commit-info-view {
b69ab319 display: flex;
b69ab3110 flex-direction: column;
b69ab3111 height: 100%;
b69ab3112
b69ab3113 --toolbar-fade-height: 30px;
b69ab3114}
b69ab3115
b69ab3116.commit-info-view-main-content {
b69ab3117 overflow-y: auto;
b69ab3118 padding: var(--pad);
b69ab3119 flex-grow: 1;
b69ab3120 padding-bottom: var(--toolbar-fade-height);
b69ab3121}
b69ab3122
b69ab3123.commit-info-view-multi-commit {
b69ab3124 display: flex;
b69ab3125 flex-direction: column;
b69ab3126}
b69ab3127
b69ab3128.commit-info-view-multi-commit .commit-list {
b69ab3129 display: flex;
b69ab3130 flex-direction: column;
b69ab3131 margin-left: calc(4 * var(--pad));
b69ab3132 gap: var(--halfpad);
b69ab3133 flex-grow: 1;
b69ab3134}
b69ab3135
b69ab3136.commit-info-view-multi-commit .commit-list-container {
b69ab3137 display: flex;
b69ab3138 flex-direction: column;
b69ab3139 gap: var(--pad);
b69ab3140 margin: var(--pad);
b69ab3141}
b69ab3142
b69ab3143.commit-info-view-multi-commit .commit-list-header {
b69ab3144 text-align: center;
b69ab3145 display: flex;
b69ab3146 align-items: center;
b69ab3147 gap: var(--halfpad);
b69ab3148 margin: var(--pad);
b69ab3149}
b69ab3150
b69ab3151.commit-info-view vscode-text-area,
b69ab3152.commit-info-view vscode-text-field {
b69ab3153 width: 100%;
b69ab3154 margin: var(--halfpad) 0;
b69ab3155}
b69ab3156
b69ab3157.commit-info-rendered-title {
b69ab3158 cursor: pointer;
b69ab3159 font-weight: bold;
b69ab3160 display: flex;
b69ab3161 align-items: center;
b69ab3162 gap: var(--pad);
b69ab3163 /* add padding then undo with margin so focus state outline is less cramped */
b69ab3164 padding: var(--halfpad);
b69ab3165 margin: calc(-1 * var(--halfpad));
b69ab3166}
b69ab3167
b69ab3168.commit-info-title-wrapper {
b69ab3169 display: flex;
b69ab3170 align-items: center;
b69ab3171 gap: var(--pad);
b69ab3172}
b69ab3173
b69ab3174.commit-info-title-wrapper:hover .hover-edit-button,
b69ab3175.commit-info-title-wrapper:focus-within .hover-edit-button {
b69ab3176 opacity: 1;
b69ab3177}
b69ab3178
b69ab3179.commit-info-rendered-field {
b69ab3180 cursor: pointer;
b69ab3181 white-space: pre-wrap;
b69ab3182 margin-bottom: var(--pad);
b69ab3183 transition: background-color 0.1s;
b69ab3184 border-radius: var(--pad);
b69ab3185 padding-top: 0;
b69ab3186}
b69ab3187
b69ab3188.commit-info-rendered-textarea,
b69ab3189.commit-info-rendered-custom {
b69ab3190 cursor: pointer;
b69ab3191 white-space: pre-wrap;
b69ab3192 transition: background-color 0.1s;
b69ab3193 border-radius: var(--pad);
b69ab3194 margin-inline: calc(-1 * var(--pad));
b69ab3195 margin-bottom: var(--pad);
b69ab3196 padding: var(--pad);
b69ab3197 word-break: break-word;
b69ab3198}
b69ab3199
b69ab31100.commit-info-rendered-field:focus-visible,
b69ab31101.commit-info-rendered-title:focus-visible,
b69ab31102.commit-info-rendered-textarea:focus-visible,
b69ab31103.commit-info-rendered-custom:focus-visible {
b69ab31104 outline: var(--focus-border) 1px auto;
b69ab31105 outline-offset: -1px;
b69ab31106}
b69ab31107
b69ab31108.commit-info-section .see-more-container {
b69ab31109 margin: calc(-1 * var(--pad));
b69ab31110 margin-left: 0;
b69ab31111 margin-bottom: var(--pad);
b69ab31112}
b69ab31113
b69ab31114.commit-info-rendered-textarea:hover,
b69ab31115.commit-info-rendered-field:hover,
b69ab31116.commit-info-rendered-custom:hover {
b69ab31117 background: var(--tooltip-background);
b69ab31118}
b69ab31119
b69ab31120.commit-info-actions-bar {
b69ab31121 display: flex;
b69ab31122 flex-direction: row;
b69ab31123 gap: var(--pad);
b69ab31124 flex-wrap: wrap;
b69ab31125 border-top: 1px solid var(--panel-view-border);
b69ab31126 padding: var(--pad);
b69ab31127 justify-content: space-between;
b69ab31128}
b69ab31129.commit-info-actions-bar-left {
b69ab31130 display: flex;
b69ab31131 flex-direction: row;
b69ab31132 gap: var(--pad);
b69ab31133 justify-content: flex-start;
b69ab31134}
b69ab31135.commit-info-actions-bar-right {
b69ab31136 display: flex;
b69ab31137 flex-direction: row;
b69ab31138 gap: var(--pad);
b69ab31139 margin-left: auto;
b69ab31140 flex-wrap: wrap;
b69ab31141 justify-content: flex-end;
b69ab31142}
b69ab31143.commit-info-actions-bar-row {
b69ab31144 width: 100%;
b69ab31145 display: flex;
b69ab31146 justify-content: flex-end;
b69ab31147 flex-direction: row;
b69ab31148 gap: var(--pad);
b69ab31149 margin-left: auto;
b69ab31150}
b69ab31151
b69ab31152.commit-info-actions-bar-row {
b69ab31153 display: flex;
b69ab31154 flex-direction: row;
b69ab31155 width: 100%;
b69ab31156 align-items: center;
b69ab31157 justify-content: flex-end;
b69ab31158}
b69ab31159
b69ab31160.commit-info-view-toolbar-top {
b69ab31161 padding: 0 var(--pad);
b69ab31162 border-bottom: 1px solid var(--panel-view-border);
b69ab31163 display: flex;
b69ab31164 flex-direction: row;
b69ab31165 gap: var(--pad);
b69ab31166 justify-content: flex-end;
b69ab31167}
b69ab31168
b69ab31169.commit-info-section.commit-info-title-field-section {
b69ab31170 margin-top: 0;
b69ab31171}
b69ab31172
b69ab31173.commit-info-view-toolbar-bottom:before {
b69ab31174 /* fade to bg color just above toolbar, to hint that you can keep scrolling */
b69ab31175 background: linear-gradient(0deg, var(--background), transparent);
b69ab31176 width: 100%;
b69ab31177 height: var(--toolbar-fade-height);
b69ab31178 display: block;
b69ab31179 position: absolute;
b69ab31180 content: ' ';
b69ab31181 margin-top: calc(-1 * var(--toolbar-fade-height));
b69ab31182 opacity: 0.8;
b69ab31183 pointer-events: none;
b69ab31184}
b69ab31185
b69ab31186.commit-info-view-multi-commit .commit-list .commit-details:before {
b69ab31187 display: none;
b69ab31188}
b69ab31189
b69ab31190.commit-info-field-buttons {
b69ab31191 display: flex;
b69ab31192 align-items: center;
b69ab31193 gap: 0;
b69ab31194}
b69ab31195
b69ab31196.hover-edit-button {
b69ab31197 opacity: 0;
b69ab31198 transition:
b69ab31199 opacity 0.1s,
b69ab31200 background-color 0.1s,
b69ab31201 transform 0.1s;
b69ab31202 display: flex;
b69ab31203 cursor: pointer;
b69ab31204 border-radius: var(--halfpad);
b69ab31205 background: none;
b69ab31206 border: none;
b69ab31207 padding: 2px;
b69ab31208 color: inherit;
b69ab31209}
b69ab31210.hover-edit-button:hover {
b69ab31211 transform: scale(1.1);
b69ab31212}
b69ab31213.commit-info-section:focus-within .hover-edit-button,
b69ab31214.commit-info-section:hover .hover-edit-button {
b69ab31215 opacity: 1;
b69ab31216}
b69ab31217
b69ab31218.commit-info-small-title {
b69ab31219 font-weight: bold;
b69ab31220 text-transform: uppercase;
b69ab31221 font-size: 90%;
b69ab31222 opacity: 0.9;
b69ab31223 display: flex;
b69ab31224 align-items: center;
b69ab31225 gap: var(--halfpad);
b69ab31226}
b69ab31227
b69ab31228.commit-info-section {
b69ab31229 margin: var(--pad);
b69ab31230 margin-top: calc(2 * var(--pad));
b69ab31231}
b69ab31232
b69ab31233.commit-info-title-byline {
b69ab31234 padding: 5px;
b69ab31235 margin: 0 var(--halfpad);
b69ab31236 display: flex;
b69ab31237 flex-wrap: nowrap;
b69ab31238 gap: var(--halfpad);
b69ab31239 align-items: center;
b69ab31240}
b69ab31241
b69ab31242.overflow-ellipsis {
b69ab31243 text-overflow: ellipsis;
b69ab31244 overflow: hidden;
b69ab31245 white-space: nowrap;
b69ab31246 flex-shrink: 0;
b69ab31247}
b69ab31248.overflow-ellipsis.overflow-shrink {
b69ab31249 flex-shrink: 1;
b69ab31250}
b69ab31251
b69ab31252.commit-info-title-byline .you-are-here-container {
b69ab31253 margin-right: 5px;
b69ab31254 flex-shrink: 0;
b69ab31255}
b69ab31256
b69ab31257.commit-info-title-byline .tooltip-creator {
b69ab31258 display: inline;
b69ab31259}
b69ab31260
b69ab31261.commit-info-view .empty-description {
b69ab31262 display: flex;
b69ab31263 gap: var(--halfpad);
b69ab31264 align-items: center;
b69ab31265 margin: var(--halfpad);
b69ab31266}
b69ab31267
b69ab31268.commit-info-view .changed-file-list {
b69ab31269 padding: var(--halfpad) 0;
b69ab31270}
b69ab31271
b69ab31272.commit-info-confirm-modal-paragraphs {
b69ab31273 display: flex;
b69ab31274 gap: var(--pad);
b69ab31275 flex-direction: column;
b69ab31276}
b69ab31277
b69ab31278.commit-info-view .image-drop-zone {
b69ab31279 margin: var(--halfpad) 0;
b69ab31280}
b69ab31281.commit-info-view .image-drop-zone vscode-text-area {
b69ab31282 margin: 0;
b69ab31283}
b69ab31284
b69ab31285.commit-info-field {
b69ab31286 position: relative;
b69ab31287}
b69ab31288.text-area-toolbar {
b69ab31289 display: flex;
b69ab31290 flex-direction: row;
b69ab31291 align-items: center;
b69ab31292 justify-content: flex-end;
b69ab31293 font-size: 90%;
b69ab31294 margin-bottom: calc(-1.5 * var(--pad));
b69ab31295 border-radius: var(--pad);
b69ab31296}
b69ab31297.text-area-toolbar .choose-file {
b69ab31298 display: none;
b69ab31299}
b69ab31300
b69ab31301.commit-info-tokenized-field {
b69ab31302 position: relative;
b69ab31303 display: flex;
b69ab31304 gap: var(--halfpad);
b69ab31305 align-items: center;
b69ab31306 flex-wrap: wrap;
b69ab31307 padding: var(--halfpad) 0;
b69ab31308 --token-height: 26px;
b69ab31309}
b69ab31310.commit-info-tokenized-field vscode-text-field {
b69ab31311 margin: 0;
b69ab31312}
b69ab31313
b69ab31314.commit-info-field-with-typeahead {
b69ab31315 flex-grow: 1;
b69ab31316 min-width: 30px;
b69ab31317 position: relative;
b69ab31318 height: var(--token-height);
b69ab31319}
b69ab31320
b69ab31321.commit-info-tokenized-field .token,
b69ab31322.suggested-reviewers .token {
b69ab31323 padding: 0;
b69ab31324 background-color: var(--tooltip-background);
b69ab31325 padding: 0 var(--pad);
b69ab31326 border: 1px solid var(--tooltip-border);
b69ab31327 display: flex;
b69ab31328 align-items: center;
b69ab31329 gap: var(--halfpad);
b69ab31330 min-height: calc(var(--token-height) - 2px);
b69ab31331}
b69ab31332
b69ab31333.commit-info-tokenized-field .token.clickable {
b69ab31334 cursor: pointer;
b69ab31335}
b69ab31336
b69ab31337.commit-info-tokenized-field .token.clickable:hover {
b69ab31338 background-color: var(--hover-darken);
b69ab31339 text-decoration: underline;
b69ab31340}
b69ab31341
b69ab31342.commit-info-tokenized-field .token button {
b69ab31343 margin-right: calc(-1 * var(--pad));
b69ab31344}
b69ab31345
b69ab31346.commit-info-tokenized-field .typeahead-suggestions {
b69ab31347 position: absolute;
b69ab31348 top: calc(100% + var(--halfpad));
b69ab31349 max-width: 250px;
b69ab31350 min-width: 250px;
b69ab31351 z-index: 20;
b69ab31352 display: flex;
b69ab31353 flex-direction: column;
b69ab31354 gap: var(--pad);
b69ab31355 height: unset;
b69ab31356}
b69ab31357
b69ab31358.commit-info-tokenized-field:not(:focus-within) .typeahead-suggestions {
b69ab31359 display: none;
b69ab31360}
b69ab31361
b69ab31362.commit-info-tokenized-field .typeahead-suggestions .suggestion {
b69ab31363 --typeahead-img-size: 30px;
b69ab31364 display: flex;
b69ab31365 flex-direction: row;
b69ab31366 gap: var(--pad);
b69ab31367 align-items: center;
b69ab31368 border-radius: var(--halfpad);
b69ab31369 padding: var(--halfpad);
b69ab31370 margin: calc(-1 * var(--halfpad));
b69ab31371 cursor: pointer;
b69ab31372}
b69ab31373
b69ab31374.commit-info-tokenized-field .typeahead-suggestions .suggestion:hover,
b69ab31375.commit-info-tokenized-field .typeahead-suggestions .selected-suggestion {
b69ab31376 background-color: var(--hover-darken);
b69ab31377}
b69ab31378.commit-info-tokenized-field .typeahead-suggestions .suggestion-label {
b69ab31379 display: flex;
b69ab31380 flex-direction: column;
b69ab31381 overflow-wrap: break-word;
b69ab31382 max-width: calc(100% - var(--typeahead-img-size));
b69ab31383}
b69ab31384
b69ab31385.commit-info-tokenized-field .typeahead-suggestions img {
b69ab31386 width: var(--typeahead-img-size);
b69ab31387 height: var(--typeahead-img-size);
b69ab31388 min-width: var(--typeahead-img-size);
b69ab31389 border-radius: 100%;
b69ab31390 position: relative;
b69ab31391 background: linear-gradient(45deg, var(--background), var(--foreground));
b69ab31392}
b69ab31393
b69ab31394.commit-info-tokenized-field .typeahead-suggestions img::before {
b69ab31395 /* fallback if the image URL doesn't load */
b69ab31396 content: '';
b69ab31397 position: absolute;
b69ab31398 top: 0;
b69ab31399 left: 0;
b69ab31400 bottom: 0;
b69ab31401 right: 0;
b69ab31402 line-height: var(--typeahead-img-size);
b69ab31403 background: linear-gradient(45deg, var(--background), var(--foreground));
b69ab31404 text-align: center;
b69ab31405 border-radius: 100%;
b69ab31406 display: block;
b69ab31407 width: var(--typeahead-img-size);
b69ab31408 height: var(--typeahead-img-size);
b69ab31409 overflow: hidden;
b69ab31410}
b69ab31411
b69ab31412.upload-status {
b69ab31413 cursor: pointer;
b69ab31414 user-select: none;
b69ab31415 min-height: 22px;
b69ab31416 display: flex;
b69ab31417}
b69ab31418
b69ab31419.upload-status-error {
b69ab31420 display: flex;
b69ab31421 align-items: center;
b69ab31422 gap: var(--pad);
b69ab31423}
b69ab31424
b69ab31425.upload-status-error vscode-button {
b69ab31426 opacity: 0;
b69ab31427 transition: opacity 0.2s;
b69ab31428}
b69ab31429.upload-status-error:hover vscode-button {
b69ab31430 opacity: 1;
b69ab31431}
b69ab31432
b69ab31433.image-drop-zone {
b69ab31434 position: relative;
b69ab31435}
b69ab31436.image-drop-zone.hovering-to-drop:before {
b69ab31437 width: 100%;
b69ab31438 height: calc(100% - 4px);
b69ab31439 display: flex;
b69ab31440 content: 'Drop here to upload';
b69ab31441 position: absolute;
b69ab31442 left: 0;
b69ab31443 top: 0;
b69ab31444 z-index: 2;
b69ab31445 right: 0;
b69ab31446 justify-content: center;
b69ab31447 align-items: center;
b69ab31448 font-size: 120%;
b69ab31449 background-color: rgba(0, 0, 0, 0.1);
b69ab31450}
b69ab31451
b69ab31452.commit-info-view-main-content > .tooltip-creator {
b69ab31453 width: 100%;
b69ab31454}