mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Eugene ChoiandGitHub
289f070d64
The previous DiffEditor view of the playground looked broken and not cohesive. There would be parts of the scrollbar appearing on the left side for some reason, along with two scrollbars on the right side. This PR makes the DiffEditor look more cohesive. Previous: https://github.com/user-attachments/assets/1aa1c775-5940-43b2-a75a-9b46452fb78b After: https://github.com/user-attachments/assets/b5c04998-6a6c-4b52-b3c5-b2fef21729e0
135 lines
2.6 KiB
CSS
135 lines
2.6 KiB
CSS
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: "Source Code Pro";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/fonts/Source-Code-Pro-Regular.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Optimistic Display";
|
|
src: url("/fonts/Optimistic_Display_W_Lt.woff2") format("woff2");
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Optimistic Display";
|
|
src: url("/fonts/Optimistic_Display_W_Md.woff2") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Optimistic Display";
|
|
src: url("/fonts/Optimistic_Display_W_Bd.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Chrome, Safari, Opera */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* IE, Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
}
|
|
|
|
::view-transition-old(.slide-in) {
|
|
animation-name: slideOutLeft;
|
|
}
|
|
::view-transition-new(.slide-in) {
|
|
animation-name: slideInLeft;
|
|
}
|
|
::view-transition-group(.slide-in) {
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes slideOutLeft {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
@keyframes slideInLeft {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
::view-transition-old(.container),
|
|
::view-transition-new(.container) {
|
|
height: 100%;
|
|
}
|
|
|
|
::view-transition-old(.accordion-container),
|
|
::view-transition-new(.accordion-container) {
|
|
height: 100%;
|
|
object-fit: none;
|
|
object-position: left;
|
|
}
|
|
|
|
::view-transition-old(.tab-highlight),
|
|
::view-transition-new(.tab-highlight) {
|
|
height: 100%;
|
|
}
|
|
::view-transition-group(.tab-text) {
|
|
z-index: 1;
|
|
}
|
|
|
|
::view-transition-old(.expand-accordion),
|
|
::view-transition-new(.expand-accordion) {
|
|
width: auto;
|
|
}
|
|
::view-transition-group(.expand-accordion) {
|
|
overflow: clip;
|
|
}
|
|
|
|
/**
|
|
* For some reason, the original Monaco editor is still visible to the
|
|
* left of the DiffEditor. This is a workaround for better visual clarity.
|
|
*/
|
|
.monaco-diff-editor .editor.original{
|
|
visibility: hidden !important;
|
|
}
|