pkg-components/assets/styles/globals.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.screen {
  width: 230px;
  height: 50px;
  font-size: 40px;
  margin-bottom: 50px;
  padding: 0;
  text-align: right;
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 50px);
  grid-template-rows: auto;
}

.option-buttons-grid {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-gap: 10px;
  grid-auto-rows: minmax(10px, 50px);
  grid-column-start: 1;
  grid-column-end: 4;
}

.option-buttons-grid button {
  background: orange;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  border: none;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-gap: 10px;
  grid-auto-rows: minmax(10px, 50px);
  grid-row-start: 2;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 4;
}

.numbers-grid button {
  background: #adadad;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  border: none;
}

.operators-grid {
  display: grid;
  grid-template-columns: 50px;
  grid-gap: 10px;
  grid-auto-rows: minmax(10px, 50px);
  grid-row-start: 1;
  grid-row-end: 5;
  grid-column-start: 4;
  grid-column-end: 5;
}

.operators-grid button {
  background: black;
  color: white;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  border: none;
}

.ripple-button {
  position: relative;
  overflow: hidden;
  border: none;
  padding: 5px 20px;
  text-transform: uppercase;
  transition: background-color 0.3s;
  cursor: pointer;
  border-radius: 4px;
}


.ripple-button .ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgb(197, 197, 197);
  z-index: 1;
  animation: ripple-animation 0.7s;
  animation-fill-mode: forwards;
}

.ripple-button #ripple-button-label {
  position: relative;
  z-index: 2;
  font-weight: bold;
}

@keyframes ripple-animation {
  from {
    transform: scale(0);
    opacity: 1.2;
  }

  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* Inicio de Hoja de Normalización */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap');

/* Normalizes margin, padding */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
p,
blockquote {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: start;
  display: none !important;
}

/* Normalizes font-size for headers */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

/* Removes list-style from lists */
ol,
ul {
  list-style: none;
}

button {
  outline: none;
  border: none;
}

a {
  text-decoration: none !important;
}

/* Normalizes font-style and font-weight to normal */
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

/* Removes spacing in tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: -webkit-fill-available;
}

/* Removes border from fieldset and img */
fieldset,
img {
  border: 0;
}

/* Left-aligns text in caption and th */
caption,
th {
  text-align: left;
}

/* Removes quotation marks from q */
q:before,
q:after {
  content: '';
}

/* Fin de Hoja de Normalización */

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

@font-face {
  font-family: PFont-Bold;
  src: url('../fonts/Poppins-Bold.ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: PFont-Medium;
  src: url('../fonts/Poppins-Medium.ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: PFont-Regular;
  src: url('../fonts/Poppins-Regular.ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: PFont-Light;
  src: url('../fonts/Poppins-Light.ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@keyframes ripple-animation {
  from {
    transform: scale(0);
    opacity: 1.2;
  }

  to {
    transform: scale(1);
    opacity: 0;
  }
}

.box-group {
  background-color: rgb(136, 128, 114);
  padding: 0.5rem;
}

.box-items>.marmita-minitag {
  font-size: 11px;
}

.box-items {
  margin: 5px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  background-color: white;
  cursor: pointer;
  width: 96%;
  border-radius: 0.5rem;
  transition: background-color 140ms ease-in-out, border-color 75ms ease-in-out;
  box-shadow: 0 1px 2px 0 rgba(9, 30, 66, 0.062);
}

.ghx-summary {
  font-family: PFont-Light, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143px;
  max-height: 4.28571429em;
}

.box-items:not(:last-of-type) {
  margin-bottom: 0.5rem;
}

.box-items:hover {
  background: #ebecf0;
}

.dragging {
  background-color: #ff000026;
  opacity: 1 !important;
}

.group-title {
  text-align: center;
  margin-bottom: 1rem;
  font-weight: bold;
  color: white;
}

.current {
  background-color: #282c34;
  color: #fff;
  transition: 'all 0.3s ease-in-out';
  border-radius: 20px;
  opacity: 1;
}