@sjtdev/koishi-plugin-dota2tracker/template/item/item/style.css

koishi插件-追踪群友的DOTA2对局

* {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: #000;
  font-size: 16px;
  width: 404px;
}

.container {
  margin: 2px;
  background-color: #222d35;
  width: 400px;
  overflow: hidden;
}

.container > * {
  padding: 10px;
}

.container > *.empty {
  padding: 0;
}

.header {
  position: relative;
  background-color: #32424e;
  color: #fff;
  display: flex;
}

.header > img {
  width: 70px;
  height: auto;
  vertical-align: middle;
  position: relative;
}

.header div {
  margin-left: 10px;
}

.header .name {
  font-family: "KaiTi", "楷体", "楷体_GB2312", "STKaiti", serif;
  text-shadow: 1px 1px 2px #111;
}

.header .name .item_id {
  color: #999;
}

.header .cost {
  display: flex;
  color: #f4d652;
  align-items: center;
}

.stats {
  padding: 5px;
  color: #667e9b;
  font-size: 14px;
  margin: 0 10px;
  border-block: 1px solid #405159;
  white-space: nowrap;
}

.stats p {
  display: flex;
}

.stats .dmg_type span.Physical {
  color: #ae2f28;
}

.stats .dmg_type span.Magical {
  color: #5b93d1;
}

.stats .dmg_type span.Pure {
  color: #c29c4a;
}

.stats .dispellable span.Yes {
  /* color: #c29c4a; */
}

.stats .dispellable span.No {
  color: #f00;
}

.stats .dispellable span.Strong {
  color: #9828ae;
}

.stats .bkbpierce span.Yes {
  color: #6add71;
}

.container > .attrs {
  color: #aabbd2;
  text-shadow: 1px 1px 0 #333;
  /* padding-bottom: 0; */
}

.value {
  color: #fff;
  font-weight: bold;
}

.abilities {
  font-size: 14px;
  margin: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ability.passive {
  background-color: #2d3c49;
  color: #7e8b9e;
}
.ability.passive h1 {
  color: #cce2ff;
  background-image: linear-gradient(to right, #3b505e, #2b3c47);
}

.ability.active {
  background-color: #2a3550;
  color: #9ba2d4;
}
.ability.active h1 {
  color: #AAAAFF;
  background-image: linear-gradient(to right, #5155b9, #2a3550);
  display: flex;
  justify-content: space-between;
}

.ability h1 {
    font-size: 14px;
    padding: 6px 8px;
    text-shadow: 1px 1px 2px #111;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ability > p {
  padding: 8px;
  text-shadow: 1px 1px 2px #000;
}

.ability .attrs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 50%;
}

.ability .attr {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ability .attr > .icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #000;
}

.notes {
  font-size: 14px;
  margin: 10px;
  color: #beddf0;
  background-color: #3b5566;
}

.lore {
  margin: 10px;
  /* margin-top: 20px; */
  font-size: 12px;
  color: #566d7e;
  background-color: #172025;
}

.recipes {
  overflow: hidden;
  font-size: 12px;
  color: #fff;
  padding: 20px 50px;
}

.recipes > * {
  display: flex;
  width: 100%;
  justify-content: center;
}

.recipes > *.multiple {
  justify-content: space-between;
}

.recipes .item {
  width: 60px;
  text-align: center;
}

.recipes .item img {
  width: 100%;
}

.hline.multiple {
  width: calc(100% - 59px);
  background-color: #fff;
  height: 1px;
  margin-left: 30px;
}

.recipes .line {
  height: 5px;
  background: linear-gradient(0deg, #fff, #fff) no-repeat center/1px 100%;
}

.recipes *.multiple .line,.recipes *.direct .line {
  height: 10px;
}

/* .middle .item::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
} */