$dark: #222; $dark-hover: #333; $white: #fff; $border-light: #e5e5e5; $light-background: #f5f5f5; $lighter-background: #f9f9f9; $light-banner-background: #bbb; $primary: #c92a60; $primary-shadow: #c92a603b; $primary-border: #9d2a60; $primary-hover: #aa2452; $primary-border-hover: #4a1a31; $outline: #444; $secondary-hover: #f0f0f0; $secondary-border-hover: #e0e0e0; $error: $primary; $dark-heading: #444; $dark-heading-hover: #3a3a3a; $dark-body: #333; $dark-body-hover: #2a2a2a; $dark-text: #f5f5f5; $dark-text-hover: #d5d5d5; $dark-border: #555; $dark-border-hover: #4a4a4a; $dark-primary: #ec3d77; $dark-primary-hover: #d72d66; * { box-sizing: border-box; } .toolkit-tab--group { width: 100%; display: flex; padding: 0 16px; border-bottom-style: solid; border-bottom-width: 3px; .toolkit-tab { display: inline-block; padding: 8px 16px; margin-bottom: -3px; border-bottom-style: solid; border-bottom-width: 3px; } } .toolkit-tab--group { border-bottom-color: $border-light; a, a:hover, a:focus, a:active { text-decoration: none; } .toolkit-tab { color: $dark; border-bottom-color: $border-light; &:hover { color: $dark; border-bottom-color: $light-banner-background; } } .toolkit-tab__selected { color: $primary; border-bottom-color: $primary; &:hover { color: $primary-hover; border-bottom-color: $primary-hover; } } } .toolkit-dark .toolkit-tab--group { border-bottom-color: $dark-border; .toolkit-tab { color: $dark-text; border-bottom-color: $dark-border; &:hover { color: $dark-text-hover; border-bottom-color: $dark-border-hover; } } .toolkit-tab__selected { color: $dark-primary; border-bottom-color: $dark-primary; &:hover { color: $dark-primary-hover; border-bottom-color: $dark-primary-hover; } } } .toolkit-card .toolkit-card--body .toolkit-bbcode p { padding: 0; } .toolkit-bbcode a { &, &:active { color: $dark; } &:hover, &:focus { color: $dark-hover; } } .toolkit-dark .toolkit-bbcode a { &, &:active { color: $dark-text; } &:hover, &:focus { color: $dark-text-hover; } } .toolkit-bbcode { p { margin: 0; } .icontext img, .icon img { max-height: 48px; max-width: 48px; display: inline-block; } .center { text-align: center; } .right { text-align: right; } .indent-1 { padding-left: 8px; } .indent-2 { padding-left: 16px; } .indent-3 { padding-left: 24px; } .indent-4 { padding-left: 32px; } .underline { text-decoration: underline; } .smallcaps { font-variant: small-caps; } .spoiler { color: $dark; background-color: $dark; &:hover { color: $light-background; } } } body { margin: 0; font-family: sans-serif; background-color: $light-background; color: $dark; &.toolkit-dark { background-color: $dark; color: $white; } } img { display: block; max-width: 100%; height: 100%; object-fit: contain; } .toolkit-search { display: flex; width: 100%; align-items: center; border-radius: 3px; .toolkit-input { width: 100%; height: 40px; padding: 0; .toolkit-input--input { height: 40px; border-radius: 3px 0 0 3px; border-right: 0; &:hover, &:active, &:focus { border-right: 0; } } } .toolkit-button { &, &.toolkit-button__primary, &.toolkit-button__secondary, &.toolkit-button__primary-outline, &.toolkit-button__outline { border-radius: 0 3px 3px 0; height: 40px; border-left: 0; box-shadow: none; } } } .toolkit-thumbnails { display: flex; flex-wrap: wrap; justify-content: center; padding: 6px; img { max-height: 150px; &:hover { filter: brightness(110%); } } .toolkit-thumbnail { flex: 1 1 auto; padding: 6px; max-width: min(100%, 450px); } .toolkit-thumbnail--content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 8px; border-radius: 3px; border-width: 1px; border-style: solid; height: 100%; } .toolkit-thumbnail--image { position: relative; } color: $dark; background-color: $light-background; .toolkit-thumbnail--image { background-color: $light-background; } .toolkit-thumbnail--content { background-color: $white; border-color: $border-light; } } .toolkit-dark .toolkit-thumbnails { color: $dark-text; background-color: $dark; .toolkit-thumbnail--image { background-color: $dark; } .toolkit-thumbnail--content { background-color: $dark-body; border-color: $dark-border; } } .toolkit-thumbnail--border { padding: 0 12px; color: $dark; background-color: $light-background; .toolkit-thumbnail--border--content { padding: 16px; border-style: solid; border-width: 1px; border-radius: 3px; background-color: $white; border-color: $border-light; } } .toolkit-dark .toolkit-thumbnail--border { color: $dark-text; background-color: $dark; .toolkit-thumbnail--border--content { background-color: $dark-body; border-color: $dark-border; } } .toolkit-select { width: 300px; .toolkit-select--title { display: block; padding: 4px 0; font-weight: 500; font-size: 16px; } .toolkit-select--wrapper { position: relative; width: 100%; border-radius: 2px; &:before { position: absolute; display: block; top: 13px; right: 10px; } select { position: relative; width: 100%; height: 40px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border-width: 1px; border-style: solid; border-radius: 2px; padding: 8px 24px 8px 8px; font-size: 14px; font-weight: 500; outline: none; color: $dark; border-color: $border-light; &:hover { border: 1px solid $primary; } &:focus { border: 1px solid $primary; } } background-color: $white; &:hover { background-color: $light-background; } &:focus { background-color: $light-background; box-shadow: 0 1px 3px $primary-shadow; } } &.toolkit-dark .toolkit-select--wrapper { background-color: $dark-heading; &:hover { background-color: $dark-heading-hover; } &:focus { background-color: $dark-heading-hover; box-shadow: 0 1px 3px $primary-shadow; } select { color: $dark-text; border-color: $dark-border; &:hover { border: 1px solid $dark-primary; } &:focus { border: 1px solid $dark-primary; } } } } .toolkit-bar { background-color: $border-light; color: $dark; display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); &.toolkit-dark { background-color: $dark-body; color: $dark-text; } .toolkit-link { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: sans-serif; font-weight: 500; margin: 0; } } .toolkit-icon--link { display: block; width: 128px; height: 128px; margin-right: 16px; .toolkit-icon { border-color: $border-light; background-color: $lighter-background; } &.toolkit-dark .toolkit-icon { border-color: $dark-border; background-color: $dark; } .toolkit-icon { border-radius: 64px; border-width: 3px; border-style: solid; width: 100%; height: 100%; overflow: hidden; img:hover { filter: brightness(110%); } } &__small { width: 64px; height: 64px; .toolkit-icon { border-radius: 32px; } } &__tiny { width: 40px; height: 40px; .toolkit-icon { border-radius: 20px; } } } .toolkit-banner { height: 300px; width: 100%; background-color: $light-banner-background; &.toolkit-dark { background-color: $dark-heading; } img { object-fit: cover; } } .toolkit-profile { background-color: $border-light; color: $dark; &.toolkit-dark { background-color: $dark-border; color: $light-background; } .toolkit-profile--content { padding-bottom: 16px; } .toolkit-profile--content--top { margin-top: -86px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding: 0 16px; } .toolkit-profile--meta { padding-top: 20px; color: $light-background; text-shadow: 1px 1px 1px $dark; } .toolkit-profile--meta--display { font-weight: 600; font-size: 20px; } .toolkit-profile--description { padding: 16px; } } .toolkit-link { color: $primary; &.toolkit-plain { color: $dark; &:hover, &:focus, &:active { color: $dark-hover; } } &:hover, &:focus, &:active { color: $primary-hover; } } .toolkit-dark .toolkit-link { color: $dark-primary; &.toolkit-plain { color: $dark-text; &:hover, &:focus, &:active { color: $dark-text-hover; } } &:hover, &:focus, &:active { color: $dark-primary-hover; } } .toolkit-input { width: 300px; padding: 8px 0; font-family: sans-serif; .toolkit-input--label { display: block; } .toolkit-input--title { display: block; padding: 4px 0; font-weight: 500; font-size: 16px; } textarea.toolkit-input--input { resize: vertical; min-height: 95px; } .toolkit-input--input { width: 100%; padding: 8px 12px; margin: 0; border: 1px solid $border-light; background-color: $white; color: $dark; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1) inset; border-radius: 3px; outline: none; &:hover, &:focus { border: 1px solid $primary; } &:focus { box-shadow: 0px 0px 5px $primary-shadow inset; } } &.toolkit-dark .toolkit-input--input { background-color: $dark-heading; color: $light-background; border-color: $dark-border; &:hover, &:focus { border-color: $primary; } } .toolkit-input--error { color: $error; } } .toolkit-code { background-color: $light-background; color: $dark; border: 1px solid $border-light; border-radius: 3px; padding-left: 16px; overflow: hidden; .toolkit-code--pre { background-color: $lighter-background; font-size: 14px; font-family: mono; margin: 0; padding: 8px; border-left: 1px solid $border-light; overflow-x: auto; } } .toolkit-dark .toolkit-code { background-color: $dark-heading; color: $dark-text; border-color: $dark-border; .toolkit-code--pre { background-color: $dark-body; border-left-color: $dark-border; } } .toolkit-indicator { position: absolute; top: 4px; right: 4px; height: 36px; width: 36px; border-width: 1px; border-style: solid; border-radius: 18px; display: flex; justify-content: space-around; align-items: center; font-weight: 600; &__red { border-color: $white; color: $white; background-color: $primary; } &__gray { border-color: $white; color: $white; background-color: $dark-heading; } &__white { border-color: $dark; color: $dark; background-color: $white; } } .toolkit-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); color: $light-background; a.tile-link { color: $dark-text; &:hover, &:focus, &:active { color: $dark-text; } } &__scroll { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; } &__small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); font-size: 0.6em; &.toolkit-tiles__scroll { grid-auto-columns: minmax(120px, 1fr); } } .toolkit-tile { position: relative; } &__small .toolkit-indicator { height: 26px; width: 26px; border-radius: 13px; } picture { display: block; height: 100%; } img { object-fit: cover; width: 100%; } .toolkit-link { display: block; height: 100%; width: 100%; font-style: none; font-weight: 500; color: $border-light; &:hover, &:focus, &:active { color: $border-light; } } .toolkit-tile--overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; padding: 4px; justify-content: space-around; align-items: center; text-align: center; opacity: 0; transition: opacity 0.2s ease-in-out; background-color: rgba(0, 0, 0, 0.4); text-shadow: 1px 1px 1px $dark; &:hover { opacity: 1; } } .toolkit-title--meta p { margin: 0; margin-top: 16px; } } .toolkit-centered { width: 100%; max-width: 900px; margin: 0 auto; } .toolkit-card { background-color: $white; color: $dark; font-family: sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.3); border-radius: 3px; margin-bottom: 32px; overflow: hidden; > div:first-child { border-top: 0; } &.toolkit-dark { background-color: $dark-body; color: $dark-text; > div:first-child { border-top: 0; } .toolkit-card--title { background-color: $dark-heading; } .toolkit-card--section { border-top: 1px solid $dark-border; } } .toolkit-card--section { border-top: 1px solid $border-light; } h6, h5, h4, h3, h2, h1 { font-weight: 400; padding: 0; margin: 0; } .toolkit-card--spacer { padding: 8px; } .toolkit-card--title { padding: 16px; font-size: 18px; } .toolkit-card--body { padding: 16px; font-size: 14px; p { padding: 8px 0; margin: 0; } p + p { margin-top: 8px; } } } .toolkit-button-group { display: flex; margin: 0 -4px; } .toolkit-file, .toolkit-button { position: relative; overflow: hidden; font-family: sans-serif; font-size: 16px; padding: 8px 16px; margin: 0 4px; display: inline-block; text-align: center; cursor: pointer; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); &, & * { user-select: none; } span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &.toolkit-file__primary, &.toolkit-button__primary { border: 1px solid $primary-border; background-color: $primary; color: $white; &:hover { border-color: $primary-border; background-color: $primary-hover; } } &.toolkit-file__primary-outline, &.toolkit-button__primary-outline { border: 1px solid $primary; background-color: $white; color: $primary; &:hover { border-color: $primary-border; color: $primary-border; } } &.toolkit-file__link, &.toolkit-button__link { border-width: 0; box-shadow: none; margin: 0; color: $dark; &:hover { background-color: $secondary-hover; } } &.toolkit-file__primary-link, &.toolkit-button__primary-link { border-width: 0; box-shadow: none; margin: 0; color: $primary; &:hover { background-color: $secondary-hover; } } &.toolkit-file__outline, &.toolkit-button__outline { background-color: $white; border: 1px solid $outline; color: $outline; &:hover { border-color: $dark; color: $dark; } } &.toolkit-file__secondary, &.toolkit-button__secondary { border: 1px solid $border-light; background-color: $light-background; color: $dark; &:hover { border-color: $secondary-border-hover; background-color: $secondary-hover; } } .toolkit-file--action, .toolkit-button--action { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); width: 100%; border: 1px solid; } } .toolkit-dark .toolkit-file, .toolkit-dark .toolkit-button { &.toolkit-file__primary-outline, &.toolkit-button__primary-outline { background-color: $dark-body; border-color: $dark-primary; color: $dark-primary; &:hover { border-color: $dark-primary-hover; color: $dark-primary-hover; } } &.toolkit-file__link, &.toolkit-button__link { border-width: 0; box-shadow: none; margin: 0; color: $dark-text; &:hover { background-color: $dark-heading-hover; } } &.toolkit-file__primary-link, &.toolkit-button__primary-link { border-width: 0; box-shadow: none; margin: 0; color: $dark-primary; &:hover { background-color: $dark-heading-hover; } } &.toolkit-file__outline, &.toolkit-button__outline { background-color: $dark-body; color: $border-light; border-color: $border-light; &:hover { color: $secondary-border-hover; border-color: $secondary-border-hover; } } &.toolkit-file__secondary, &.toolkit-button__secondary { border-color: $dark-border; background-color: $dark-heading; color: $dark-text; &:hover { border-color: $dark-heading; background-color: $dark-heading-hover; } } } .toolkit-time__long { display: inline; } .toolkit-time__short { display: none; } .toolkit-nested { .toolkit-nested--children, .toolkit-nested--node { border-color: $border-light; } &.toolkit-dark .toolkit-nested--children, &.toolkit-dark .toolkit-nested--node { border-color: $dark-border; } .toolkit-nested--node { border-top-width: 1px; border-top-style: solid; padding: 16px 0; &:last-child { padding-bottom: 0; } } .toolkit-nested--children { padding-top: 16px; margin-bottom: 16px; } > .toolkit-nested--children { padding-top: 0; margin-bottom: 0; > .toolkit-nested--node:first-child { border-top-width: 0; padding-top: 0; } } > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children, > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left-width: 4px; border-left-style: solid; padding-left: 16px; } } @media(max-width: 1300px) { .toolkit-banner { height: 233px; } .toolkit-centered { max-width: 700px; } } @media(max-width: 700px) { .toolkit-input { width: 100%; } .toolkit-centered__padded { padding: 0 16px; } .toolkit-card__full-width { border-radius: 0; border-left: 0; border-right: 0; } .toolkit-select { width: 100%; } .toolkit-button-group { display: flex; flex-wrap: wrap; justify-content: space-between; } .toolkit-file, .toolkit-button { margin: 4px; flex: 1; min-width: 200px; display: flex; justify-content: space-around; align-items: center; } .toolkit-search .toolkit-button { min-width: 90px; } } @media(max-width: 700px) { .toolkit-time__long { display: none; } .toolkit-time__short { display: inline; } .toolkit-banner { height: 33vw; } } @media(max-width: 680px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 660px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 640px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 620px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 600px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 580px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 560px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 540px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 520px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 500px) { .toolkit-nested > .toolkit-nested--children > .toolkit-nested--children { border-left: 0; padding-left: 0; } } @media(max-width: 400px) { .toolkit-profile { .toolkit-profile--content--top { margin-top: -66px; } .toolkit-profile--meta { padding-top: 12px; } } .toolkit-icon--link { width: 96px; height: 96px; &__small { width: 48px; height: 48px; } &__tiny { width: 40px; height: 40px; } } } @media(max-width: 300px) { .toolkit-profile { .toolkit-profile--content--top { margin-top: -44px; } } .toolkit-icon--link { width: 64px; height: 64px; &__small { width: 32px; height: 32px; } &__tiny { width: 40px; height: 40px; } } }