Newer
Older
mobile.raikyakun.app / node / src / app / actions / page.css
nutrition 10 hours ago 2 KB 直接入力対応
h1 {
  font-size: 15px;
}
#my-users {
  display: none;
}
#my-users > select {
  padding: 5px;
}
#timeoutSec {
  float: right
}
#message {
  font-size: 90%;
  color: gray;
}
#response input {
  width: 90%;
  padding: 10px;
  margin: 10px 5%;
  box-sizing: border-box;
}
.action {
  text-align: center;
  margin: 10px;
}
.action span {
  padding: 10px 15px;
  line-height: 100%;
  font-weight: bold;
  font-size: 20px;
  border-radius: 3px;
  box-shadow: 0px 0px 3px;
  display: inline-block;
}
.action .enable:hover {
  opacity: 0.7;
  cursor: pointer;
  box-shadow: 0px 0px 1px;
}
.action img {
  height: 32px;
  vertical-align: middle;
  padding: 5px;
}
.accept {
  border: 1px solid green;
  background: linear-gradient(0deg, #c8e6c9, white);
  color: darkgreen;
  margin-right: 20px;
}
.reject {
  border: 1px solid red;
  background: linear-gradient(0deg, pink, white);;
  color: darkred;
}
.selected {
  box-shadow: 0px 0px 3px black inset !important;
  cursor: not-allowed;
}
.accept.selected{
  background: linear-gradient(180deg, #c8e6c9, #bbff6d);
}
.reject.selected{
  background: linear-gradient(180deg, pink, #ffa6c4);
}
.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ステータスボックス */
.statusBox {
  width: 80%;
  margin: auto;
  border-radius: 5px;
  padding: 7px;
  margin-top: 30px;
}
.statusBox.ok {
  border: 1px solid dodgerblue;
  color: dodgerblue;
  background: azure;
}
.statusBox.error {
  border: 1px solid crimson;
  color: crimson;
  background: mistyrose;
}
.statusBox.timeout {
  border: 1px solid darkorange;
  color: darkorange;
  background: oldlace;
}

@media (prefers-color-scheme: dark) {
  .accept {
    border-color: #4caf50;
    background: linear-gradient(0deg, #1b5e20, #2e7d32);
    color: #a5d6a7;
  }
  .reject {
    border-color: #f44336;
    background: linear-gradient(0deg, #b71c1c, #c62828);
    color: #ef9a9a;
  }
  .selected {
    box-shadow: 0px 0px 3px rgba(255,255,255,0.4) inset !important;
  }
  .accept.selected {
    background: linear-gradient(180deg, #2e7d32, #388e3c);
  }
  .reject.selected {
    background: linear-gradient(180deg, #c62828, #d32f2f);
  }
  .statusBox.ok {
    background: #0d2137;
    border-color: #1e88e5;
    color: #90caf9;
  }
  .statusBox.error {
    background: #2c0a0a;
    border-color: #e53935;
    color: #ef9a9a;
  }
  .statusBox.timeout {
    background: #2c1a00;
    border-color: #f57c00;
    color: #ffcc80;
  }
}