Created
March 17, 2022 00:16
-
-
Save jmarsh24/848b926bf93d34adc69a03d3e0e44d2b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "@shoelace-style/shoelace/dist/themes/light.css"; | |
| @import "@shoelace-style/shoelace/dist/themes/dark.css"; | |
| .content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background-color: #f9f9f9; | |
| width: 100%; | |
| height: 100%; | |
| border-top: 1px solid #ddd; | |
| overflow-y: scroll; | |
| } | |
| button { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| background: none; | |
| white-space: nowrap; | |
| border: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| button:hover { | |
| cursor: pointer; | |
| } | |
| .button__icon { | |
| width: 0.9em; | |
| height: 0.9em; | |
| fill: currentcolor; | |
| margin-right: 0.5em; | |
| } | |
| .button__icon--end { | |
| margin-right: 0; | |
| margin-left: 0.5em; | |
| } | |
| .button { | |
| text-decoration: none; | |
| border: 1px solid #d1d5db; | |
| font-family: inherit; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| align-self: start; | |
| gap: 5px; | |
| font-size: 14px; | |
| background-color: #fff; | |
| color: #6b7280; | |
| border-radius: 6px; | |
| text-align: center; | |
| line-height: 1.1; | |
| transition: 220ms all ease-in-out; | |
| transition: 220ms fill ease-in-out; | |
| } | |
| .button:not(.icon-button) { | |
| padding: 8px 16px; | |
| min-width: 10ch; | |
| min-height: 44px; | |
| } | |
| .button:hover, .button:active { | |
| color: #9ca3af; | |
| } | |
| .button:hover path, .button:active path { | |
| fill: #9ca3af; | |
| } | |
| .button:focus { | |
| outline: none; | |
| } | |
| .button--submit { | |
| background: #483fd0; | |
| color: white; | |
| transition: background 220ms ease-in-out; | |
| } | |
| .button--submit:hover { | |
| color: white; | |
| background: #4f46e5; | |
| } | |
| .button--danger { | |
| background: #d03f3f; | |
| color: white; | |
| transition: background 220ms ease-in-out; | |
| } | |
| .button--danger:hover { | |
| color: white; | |
| background: #e5464e; | |
| } | |
| .button--small { | |
| font-size: 1.15rem; | |
| } | |
| .button--block { | |
| width: 100%; | |
| } | |
| .icon-button { | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| border-radius: 50%; | |
| padding: 0.35em; | |
| } | |
| .icon-button__icon { | |
| width: 100%; | |
| height: 100%; | |
| fill: currentColor; | |
| } | |
| .button--flash { | |
| background: none; | |
| border: none; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 0px; | |
| font-size: 17px; | |
| } | |
| .button--flash:hover { | |
| cursor: pointer; | |
| } | |
| .form-button--omniauth { | |
| width: 100%; | |
| display: inline-flex; | |
| justify-content: center; | |
| padding: 8px 16px; | |
| margin: 4px 0; | |
| font-size: 16px; | |
| gap: 8px; | |
| border-radius: 6px; | |
| background: white; | |
| transition: color 150ms ease-in-out; | |
| transition: fill 150ms ease-in-out; | |
| border: 1px solid #d1d5db; | |
| color: #6b7280; | |
| } | |
| .form-button--omniauth:hover { | |
| color: #9ca3af; | |
| } | |
| .form-button--omniauth:hover path { | |
| fill: #9ca3af; | |
| } | |
| .form-button--omniauth:focus { | |
| border: 1px solid #93c5fd; | |
| } | |
| form { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| } | |
| :root { | |
| --input-border: #8b8a8b; | |
| --input-focus-h: 245; | |
| --input-focus-s: 100%; | |
| --input-focus-l: 42%; | |
| } | |
| input { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| } | |
| .input { | |
| font-size: 16px; | |
| font-size: max(16px, 1em); | |
| font-family: inherit; | |
| padding: 0.25em 0.5em; | |
| background-color: #fff; | |
| border: 2px solid var(--input-border); | |
| border-radius: 4px; | |
| transition: 180ms box-shadow ease-in-out; | |
| } | |
| .input--block { | |
| width: 100%; | |
| } | |
| .input:focus { | |
| border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l)); | |
| box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) + 40%), 0.8); | |
| outline: 3px solid transparent; | |
| } | |
| .input:not(textarea) { | |
| line-height: 1; | |
| height: 2.25rem; | |
| } | |
| input[type=file] { | |
| font-size: 0.9em; | |
| padding-top: 0.35rem; | |
| } | |
| textarea.input { | |
| resize: vertical; | |
| } | |
| .input[readonly] { | |
| border-style: dotted; | |
| cursor: not-allowed; | |
| color: #777; | |
| } | |
| .input[disabled] { | |
| --input-border: #ccc; | |
| background-color: #eee; | |
| cursor: not-allowed; | |
| } | |
| label { | |
| font-size: 1.125rem; | |
| font-weight: 500; | |
| line-height: 1; | |
| } | |
| a { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| } | |
| select { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| font-size: 16px; | |
| height: 36px; | |
| width: 2.5rem; | |
| padding-left: 0.7rem; | |
| border-radius: 6px; | |
| color: black; | |
| } | |
| .channels-index-container { | |
| display: flex; | |
| flex-direction: column; | |
| margin: 64px auto; | |
| width: 900px; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .channel-form { | |
| display: flex; | |
| margin-bottom: 50px; | |
| font-size: 2rem; | |
| } | |
| .channel-form input { | |
| margin: auto 0.5rem; | |
| padding: 5px 10px; | |
| border: 1px solid #d3d3d3; | |
| border-radius: 0.2rem; | |
| font-size: 1rem; | |
| background: white; | |
| cursor: pointer; | |
| } | |
| .channel-form input:hover { | |
| background: #f9f9f9; | |
| } | |
| .channel-form input:active { | |
| background: #f2f2f2; | |
| } | |
| .channels-index-row { | |
| display: flex; | |
| padding-bottom: 1rem; | |
| } | |
| .channels-index-item { | |
| width: 300px; | |
| border-bottom: 1px solid #f2f2f2; | |
| } | |
| #id.channels-index-item { | |
| width: 80px; | |
| } | |
| .clips { | |
| flex: 1; | |
| width: 100%; | |
| max-width: 1660px; | |
| padding: 0 40px; | |
| } | |
| .video-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); | |
| gap: 20px 20px; | |
| background-color: #f9f9f9; | |
| } | |
| .comment-with-replies { | |
| margin-bottom: 8px; | |
| border-radius: 6px; | |
| transition: background 0.3s ease; | |
| } | |
| .comment-with-replies:hover { | |
| background: #f3f4f6; | |
| } | |
| .avatar-icon { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| } | |
| .comment-thread { | |
| width: 700px; | |
| max-width: 100%; | |
| margin: auto; | |
| background-color: #fff; | |
| border: 1px solid transparent; | |
| /* Removes margin collapse */ | |
| } | |
| .sr-only { | |
| position: absolute; | |
| left: -10000px; | |
| top: auto; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } | |
| /* Comment */ | |
| .comment { | |
| position: relative; | |
| margin-bottom: 20px; | |
| } | |
| .comment-heading { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 50px; | |
| font-size: 14px; | |
| } | |
| .comment-info { | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| .comment-info__time { | |
| margin: 0; | |
| } | |
| .comment-author { | |
| color: rgba(0, 0, 0, 0.85); | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .replies { | |
| margin-left: 16px; | |
| } | |
| /* Adjustments for the comment border links */ | |
| .comment-border-link { | |
| display: block; | |
| position: absolute; | |
| top: 50px; | |
| left: 0; | |
| width: 12px; | |
| height: calc(100% - 50px); | |
| border-left: 5px solid transparent; | |
| border-right: 5px solid transparent; | |
| background-color: rgba(0, 0, 0, 0.1); | |
| background-clip: padding-box; | |
| margin-left: 4px; | |
| } | |
| .comment-border-link:hover { | |
| background-color: rgba(0, 0, 0, 0.3); | |
| } | |
| .comment-body { | |
| padding-left: 28px; | |
| } | |
| .comment-footer { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| /* Adjustments for toggleable comments */ | |
| details.comment summary { | |
| position: relative; | |
| list-style: none; | |
| cursor: pointer; | |
| } | |
| details.comment summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| details.comment:not([open]) .comment-heading { | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.2); | |
| } | |
| .comment-heading::after { | |
| display: inline-block; | |
| position: absolute; | |
| right: 5px; | |
| align-self: center; | |
| font-size: 12px; | |
| color: rgba(0, 0, 0, 0.55); | |
| } | |
| details.comment[open] .comment-heading::after { | |
| content: "Click to hide"; | |
| } | |
| details.comment:not([open]) .comment-heading::after { | |
| content: "Click to show"; | |
| } | |
| /* Adjustment for Internet Explorer */ | |
| @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { | |
| /* Resets cursor, and removes prompt text on Internet Explorer */ | |
| .comment-heading { | |
| cursor: default; | |
| } | |
| details.comment[open] .comment-heading::after, | |
| details.comment:not([open]) .comment-heading::after { | |
| content: " "; | |
| } | |
| } | |
| /* Styling the reply to comment form */ | |
| .reply-form textarea { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| font-size: 16px; | |
| width: 100%; | |
| max-width: 100%; | |
| margin-top: 15px; | |
| margin-bottom: 5px; | |
| } | |
| .registrations-edit-body { | |
| display: flex; | |
| align-items: center; | |
| height: 80vh; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .registrations-edit-container { | |
| display: flex; | |
| flex-direction: column; | |
| background: #f6f8fa; | |
| border-radius: 0.5rem; | |
| border: 1px solid #eaecef; | |
| } | |
| .registrations-edit-header-container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 1rem; | |
| width: 100%; | |
| background: #f6f8fa; | |
| } | |
| .registrations-edit-header-container h1 { | |
| color: #707070; | |
| margin: 0; | |
| } | |
| .registrations-edit-header-container h2 { | |
| color: #707070; | |
| font-size: 28px; | |
| font-weight: 500; | |
| margin: 0; | |
| margin-top: 30px; | |
| } | |
| .registrations-edit-header-container h3 { | |
| font-size: 1.1rem; | |
| font-weight: 100; | |
| } | |
| .registrations-edit-form-container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: auto; | |
| padding: 2rem; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #707070; | |
| } | |
| .registrations-edit-form-container .label { | |
| padding-left: 0.5rem; | |
| margin-bottom: 1rem; | |
| color: #707070; | |
| font-size: 0.8rem; | |
| font-weight: 400; | |
| } | |
| .registrations-edit-form-container .input { | |
| width: 100%; | |
| height: 32px; | |
| margin-top: 0.25rem; | |
| margin-bottom: 1.5rem; | |
| padding: 0 0.5rem; | |
| border-radius: 0.3rem; | |
| border: 1px solid #e1e4e8; | |
| } | |
| .registrations-edit-form-container .actions { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .registrations-edit-form-container .button { | |
| width: 266px; | |
| height: 40px; | |
| margin-bottom: 1.5rem; | |
| border-radius: 5px; | |
| font-size: 14px; | |
| font-weight: 400; | |
| color: white; | |
| cursor: pointer; | |
| border: none; | |
| outline: none; | |
| -webkit-appearance: none; | |
| } | |
| .registrations-edit-form-container .button.submit { | |
| background-color: #1d77f5; | |
| } | |
| .registrations-edit-form-container .button.submit:hover { | |
| background-color: #2f81f3; | |
| } | |
| .registrations-edit-form-container .button.cancel { | |
| background-color: #da3535; | |
| } | |
| .registrations-edit-form-container .button.cancel:hover { | |
| background-color: #e63535; | |
| } | |
| .registrations-edit-form-container .link.back:hover { | |
| color: #5c5c5c; | |
| } | |
| .registrations-new-body { | |
| display: flex; | |
| align-items: center; | |
| min-height: 70vh; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .registrations-new-container { | |
| display: flex; | |
| flex-direction: column; | |
| width: 308px; | |
| background: #f6f8fa; | |
| border-radius: 0.5rem; | |
| border: 1px solid #eaecef; | |
| } | |
| .registrations-new-header-container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 1rem; | |
| width: 308px; | |
| background: #f6f8fa; | |
| } | |
| .registrations-new-header-container h1 { | |
| color: #707070; | |
| margin: 0; | |
| } | |
| .registrations-new-header-container h2 { | |
| color: #707070; | |
| font-size: 32px; | |
| font-weight: 500; | |
| margin: 0; | |
| } | |
| .registrations-new-header-container h3 { | |
| font-size: 1.1rem; | |
| font-weight: 100; | |
| } | |
| .registrations-new-form-container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #707070; | |
| } | |
| .registrations-new-form-container input { | |
| width: 266px; | |
| height: 32px; | |
| margin: 0.5rem; | |
| padding-left: 0.5rem; | |
| border-radius: 0.3rem; | |
| border: 1px solid #e1e4e8; | |
| } | |
| .registrations-new-form-container label { | |
| padding-left: 0.5rem; | |
| color: #707070; | |
| font-size: 0.8rem; | |
| font-weight: 400; | |
| } | |
| .registrations-new-form-container p { | |
| color: #707070; | |
| font-size: 10px; | |
| line-height: 18px; | |
| font-weight: 400; | |
| padding-left: 0.5rem; | |
| } | |
| .registrations-new-form-container .actions input { | |
| width: 266px; | |
| height: 40px; | |
| margin-bottom: 15px; | |
| font-size: 14px; | |
| font-weight: 400; | |
| color: white; | |
| background-color: #1d77f5; | |
| cursor: pointer; | |
| } | |
| .registrations-new-form-container .actions input:hover { | |
| background-color: #257efa; | |
| } | |
| .sessions-new-body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 70vh; | |
| } | |
| .sessions-new-container { | |
| width: 308px; | |
| background-color: #f6f8fa; | |
| border-radius: 0.5rem; | |
| border: 1px solid #eaecef; | |
| } | |
| .sessions-new-header-container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 1rem; | |
| } | |
| .sessions-new-header-container h1 { | |
| color: #6a737d; | |
| font-size: 24px; | |
| font-weight: 300; | |
| letter-spacing: -0.5px; | |
| margin: 0; | |
| } | |
| .sessions-new-header-container h2 { | |
| color: #24292e; | |
| font-size: 48px; | |
| font-weight: 500; | |
| margin: 0; | |
| } | |
| .sessions-new-form-container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 14px; | |
| font-weight: 400; | |
| color: #24292e; | |
| padding: 1rem; | |
| } | |
| .sessions-new-form-container #remember_me { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| } | |
| .sessions-new-form-container #user_remember_me { | |
| width: 20px; | |
| } | |
| .sessions-new-form-container input { | |
| width: 266px; | |
| height: 32px; | |
| margin: 0.5rem; | |
| padding-left: 0.5rem; | |
| border-radius: 0.3rem; | |
| border: 1px solid #e1e4e8; | |
| } | |
| .sessions-new-form-container label { | |
| padding-left: 0.5rem; | |
| } | |
| .sessions-new-form-container p { | |
| color: #586069; | |
| font-size: 10px; | |
| line-height: 18px; | |
| font-weight: 400; | |
| padding-left: 0.5rem; | |
| } | |
| .sessions-new-form-container .actions input { | |
| width: 266px; | |
| height: 40px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: white; | |
| background-color: #1d77f5; | |
| margin-bottom: 15px; | |
| cursor: pointer; | |
| } | |
| .sessions-new-form-container .actions input:hover { | |
| background-color: #257efa; | |
| } | |
| .sessions-new-form-container a { | |
| color: #0366d6; | |
| } | |
| #error_explanation { | |
| padding: 0.75rem 1.25rem; | |
| margin-bottom: 1rem; | |
| border: 1px solid transparent; | |
| border-radius: 0.25rem; | |
| color: #0c5460; | |
| background-color: #d1ecf1; | |
| border-color: #bee5eb; | |
| font-size: 0.6rem; | |
| } | |
| .events-form { | |
| display: flex; | |
| flex-direction: column; | |
| margin-bottom: 50px; | |
| font-size: 2rem; | |
| gap: 10px; | |
| } | |
| .events-form input { | |
| margin: auto 0.5rem; | |
| padding: 5px 10px; | |
| border: 1px solid #d3d3d3; | |
| border-radius: 0.2rem; | |
| font-size: 1rem; | |
| background: white; | |
| cursor: pointer; | |
| } | |
| .events-form input:hover { | |
| background: #f9f9f9; | |
| } | |
| .events-form input:active { | |
| background: #f2f2f2; | |
| } | |
| .events-form select { | |
| font-size: 32px; | |
| } | |
| .footer { | |
| flex-shrink: 0; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding-top: 2rem; | |
| padding-bottom: 1rem; | |
| font-size: 12px; | |
| width: 100%; | |
| background-color: #f7fafc; | |
| border-top: 1px solid #e2e8f0; | |
| } | |
| .footer a { | |
| color: #323232; | |
| } | |
| .footerTitle { | |
| flex: 1; | |
| text-align: center; | |
| color: #636363; | |
| } | |
| .footer nav { | |
| flex: 1; | |
| justify-content: center; | |
| } | |
| .footer nav ul { | |
| display: flex; | |
| flex: 1; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: center; | |
| padding-inline-start: 0; | |
| margin: 0.5rem 0; | |
| } | |
| .footer nav li { | |
| display: flex; | |
| text-decoration: none; | |
| padding: 0.1rem 0.25rem; | |
| } | |
| #button-patreon { | |
| background: #FF424D; | |
| padding: 5px; | |
| color: #f8f8f8; | |
| border-radius: 2px; | |
| } | |
| #button-patreon:hover { | |
| color: white; | |
| } | |
| .primary-links a { | |
| display: flex; | |
| text-decoration: none; | |
| } | |
| .primary-links a:hover { | |
| text-decoration: none; | |
| color: #0366d6; | |
| } | |
| .secondary-links a { | |
| display: flex; | |
| text-decoration: none; | |
| color: #6B7280; | |
| } | |
| .secondary-links a:hover { | |
| text-decoration: none; | |
| color: #9CA3AF; | |
| } | |
| @media (max-width: 500px) { | |
| .footer { | |
| padding-top: 5px; | |
| } | |
| .footerTitle { | |
| padding-top: 5px; | |
| } | |
| } | |
| .playlists-index-container { | |
| display: flex; | |
| flex-direction: column; | |
| margin: 64px auto; | |
| width: 900px; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .playlist-form { | |
| display: flex; | |
| margin-bottom: 50px; | |
| font-size: 2rem; | |
| } | |
| .playlist-form input { | |
| margin: auto 0.5rem; | |
| padding: 5px 10px; | |
| border: 1px solid #d3d3d3; | |
| border-radius: 0.2rem; | |
| font-size: 1rem; | |
| background: white; | |
| cursor: pointer; | |
| } | |
| .playlist-form input:hover { | |
| background: #f9f9f9; | |
| } | |
| .playlist-form input:active { | |
| background: #f2f2f2; | |
| } | |
| .playlists-index-row { | |
| display: flex; | |
| padding-bottom: 1rem; | |
| } | |
| .playlists-index-item { | |
| width: 400px; | |
| border-bottom: 1px solid #f2f2f2; | |
| } | |
| #search_results { | |
| position: absolute; | |
| top: 45px; | |
| left: 0px; | |
| background-color: #fff; | |
| padding-top: 16px; | |
| font-size: 20px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| z-index: 999999; | |
| } | |
| #search_results ul { | |
| width: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #search_results ul li { | |
| list-style-type: none; | |
| } | |
| #search_results ul li a { | |
| display: block; | |
| padding: 4px 24px 4px 10px; | |
| } | |
| #search_results ul li a:hover { | |
| color: inherit; | |
| } | |
| #search_results ul li a[aria-selected=true] { | |
| background: #eee; | |
| } | |
| #search_results ul li:hover { | |
| background: #eee; | |
| } | |
| .search { | |
| display: flex; | |
| flex: 0 1 728px; | |
| margin: 0 20px; | |
| width: 100%; | |
| position: relative; | |
| } | |
| .search form { | |
| width: 100%; | |
| display: flex; | |
| border: 1px solid #ddd; | |
| height: 40px; | |
| border-radius: 4px; | |
| } | |
| .search button { | |
| display: flex; | |
| justify-content: center; | |
| background-color: #f0f0f0; | |
| height: 100%; | |
| width: 60px; | |
| border: none; | |
| font-size: 16px; | |
| border-left: 1px solid #ddd; | |
| border-top-right-radius: 4px; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .search button svg { | |
| color: #0f0f0f; | |
| } | |
| .search button:hover { | |
| background-color: #f4f4f4; | |
| } | |
| .search input { | |
| width: 100%; | |
| padding: 10px; | |
| border: 0; | |
| height: 100%; | |
| border-top-left-radius: 2px; | |
| border-bottom-left-radius: 2px; | |
| transition: border 100ms ease-in; | |
| font-size: 14px; | |
| } | |
| .search input:focus { | |
| outline: none; | |
| border: 1px solid #65a6f1; | |
| } | |
| @media (max-width: 250px) { | |
| .search { | |
| display: none; | |
| } | |
| } | |
| .left { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| color: #030303; | |
| } | |
| .left h3 { | |
| color: #030303; | |
| } | |
| .left:hover h3 { | |
| color: #323232; | |
| } | |
| .left:hover button { | |
| color: #323232; | |
| } | |
| .left #menu { | |
| padding: 0 7px; | |
| cursor: pointer; | |
| } | |
| .right { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .right .icons { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .right .buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .right .buttons-desktop { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .right .dropdown { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: 200px; | |
| top: 28px; | |
| right: 10px; | |
| position: absolute; | |
| border-radius: 6px; | |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); | |
| background: white; | |
| z-index: 99999; | |
| } | |
| .right .dropdown-link { | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 25px; | |
| width: 100%; | |
| color: #030303; | |
| border-bottom-right-radius: 6px; | |
| border-bottom-left-radius: 6px; | |
| transition: background 150ms ease-in-out; | |
| } | |
| .right .dropdown-link button { | |
| width: 100%; | |
| } | |
| .right .dropdown-link span { | |
| margin-left: 15px; | |
| } | |
| .right .dropdown-link:hover { | |
| background: #e5e5e5; | |
| color: #030303; | |
| cursor: pointer; | |
| } | |
| @media (max-width: 600px) { | |
| .right .buttons-desktop { | |
| display: none; | |
| } | |
| } | |
| @media (min-width: 600px) { | |
| .right .avatar { | |
| display: none; | |
| } | |
| .right .dropdown { | |
| display: none; | |
| } | |
| } | |
| .flash { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .alert { | |
| position: relative; | |
| padding: 0.75rem 1.25rem; | |
| border: 1px solid transparent; | |
| border-radius: 0.25rem; | |
| } | |
| .alert-info { | |
| color: #0c5460; | |
| padding: 0.75rem 1.25rem; | |
| background-color: #d1ecf1; | |
| border-color: #bee5eb; | |
| } | |
| .alert-warning { | |
| color: #856404; | |
| background-color: #fff3cd; | |
| border-color: #ffeeba; | |
| } | |
| .header { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| height: 60px; | |
| padding: 0 16px; | |
| } | |
| .header .bottom { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| #tooltip { | |
| background: #f2f2f2; | |
| color: #505050; | |
| font-weight: bold; | |
| padding: 8px 12px; | |
| font-size: 17px; | |
| border-radius: 4px; | |
| display: none; | |
| } | |
| #tooltip a { | |
| color: #065fd4; | |
| } | |
| #arrow, | |
| #arrow::before { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| background: inherit; | |
| } | |
| #arrow { | |
| visibility: hidden; | |
| } | |
| #arrow::before { | |
| visibility: visible; | |
| content: ""; | |
| transform: rotate(45deg); | |
| } | |
| #tooltip[data-popper-placement^=top] > #arrow { | |
| bottom: -4px; | |
| } | |
| #tooltip[data-popper-placement^=bottom] > #arrow { | |
| top: -4px; | |
| } | |
| #tooltip[data-popper-placement^=left] > #arrow { | |
| right: -4px; | |
| } | |
| #tooltip[data-popper-placement^=right] > #arrow { | |
| left: -4px; | |
| } | |
| #tooltip[data-show] { | |
| display: block; | |
| } | |
| .static-page-about { | |
| margin: 64px auto; | |
| width: 648px; | |
| } | |
| .static-page-about-title { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .static-page-contact { | |
| margin: 64px auto; | |
| width: 648px; | |
| } | |
| .static-page-contact a { | |
| color: #065fd4; | |
| } | |
| .static-page-privacy { | |
| margin: 64px auto; | |
| width: 648px; | |
| } | |
| .static-page-terms { | |
| margin: 64px auto; | |
| width: 648px; | |
| } | |
| .video-edit-body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-top: 100px; | |
| margin-bottom: 420px; | |
| } | |
| .video-edit-container { | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid #f2f2f2; | |
| border-radius: 0.2rem; | |
| width: 350px; | |
| padding: 1rem; | |
| } | |
| .edit-video-form { | |
| display: flex; | |
| flex-direction: column; | |
| width: 50%; | |
| margin: 0 auto; | |
| } | |
| .attribute-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0.5rem 0; | |
| } | |
| .attribute-label { | |
| flex: 1; | |
| } | |
| .attribute-value { | |
| flex: 1; | |
| } | |
| #leader, | |
| #follower, | |
| #song, | |
| #event { | |
| width: 100%; | |
| } | |
| .filter-sorting-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 1660px; | |
| padding: 0 40px; | |
| } | |
| .filter-header { | |
| display: flex; | |
| flex-direction: row; | |
| padding: 16px 0; | |
| justify-content: space-between; | |
| background-color: #f9f9f9; | |
| } | |
| .filter-container-button-results { | |
| display: flex; | |
| gap: 10px; | |
| flex-direction: row; | |
| } | |
| .filter-hd { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| } | |
| .filter-button { | |
| display: flex; | |
| text-decoration: none; | |
| padding: 6px; | |
| border: 1px solid #f2f2f2; | |
| background: #ffffff; | |
| border-radius: 3px; | |
| letter-spacing: 0.05em; | |
| align-items: center; | |
| font-size: 0.8rem; | |
| z-index: 1011; | |
| cursor: pointer; | |
| } | |
| .filter-button svg { | |
| height: 15px; | |
| } | |
| #filter-button-text { | |
| font-size: 0.85rem; | |
| margin: 0 0 0 8px; | |
| } | |
| #filter_results { | |
| display: flex; | |
| font-size: 0.8rem; | |
| color: #505050; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .filter-clear-button { | |
| display: flex; | |
| text-decoration: none; | |
| margin: 0 0 0 0.5em; | |
| padding: 7px; | |
| border: 1px solid #f2f2f2; | |
| background: #ffffff; | |
| border-radius: 0.2em; | |
| align-items: center; | |
| letter-spacing: 0.05em; | |
| font-size: 0.7rem; | |
| z-index: 1011; | |
| cursor: pointer; | |
| } | |
| .filter-clear-button:hover { | |
| color: #030303; | |
| } | |
| .filters { | |
| display: flex; | |
| height: 290px; | |
| } | |
| .filter-container-upper { | |
| display: flex; | |
| flex-wrap: wrap; | |
| height: 100%; | |
| } | |
| .videos-sortable-button { | |
| display: flex; | |
| color: #606060; | |
| justify-content: flex-start; | |
| align-items: center; | |
| border: none; | |
| background: none; | |
| font-size: 14px; | |
| border-radius: 2px; | |
| padding: 5px 0; | |
| cursor: pointer; | |
| } | |
| .videos-sortable-button:hover { | |
| color: #030303; | |
| } | |
| .videos-sortable-button .videos-sortable-icon { | |
| margin: 0 5px; | |
| font-size: 14px; | |
| color: #323232; | |
| } | |
| @media (max-width: 1220px) { | |
| .filters { | |
| flex-direction: column; | |
| gap: 250px; | |
| width: 250px; | |
| font-size: 50px; | |
| width: 100%; | |
| } | |
| .filter-container { | |
| height: 1420px; | |
| width: 270px; | |
| } | |
| } | |
| @media (max-width: 800px) { | |
| .filter-sorting-container { | |
| padding: 0 10px; | |
| } | |
| } | |
| .videos-header { | |
| display: flex; | |
| gap: 10px; | |
| margin: 0px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid #f2f2f2; | |
| color: #464646; | |
| } | |
| .videos-header h3 { | |
| color: #464646; | |
| } | |
| @media (max-width: 600px) { | |
| .videos-header { | |
| padding-left: 10px; | |
| } | |
| } | |
| .load-more-container { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 20px 0; | |
| background-color: #f9f9f9; | |
| } | |
| .load-more-results { | |
| flex: 1; | |
| margin: 0 auto; | |
| color: #606060; | |
| font-size: 0.9rem; | |
| } | |
| .load-more-container { | |
| padding: 30px 0; | |
| } | |
| .load-more-link { | |
| color: #505050; | |
| font-size: 0.9rem; | |
| background-color: white; | |
| border: 1px solid #e2e2e2; | |
| border-radius: 5px; | |
| text-align: center; | |
| text-decoration: none; | |
| width: 180px; | |
| padding: 10px; | |
| margin: 15px auto; | |
| } | |
| .load-more-link:hover { | |
| background-color: #e2e2e2; | |
| } | |
| .load-more-link .loading-animation { | |
| font-size: 0.35rem; | |
| } | |
| @media (max-width: 500px) { | |
| .load-more-container { | |
| padding: 20px 0 0 0; | |
| } | |
| .load-more-results { | |
| font-size: 14px; | |
| padding-bottom: 20px; | |
| } | |
| .load-more-link { | |
| width: 150px; | |
| margin: 0 auto 20px auto; | |
| padding: auto 0; | |
| font-size: 14px; | |
| } | |
| } | |
| .videos { | |
| flex: 1; | |
| width: 100%; | |
| max-width: 1660px; | |
| padding: 0 40px; | |
| } | |
| .video-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px 20px; | |
| background-color: #f9f9f9; | |
| } | |
| .video-container { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .videoWrapper { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| /* 16:9 */ | |
| height: 0; | |
| } | |
| .videoWrapper iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .thumbnail { | |
| position: relative; | |
| display: flex; | |
| height: 0; | |
| padding-bottom: 56.25%; | |
| overflow: hidden; | |
| } | |
| .thumbnail::after { | |
| content: attr(data-duration); | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, 0.85); | |
| color: white; | |
| right: 5px; | |
| bottom: 5px; | |
| padding: 0.1em 0.3em; | |
| border-radius: 0.3em; | |
| font-size: 0.7rem; | |
| } | |
| .thumbnail-image { | |
| width: 100%; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background-color: #aaa; | |
| border-radius: 0.3em; | |
| } | |
| .video-bottom-section { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| } | |
| .video-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .video-title { | |
| text-decoration: none; | |
| font-size: inherit; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| margin: 0.2rem 0; | |
| } | |
| .video-title a { | |
| color: --sl-color-gray-50; | |
| } | |
| .video-title a:hover { | |
| color: --sl-color-gray-100; | |
| } | |
| .video-song { | |
| font-size: 0.7rem; | |
| text-decoration: none; | |
| } | |
| .video-song a { | |
| font-size: 0.7rem; | |
| text-decoration: none; | |
| color: var(--sl-color-gray-300); | |
| } | |
| .video-song a:hover { | |
| color: var(--sl-color-gray-600); | |
| } | |
| .channel-icon { | |
| margin: 0.1rem 0.3rem 0 0; | |
| border-radius: 50%; | |
| width: 18px; | |
| height: 18px; | |
| background-color: #aaa; | |
| } | |
| .channel-title { | |
| font-size: 0.8rem; | |
| color: #555; | |
| } | |
| .video-channel { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .video-channel a { | |
| margin-bottom: 0.1rem; | |
| text-decoration: none; | |
| transition: color 150ms; | |
| } | |
| .video-channel a:hover { | |
| color: #111; | |
| } | |
| .video-metadata { | |
| color: #555; | |
| font-size: 0.7rem; | |
| } | |
| .video-event { | |
| font-size: 0.7rem; | |
| text-decoration: none; | |
| margin: 3px 0; | |
| } | |
| .video-event a { | |
| font-size: 0.7rem; | |
| text-decoration: none; | |
| color: #616161; | |
| } | |
| .video-event a:hover { | |
| color: #030303; | |
| } | |
| @media (max-width: 800px) { | |
| .videos { | |
| padding: 0px; | |
| } | |
| } | |
| .filter-container { | |
| position: absolute; | |
| top: 75px; | |
| border-radius: 6px; | |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); | |
| overflow-x: auto; | |
| margin-bottom: 0.5rem; | |
| background-color: #f9f9f9; | |
| border-bottom: 1px solid #f2f2f2; | |
| -ms-overflow-style: none; | |
| /* IE and Edge */ | |
| scrollbar-width: none; | |
| /* Firefox */ | |
| z-index: 10; | |
| } | |
| .filter-container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .filter-container #form-frame { | |
| flex: 1; | |
| display: flex; | |
| } | |
| .filter-container #form-frame form { | |
| flex: 1; | |
| display: flex; | |
| } | |
| .filter-container .filter { | |
| position: relative; | |
| margin: 0 8px; | |
| font-size: 0.8rem; | |
| } | |
| .filter-container .filter label { | |
| display: block; | |
| text-align: center; | |
| font-weight: 500; | |
| font-size: 0.8rem; | |
| padding: 0 0 8px 0; | |
| } | |
| .sorting-container { | |
| display: flex; | |
| position: absolute; | |
| top: 75px; | |
| z-index: 99999; | |
| background-color: #f9f9f9; | |
| border-radius: 6px; | |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .videos-sortable-container { | |
| display: flex; | |
| flex-direction: column; | |
| font-size: 0.7rem; | |
| justify-content: flex-start; | |
| width: 130px; | |
| margin: 10px; | |
| } | |
| .videos-sortable-container label { | |
| border-bottom: 1px solid #c2c2c2; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| padding: 5px; | |
| min-width: 50px; | |
| color: #323232; | |
| } | |
| .videos-sortable-container a { | |
| text-decoration: none; | |
| color: #505050; | |
| font-size: 0.8rem; | |
| text-align: center; | |
| } | |
| .videos-sortable-container a:hover { | |
| color: #030303; | |
| } | |
| .sorting-container { | |
| display: flex; | |
| flex-direction: row; | |
| padding: 20px 0; | |
| } | |
| .videos-new-container { | |
| display: flex; | |
| flex: 1; | |
| margin-top: 128px; | |
| justify-content: center; | |
| } | |
| .videos-new-form-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| height: 50px; | |
| } | |
| .videos-new-form-container input { | |
| margin: auto 0.5rem; | |
| padding: 5px 10px; | |
| border: 1px solid #d3d3d3; | |
| border-radius: 0.2rem; | |
| font-size: 1rem; | |
| background: white; | |
| cursor: pointer; | |
| } | |
| .videos-new-form-container input:hover { | |
| background: #f9f9f9; | |
| } | |
| .videos-new-form-container input:active { | |
| background: #f2f2f2; | |
| } | |
| .videos-new-form-container form { | |
| display: flex; | |
| } | |
| .video-info-lyrics { | |
| flex: 1; | |
| border: 1px solid #f2f2f2; | |
| background-color: #f9f9f9; | |
| text-align: center; | |
| line-height: 1.5em; | |
| min-width: 300px; | |
| height: 100%; | |
| } | |
| @media (max-width: 926px) { | |
| .video-info-lyrics { | |
| margin: 0; | |
| } | |
| } | |
| .recommended-videos-container { | |
| display: flex; | |
| gap: 10px; | |
| min-width: 200px; | |
| } | |
| .thumbnail-image--recommended { | |
| width: 180px; | |
| } | |
| .recommended-videos__header { | |
| border-bottom: 1px solid #c2c2c2; | |
| margin-bottom: 10px; | |
| } | |
| .recommended-videos__header h2 { | |
| margin-top: 0; | |
| margin-bottom: 10px; | |
| } | |
| .recommended-videos-card { | |
| margin-bottom: 10px; | |
| max-height: 400px; | |
| overflow-y: hidden; | |
| } | |
| .recommended-videos-card--active { | |
| max-height: fit-content; | |
| } | |
| .show-more-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 16px 0; | |
| } | |
| .under-video-container { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-direction: row; | |
| width: 100%; | |
| padding: 16px; | |
| } | |
| .video-responsive-container { | |
| width: 100%; | |
| max-width: 1300px; | |
| max-height: auto; | |
| margin: 0 auto; | |
| } | |
| .video-responsive-background { | |
| background-color: black; | |
| } | |
| .video-responsive { | |
| width: 100%; | |
| position: relative; | |
| padding-top: 56.25%; | |
| overflow: hidden; | |
| } | |
| .video-responsive iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| } | |
| .video-info-container { | |
| display: flex; | |
| max-width: 1300px; | |
| flex-direction: column; | |
| margin: 0 auto; | |
| justify-content: center; | |
| background-color: white; | |
| border-left: 1px solid #f2f2f2; | |
| border-right: 1px solid #f2f2f2; | |
| } | |
| .video-info-primary-container { | |
| max-width: 1300px; | |
| width: 100%; | |
| text-align: left; | |
| } | |
| .video-info-container-secondary { | |
| display: flex; | |
| gap: 20px; | |
| justify-content: space-between; | |
| max-width: 1300px; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| margin: 0 0.5em; | |
| } | |
| .video-info-details-main { | |
| flex: 1; | |
| flex-direction: column; | |
| min-width: 450px; | |
| } | |
| .video-info-details-main a { | |
| color: #065fd4; | |
| font-size: 0.8rem; | |
| } | |
| .video-info-details-main p { | |
| line-height: 1.2rem; | |
| } | |
| .recommended-videos-section { | |
| flex: 1; | |
| margin: 0 0.5em; | |
| flex-direction: column; | |
| max-width: 500px; | |
| min-width: 400px; | |
| } | |
| @media (max-width: 700px) { | |
| .grid-container-show { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .video-responsive iframe { | |
| border-radius: 0; | |
| } | |
| .under-video-container { | |
| flex-wrap: wrap; | |
| } | |
| .video-info-details-main { | |
| min-width: 300px; | |
| margin: 0; | |
| } | |
| .recommended-videos-section { | |
| margin: 0; | |
| width: 100%; | |
| max-width: 100%; | |
| padding: 0; | |
| } | |
| } | |
| .video-info-container-details { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| .video-info-details-secondary { | |
| flex: 1; | |
| } | |
| .detail-column-lyrics { | |
| text-align: center; | |
| margin: 0; | |
| } | |
| .detail-section-label { | |
| width: 100%; | |
| } | |
| .detail-row { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| border-bottom: 1px solid #f2f2f2; | |
| padding: 0.5em 0; | |
| } | |
| .detail-row:last-child { | |
| border-bottom: none; | |
| } | |
| .detail-column { | |
| display: flex; | |
| flex-direction: column; | |
| flex-basis: 100%; | |
| flex: 1; | |
| } | |
| .detail-item-heading { | |
| text-align: left; | |
| font-weight: 600; | |
| font-size: 0.8rem; | |
| color: #606060; | |
| } | |
| .detail-item-value { | |
| text-align: right; | |
| font-size: 0.8rem; | |
| color: #606060; | |
| } | |
| .detail-item-value a { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: flex-end; | |
| align-items: center; | |
| } | |
| .detail-item-value img { | |
| display: flex; | |
| height: 32px; | |
| width: 32px; | |
| margin: 2px 15px; | |
| border-radius: 16px; | |
| } | |
| .show-video-title h1 { | |
| text-decoration: none; | |
| font-size: inherit; | |
| color: #333; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| margin: 0.2em 0; | |
| } | |
| .show-video-song h2 { | |
| font-size: 1rem; | |
| text-decoration: none; | |
| margin: 0; | |
| font-weight: 400; | |
| } | |
| .show-video-song a { | |
| font-size: 1rem; | |
| text-decoration: none; | |
| color: #616161; | |
| } | |
| .show-video-song a:hover { | |
| color: #030303; | |
| } | |
| .show-channel-icon { | |
| margin: 0.2em 0.5em 0 0.2em; | |
| border-radius: 50%; | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .show-channel-title { | |
| font-size: 0.8rem; | |
| color: #555; | |
| } | |
| .show-video-channel { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1rem; | |
| } | |
| .show-video-channel a { | |
| margin-bottom: 0.1em; | |
| text-decoration: none; | |
| transition: color 150ms; | |
| color: #555; | |
| } | |
| .show-video-channel a:hover { | |
| color: #111; | |
| } | |
| .show-video-metadata { | |
| color: #555; | |
| font-size: 0.7rem; | |
| } | |
| .show-video-event { | |
| font-size: 1rem; | |
| text-decoration: none; | |
| margin: 3px 0; | |
| } | |
| .show-video-event a { | |
| font-size: 1rem; | |
| text-decoration: none; | |
| color: #616161; | |
| } | |
| .show-video-event a:hover { | |
| color: #030303; | |
| } | |
| .share-container { | |
| display: flex; | |
| justify-content: flex-end; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| flex-flow: wrap; | |
| gap: 10px; | |
| width: 100%; | |
| } | |
| .share-container .copy-to-clipboard { | |
| display: flex; | |
| justify-content: flex-end; | |
| margin: 10px 0px; | |
| width: 100%; | |
| } | |
| .share-container .copy-to-clipboard input { | |
| font-size: 15px; | |
| width: 100%; | |
| border-top-right-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| border-top: 1px solid rgba(27, 31, 35, 0.15); | |
| border-left: 1px solid rgba(27, 31, 35, 0.15); | |
| border-bottom: 1px solid rgba(27, 31, 35, 0.15); | |
| border-right: 0px; | |
| margin: 0px; | |
| } | |
| .share-container .copy-to-clipboard button { | |
| border-top-left-radius: 0px; | |
| border-bottom-left-radius: 0px; | |
| margin: 0 !important; | |
| height: 100%; | |
| } | |
| .share-container .like-buttons { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 15px; | |
| } | |
| .share-container .youtube-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 16px; | |
| margin-top: 15px; | |
| } | |
| .share-container .youtube-controls .youtube-controls-time { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .share-container .youtube-controls .youtube-controls-time .input { | |
| width: 100%; | |
| width: 60px; | |
| } | |
| .share-container .youtube-controls .select { | |
| height: 40px; | |
| line-height: 40px; | |
| background: white; | |
| } | |
| .share-container .youtube-controls .spacer { | |
| font-size: 20px; | |
| font-style: bold; | |
| } | |
| @media (max-width: 500px) { | |
| #downvote-button span { | |
| display: none; | |
| } | |
| } | |
| .ss-disabled { | |
| display: none; | |
| } | |
| .ss-open { | |
| height: 245px !important; | |
| background-color: #ffffff !important; | |
| } | |
| .ss-main.ss-select-filter { | |
| display: none; | |
| } | |
| .ss-main .ss-single-selected { | |
| background: none !important; | |
| } | |
| .ss-main .ss-single-selected .placeholder { | |
| position: relative; | |
| top: 2px; | |
| } | |
| .ss-deselect { | |
| margin: 0 !important; | |
| padding: 10px; | |
| } | |
| .ss-content.ss-open { | |
| border-radius: 4px; | |
| } | |
| .ss-search input { | |
| -webkit-appearance: none !important; | |
| -webkit-border-radius: 4px !important; | |
| -webkit-border-radius: 4px !important; | |
| background: #f9f9f9 !important; | |
| } | |
| .ss-search input:focus { | |
| box-shadow: none !important; | |
| border: 2px solid #5897fb !important; | |
| } | |
| .ss-list.disabled { | |
| display: none !important; | |
| } | |
| .ss-content.ss-open.disabled { | |
| background-color: #f9f9f9 !important; | |
| } | |
| .ss-main .ss-single-selected.ss-open-below { | |
| background-color: none !important; | |
| } | |
| .ss-main .ss-single-selected.ss-open-below { | |
| border: 0 !important; | |
| background-color: none !important; | |
| } | |
| .ss-main .ss-single-selected { | |
| padding-top: 0 !important; | |
| } | |
| .ss-main .ss-single-selected.ss-open-below { | |
| height: 30px !important; | |
| } | |
| .ss-content .ss-search input { | |
| padding: 6px 8px !important; | |
| } | |
| .ss-content .ss-list .ss-option { | |
| padding-left: 13px !important; | |
| padding-top: 7px !important; | |
| padding-bottom: 7px !important; | |
| } | |
| .ss-main .ss-single-selected { | |
| padding-left: 15px !important; | |
| padding-bottom: 0px !important; | |
| } | |
| .ss-main .ss-single-selected .placeholder, | |
| .ss-main .ss-single-selected .placeholder * { | |
| align-items: none !important; | |
| padding-top: 0px !important; | |
| } | |
| .ss-arrow { | |
| display: none !important; | |
| } | |
| @media (max-width: 475px) { | |
| .select-filter { | |
| font-size: 18px; | |
| } | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| font-family: var(--sl-font-sans); | |
| } | |
| main { | |
| display: flex; | |
| flex-direction: column; | |
| height: calc(100vh - 60px); | |
| } | |
| .isHidden { | |
| display: none !important; | |
| } | |
| .hidden { | |
| display: none !important; | |
| } | |
| .isActive { | |
| font-weight: bold !important; | |
| } | |
| .row { | |
| display: flex; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Entry point for your Sass build | |
| @import "@shoelace-style/shoelace/dist/themes/light.css"; | |
| @import "@shoelace-style/shoelace/dist/themes/dark.css"; | |
| @import "application/objects/colors.scss"; | |
| @import "application/layout.scss"; | |
| @import "application/typography.scss"; | |
| @import "application/modules/dashboard.scss"; | |
| @import "application/modules/profile.scss"; | |
| @import "application/objects/buttons.scss"; | |
| @import "application/objects/forms.scss"; | |
| @import "application/objects/inputs.scss"; | |
| @import "application/objects/links.scss"; | |
| @import "application/objects/selects.scss"; | |
| @import "channels/index.scss"; | |
| @import "clips/clip.scss"; | |
| @import "clips/edit.scss"; | |
| @import "clips/form.scss"; | |
| @import "clips/index.scss"; | |
| @import "clips/show.scss"; | |
| @import "comments/comments-with-replies.scss"; | |
| @import "comments/comments.scss"; | |
| @import "devise/registration/edit.scss"; | |
| @import "devise/registration/new.scss"; | |
| @import "devise/sessions/new.scss"; | |
| @import "devise/shared/error_messages.scss"; | |
| @import "devise/shared/links.scss"; | |
| @import "events/events.scss"; | |
| @import "layout/footer.scss"; | |
| @import "playlists/index.scss"; | |
| @import "shared/header/autocomplete.scss"; | |
| @import "shared/header/search.scss"; | |
| @import "shared/sidebar/left.scss"; | |
| @import "shared/sidebar/nav.scss"; | |
| @import "shared/sidebar/right.scss"; | |
| @import "shared/flash.scss"; | |
| @import "shared/header.scss"; | |
| @import "shared/sidebar.scss"; | |
| @import "shared/tooltip.scss"; | |
| @import "static_pages/about.scss"; | |
| @import "static_pages/contact.scss"; | |
| @import "static_pages/privacy.scss"; | |
| @import "static_pages/terms.scss"; | |
| @import "videos/edit/edit.scss"; | |
| @import "videos/index/filter-sorting.scss"; | |
| @import "videos/index/header.scss"; | |
| @import "videos/index/index.scss"; | |
| @import "videos/index/load_more.scss"; | |
| @import "videos/index/videos.scss"; | |
| @import "videos/index/filters/filter.scss"; | |
| @import "videos/index/filters/sorting.scss"; | |
| @import "videos/new/new.scss"; | |
| @import "videos/show/lyrics.scss"; | |
| @import "videos/show/recommended_videos.scss"; | |
| @import "videos/show/show.scss"; | |
| @import "videos/show/video_info_details.scss"; | |
| @import "videos/show/video_info_primary.scss"; | |
| @import "videos/slimselect-customized.scss"; | |
| *, | |
| *::before, | |
| *::after { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| font-family: var(--sl-font-sans); | |
| } | |
| main { | |
| display: flex; | |
| flex-direction: column; | |
| height: calc(100vh - 60px); | |
| } | |
| .isHidden { | |
| display: none !important; | |
| } | |
| .hidden { | |
| display: none !important; | |
| } | |
| .isActive { | |
| font-weight: bold !important; | |
| } | |
| .row { | |
| display: flex; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment