Fipamo/src/styles/main/_settings.scss

#settings-actions {
  position: fixed;
  width: 40%;
  margin-top: -85px;
  left: 50%;
  margin-left: -20%;
  #buttons {
    width: 185px;
    margin: 28px auto;
    text-align: center;
    background: $white;
    padding: 2px;
    border-radius: 3px;
    button {
      color: $white;
      border-radius: 3px;
      width: 40px;
      margin: 0 10px 0 10px;
      svg {
        width: 25px;
        height: 20px;
        fill: $white;
      }
    }
    button[data-render="false"] {
      background: $secondary;
      svg {
        fill: $primary;
      }
    }
    button[data-render="true"] {
      background: $highlight;
      svg {
        fill: $white;
      }
    }
  }
}
#settings-index {
  width: 94%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  #settings-index-wrapper {
    padding: 0;

    button {
      margin-top: 5px;
      width: 100%;
      height: 33px;
    }
    #member-settings,
    #feature-settings,
    #option-settings,
    #token-settings,
    #backup-settings {
      background: $white;
      padding: 0px;
      border-radius: 5px 0 5px 0;
      width: 100%;
      margin: 20px auto;

      label {
        font-family: $baseType;
        color: $primary;
        font-weight: bold;
      }
      span {
        color: $secondary;
      }
      input {
        width: 95%;
        margin: 0 5px 10px 0;
        height: 30px;
        padding: 10px;
      }
      input#backup-upload {
        visibility: hidden;
        display: none;
      }
      .backup-meta {
        background: $primary;
        color: $white;
        padding: 8px;
        border-radius: 3px;
        margin: 5px 0 0 0;
        text-align: center;
      }
      #member-images {
        padding: 10px 15px 0 15px;

        #member-avatar-drop {
          display: inline-block;
          margin: 0 0 10px 0;

          img {
            width: 100%;
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;
            display: block;
            margin-bottom: 2px;
          }
          input {
            visibility: hidden;
            display: none;
          }
          #privacy-toggle {
            width: 50%;
          }
          #render-toggle {
            width: 50%;
          }
        }
        #site-background {
          margin: 0 0 10px 0;

          img {
            width: 92.1%;
            height: 292px;
            border-radius: 3px;
            overflow: hidden;
            cursor: pointer;
          }
          input {
            visibility: hidden;
            display: none;
          }
        }
      }
      #member-meta {
        padding: 10px 15px 0 15px;
        position: relative;
        top: -30px;
      }
      #features {
        padding: 10px 15px 0 15px;
      }
    }
    textarea {
      background: $primary;
      width: 70%;
      height: 89.5px;
      color: $tertiary;
      padding: 10px;
      display: inline-block;
      margin-bottom: 10px;
    }
    span#key {
      color: $white;
      background: $primary;
      font-size: 0.9em;
      border-radius: 3px;
      padding: 5px;
      display: block;
      width: 95%;
      overflow: hidden;
    }
    #feature-settings {
      #feature-api,
      #dynamic-api {
        background: $white;
        border-radius: 3px;
        padding: 5px;

        button {
          color: $white;
          border-radius: 3px;
          width: 200px;
          margin: 0;
          height: 200px;
          font-size: 1em;
          svg {
            width: 100px;
            height: 90px;
            fill: $white;
            position: relative;
            display: block;
            margin: 12px auto;
          }
          span {
            color: $white;
            margin: 6px 0 0 5px;
            position: relative;
            vertical-align: middle;
            display: inline-block;
            font-weight: bold;
          }
        }
        button[data-enabled="false"] {
          background: $secondary;
          svg {
            fill: $primary;
          }
          span {
            color: $primary;
          }
        }
        button[data-enabled="true"] {
          background: $highlight;
          svg {
            fill: $white;
          }
        }
      }
    }
    #token-settings {
      #keys-tokens {
        padding: 10px 15px 0 15px;
        #member-api-key,
        #form-token {
          background: $primary;
          border-radius: 3px;
          padding: 5px;
          color: $white;
        }
      }
    }
    #option-settings {
      #theme-settings {
        a {
          width: 95%;
          margin: 0 5px 5px 0;
          height: 15px;
          padding: 10px;
          display: inline-block;
        }
        a[data-enabled="false"] {
          background: $white;
          color: $primary;
          border-radius: 3px;
          font-weight: bold;
          border-top: 1px $highlight solid;
          border-bottom: 1px $highlight solid;
        }
        a[data-enabled="true"] {
          background: $highlight;
          color: $primary;
          border-radius: 3px;
          font-weight: bold;
          border-top: 1px $primary solid;
          border-bottom: 1px $primary solid;
          svg {
            fill: $primary;
            display: inline-block;
            float: right;
          }
        }
      }
      #mail-settings {
        min-height: 240px;

        a.mail-option {
          float: right;
          font-family: $monoType;
          font-size: 0.9em;
          border-radius: 3px;
          text-decoration: none;
          margin: 0 0 0 5px;
        }
        a.mail-option[data-enabled="true"] {
          color: $highlight;
        }
        a.mail-option[data-enabled="false"] {
          color: $primary;
        }
        input {
          // width 94%
          margin: 0 5px 5px 0;
          vertical-align: top;
        }
        div[data-enabled="false"] {
          display: none;
          visibility: hidden;
        }
        #settings-api {
          background: $primary;
          border-radius: 3px;
          padding: 10px;
          span {
            color: $white !important;
            margin: -13px 0 0 5px;
            position: relative;
            vertical-align: middle;
            display: inline-block;
            font-weight: bold;
          }
          button {
            color: $white;
            border-radius: 3px;
            width: 40px;
            margin: 0;
            svg {
              width: 25px;
              height: 20px;
              fill: $white;
            }
          }
          button[data-enabled="false"] {
            background: $secondary;
            svg {
              fill: $primary;
            }
          }
          button[data-enabled="true"] {
            background: $highlight;
            svg {
              fill: $white;
            }
            // responsive
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 480px) {
  #settings-actions {
    margin-left: -42%;
    #buttons {
      width: 150px;
      background: none;
      button {
        margin: 0 5px 0 5px;
      }
    }
  }
} ;