react-floating-profile/dist/ui/style.css

React component to display your github profile <p align="left"> <a href="https://www.npmjs.com/package/react-floating-profile"><img src="https://flat.badgen.net/npm/v/react-floating-profile" alt="react-floating-profile version" /></a> <a href="http

:root {
  --floating-color-light: #3d444d;
  --floating-color-medium: #151b23;
  --floating-color-neutral: #0d1117;
  --floating-color-shadowy: #010409;
  --floating-color-dark: #000000;
  --floating-margin: 0.625rem;
  --floating-padding: 0.625rem;
  --floating-radius: 0.5rem;
  --floating-icon-location: 20px;
  --floating-text-gray: #9198a1;
  --floating-text-white: rgba(255, 255, 255, 0.87);
  --flaoting-text-blue: #4493f8;
  --floating-text-xl: 2rem;
  --floating-text-lg: 1.4rem;
  --floating-text-md: 1.2rem;
  --floating-text-sm: 0.925rem;
  --floating-text-xs: 0.8rem;
  --floating-border-thin: 1px solid var(--floating-color-light);
  --floating-border-thick: 2px solid var(--floating-color-light);
  --floating-border-super-thick: 3px solid var(--floating-color-light);
  --floating-line-height-tight: 1.2;
  --floating-line-height-normal: 1.4;
  --floating-line-height-relaxed: 1.6;
}
*::-webkit-scrollbar {
  display: none;
}

/* CSS Reset for consistent styling across environments */
.floating-profile-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* padding과 border가 요소 크기에 포함되도록 설정 */
  max-width: 100%; /* 요소가 부모 크기를 넘지 않도록 제한 */
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none;
}

.floating-profile-container {
  box-sizing: border-box; /* padding과 border가 요소 크기에 포함되도록 설정 */
  max-width: 100%; /* 요소가 부모 크기를 넘지 않도록 제한 */
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  line-height: var(--floating-line-height-normal);
}
/* Floating-Icon */
.icon-button-container {
  position: fixed;
  /* top: var(--floating-icon-location);
  bottom: var(--floating-icon-location);
  right: var(--floating-icon-location);
  left: var(--floating-icon-location); */

  display: block;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
}

.icon-button {
  padding: 0;
  background-color: var(--floating-color-medium);
  cursor: pointer;
}

.icon-button > img {
  width: 100%;
  height: 100%;
}
.icon-button:active {
  transform: scale(0.95);
}
.circle-shape-container {
  border-radius: 100%;
}
.circle-shape {
  border-radius: 100%;
}
.rect-shape-container {
  border-radius: 10%;
}
.rect-shape {
  border-radius: 10%;
}
.icon:hover {
  border: none;
}
.icon-large {
  width: 60px;
  height: 60px;
  border: var(--floating-border-super-thick);
}
.icon-medium {
  width: 40px;
  height: 40px;
  border: var(--floating-border-thick);
}
.icon-small {
  width: 30px;
  height: 30px;
  border: var(--floating-border-thin);
}
/* Floating-Icon END*/

/* ProfileModal COMPONENT, Top-level class */
.modal-overlay {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}
.modal-overlay.show .modal-container {
  transform: translateY(0);
}
.modal-container {
  transform: translateY(20px);
  transition: transform 0.3s ease-in-out;
  z-index: 99999;
  color-scheme: light dark;
  color: var(--floating-text-white);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  width: 450px;
  max-height: 600px;
  overflow-y: scroll;
  position: fixed;
  bottom: 20px; /* 아이콘 바로 위 */
  right: 20px;
  background: var(--floating-color-shadowy);
  border: var(--floating-border-thin);
  border-radius: var(--floating-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  padding: 15px;
  /* font-family: Arial, sans-serif; */
  font-family: "Roboto", sans-serif;
}
.modal-container ul {
  text-align: left;
}
.modal-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ProfileModal COMPONENT END*/

/* ProfileHeader COMPONENT*/
.profile-header-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--floating-margin);
  align-items: center;
}

.profile-name {
  font-weight: 700;
  font-size: var(--floating-text-xl);
  line-height: var(--floating-line-height-tight);
  margin: 0;
}
.profile-name,
.profile-login-location,
.profile-bio,
.profile-link {
  text-align: left;
}
.profile-login-location,
.profile-bio {
  font-size: var(--floating-text-sm);
  line-height: var(--floating-line-height-normal);
  margin: 0;
}
.profile-login {
  font-weight: 700;
}
.profile-link {
  text-decoration: underline;
  color: inherit;
  display: block;
}
/* ProfileHeader COMPONENT END*/

/* ReadMe COMPONENT */
.readme-container {
  text-align: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-height: 400px;
  border: var(--floating-border-thin);
  background-color: var(--floating-color-neutral);
  border-radius: var(--floating-radius);
  color: var(--floating-text-white);
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  object-fit: cover;
  margin-bottom: var(--floating-margin);
}
.readme-container img {
  max-width: 100%;
}
.close-btn-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.close-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 1rem;
}
/* README COMPONENT END*/

/* PinnedRepo COMPONENT*/
.repo-container {
  width: 100%;
}

.repo-item {
  border: var(--floating-border-thin);
  background-color: var(--floating-color-neutral);
  border-radius: var(--floating-radius);
  padding: var(--floating-padding);
  margin-bottom: var(--floating-margin);
}

.repo-title {
  text-decoration: none;
  font-size: var(--floating-text-md);
  font-weight: 700;
  color: var(--flaoting-text-blue);
  display: block;
  line-height: var(--floating-line-height-tight);
  margin: 0;
  padding: 0;
}
.repo-title:hover {
  color: var(--flaoting-text-blue);
}
.repo-title,
.repo-desc,
.repo-lan,
.repo-label {
  text-align: left;
}
.repo-desc {
  font-size: var(--floating-text-sm);
  line-height: var(--floating-line-height-normal);
  margin: 0.25rem 0;
}
.repo-label {
  font-weight: 700;
  font-size: var(--floating-text-lg);
  color: var(--floating-text-white);
  padding: var(--floating-padding);
}
.repo-lan {
  color: var(--floating-text-gray);
  font-size: var(--floating-text-xs);
  line-height: var(--floating-line-height-normal);
  margin: 0;
}
/* PinnedRepo COMPONENT END */

/* Organization */
.org-container {
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin: var(--floating-padding) auto;
}

/* Organization END*/

/* Media Query */

@media screen and (max-width: 720px) {
  .modal-container {
    width: 100vw;
    height: 100vh;
    max-height: none;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    border-radius: 0;
  }
}