redditraffler/redditraffler

/* App-wide styles here */
/* Colors:
* True Reddit: #ff4500;
* Reddit, lighter shade: #ff7644;
* Reddit, lighter shade, darker on hover: #e46a3e;
*/

/**** General ****/

@use "~react-bulma-components/src/index.sass";
@use './_variables.sass';

html {
  height: 100%;
  background-color: #363636;
}

a {
  color: #ff7644;
}

section {
  background-color: variables.$whitesmoke;
}

.column.is-same-height {
  display: flex;
}

.is-white {
  background-color: white;
}

.is-reddit.is-reddit {
  background-color: variables.$reddit;
  color: white;
}

.has-text-reddit {
  color: variables.$reddit;
}

.reddit-button {
  color: inherit;
}
.reddit-button:hover,
.reddit-button:active {
  color: #ff4500;
}

.message.is-reddit div.message-header {
  background-color: variables.$reddit;
  color: white;
}

.message.is-reddit div.message-body {
  color: #363636;
  background-color: #ffdcd0;
  border-color: variables.$reddit;
}
/**** End General ****/

/**** Header ****/
.navbar-brand {
  padding-left: 5rem;
}

.navbar-menu {
  padding-right: 5rem;
}

#brand:hover {
  text-decoration: none;
}

#nav-github {
  color: white;
}

#nav-github:hover {
  color: #333;
}

a.navbar-item,
a.navbar-brand,
a.navbar-link {
  color: white;
}

a.navbar-link:hover {
  color: white;
  text-decoration: none;
  background-color: variables.$reddit;
}

a.navbar-link::after,
a.navbar-link:not(.is-arrowless)::after {
  border-color: white;
  border-width: 2px;
}

a.navbar-item:hover,
a.navbar-item.is-active {
  color: white;
  background-color: transparent;
}

.navbar-brand:hover {
  background-color: transparent;
}

.navbar-brand img {
  width: 9rem;
}

/* User dropdown overrides */
.navbar-item:hover {
  text-decoration: underline;
  background-color: transparent;
}

.navbar-item.has-dropdown:hover .navbar-link {
  cursor: default;
  background-color: transparent;
}

.navbar-dropdown {
  border-top: none;
  background-color: variables.$reddit;
}

.navbar-dropdown a.navbar-item:hover {
  background-color: inherit;
  color: white;
}
/* End User dropdown overrides */

@media only screen and (max-width: 1023px) {
  .navbar-brand {
    padding-left: 0;
  }

  .navbar-menu {
    padding-right: 0;
  }

  /* User dropdown overrides */
  a.navbar-link {
    cursor: default;
  }

  .navbar-item.has-dropdown:hover {
    text-decoration: none;
  }

  .navbar-item.has-dropdown:hover .navbar-item:hover {
    text-decoration: underline;
  }
  /* End User dropdown overrides */
  /* Burger menu overrides */
  .navbar-menu {
    background-color: variables.$reddit;
  }

  nav .button,
  nav .button:focus,
  nav .button:active,
  nav .button.is-active {
    border-color: white;
    color: white;
  }

  nav .button:active,
  nav .button:hover,
  nav .button.is-active,
  nav .button.is-hovered {
    color: white;
  }

  nav .button:focus:not(:active),
  nav .button.is-focused:not(:active) {
    box-shadow: none;
  }
  /* Burger menu overrides */
}
/**** End Header ****/

/**** Footer ****/
.footer {
  font-size: 0.9rem;
  color: #a0a0a0;
  background-color: #363636;
  padding: 3rem 1.5rem;
}

.footer #ko-fi {
  padding: 0.5rem;
  opacity: 1;
}

.footer #text-container p:not(:last-child) {
  margin: 0.5rem;
}

.footer #text-container a {
  color: inherit;
}

.footer #text-container a:hover {
  text-decoration: underline;
}
/**** End Footer ****/