fipamo/src/styles/main/_settings.sass
2021-06-13 14:24:20 -07:00

241 lines
No EOL
6.7 KiB
Sass

#settings-actions
position: fixed
width: 40%
margin-top: -85px
left: 50%
margin-left: -20%
#buttons
width: 155px
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: color.adjust($primary, $lightness: -60%)
svg
fill: $white
button[data-render='true']
background: color.adjust($tertiary, $lightness: 60%)
svg
fill: color.adjust($primary, $lightness: -60%)
#site-background
margin: 0 0 10px 0
img
width: 100%
// border 5px solid $white
border-radius: 0
overflow: hidden
cursor: pointer
label
position: absolute
color: $white
margin: 5px
background: color.adjust($primary, $lightness: -60%)
padding: 5px
border-radius: 3px
input
visibility: hidden
display: none
#settings-index
width: 94%
max-width: 900px
margin: 0 auto
#settings-index-wrapper
padding: 0.75rem
button
margin-top: 5px
width: 100%
height: 33px
#member-settings, #site-settings, #option-settings, #member-utils
background: $white
padding: 5px
border-radius: 5px 0 5px 0
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
width: 100%
margin: 20px auto
#member-avatar-drop
display: inline-block
margin: 0 0 10px 0
img
width: 100%
// border 5px solid $white
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%
#member-info
vertical-align: top
display: inline-block
width: 100%
input
width: 95%
margin: 0 5px 10px 0
textarea
background: $primary
width: 93%
height: 80px
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
#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
// padding: 1px
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