Proyectos de Subversion LeadersLinked - SPA

import { css } from '@emotion/react';

import colors from '@styles/config/colors';

export const globalStyles = css`

  html {

    font-size: 14px;

  }

  *::-webkit-scrollbar {

    width: 6px !important;

    height: 6px !important;

  }

  *::-webkit-scrollbar-thumb {

    background-color: rgba(0, 0, 0, 0.2);

  }

  *::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0.08);

  }

  *::-webkit-input-placeholder,

  *::-moz-placeholder {

    color: #ccc;

    font-size: 15px;

  }

  h1,

  h2,

  h3,

  h4,

  h5,

  h6,

  p,

  b,

  a,

  span,

  label {

    color: ${colors.font.primary};

  }

  h1,

  h2,

  h3 {

    color: ${colors.font.title};

    font-weight: 700;

  }

  h4,

  h5,

  h6,

  span {

    color: ${colors.font.subtitle};

    font-weight: 600;

    font-size: 1rem;

    align-items: center;

  }

  span {

    display: inline-flex;

  }

  body {

    background-color: var(--body-bg-color);

    position: relative;

    overflow: hidden auto;

    font-family:

      -apple-system,

      system-ui,

      blink-mac-system-font,

      segoe ui,

      roboto,

      helvetica neue,

      fira sans,

      ubuntu,

      oxygen,

      oxygen sans,

      cantarell,

      droid sans,

      apple color emoji,

      segoe ui emoji,

      segoe ui emoji,

      segoe ui symbol,

      lucida grande,

      helvetica,

      arial,

      sans-serif;

    font-weight: 400;

    width: 100vw;

  }

  ul,

  ol {

    list-style: none;

    padding: 0;

    margin: 0;

  }

  form {

    margin: 0;

  }

  a {

    text-decoration: none;

    color: ${colors.font.subtitle};

    &:focus,

    &:hover,

    &:visited,

    &:link,

    &:active {

      text-decoration: none;

      outline: none;

      color: ${colors.font.subtitle};

    }

  }

  table {

    border-collapse: collapse;

    border-spacing: 0;

  }

  button {

    outline: none;

    border: none;

    padding: 0;

    background-color: transparent;

    &:active,

    &:focus {

      outline: none;

    }

  }

  input,

  textarea {

    outline: none;

  }

  section {

    width: 100%;

    position: relative;

  }

  p {

    color: ${colors.font.primary};

    font-size: 1rem;

    line-height: 1.2;

  }

  hr {

    margin-top: 1rem;

    margin-bottom: 1rem;

    border: 0;

    border-top: 1px solid #e5e5e5;

  }

  #app {

    display: grid;

    grid-template-rows: auto 1fr auto;

    gap: 1rem;

    min-height: 100vh;

  }

  .smiley-panel {

    transform-origin: bottom;

    overflow: hidden;

  }

  .smiley-panel-body {

    height: 160px;

    padding: 10px 0;

    border-top: 1px solid ${colors.border.primary};

    overflow: auto;

    .e1 {

      cursor: pointer;

    }

  }

  .fadedown {

    transition:

      opacity 300ms ease-in,

      transform 300ms ease-in;

    animation: 300ms ease-in 0s both fadedown;

  }

  .rbc-month-view,

  .rbc-time-view {

    background-color: ${colors.main};

  }

  .rbc-toolbar .rbc-btn-group button {

    background-color: ${colors.main};

  }

  .rbc-toolbar .rbc-toolbar-label {

    text-transform: capitalize;

    font-size: 1rem;

    color: ${colors.font.title};

  }

  .rbc-toolbar .rbc-btn-group svg {

    font-size: 1.1rem;

  }

  .rbc-calendar {

    min-height: 500px;

  }

  .companies-list {

    display: grid;

    gap: 0.5rem;

    position: relative;

    width: 100%;

    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));

  }

  .btn {

    display: inline-flex;

    align-items: center;

    border: none;

    border-radius: 30px;

    cursor: pointer;

    font-size: 0.95rem;

    line-height: 1;

    overflow: hidden;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    border-radius: ${colors.border.radius};

  }

  .btn-primary {

    background-color: ${colors.button.background.primary};

    color: ${colors.button.text.primary} !important;

    &:hover {

      background-color: ${colors.main};

    }

  }

  .btn-secondary {

    background: ${colors.button.background.secondary};

    color: ${colors.button.text.secondary} !important;

    &:hover {

      background-color: ${colors.button.background.secondary};

    }

  }

  .btn-tertiary {

    background-color: ${colors.button.background.tertiary};

    color: ${colors.button.text.tertiary} !important;

    &:hover {

      background: ${colors.button.background.tertiary};

      color: ${colors.button.text.tertiary} !important;

    }

  }

  .btn-secondary:disabled,

  .btn-primary:disabled,

  .btn-tertiary:disabled {

    cursor: no-drop;

  }

  .ck.ck-content {

    height: 100px;

  }

  .pac-container {

    z-index: 1051 !important;

  }

  .img-icon {

    height: 1rem;

    width: 1rem;

    &.lg {

      height: 1.5rem;

      width: 1.5rem;

    }

    &.options {

      height: 1.5rem;

      width: auto;

    }

    &.options-sm {

      height: 1rem;

      width: auto;

    }

    &.options-lg {

      height: 1.5rem;

      width: auto;

    }

  }

  .process-comm {

    width: 100%;

    text-align: center;

    padding-top: 40px;

  }

  ::-webkit-input-placeholder {

    /* Chrome/Opera/Safari */

    color: #b2b2b2;

  }

  ::-moz-placeholder {

    /* Firefox 19+ */

    color: #b2b2b2;

  }

  :-ms-input-placeholder {

    /* IE 10+ */

    color: #b2b2b2;

  }

  :-moz-placeholder {

    /* Firefox 18- */

    color: #b2b2b2;

  }

  .skill-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

  }

  .row {

    margin: 0;

  }

  .marketplace_card {

    background: $bg-color;

    border-radius: $border-radius;

    display: flex;

    flex-direction: column;

    max-width: 250px;

    overflow: hidden;

    transition: all 200ms;

    margin: auto;

    img {

      object-fit: cover;

      aspect-ratio: 4/2.5;

    }

    &:hover {

      transform: translateY(-1rem);

      box-shadow: $light-shadow;

    }

  }

  .settings-container {

    font-weight: normal;

    h2 {

      font-size: 18px;

      font-weight: 600;

      margin: 0.5rem auto;

      color: $subtitle-color;

    }

  }

  .acc-setting_content {

    padding: 2rem 1rem;

    width: 100%;

    overflow: hidden;

    border-radius: 10px;

    background-color: $bg-color;

    border: 1px solid $border-primary;

    box-shadow: 1px 0 4px var(--background-gray);

  }

  .notbat {

    display: flex;

    justify-content: space-between;

    border-top: 1px solid $border-primary;

    padding: 0.5rem 1rem;

    width: 100%;

    & > span {

      max-width: 70%;

    }

  }

  .cp-field {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    flex: 1;

    h5 {

      color: $title-color;

      font-size: 16px;

      font-weight: 600;

    }

    label {

      font-weight: 600;

      color: $subtitle-color;

    }

    input,

    textarea,

    select,

    .custom-input {

      background-color: $bg-color;

      border-radius: 10px;

      color: $font-color;

      border: 1px solid $border-primary;

      padding: 0.5rem 1rem;

      width: 100%;

    }

    textarea {

      height: 115px;

    }

  }

  .cpp-fiel {

    width: 100%;

    position: relative;

    i {

      position: absolute;

      top: 12px;

      left: 15px;

      color: #b2b2b2;

      font-size: 16px;

    }

  }

  .text-chat-title {

    color: var(--gray) !important;

    font-size: 1rem;

  }

  .chat-header a {

    text-decoration: none;

    color: var(--dark);

  }

  .chat-header h2 {

    font-weight: 700;

    text-align: center;

  }

  .pac-container {

    z-index: 1051 !important;

  }

  .process-comm .spinner {

    margin: 0 auto 0;

    width: 80px;

    text-align: center;

    height: 80px;

    border-radius: 100px;

    background-color: #fff;

    line-height: 80px;

    border: 1px solid #e1e1e1;

    cursor: pointer;

    & > div {

      width: 15px;

      height: 15px;

      background-color: #b9b9b9;

      border-radius: 100%;

      display: inline-block;

      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;

      animation: sk-bouncedelay 1.4s infinite ease-in-out both;

    }

    .bounce1 {

      -webkit-animation-delay: -0.32s;

      animation-delay: -0.32s;

    }

    .bounce2 {

      -webkit-animation-delay: -0.16s;

      animation-delay: -0.16s;

    }

    @keyframes sk-bouncedelay {

      0%,

      80%,

      100% {

        -webkit-transform: scale(0);

        transform: scale(0);

      }

      40% {

        -webkit-transform: scale(1);

        transform: scale(1);

      }

    }

  }

  .form-group {

    margin-bottom: 1rem;

    padding-top: 0px;

  }

  .description__label {

    display: flex;

    flex-direction: column;

    label {

      font-size: 1rem;

      font-weight: 600;

    }

    p {

      font-size: 0.9rem;

    }

    margin-bottom: 1rem;

  }

  .user__options-dropdown,

  .nav__options-dropdown {

    position: absolute;

    right: 0;

    min-width: 220px;

    top: calc(100% + 10px);

    background-color: var(--bg-color);

    border-radius: 5px;

    box-shadow:

    transition: all 0.2s ease-in-out;

    transform-origin: top;

    &.fadeOut {

      transform: scaleY(0);

      opacity: 0;

    }

    &.fadeIn {

      transform: scaleY(1);

      opacity: 1;

    }

    ul {

      display: flex;

      flex-direction: column;

      gap: 0.5rem;

      a {

        white-space: nowrap;

      }

    }

  }

  .user__options-dropdown {

    border-top-right-radius: 0;

  }

  .user__options-item {

    padding: 1rem 10px;

    border-top: 1px solid rgba(0, 0, 0, 0.08);

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    h3 {

      font-weight: 600;

    }

    ul {

      display: flex;

      flex-direction: column;

      gap: 0.5rem;

      a {

        color: gray !important;

        &:hover {

          text-decoration: underline !important;

        }

      }

    }

  }

  .nav__options-dropdown {

    transform: scaleY(0);

    right: -10%;

    opacity: 0;

    padding: 1rem;

    min-width: fit-content;

    ul {

      display: flex;

      flex-direction: column;

      a {

        color: gray;

        &:hover {

          text-decoration: underline;

        }

      }

    }

    &.level_three {

      transform: scaleY(1);

      transform: scaleX(0);

      top: -10%;

      left: 100%;

      max-height: 20rem;

      overflow: auto;

      transform-origin: left;

      a {

        max-width: 30ch;

      }

    }

    &.mobile {

      top: initial;

      bottom: 99%;

      left: 50%;

      transform-origin: bottom;

    }

    &.show {

      transform: scaleY(1);

      opacity: 1;

    }

    ul li:hover .level_three {

      transform: scaleX(1);

      opacity: 1;

    }

  }

  .user__options-description {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    padding: 10px;

    left: 0;

    right: initial;

    .btn__profile {

      padding: 2px;

      border: 1px solid #7405f9;

      width: 100%;

      border-radius: 30px;

      color: #7405f9;

      font-size: 0.9rem;

      text-align: center;

      transition: all 0.1s ease-in;

      &:hover {

        border: 2px solid #7405f9;

      }

    }

  }

  .user__options-info {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    width: 100%;

    h3 {

      font-weight: 600;

      font-size: 1.1rem;

    }

  }

  @media (min-width: 768px) {

    .nav__options-dropdown {

      right: 0;

      border-top-right-radius: 0;

    }

  }

  @keyframes fadedown {

    0% {

      opacity: 0.01;

      transform: translateY(-20px);

    }

    100% {

      opacity: 1;

      transform: translateY(0px);

    }

  }

`;