ernestwisniewski/kbin

View on GitHub
assets/styles/_variables.scss

Summary

Maintainability
Test Coverage
$grid-breakpoints: (
        xs: 0,
        sm: 690px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1400px
) !default;

$aspect-ratios: (
        "1x1": 100%,
        "4x3": calc(3 / 4 * 100%),
        "16x9": calc(9 / 16 * 100%),
        "21x9": calc(9 / 21 * 100%)
) !default;

:root {
  --kbin-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --kbin-body-font-size: 1rem;
  --kbin-body-font-weight: 400;
  --kbin-body-line-height: 1.5;
  --kbin-body-text-align: left;
  --kbin-body-bg: #fff;

  --kbin-bg: #ecf0f1;
  --kbin-bg-nth: #fafafa;
  --kbin-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

  --kbin-text-color: #212529;
  --kbin-link-color: #37769e;
  --kbin-link-hover-color: #275878;
  --kbin-outline: #ff8c00 solid 4px;

  --kbin-primary-color: #61366b;
  --kbin-text-muted-color: #95a6a6;

  --kbin-success-color: #0f5132;
  --kbin-danger-color: #842029;

  --kbin-own-color: #0f5132;
  --kbin-author-color: #842029;

  --kbin-rounded-edges-radius: .5rem;

  // section
  --kbin-section-bg: #fff;
  --kbin-section-text-color: var(--kbin-text-color);
  --kbin-section-title-link-color: var(--kbin-link-color);
  --kbin-section-link-color: var(--kbin-link-color);
  --kbin-section-link-hover-color: var(--kbin-link-hover-color);
  --kbin-section-border: 1px solid #e5eaec;
  --kbin-author-border: 1px dashed var(--kbin-author-color);
  --kbin-own-border: 1px dashed var(--kbin-own-color);

  // meta
  --kbin-meta-bg: none;
  --kbin-meta-text-color: #606060;
  --kbin-meta-link-color: #606060;
  --kbin-meta-link-hover-color: var(--kbin-link-hover-color);
  --kbin-meta-border: 1px dashed #e5eaec;
  --kbin-avatar-border: 3px solid #ecf0f1;
  --kbin-avatar-border-active: 3px solid #d3d5d6;
  --kbin-blockquote-color: #0f5132;

  // options
  --kbin-options-bg: #fff;
  --kbin-options-text-color: #95a5a6;
  --kbin-options-link-color: #95a5a6;
  --kbin-options-link-hover-color: #32465b;
  --kbin-options-border: 1px solid #e5eaec;
  --kbin-options-link-hover-border: 3px solid #32465b;

  // forms
  --kbin-input-bg: #fff;
  --kbin-input-text-color: var(--kbin-text-color);
  --kbin-input-border: 1px solid #e5eaec;
  --kbin-input-placeholder-text-color: #929497;

  // buttons
  --kbin-button-primary-bg: #4e3a8c;
  --kbin-button-primary-hover-bg: #3f2e77;
  --kbin-button-primary-text-color: #fff;
  --kbin-button-primary-text-hover-color: #fff;
  --kbin-button-primary-border: 1px solid #3f2e77;

  --kbin-button-secondary-bg: #fff;
  --kbin-button-secondary-hover-bg: #f5f5f5;
  --kbin-button-secondary-text-color: var(--kbin-meta-text-color);
  --kbin-button-secondary-text-hover-color: var(--kbin-text-color);
  --kbin-button-secondary-border: 1px dashed #e5eaec;

  --kbin-button-danger-bg:  #842029;
  --kbin-button-danger-hover-bg: #921d27;
  --kbin-button-danger-text-color: #fff;
  --kbin-button-danger-text-hover-color: #fff;
  --kbin-button-danger-border: 1px dashed #842029;

  // header
  --kbin-header-bg: #110045;
  --kbin-header-text-color: #fff;
  --kbin-header-link-color: #fff;
  --kbin-header-link-hover-color: #e8e8e8;
  --kbin-header-link-active-bg: #0a0026;
  --kbin-header-border: 1px solid #e5eaec;
  --kbin-header-hover-border: 3px solid #fff;

  // topbar
  --kbin-topbar-bg: #0a0026;
  --kbin-topbar-active-bg: #150a37;
  --kbin-topbar-link-color: #fff;
  --kbin-topbar-active-link-color: #fff;
  --kbin-topbar-hover-bg: #150a37;
  --kbin-topbar-border: 1px solid  #150a37;

  //sidebar
  --kbin-sidebar-header-text-color: #909ea2;
  --kbin-sidebar-header-border: 1px solid #e5eaec;
  --kbin-sidebar-settings-row-bg: #E5EAEC;
  --kbin-sidebar-settings-switch-on-color: #fff ;
  --kbin-sidebar-settings-switch-on-bg: var(--kbin-button-primary-bg);
  --kbin-sidebar-settings-switch-off-color: #fff ;
  --kbin-sidebar-settings-switch-off-bg: #b5c4c9;
  --kbin-sidebar-settings-switch-hover-bg: #9992BC;

  //vote
  --kbin-vote-bg: #f3f3f3;
  --kbin-vote-text-color: #b6b6b6;
  --kbin-vote-text-hover-color: #000;
  --kbin-upvoted-color: #0f5132;
  --kbin-downvoted-color: #842029;
  
  //boost
  --kbin-boosted-color: var(--kbin-upvoted-color);

  // alerts
  --kbin-alert-info-bg: #fff3cd;
  --kbin-alert-info-border: 1px solid #ffe69c;
  --kbin-alert-info-text-color: #997404;
  --kbin-alert-info-link-color: #997404;

  --kbin-alert-danger-bg: #f8d7da;
  --kbin-alert-danger-border: 1px solid #f5c2c7;
  --kbin-alert-danger-text-color: var(--kbin-danger-color);
  --kbin-alert-danger-link-color: var(--kbin-danger-color);

  --kbin-alert-success-bg: var(--kbin-success-color);
  --kbin-alert-success-border: 1px solid var(--kbin-success-color);
  --kbin-alert-success-text-color: #fff;
  --kbin-alert-success-link-color: #fff;

  //entry
  --kbin-entry-link-visited-color: #7e8f99;

  // footer
  --kbin-footer-bg: #110045;
  --kbin-footer-text-color: #fff;
  --kbin-footer-link-color: #fff;
  --kbin-footer-link-hover-color: var(--kbin-header-link-hover-color);

  //fontawesome
  --kbin-font-awesome-font-family: "Font Awesome 6 Free";

  --kbin-new-comment-color: #664b00;
}