| .tag { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| padding: 0.3rem 0.7rem 0.3rem 0.7rem; |
| border: 0.1rem solid rgb(189, 193, 198); |
| border-radius: 2rem; |
| background-color: transparent; |
| cursor: pointer; |
| |
| &:hover { |
| border-color: #7f5de3; |
| } |
| } |
| |
| .tag-clicked { |
| background-color: #7f5de3; |
| color: white; |
| } |
| |
| .code-actions-menu { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| flex-direction: column; |
| align-items: stretch; |
| font-size: large; |
| >li { |
| display: flex; |
| gap: 1rem; |
| align-items: center; |
| border-radius: 1rem; |
| padding: 0.3rem 1rem 0.3rem 1rem; |
| cursor: pointer; |
| |
| &:hover { |
| background-color: #ededed; |
| } |
| } |
| } |
| |
| .filter-content { |
| >div { |
| >p { |
| font-size: x-small; |
| font-weight: bold; |
| } |
| |
| >ul { |
| display: flex; |
| padding-left: 0; |
| gap: 0.5rem; |
| |
| >li { |
| list-style: none; |
| .tag(); |
| |
| &.clicked { |
| .tag-clicked(); |
| } |
| } |
| } |
| } |
| } |
| |
| .code-list-page-container { |
| display: grid; |
| grid-template-columns: minmax(1.5rem, auto) minmax(0, 1024px) minmax(1.5rem, auto); |
| grid-row-gap: 3rem; |
| |
| .top-banner { |
| grid-column: 2; |
| display: flex; |
| flex-direction: column; |
| |
| h1 { |
| font-weight: 700; |
| font-size: 36px; |
| } |
| |
| p { |
| font-size: 16px; |
| font-weight: 400; |
| color: gray; |
| } |
| |
| div { |
| display: flex; |
| gap: 1rem; |
| |
| button { |
| border: none; |
| border-radius: 2rem; |
| padding: 0.5rem 1.5rem 0.5rem 1.5rem; |
| display: flex; |
| align-items: center; |
| font-weight: bold; |
| cursor: pointer; |
| } |
| |
| button:nth-child(1) { |
| background-color: #7f5de3; |
| color: white; |
| gap: 0.7rem; |
| transition: box-shadow 0.3s ease-in-out; |
| |
| &:hover { |
| box-shadow: 0 0 0.3rem #7f5de3; |
| } |
| } |
| |
| button:nth-child(2) { |
| background-color: transparent; |
| border: solid; |
| border-width: 0.1rem; |
| border-color: rgb(189, 193, 198); |
| transition: border-color 0.3s ease-in-out; |
| |
| &:hover { |
| border-color: #7f5de3; |
| } |
| } |
| } |
| } |
| |
| .top-activate { |
| box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.3); |
| margin: 0 !important; |
| padding: 1rem 0 1rem 0; |
| } |
| |
| .search-area { |
| grid-column: 1 / span 3; |
| position: sticky; |
| top: 0; |
| display: grid; |
| grid-template-columns: minmax(1.5rem, auto) minmax(0, 1024px) minmax(1.5rem, auto); |
| grid-row-gap: 1rem; |
| z-index: 10; |
| background-color: white; |
| |
| .search-input { |
| grid-column: 2; |
| width: 100%; |
| height: 3rem; |
| display: flex; |
| justify-content: flex-start; |
| align-items: center; |
| border: 0.1rem solid rgb(189, 193, 198); |
| border-radius: 2rem; |
| transition: border-color 0.3s ease-in-out; |
| |
| &:focus-within { |
| border-color: #7f5de3; |
| } |
| |
| input { |
| flex: 1; |
| border: none !important; |
| outline: none !important; |
| } |
| |
| >div { |
| display: flex; |
| align-items: center; |
| margin: 0.1rem 0.5rem 0.1rem 0.5rem; |
| padding: 0.3rem 1rem 0.3rem 1rem; |
| border-radius: 2rem; |
| gap: 0.5rem; |
| font-weight: bold; |
| font-size: medium; |
| cursor: pointer; |
| transition: background-color 0.3s ease-in-out; |
| |
| &:hover { |
| background-color: rgb(189, 193, 198); |
| } |
| } |
| } |
| |
| .tags-cloud { |
| grid-column: 2; |
| display: flex; |
| flex-wrap: wrap; |
| line-height: 1.3rem; |
| gap: 0.5rem; |
| |
| button { |
| .tag(); |
| |
| &.clicked { |
| .tag-clicked(); |
| } |
| } |
| } |
| } |
| |
| .code-list { |
| grid-column: 2; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-start; |
| padding-left: 0; |
| |
| .code-list-row { |
| border-bottom: 0.05rem solid rgb(189, 193, 198); |
| margin-top: 2rem; |
| padding-bottom: 2rem; |
| display: grid; |
| grid-template-columns: repeat(1fr); |
| grid-template-rows: 3rem auto; |
| align-items: center; |
| |
| >h2 { |
| grid-column: 1 / span 2; |
| font-size: large; |
| font-weight: bold; |
| } |
| |
| >button { |
| grid-column: 3; |
| justify-self: end; |
| border: none; |
| border-radius: 1rem; |
| padding: 0.3rem 1rem 0.3rem 1rem; |
| font-weight: bold; |
| font-size: medium; |
| cursor: pointer; |
| |
| &:hover { |
| background-color: rgb(189, 193, 198); |
| } |
| } |
| |
| >ul { |
| grid-column: 1 / span 3; |
| grid-row: 2; |
| margin-top: 1rem; |
| width: 100%; |
| height: 300px; |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
| grid-template-rows: 300px; |
| grid-row-gap: 100vh; |
| overflow: hidden; |
| grid-column-gap: 1rem; |
| padding-left: 0; |
| } |
| |
| .code-list-row-item { |
| border: 0.1rem solid rgb(189, 193, 198); |
| border-radius: 1rem; |
| display: flex; |
| flex-direction: column; |
| align-content: stretch; |
| gap: 1rem; |
| overflow: hidden; |
| cursor: pointer; |
| |
| &:hover { |
| box-shadow: 0 0 0.5rem rgb(189, 193, 198); |
| } |
| |
| >img { |
| height: 40%; |
| } |
| |
| >div:nth-of-type(1) { |
| padding-left: 0.5rem; |
| padding-right: 0.5rem; |
| margin-bottom: auto; |
| display: grid; |
| grid-template-columns: 85% 15%; |
| |
| >p { |
| grid-column: 1; |
| margin-bottom: 0; |
| } |
| |
| >p:nth-child(1) { |
| font-size: medium; |
| font-weight: bold; |
| } |
| |
| >p:nth-child(2) { |
| font-size: small; |
| } |
| |
| >div { |
| grid-row: 1; |
| grid-column: 2; |
| |
| >button { |
| background-color: transparent; |
| border: none; |
| border-radius: 1rem; |
| font-size: large; |
| cursor: pointer; |
| |
| &:hover { |
| background-color: rgb(189, 193, 198); |
| } |
| } |
| } |
| } |
| |
| >div:nth-of-type(2) { |
| padding: 0.5rem; |
| border: solid rgb(189, 193, 198); |
| border-width: 0.1rem 0 0 0; |
| display: flex; |
| justify-content: flex-end; |
| |
| >p { |
| margin: 0; |
| } |
| } |
| } |
| } |
| |
| .code-list-row:last-child { |
| border: none; |
| } |
| } |
| |
| .search-result-list { |
| grid-column: 2; |
| |
| >h2 { |
| font-weight: bold; |
| } |
| |
| >ul:nth-child(2) { |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-start; |
| align-items: flex-start; |
| padding-left: 0; |
| |
| >li { |
| width: 100%; |
| height: 5rem; |
| padding: 1rem; |
| border-bottom: 0.1rem solid #ededed; |
| list-style: none; |
| display: flex; |
| align-items: center; |
| cursor: pointer; |
| |
| &:hover { |
| background-color: #ededed; |
| } |
| |
| >img { |
| flex-shrink: 0; |
| border-radius: 100%; |
| width: 4rem; |
| height: 4rem; |
| } |
| |
| >div:nth-of-type(1) { |
| flex: 1; |
| padding: 1rem; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: flex-start; |
| |
| >p { |
| padding: 0; |
| margin: 0; |
| } |
| |
| >p:nth-child(1) { |
| font-size: medium; |
| font-weight: bold; |
| } |
| } |
| |
| >div:nth-of-type(2) { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| |
| >button { |
| background-color: transparent; |
| border: none; |
| border-radius: 1rem; |
| cursor: pointer; |
| |
| &:hover { |
| background-color: rgb(189, 193, 198); |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
