User:0x99/styles.css: Difference between revisions

Revision as of 09:33, 16 September 2023

#pm-header {
  background-color: #f8f9fc;
  border: 1px solid #dee3ed;
  margin-bottom: 8px;
  padding: 8px;
  text-align: center;
}

#pm-subbox {
  background-color: #f8f9fc;
  border: 1px solid #dee3ed;
  margin-bottom: 8px;
  padding: 8px;
  text-align: center;
}

#pm-subbox ul {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

#pm-subbox li {
  display: inline-block;
  margin: 0 8px 0;
}

#pm-main-visual {
  border-color: #ebdfff;
  background-color: #fbf9ff;
}

#pm-main-visual .pm-container__h2 {
  border-color: #dfcbff;
  background-color: #eee3ff;
}

#pm-news {
  background-color: #fdf5ff;
  border-color: #f8d7ff;
}

#pm-news .pm-container__h2 {
  border-color: #f8d4ff;
  background-color: #fbe7ff;
}

#pm-notice {
  background-color: #fafcfd;
  border: 1px solid #e0ece9;
  margin-bottom: 8px;
  padding: 8px;
  text-align: center;
}

#pm-content-left {
  border-color: #d7f2ff;
  background-color: #f2fbff;
}

#pm-content-left .pm-container__h2 {
  border-color: #bdebff;
  background-color: #d6f2ff;
}

#pm-content-right {
  border-color: #ffefbb;
  background-color: #fffdf5;
}

#pm-content-right .pm-container__h2 {
  background-color: #fff9e6;
  border-color: #ffefbb;
}

.pm-container .pm-container__box {
  border: 1px solid #000;
  margin-bottom: 8px;
  padding: 8px 8px 0;
}

.pm-container .pm-container__h2 {
  border: 1px solid #000;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 8px;
  margin-top: 0;
  padding: 8px;
}

.pm-container .pm-container__content {
  margin: 0 0 8px 0;
}

.pm-container .pm-container__content .image img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 878px) {
  .pm-container {
    display: flex;
  }
  
  .pm-container .pm-container__left {
    margin-right: 2px;
  }
  
  .pm-container .pm-container__middle {
    margin-left: 2px;
    margin-right: 2px;
  }
  
  .pm-container .pm-container__right {
    margin-left: 2px;
  }

  .pm-container .pm-container__box--1\/2 {
    flex: 1 1 50%;
  }

  .pm-container .pm-container__box--2\/3 {
    flex: 1 1 66%;
  }

  .pm-container .pm-container__box--1\/3 {
    flex: 1 1 33%;
  }

  .pm-container .pm-container__box--1\/4 {
    flex: 1 1 25%;
  }

  .pm-container .pm-container__box--2\/4 {
    flex: 1 1 50%;
  }

  .pm-container .pm-container__box--3\/4 {
    flex: 1 1 75%;
  }

  .pm-container .pm-container__box--1\/5 {
    flex: 1 1 20%;
  }

  .pm-container .pm-container__box--2\/5 {
    flex: 1 1 40%;
  }

  .pm-container .pm-container__box--3\/5 {
    flex: 1 1 60%;
  }

  .pm-container .pm-container__box--4\/5 {
    flex: 1 1 80%;
  }
}