{"id":1198,"date":"2019-08-08T20:53:21","date_gmt":"2019-08-08T11:23:21","guid":{"rendered":"https:\/\/ale.chenonetta.com\/blog\/?p=1198"},"modified":"2019-08-08T20:53:23","modified_gmt":"2019-08-08T11:23:23","slug":"custom-challonge-css","status":"publish","type":"post","link":"https:\/\/ale.chenonetta.com\/blog\/2019\/08\/custom-challonge-css\/","title":{"rendered":"Custom Challonge CSS"},"content":{"rendered":"\n

Tonight I worked on some custom CSS that could be injected into a BrowserSource in OBS to turn a bracket that looks something like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Into something that looks like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The CSS is included below for future reference.<\/p>\n\n\n\n

@import url(\"https:\/\/fonts.googleapis.com\/css?family=Press+Start+2P&display=swap\");

body {
  background: black;
}

svg text {
  font-family: \"Press Start 2P\", monospace;
}

\/*** Remove rounded edges ***\/
svg g.match rect.match--base-background {
  rx: 0;
  ry: 0;
}
svg g.match g {
  clip-path: none;
}

\/**** Seeds ****\/
svg path.match--seed-background {
  fill: #c1261d;
  outline: 2px solid black;
  outline-offset: 0px;
}
svg text.match--seed {
  transform: translateY(4px);
  fill: black;
}
\/**** Player Names ****\/
svg text.match--player-name {
  font-size: 15px;
  transform: translateY(5px);
  fill: white;
  stroke: transparent;
}

svg text.match--player-name.-placeholder {
  stroke: transparent;
  \/* fill: transparent; *\/
  font-size: 10px;
  transform: translateY(2px);
}

svg path.match--player-background {
  outline: 2px solid black;
  outline-offset: 0px;
}

\/**** Match dividing line ****\/
svg line.match--player-divider {
  stroke: black;
  stroke-width: 3px;
}

\/**** Player Scores ****\/
svg text.match--player-score {
  font-size: 15px;
  transform: translateX(1px) translateY(5px);
  fill: black;
  stroke: transparent;
}

svg g.match svg.match--player path.match--player-score-background {
    outline: 2px solid black;
    outline-offset: 0px;
    \/* outline: 2px double #c1261d;
    outline-offset: -7px; *\/
  fill: white;
}

svg g.match svg.match--player path.match--player-score-background.-winner {
  \/* Winner gets highlighted background *\/
  fill: #f39c05;
}

\/*** Round Names ***\/
svg .round-label text {
  transform: translateY(2px);
}

svg.round g.round-label rect {
  fill: black;
  outline: 2px solid #aaecf2;
  outline-offset: -4px;
}

span.live-stamp {
  display: none;
}

<\/pre><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Tonight I worked on some custom CSS that could be injected into a BrowserSource in OBS to turn a bracket that looks something like this: Into something that looks like this: The CSS is included below for future reference. @import url(“https:\/\/fonts.googleapis.com\/css?family=Press+Start+2P&display=swap”);body { background: black;}svg text { font-family: “Press Start 2P”, monospace;}\/*** Remove rounded edges ***\/svg … <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[54],"tags":[190,188,70],"class_list":["entry","post","publish","author-admin","post-1198","format-standard","category-code-2","post_tag-blaugust","post_tag-challonge","post_tag-tetris"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/posts\/1198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/comments?post=1198"}],"version-history":[{"count":0,"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/posts\/1198\/revisions"}],"wp:attachment":[{"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/media?parent=1198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/categories?post=1198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ale.chenonetta.com\/blog\/wp-json\/wp\/v2\/tags?post=1198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}