| @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); |
|
|
| :root { |
| --c-text-primary: #282a32; |
| --c-text-secondary: #686b87; |
| --c-text-action: #404089; |
| --c-accent-primary: #434ce8; |
| --c-border-primary: #eff1f6; |
| --c-background-primary: #ffffff; |
| --c-background-secondary: #fdfcff; |
| --c-background-tertiary: #ecf3fe; |
| --c-background-quaternary: #e9ecf4; |
| } |
|
|
| body { |
| line-height: 1.5; |
| min-height: 100vh; |
| font-family: "Be Vietnam Pro", sans-serif; |
| background-color: var(--c-background-secondary); |
| color: var(--c-text-primary); |
| } |
|
|
| img { |
| display: block; |
| max-width: 100%; |
| } |
|
|
| :focus { |
| outline: 0; |
| } |
|
|
| .responsive-wrapper { |
| width: 90%; |
| max-width: 1280px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
|
|
| .header { |
| display: flex; |
| align-items: center; |
| height: 80px; |
| border-bottom: 1px solid var(--c-border-primary); |
| background-color: var(--c-background-primary); |
| } |
|
|
| .header-content { |
| display: flex; |
| align-items: center; |
| & > a { |
| display: none; |
| } |
| @media (max-width: 1200px) { |
| justify-content: space-between; |
| & > a { |
| display: inline-flex; |
| } |
| } |
| } |
|
|
| .header-logo { |
| margin-right: 2.5rem; |
| a { |
| display: flex; |
| align-items: center; |
| div { |
| // outline: 2px solid; |
| flex-shrink: 0; |
| position: relative; |
| &:after { |
| display: block; |
| content: ""; |
| position: absolute; |
| left: 0; |
| top: auto; |
| right: 0; |
| bottom: 0; |
| overflow: hidden; |
| height: 50%; |
| border-bottom-left-radius: 8px; |
| border-bottom-right-radius: 8px; |
| background-color: rgba(#fff, 0.2); |
| backdrop-filter: blur(4px); |
| } |
| } |
| } |
| } |
|
|
| .header-navigation { |
| display: flex; |
| flex-grow: 1; |
| align-items: center; |
| justify-content: space-between; |
| @media (max-width: 1200px) { |
| display: none; |
| } |
| } |
|
|
| .header-navigation-links { |
| display: flex; |
| align-items: center; |
|
|
| a { |
| text-decoration: none; |
| color: var(--c-text-action); |
| font-weight: 500; |
| transition: 0.15s ease; |
| & + * { |
| margin-left: 1.5rem; |
| } |
|
|
| &:hover, |
| &:focus { |
| color: var(--c-accent-primary); |
| } |
| } |
| } |
|
|
| .header-navigation-actions { |
| display: flex; |
| align-items: center; |
| & > .avatar { |
| margin-left: 0.75rem; |
| } |
| & > .icon-button + .icon-button { |
| margin-left: 0.25rem; |
| } |
|
|
| & > .button + .icon-button { |
| margin-left: 1rem; |
| } |
| } |
|
|
| .button { |
| font: inherit; |
| color: inherit; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0 1em; |
| height: 40px; |
| border-radius: 8px; |
| line-height: 1; |
| border: 2px solid var(--c-border-primary); |
| color: var(--c-text-action); |
| font-size: 0.875rem; |
| transition: 0.15s ease; |
| background-color: var(--c-background-primary); |
|
|
| i { |
| margin-right: 0.5rem; |
| font-size: 1.25em; |
| } |
|
|
| span { |
| font-weight: 500; |
| } |
|
|
| &:hover, |
| &:focus { |
| border-color: var(--c-accent-primary); |
| color: var(--c-accent-primary); |
| } |
| } |
|
|
| .icon-button { |
| font: inherit; |
| color: inherit; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 40px; |
| height: 40px; |
| border-radius: 8px; |
| color: var(--c-text-action); |
| transition: 0.15s ease; |
| i { |
| font-size: 1.25em; |
| } |
|
|
| &:focus, |
| &:hover { |
| background-color: var(--c-background-tertiary); |
| color: var(--c-accent-primary); |
| } |
| } |
|
|
| .avatar { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 44px; |
| height: 44px; |
| border-radius: 50%; |
| overflow: hidden; |
| } |
|
|
| .main { |
| padding-top: 3rem; |
| } |
|
|
| .main-header { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| justify-content: space-between; |
|
|
| h1 { |
| font-size: 1.75rem; |
| font-weight: 600; |
| line-height: 1.25; |
| @media (max-width: 550px) { |
| margin-bottom: 1rem; |
| } |
| } |
| } |
|
|
| .search { |
| position: relative; |
| display: flex; |
| align-items: center; |
| width: 100%; |
| max-width: 340px; |
| input { |
| font: inherit; |
| color: inherit; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0 1em 0 36px; |
| height: 40px; |
| border-radius: 8px; |
| border: 2px solid var(--c-border-primary); |
| color: var(--c-text-action); |
| font-size: 0.875rem; |
| transition: 0.15s ease; |
| width: 100%; |
| line-height: 1; |
|
|
| &::placeholder { |
| color: var(--c-text-action); |
| } |
|
|
| &:focus, |
| &:hover { |
| border-color: var(--c-accent-primary); |
| } |
| } |
|
|
| button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| border: 0; |
| background-color: transparent; |
| position: absolute; |
| left: 12px; |
| top: 50%; |
| transform: translateY(-50%); |
| font-size: 1.25em; |
| color: var(--c-text-action); |
| padding: 0; |
| height: 40px; |
| } |
| } |
|
|
| .horizontal-tabs { |
| margin-top: 1.5rem; |
| display: flex; |
| align-items: center; |
| overflow-x: auto; |
| @media (max-width: 1000px) { |
| scrollbar-width: none; |
| position: relative; |
| &::-webkit-scrollbar { |
| display: none; |
| } |
| } |
|
|
| a { |
| display: inline-flex; |
| flex-shrink: 0; |
| align-items: center; |
| height: 48px; |
| padding: 0 0.25rem; |
| font-weight: 500; |
| color: inherit; |
| border-bottom: 3px solid transparent; |
| text-decoration: none; |
| transition: 0.15s ease; |
| &:hover, |
| &:focus, |
| &.active { |
| color: var(--c-accent-primary); |
| border-bottom-color: var(--c-accent-primary); |
| } |
|
|
| & + * { |
| margin-left: 1rem; |
| } |
| } |
| } |
|
|
| .content-header { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| justify-content: space-between; |
| padding-top: 3rem; |
| margin-top: -1px; |
| border-top: 1px solid var(--c-border-primary); |
| } |
|
|
| .content-header-intro { |
| h2 { |
| font-size: 1.25rem; |
| font-weight: 600; |
| } |
|
|
| p { |
| color: var(--c-text-secondary); |
| margin-top: 0.25rem; |
| font-size: 0.875rem; |
| margin-bottom: 1rem; |
| } |
| } |
|
|
| .content-header-actions { |
| a:first-child { |
| @media (min-width: 800px) { |
| display: none; |
| } |
| } |
| } |
|
|
| .content { |
| border-top: 1px solid var(--c-border-primary); |
| margin-top: 2rem; |
| display: flex; |
| align-items: flex-start; |
| } |
| .content-panel { |
| display: none; |
| max-width: 280px; |
| width: 25%; |
| padding: 2rem 1rem 2rem 0; |
| margin-right: 3rem; |
| @media (min-width: 800px) { |
| display: block; |
| } |
| } |
|
|
| .vertical-tabs { |
| display: flex; |
| flex-direction: column; |
| a { |
| display: flex; |
| align-items: center; |
| padding: 0.75em 1em; |
| background-color: transparent; |
| border-radius: 8px; |
| text-decoration: none; |
| font-weight: 500; |
| color: var(--c-text-action); |
| transition: 0.15s ease; |
| &:hover, |
| &:focus, |
| &.active { |
| background-color: var(--c-background-tertiary); |
| color: var(--c-accent-primary); |
| } |
|
|
| & + * { |
| margin-top: 0.25rem; |
| } |
| } |
| } |
|
|
| .content-main { |
| padding-top: 2rem; |
| padding-bottom: 6rem; |
| flex-grow: 1; |
| } |
|
|
| .card-grid { |
| display: grid; |
| grid-template-columns: repeat(1, 1fr); |
| column-gap: 1.5rem; |
| row-gap: 1.5rem; |
| @media (min-width: 600px) { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| @media (min-width: 1200px) { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
|
|
| .card { |
| background-color: var(--c-background-primary); |
| box-shadow: 0 3px 3px 0 rgba(#000, 0.05), 0 5px 15px 0 rgba(#000, 0.05); |
| border-radius: 8px; |
| overflow: hidden; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .card-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| padding: 1.5rem 1.25rem 1rem 1.25rem; |
| div { |
| display: flex; |
| align-items: center; |
|
|
| span { |
| width: 40px; |
| height: 40px; |
| border-radius: 8px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| img { |
| // max-width: 85%; |
| max-height: 100%; |
| } |
| } |
|
|
| h3 { |
| margin-left: 0.75rem; |
| font-weight: 500; |
| } |
| } |
| } |
|
|
| .toggle { |
| span { |
| display: block; |
| width: 40px; |
| height: 24px; |
| border-radius: 99em; |
| background-color: var(--c-background-quaternary); |
| box-shadow: inset 1px 1px 1px 0 rgba(#000, 0.05); |
| position: relative; |
| transition: 0.15s ease; |
| &:before { |
| content: ""; |
| display: block; |
| position: absolute; |
| left: 3px; |
| top: 3px; |
| height: 18px; |
| width: 18px; |
| background-color: var(--c-background-primary); |
| border-radius: 50%; |
| box-shadow: 0 1px 3px 0 rgba(#000, 0.15); |
| transition: 0.15s ease; |
| } |
| } |
|
|
| input { |
| clip: rect(0 0 0 0); |
| clip-path: inset(50%); |
| height: 1px; |
| overflow: hidden; |
| position: absolute; |
| white-space: nowrap; |
| width: 1px; |
| &:checked + span { |
| background-color: var(--c-accent-primary); |
| &:before { |
| transform: translateX(calc(100% - 2px)); |
| } |
| } |
|
|
| &:focus + span { |
| box-shadow: 0 0 0 4px var(--c-background-tertiary); |
| } |
| } |
| } |
|
|
| .card-body { |
| padding: 1rem 1.25rem; |
| font-size: 0.875rem; |
| } |
|
|
| .card-footer { |
| margin-top: auto; |
| padding: 1rem 1.25rem; |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| border-top: 1px solid var(--c-border-primary); |
| a { |
| color: var(--c-text-action); |
| text-decoration: none; |
| font-weight: 500; |
| font-size: 0.875rem; |
| } |
| } |
|
|
| html { |
| &::-webkit-scrollbar { |
| width: 12px; |
| } |
|
|
| &::-webkit-scrollbar-thumb { |
| background-color: var(--c-text-primary); |
| border: 4px solid var(--c-background-primary); |
| border-radius: 99em; |
| } |
| } |
|
|
