Template:新手會/frame/styles.css

/* strikethrough */
.strikethrough {
  position: relative;
}
.strikethrough::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2.5px;
  background-color: #ef9a9a;
  transform-origin: center right;
  transform: scaleX(0) translateY(-50%);
  transition: transform 0.25s ease;
}
.strikethrough:hover {
  color: rgba(0, 0, 0 , 0.75);
}
.strikethrough:hover::before {
  transform-origin: center left;
  transform: scaleX(1) translateY(-50%);
}

/* underline */
.underline {
  position: relative;
  color: #E7746F;
}
.underline::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background-color: #ef9a9a;
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.underline:hover::before {
  transform-origin: bottom left;
  transform: scaleX(1);
}

/* highlight */
.highlight {
  position: relative;
  z-index: 1;
}
.highlight::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -0.25em;
  right: -0.25em;
  background-color: #ef9a9a;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.highlight:hover::before {
  transform: scaleX(1);
  transform-origin: center left;
}

.frame {
  margin: 0.5rem 0;
  padding: 0.25rem;
  border-radius: 0.5rem;
}
.table {
  display: table;
  margin: 0.25rem;
  margin: 0 auto;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  padding: 0.5rem;
  vertical-align: middle;
}
.icon {
  border-radius: 100%;
  width: 50px;
  height: 50px;
  padding: 1rem;
  text-align: center;
  margin: 0 auto;
}
.title {
  font-size: x-large;
  font-weight: bold;
}
.content {
  text-shadow: 0 0 0.05rem #aaa;
}