dragonpolls/styles/style.css

/* Globals */
:root {
  --main-bg-color: rgb(48, 48, 48);
  --secondary-bg-color: rgba(10, 10, 10, 0.7);
  --main-fg-color: white;
  --main-accent-color: rgb(253, 122, 0);
  --disabled-color: gray;
  --green: green;
  --default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
  --error-color-translucent: rgba(255, 0, 0, 0.3);
  --error-color: rgba(255, 0, 0);
}
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --main-accent-color: color(display-p3 0.927 0.506 0.028)
  }
}

a:visited, a {
  color: var(--main-accent-color);
}

a svg {
  stroke: var(--main-accent-color);
  width: 1.5em;
  height: 1.5em;
  stroke-width: 0.5em;
}

body {
  background: var(--main-bg-color);
  color: var(--main-fg-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

button {
  background-color: var(--main-accent-color);
  outline: 1px solid var(--main-fg-color);
  color: var(--main-fg-color);
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

button:hover:not(:disabled) {
  box-shadow: 4px 6px 3px 0 var(--secondary-bg-color);
  transform: translate(-2px, -2px);
}

button:disabled {
  background-color: var(--disabled-color);
  cursor: not-allowed;
}

.hidden {
  display: none !important;
}

.disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--disabled-color) !important;
}

.disabled svg {
  stroke: var(--disabled-color) !important;
}

/* Header */
header {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 8px;
  background: var(--secondary-bg-color);
  box-shadow: var(--default-shadow);
}

.spacer {
  flex-grow: 1;
}

.linklabel {
  margin-left: 0.1em;
}

.linkcontents {
  display: flex;
  align-items: center;
}

header a, footer a {
  margin-right: 1em;
}

header .newpolllink svg {
  stroke-width: 1em;
}

/* Polls */
.poll {
  display: inline-block;
}

.poll .header {
  margin-bottom: 8px;
}

.poll .user {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.poll .user .avatar {
  margin-right: 8px;
  box-shadow: var(--default-shadow);
}

.datewrapper {
  display: grid;
  grid-column-gap: 8px;
  margin-left: 8px;
}

.created_at {
  grid-row: 1;
}
.closed_at {
  grid-row: 2;
}
datewrapper time {
  grid-column: 2;
}

.options form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 8px;
}

.votes-remaining {
  font-size: small;
}
.poll .header .user .avatar {
  width: 50px;
}
.option-responses .avatar {
  width: 20px;
}

/* Success banner */
.banner-wrapper {
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  box-sizing: border-box;
}

.banner {
  padding: 8px;
  display: inline-block;
  margin-bottom: 8px;
  box-shadow: var(--default-shadow);
}

.banner.success {
  background-color: var(--green);
}
.banner.error {
  background-color: var(--error-color);
}

.banner-wrapper.hiding {
  transform: translateX(-200%);
}
.banner-wrapper.resizing {
  height: 0px;
  width: 0px;
  box-shadow: 0px;
  padding: 0px;
}

.banner span {
  font-size: x-large;
  margin-right: 8px;
}

/* Poll creation */

.create-poll {
  display: grid;
  max-width: 400px;
  grid-auto-columns: auto 1fr;
  grid-column-gap: 8px;
}
.create-poll input[type=text],
.create-poll input[type=number],
.create-poll input[type=checkbox] {
  grid-column: 2;
}
.create-poll input[type=number] {
  max-width: 3em;
  background-color: var(--secondary-bg-color);
  color: var(--main-accent-color);
}
.create-poll input[type=text] {
  display: block;
  width: 100%;
  background-color: var(--secondary-bg-color);
  color: var(--main-accent-color);
}
.create-poll input[type=text]:focus {
  outline: 1px solid var(--main-accent-color);
}
.create-poll label {
  grid-column: 1;
}
.create-poll label[for=options] {
  grid-row: 2;
}
.create-poll #options {
  grid-row: 2;
}
.create-poll label[for=anonymous] {
  grid-row: 3
}
.create-poll label[for=public] {
  grid-row: 4
}
.create-poll label[for=max_options] {
  grid-row: 5
}
.create-poll label[for=duration] {
  grid-row: 6
}
#duration {
  grid-row: 6;
}
.create-poll button[type=submit] {
  grid-row: 8;
}
.create-poll .error {
  grid-column: 1/3;
  grid-row: 7;
  background-color: var(--error-color-translucent);
}
.create-poll .error:not(:empty) {
  margin: 8px;
}
.post-poll textarea {
  background-color: var(--secondary-bg-color);
  color: var(--main-text-color);
}

/* Footer */
footer {
  display: flex;
  align-items: center;
  padding: 8px;
  background: var(--secondary-bg-color);
  box-shadow: var(--default-shadow);
  font-size: smaller;
}

footer .sourcecode svg {
  stroke-width: 1.5em;
}

/* Other */

form.polltoken-input {
  margin-top: 8px;
}