@ -1,22 +1,22 @@
article [ role = "settings" ] {
article [ class = "settings" ] {
margin : 100px auto ;
margin : 100px auto ;
width : 100 % ;
width : 100 % ;
max-width : 900px ;
max-width : 900px ;
transition : all 0 . 8s linear ;
transition : all 0 . 8s linear ;
}
}
article [ role = "settings" ] h1 {
article [ class = "settings" ] h1 {
color : var ( --white ) ;
color : var ( --white ) ;
}
}
article [ role = "settings" ] label {
article [ class = "settings" ] label {
color : var ( --secondary ) ;
color : var ( --secondary ) ;
margin-bottom : 10px ;
margin-bottom : 10px ;
display : inline-block ;
display : inline-block ;
font-weight : 400 ;
font-weight : 400 ;
}
}
section [ role = "member-settings" ] {
section [ class = "member-settings" ] {
display : grid ;
display : grid ;
grid-template-columns : 1fr 1fr 1fr 1fr ;
grid-template-columns : 1fr 1fr 1fr 1fr ;
grid-auto-columns : auto ;
grid-auto-columns : auto ;
@ -26,100 +26,100 @@ section[role="member-settings"] {
margin : 10px auto ;
margin : 10px auto ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 1 ) {
section [ class = "member-settings" ] > div : nth-child ( 1 ) {
grid-column : 1 / 2 ;
grid-column : 1 / 2 ;
grid-row : 1 / 3 ;
grid-row : 1 / 3 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 2 ) {
section [ class = "member-settings" ] > div : nth-child ( 2 ) {
grid-column : 2 / 4 ;
grid-column : 2 / 4 ;
grid-row : 1 / 3 ;
grid-row : 1 / 3 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 3 ) {
section [ class = "member-settings" ] > div : nth-child ( 3 ) {
grid-row : 1 / 3 ;
grid-row : 1 / 3 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 4 ) {
section [ class = "member-settings" ] > div : nth-child ( 4 ) {
color : var ( --white ) ;
color : var ( --white ) ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 4 ) a {
section [ class = "member-settings" ] > div : nth-child ( 4 ) a {
font-weight : bold ;
font-weight : bold ;
text-decoration : underline ;
text-decoration : underline ;
color : var ( --tertiary ) ;
color : var ( --tertiary ) ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 5 ) {
section [ class = "member-settings" ] > div : nth-child ( 5 ) {
grid-column : 2 / 4 ;
grid-column : 2 / 4 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 6 ) {
section [ class = "member-settings" ] > div : nth-child ( 6 ) {
grid-column : 1 / 3 ;
grid-column : 1 / 3 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 7 ) {
section [ class = "member-settings" ] > div : nth-child ( 7 ) {
grid-column : 3 / 5 ;
grid-column : 3 / 5 ;
min-height : 325px ;
min-height : 325px ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 8 ) {
section [ class = "member-settings" ] > div : nth-child ( 8 ) {
grid-column : 1 / 4 ;
grid-column : 1 / 4 ;
color : var ( --white ) ;
color : var ( --white ) ;
word-wrap : break-word ;
word-wrap : break-word ;
}
}
section [ role= "member-settings" ] > div [ role = "member-avatar" ] div ,
section [ class= "member-settings" ] > div [ class = "member-avatar" ] div ,
section [ role= "member-settings" ] > div [ role = "site-background" ] div {
section [ class= "member-settings" ] > div [ class = "site-background" ] div {
height : 100 % ;
height : 100 % ;
border-radius : 3px ;
border-radius : 3px ;
}
}
section [ role = "member-settings" ] div input [ type = "file" ] {
section [ class = "member-settings" ] div input [ type = "file" ] {
display : none ;
display : none ;
visibility : hidden ;
visibility : hidden ;
}
}
section [ role = "member-settings" ] div input [ type = "text" ] {
section [ class = "member-settings" ] div input [ type = "text" ] {
width : 98 . 4 % ;
width : 98 . 4 % ;
height : 40px ;
height : 40px ;
margin-bottom : 10px ;
margin-bottom : 10px ;
}
}
section [ role = "member-settings" ] div textarea {
section [ class = "member-settings" ] div textarea {
width : 98 . 4 % ;
width : 98 . 4 % ;
height : 63 % ;
height : 63 % ;
}
}
article [ role = "settings" ] button {
article [ class = "settings" ] button {
width : 100 % ;
width : 100 % ;
text-align : left ;
text-align : left ;
height : 50px ;
height : 50px ;
margin-bottom : 5px ;
margin-bottom : 5px ;
}
}
article [ role = "settings" ] button > span {
article [ class = "settings" ] button > span {
font-size : 0 . 8em ;
font-size : 0 . 8em ;
display : inline ;
display : inline ;
top : -10px ;
top : -10px ;
position : relative ;
position : relative ;
}
}
section [ role = "member-settings" ]
section [ class = "member-settings" ]
> div [ role = "features" ]
> div [ class = "features" ]
button [ data-enabled = "true" ] {
button [ data-enabled = "true" ] {
color : var ( --white ) ;
color : var ( --white ) ;
}
}
section [ role = "member-settings" ]
section [ class = "member-settings" ]
> div [ role = "features" ]
> div [ class = "features" ]
button [ data-enabled = "false" ] {
button [ data-enabled = "false" ] {
color : var ( --primary ) ;
color : var ( --primary ) ;
background : var ( --secondary ) ;
background : var ( --secondary ) ;
}
}
section [ role = "member-settings" ]
section [ class = "member-settings" ]
> div [ role = "theme" ]
> div [ class = "theme" ]
button [ data-enabled = "true" ] {
button [ data-enabled = "true" ] {
color : var ( --white ) ;
color : var ( --white ) ;
background : var ( --highlight ) ;
background : var ( --highlight ) ;
@ -128,8 +128,8 @@ section[role="member-settings"]
padding : 3px ;
padding : 3px ;
}
}
section [ role = "member-settings" ]
section [ class = "member-settings" ]
> div [ role = "theme" ]
> div [ class = "theme" ]
button [ data-enabled = "false" ] {
button [ data-enabled = "false" ] {
color : var ( --primary ) ;
color : var ( --primary ) ;
background : var ( --secondary ) ;
background : var ( --secondary ) ;
@ -138,7 +138,7 @@ section[role="member-settings"]
padding : 3px ;
padding : 3px ;
}
}
section [ role= "member-settings" ] > div [ role = "mail" ] a {
section [ class= "member-settings" ] > div [ class = "mail" ] a {
margin-right : 3px ;
margin-right : 3px ;
color : var ( --secondary ) ;
color : var ( --secondary ) ;
display : inline-block ;
display : inline-block ;
@ -147,129 +147,129 @@ section[role="member-settings"] > div[role="mail"] a {
border-top : var ( --primary ) 1px solid ;
border-top : var ( --primary ) 1px solid ;
}
}
section [ role= "member-settings" ] > div [ role = "mail" ] a [ data-enabled = "true" ] {
section [ class= "member-settings" ] > div [ class = "mail" ] a [ data-enabled = "true" ] {
color : var ( --tertiary ) ;
color : var ( --tertiary ) ;
font-weight : bold ;
font-weight : bold ;
border-top : var ( --highlight ) 1px solid ;
border-top : var ( --highlight ) 1px solid ;
}
}
section [ role= "member-settings" ] > div [ role = "mail" ] div [ data-enabled = "false" ] {
section [ class= "member-settings" ] > div [ class = "mail" ] div [ data-enabled = "false" ] {
visibility : hidden ;
visibility : hidden ;
display : none ;
display : none ;
}
}
section [ role= "member-settings" ] > div [ role = "mail" ] input {
section [ class= "member-settings" ] > div [ class = "mail" ] input {
width : 98 . 4 % ;
width : 98 . 4 % ;
height : 40px ;
height : 40px ;
padding-left : 5px ;
padding-left : 5px ;
margin-bottom : 10px ;
margin-bottom : 10px ;
}
}
section [ role = "data-settings" ] {
section [ class = "data-settings" ] {
color : var ( --white ) ;
color : var ( --white ) ;
}
}
@ media only screen and ( max-width : 900px ) {
@ media only screen and ( max-width : 900px ) {
main > article [ role = "settings" ] {
main > article [ class = "settings" ] {
width : 97 % ;
width : 97 % ;
}
}
}
}
@ media only screen and ( max-width : 650px ) {
@ media only screen and ( max-width : 650px ) {
section [ role = "member-settings" ] div input [ type = "text" ] {
section [ class = "member-settings" ] div input [ type = "text" ] {
width : 99 . 3 % ;
width : 99 . 3 % ;
height : 40px ;
height : 40px ;
margin-bottom : 10px ;
margin-bottom : 10px ;
}
}
section [ role = "member-settings" ] {
section [ class = "member-settings" ] {
grid-template-columns : 1fr 1fr ;
grid-template-columns : 1fr 1fr ;
}
}
section [ role= "member-settings" ] > div [ role = "mail" ] input {
section [ class= "member-settings" ] > div [ class = "mail" ] input {
width : 97 . 7 % ;
width : 97 . 7 % ;
height : 40px ;
height : 40px ;
padding-left : 5px ;
padding-left : 5px ;
margin-bottom : 10px ;
margin-bottom : 10px ;
}
}
section [ role = "member-settings" ] div textarea {
section [ class = "member-settings" ] div textarea {
height : 80px ;
height : 80px ;
width : 99 . 3 % ;
width : 99 . 3 % ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 1 ) {
section [ class = "member-settings" ] > div : nth-child ( 1 ) {
grid-column : 1 / 2 ;
grid-column : 1 / 2 ;
grid-row : 1 / 3 ;
grid-row : 1 / 3 ;
height : 200px ;
height : 200px ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 2 ) {
section [ class = "member-settings" ] > div : nth-child ( 2 ) {
grid-column : 2 / 3 ;
grid-column : 2 / 3 ;
grid-row : 1 / 3 ;
grid-row : 1 / 3 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 3 ) {
section [ class = "member-settings" ] > div : nth-child ( 3 ) {
grid-column : 1 / 3 ;
grid-column : 1 / 3 ;
grid-row : 3 / 5 ;
grid-row : 3 / 5 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 4 ) {
section [ class = "member-settings" ] > div : nth-child ( 4 ) {
grid-column : 1 / 2 ;
grid-column : 1 / 2 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 5 ) {
section [ class = "member-settings" ] > div : nth-child ( 5 ) {
grid-column : 2 / 3 ;
grid-column : 2 / 3 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 6 ) {
section [ class = "member-settings" ] > div : nth-child ( 6 ) {
grid-column : 1 / 2 ;
grid-column : 1 / 2 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 7 ) {
section [ class = "member-settings" ] > div : nth-child ( 7 ) {
grid-column : 2 / 3 ;
grid-column : 2 / 3 ;
min-height : 325px ;
min-height : 325px ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 8 ) {
section [ class = "member-settings" ] > div : nth-child ( 8 ) {
grid-column : 1 / 3 ;
grid-column : 1 / 3 ;
}
}
}
}
@ media only screen and ( max-width : 530px ) {
@ media only screen and ( max-width : 530px ) {
section [ role= "member-settings" ] > div [ role = "mail" ] input {
section [ class= "member-settings" ] > div [ class = "mail" ] input {
width : 98 . 5 % ;
width : 98 . 5 % ;
}
}
section [ role = "member-settings" ] {
section [ class = "member-settings" ] {
grid-template-columns : 100 % ;
grid-template-columns : 100 % ;
}
}
section [ role = "member-settings" ] div textarea {
section [ class = "member-settings" ] div textarea {
height : 80px ;
height : 80px ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 1 ) {
section [ class = "member-settings" ] > div : nth-child ( 1 ) {
grid-row : 1 / 3 ;
grid-row : 1 / 3 ;
height : 200px ;
height : 200px ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 2 ) {
section [ class = "member-settings" ] > div : nth-child ( 2 ) {
grid-row : 3 / 5 ;
grid-row : 3 / 5 ;
grid-column : 1 ;
grid-column : 1 ;
height : 200px ;
height : 200px ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 3 ) {
section [ class = "member-settings" ] > div : nth-child ( 3 ) {
grid-column : 1 ;
grid-column : 1 ;
grid-row : 5 / 7 ;
grid-row : 5 / 7 ;
}
}
section [ role = "member-settings" ] > div : nth-child ( 4 ) ,
section [ class = "member-settings" ] > div : nth-child ( 4 ) ,
section [ role = "member-settings" ] > div : nth-child ( 5 ) ,
section [ class = "member-settings" ] > div : nth-child ( 5 ) ,
section [ role = "member-settings" ] > div : nth-child ( 6 ) ,
section [ class = "member-settings" ] > div : nth-child ( 6 ) ,
section [ role = "member-settings" ] > div : nth-child ( 7 ) ,
section [ class = "member-settings" ] > div : nth-child ( 7 ) ,
section [ role = "member-settings" ] > div : nth-child ( 8 ) {
section [ class = "member-settings" ] > div : nth-child ( 8 ) {
grid-column : 1 ;
grid-column : 1 ;
}
}
}
}