diff --git a/config/config.example.ini b/config/config.example.ini index 02cf626..4bf9f6d 100644 --- a/config/config.example.ini +++ b/config/config.example.ini @@ -40,7 +40,7 @@ logo = ; Description of the site description = Test site -; Design used by the site, must be a folder in templates/ +; Design used by the site, must be a folder in resources/views/ design = yuuno ; Category to be used for site news diff --git a/resources/assets/less/yuuno/base.less b/resources/assets/less/yuuno/base.less new file mode 100644 index 0000000..b0fe154 --- /dev/null +++ b/resources/assets/less/yuuno/base.less @@ -0,0 +1,61 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + position: relative; +} + +html, +body { + width: 100%; + height: 100%; +} + +body { + font: 12px/20px Verdana, sans-serif; + background: linear-gradient(180deg, #C2AFFE, #FBEEFF) no-repeat scroll left top #FBEEFF; + background-size: cover; + color: #000; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Open Sans", sans-serif; + font-weight: 100; + margin: 5px 0; +} + +h1 { + text-shadow: 0 0 5px #8364A1; + color: #614390; +} + +hr { + border: 0; + height: 1px; + color: #9475B2; + background: #9475B2; +} + +img { + max-width: 100%; + max-height: 100%; + + &.emoticon { + vertical-align: middle; + } +} + +.clear { + clear: both !important; + float: none !important; +} + +.hidden { + display: none !important; + visibility: hidden !important; +} diff --git a/resources/assets/less/yuuno/alert.less b/resources/assets/less/yuuno/bem/alert.less similarity index 100% rename from resources/assets/less/yuuno/alert.less rename to resources/assets/less/yuuno/bem/alert.less diff --git a/resources/assets/less/yuuno/bbcode.less b/resources/assets/less/yuuno/bem/bbcode.less similarity index 100% rename from resources/assets/less/yuuno/bbcode.less rename to resources/assets/less/yuuno/bem/bbcode.less diff --git a/resources/assets/less/yuuno/bem/busy.less b/resources/assets/less/yuuno/bem/busy.less new file mode 100644 index 0000000..82df6b0 --- /dev/null +++ b/resources/assets/less/yuuno/bem/busy.less @@ -0,0 +1,27 @@ +.busy { + background: #222; + background: linear-gradient(0deg, rgba(0, 0, 0, .4), transparent) rgba(0, 0, 0, .8); + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 5; + text-align: center; + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + + &__content { + line-height: 2em; + color: #FFF; + display: inline-block; + padding: 10px 20px 15px; + border-radius: 10px; + } + + &__text { + line-height: 2em; + } +} diff --git a/resources/assets/less/yuuno/bem/container.less b/resources/assets/less/yuuno/bem/container.less new file mode 100644 index 0000000..0ade0dd --- /dev/null +++ b/resources/assets/less/yuuno/bem/container.less @@ -0,0 +1,12 @@ +.container { + min-height: 100%; + width: 100%; + + &__content { + padding-bottom: 220px; + + @media (min-width: 1024px) { + padding: 0; + } + } +} diff --git a/resources/assets/less/yuuno/bem/content.less b/resources/assets/less/yuuno/bem/content.less new file mode 100644 index 0000000..98fa795 --- /dev/null +++ b/resources/assets/less/yuuno/bem/content.less @@ -0,0 +1,24 @@ +.content { + margin: 10px auto; + padding: 2px 3px; + width: 1024px; + border: 1px solid #9475B2; + box-shadow: 0 0 3px #9475B2; + border-radius: 3px; + background: #D3BFFF; + + &__left { + float: left; + width: 688px; + } + + &__right { + float: right; + width: 334px; + } + + &--alt { + background: #C2AEEE; + margin: 5px 10px; + } +} diff --git a/resources/assets/less/yuuno/dialogue.less b/resources/assets/less/yuuno/bem/dialogue.less similarity index 100% rename from resources/assets/less/yuuno/dialogue.less rename to resources/assets/less/yuuno/bem/dialogue.less diff --git a/resources/assets/less/yuuno/bem/dropdown.less b/resources/assets/less/yuuno/bem/dropdown.less new file mode 100644 index 0000000..3e835e1 --- /dev/null +++ b/resources/assets/less/yuuno/bem/dropdown.less @@ -0,0 +1,74 @@ +.dropdown { + display: inline-block; + background: fade(#0c0c0c, 70%); + color: #fff; + min-width: 200px; + border: 2px solid #9475B2; + font-family: "Open Sans", sans-serif; + text-align: left; + z-index: 999; + margin: 0 2px; + transition: background .5s; + + &__option { + padding: 0 1px 0 4px; + display: none; + color: #FFF; + text-decoration: none; + clear: both; + transition: background .2s; + + &:hover { + background: fade(#151515, 50%); + } + + &:active { + background: fade(#151515, 70%); + } + + &--selected { + display: inline-block; + } + } + + &__title { + display: inline-block; + padding-left: 4px; + } + + &:hover { + background: fade(#151515, 80%); + + .dropdown__option { + display: block; + float: none; + } + + .dropdown__title { + display: none; + } + } + + @media (max-width: 1024px) { + float: none !important; + margin-bottom: 5px; + text-align: center; + + &__title, + &__option { + display: block !important; + padding: 3px 6px; + float: none !important; + } + + &__title { + border-bottom: 2px solid #9475B2; + } + + &__option { + &:not(:last-child) { + border-bottom: 2px solid #9475B2; + } + } + } +} diff --git a/resources/assets/less/yuuno/bem/footer.less b/resources/assets/less/yuuno/bem/footer.less new file mode 100644 index 0000000..9195c2f --- /dev/null +++ b/resources/assets/less/yuuno/bem/footer.less @@ -0,0 +1,55 @@ +.footer { + box-shadow: 0 0 1em #9475B2; + font-size: small; + width: 100%; + padding-top: 10px; + padding-bottom: 30px; + background: linear-gradient(180deg, #9475B2 0%, #FBEEFF 20%, #C2AFFE 100%) #C2AFFE; + position: absolute; + bottom: 0; + + &__copyright { + text-align: center; + width: 100%; + font-size: .9em; + line-height: 1.8em; + } + + &__sections { + margin: auto; + text-align: center; + width: 95%; + min-height: 150px; + } + + &__section { + vertical-align: top; + text-align: left; + display: inline-block; + width: 200px; + list-style: square; + } + + &__item { + margin: 2px 2px 2px 16px; + + &--head { + margin: 2px 2px 5px; + font-weight: 700; + list-style: none; + } + } + + &__link { + color: inherit; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + @media (max-width: 1024px) { + position: inherit; + } +} diff --git a/resources/assets/less/yuuno/bem/header.less b/resources/assets/less/yuuno/bem/header.less new file mode 100644 index 0000000..93e5197 --- /dev/null +++ b/resources/assets/less/yuuno/bem/header.less @@ -0,0 +1,114 @@ +.header { + text-align: center; + background: linear-gradient(180deg, #C2AFFE, #CCBAFE); + box-shadow: 0 0 5px #8364A1; + + &__logo { + background: none; + height: auto; + width: auto; + display: inline-block; + text-decoration: none; + font: 100 70px/80px "Open Sans", sans-serif; + color: #B06AC4; + transition: color .2s, text-shadow .2s; + + &:hover { + color: #C17BD5; + text-shadow: 0 0 .1em #C17BD5; + } + + &:active { + color: #A059B3; + text-shadow: 0 0 .1em #A059B3; + } + + @media (max-width: 768px) { + font-size: 50px; + line-height: 60px; + } + } + + &__menu { + border-bottom: 2px solid #9475B2; + display: block; + + &--left { + float: left; + } + + &--right { + float: right; + } + + &:after { + clear: both; + content: " "; + display: block; + height: 0; + visibility: hidden; + } + + &-item { + margin: 0 7px -2px 6px; + display: inline-block; + border-bottom: 2px solid #8364A1; + text-decoration: none; + text-align: center; + transition: background .3s, border-color .3s; + height: 30px; + width: 30px; + line-height: 30px; + vertical-align: middle; + font-size: 1.6em; + color: #75569B; + background: linear-gradient(180deg, transparent 0%, transparent 50%, #8364A1 100%); + background-size: 100% 200%; + + &:hover { + background-position: 0 50%; + } + + &:active { + background-position: 0 100%; + } + + &--avatar { + padding-left: 30px; + background: url('/images/pixel.png') no-repeat scroll left center / contain transparent; + } + } + } +} + +@media (max-width: 1024px) { + .header__menu { + border: 0; + padding: 10px 0 5px; + margin: 0 auto; + width: auto; + text-align: center; + + &-item { + border: 0; + height: 50px; + width: 50px; + line-height: 50px; + font-size: 2em; + display: inline-block; + + &:hover { + background: transparent; + } + + &:active { + background: #75569B; + color: #9575B2; + } + + &--avatar { + padding-left: 50px; + } + } + } +} diff --git a/resources/assets/less/yuuno/uploader.less b/resources/assets/less/yuuno/bem/uploader.less similarity index 100% rename from resources/assets/less/yuuno/uploader.less rename to resources/assets/less/yuuno/bem/uploader.less diff --git a/resources/assets/less/yuuno/dropdown.less b/resources/assets/less/yuuno/dropdown.less deleted file mode 100644 index aef59f5..0000000 --- a/resources/assets/less/yuuno/dropdown.less +++ /dev/null @@ -1,82 +0,0 @@ -.dropDown { - display: inline-block; - position: relative; -} - -.dropDown .dropDownInner { - display: inline-block; - background: rgba(12, 12, 12, .7); - min-width: 200px; - border: 2px solid #9475B2; - float: left; - font-family: "Open Sans", sans-serif; - text-align: left; - margin: 0 2px; - transition: background .5s; -} - -.dropDown .dropDownInner:hover { - background: rgba(21, 21, 21, .8); -} - -.dropDown .dropDownInner a { - padding: 0 1px 0 4px; - display: none; - color: #FFF; - text-decoration: none; - clear: both; - transition: background .2s; -} - -.dropDown .dropDownInner a:hover { - background: rgba(21, 21, 21, .5); -} - -.dropDown .dropDownInner a:active { - background: rgba(21, 21, 21, .7); -} - -.dropDown .dropDownInner a.dropDownSelected { - display: inline-block; -} - -.dropDown .dropDownInner:hover a { - display: block; - float: none; -} - -.dropDown .dropDownInner a.dropDownDesc { - display: inline-block; -} - -.dropDown .dropDownInner:hover a.dropDownDesc { - display: none; -} - -@media (max-width: 1024px) { - - .dropDown { - position: static; - } - - .dropDown .dropDownInner { - float: none !important; - margin-bottom: 5px; - text-align: center; - } - - .dropDown .dropDownInner a { - padding: 3px 6px; - float: none !important; - display: block !important; - } - - .dropDown .dropDownInner a:not(:last-child) { - border-bottom: 2px solid #9475B2; - } - - .membersPageList { - padding-top: 10px; - } - -} diff --git a/resources/assets/less/yuuno/legacy.less b/resources/assets/less/yuuno/legacy.less new file mode 100644 index 0000000..087a950 --- /dev/null +++ b/resources/assets/less/yuuno/legacy.less @@ -0,0 +1,1873 @@ +/* + * Sakura Yuuno Stylesheet + * By Flashwave + */ + +/* Import bbcode specific style */ +@import "np"; + +/* + * Animation Keyframes + */ +/* Spin */ +@keyframes spin { + + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + +} + +/* Fade out */ +@keyframes fadeOut { + + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } + +} + +/* Fade in */ +@keyframes fadeIn { + + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + +} + +/* Slide in from right */ +@keyframes slideInFromRight { /* Requires position: relative to be set on the element */ + + 0% { + right: -100%; + } + + 100% { + right: 0; + } + +} + +/* Slide out to bottom */ +@keyframes slideOutToBottom { /* Read comment above */ + + 0% { + bottom: 0; + } + + 100% { + bottom: -100%; + } + +} + +/* + * Standard Elements + */ + + + + +.centreAlign { + text-align: center; +} + +.leftAlign { + text-align: left; +} + +.rightAlign { + text-align: right; +} + +.default-avatar-setting { + max-width: 200px; + max-height: 200px; + border: 3px solid #EEE; + background: #EEE; + box-shadow: 0 3px 7px #888; + border-radius: 3px; + margin: 5px; +} + + +a.clean, +a.underline, +a.no-underline { + color: inherit !important; + text-decoration: none !important; +} + +a.underline:hover { + text-decoration: underline !important; +} + +a.default { + color: #22E; + text-decoration: none; +} + +a.default:hover { + color: #22E; + text-decoration: underline; +} + +a.default:active { + color: #E22; + text-decoration: underline; +} + +.content .head, +.loginPage .head { + margin: -1px -2px; + padding: 4px 5px 5px; + font-weight: 700; + font-size: 20px; + color: #306; + background: linear-gradient(90deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE; + border-radius: 2px; + word-wrap: break-word; +} + +.content-right .head { + margin: -1px -2px -1px; + padding: 4px 5px 5px; + font-weight: 700; + font-size: 20px; + color: #306; + background: linear-gradient(270deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE; + border-radius: 2px; + word-wrap: break-word; +} + +.head > .links { + float: right; +} + +@media (max-width: 1024px) { + .membersPageList { + padding-top: 10px; + } +} + +.headerLoginContainer { + background: rgba(211, 191, 255, .8); + border: 1px solid #9475B2; + box-shadow: 0 0 3px #8364A1; + text-align: center; + max-width: 1024px; + margin: 10px auto 0; + padding: 6px 3px; + border-radius: 3px; +} + +.headerLoginContainer form, +.headerLoginContainer div { + display: inline-block; +} + +.headerLoginContainer input[type="submit"], +.headerLoginContainer button { + display: inline-block !important; + border-radius: 3px !important; +} + +@media (max-width: 640px) { + + #headerLoginForm > div { + display: block; + } + + #headerLoginForm label { + text-align: right; + min-width: 80px; + display: inline-block; + } + +} + +#headerLoginForm label { + font-family: "Open Sans", sans-serif; + font-weight: 100; + font-size: 15px; +} + + +.headerNotify { + margin: 10px auto; + padding: 10px 3px; + width: auto; + max-width: 1024px; + border: 1px solid #9475B2; + box-shadow: 0 0 3px #9475B2; + border-radius: 3px; + background: #D3BFFF; + background: repeating-linear-gradient(-45deg, #C2AFFE, #C2AFFE 10px, #D3BFFF 10px, #D3BFFF 20px); + display: block; + text-align: center; +} + +.headerAnnouncement { + display: block; + margin: 10px auto; + text-align: center; + padding: 2px 3px; + border: 1px solid #9475B2; + box-shadow: 0 0 3px #9475B2; + border-radius: 3px; + max-width: 1024px; + height: 120px; + background: #D3BFFF no-repeat scroll center center; +} + +.headerAnnouncement > a { + display: block; + width: 100%; + height: 100%; +} + + +/* + * Authentication page Styling + */ +.loginPage { + margin: 0 auto; + max-width: 825px; +} + +.loginPage > * { + text-align: center; + margin: 10px auto; + padding: 2px 3px; + width: 400px; + border: 1px solid #9475B2; + box-shadow: 0 0 3px #9475B2; + border-radius: 3px; + background: #D3BFFF; +} + +@media (max-width: 430px) { + .loginPage > * { + width: 300px; + } +} + +.loginPage .head { + text-align: left; +} + +.loginPage > div > form > div > input { + font-size: 16px; +} + +.loginPage input[type="text"], +.loginPage input[type="password"] { + width: calc(100% ~'-' 16px); +} + +.loginPage form > div > label { + font-size: 20px; + font-weight: 100; + padding: 0 5px; + line-height: 32px; + color: #222; + text-shadow: #888 0 0 3px; +} + +.loginPage .subLinks { + font-size: 10px; +} + +/* + * Members page Styling + */ +.membersPage { + width: 100%; + margin: 0 auto; + padding: 10px 0; + overflow: hidden; + text-align: center; + max-width: 1280px; +} + +.membersPage a { + color: inherit; +} + +.membersPage .userBox { + background: linear-gradient(180deg, #C2AFFE, #B19EED) no-repeat scroll left top / cover #C2AFFE; + margin: 7px; + border-radius: 5px; + text-align: center; + box-shadow: 0 0 .5em #000; + display: inline-block; + vertical-align: top; + transition: box-shadow .2s; +} + +.membersPage .userBox { + padding: 10px; + line-height: 330%; +} + +.membersPage .userBox:hover { + box-shadow: 0 0 1em #000; + cursor: pointer; +} + +.membersPage .userBox:active { + box-shadow: 0 0 1.5em #9475B2; +} + +.membersPage .userBox img { + margin: 0 auto; +} + +.membersPage .userBox .userBoxUserName { + font-weight: 700; +} + +.membersPage .boxes .userBox { + width: 200px; + height: 230px; +} + +.membersPage .boxes .userBox img { + width: 200px; + height: 200px; + display: block; +} + +.membersPage .rectangles .userBox { + width: 300px; + height: 100px; + text-align: left; +} + +.membersPage .rectangles .userBox img { + width: 100px; + height: 100px; + display: inline-block; +} + +.membersPage .rectangles .userBox .userBoxUserName { + display: inline-block; + vertical-align: top; + padding: 30px 10px; +} + +.membersPage .list table { + margin: 10px auto; + background: #C2AFFE; + box-shadow: 0 0 3px #9475B2; + border: 1px solid #9475B2; + max-width: 1024px; + width: auto; + border-radius: 3px; + border-spacing: 0; +} + +.membersPage .list table td, +.membersPage .list table th { + padding: 4px 8px; +} + +.membersPage .list thead th { + border-bottom: 1px solid #9475B2; + background: #A586C4; +} + +.membersPage .list tfoot th { + border-top: 1px solid #9475B2; + background: #A586C4; +} + +/* + * Private Messages Styling + */ +.messages table { + width: 100%; + border-spacing: 0; +} + +.messages table > tbody > tr.unread { + background: #C2AFFE; + font-weight: 700; +} + +.messages table > tbody > tr > td { + border-bottom: 1px solid #B19EED; + border-top: 1px solid #B19EED; +} + +.messages table > * > tr > td { + padding: 0 4px; +} + +.messages table > * > tr > td:first-child { + width: 150px; + text-align: center; +} + +.messages table > tbody > tr > td:first-child { + border-left: 1px solid #B19EED; +} + +.messages table > * > tr > td:last-child { + width: 220px; + text-align: center; +} + +.messages table > tbody > tr > td:last-child { + border-right: 1px solid #B19EED; +} + +/* + * Background transparency + */ +.background-transparent { + border-style: dashed; + background: fade(#D3BFFF, 50%); +} + +/* + * News page styling + */ +.news { + min-height: 0; +} + +.news-head { + margin: -1px -2px; + padding: 4px; + background: #C2AFFE; + font-weight: 700; + display: block; + font-size: 17px; + color: inherit; + text-decoration: none; +} + +.news-body { + font-size: .9em; + padding: 2px 0 0 3px; +} + +.news-body p { + margin: 0; + margin-bottom: 1em; +} + +.news-post-time { + font-size: 8pt; + padding: 6px 15px; + text-align: right; + font-weight: 700; +} +.news-poster { + margin-top: -20px; + float: right; + text-align: center; + min-width: 140px; +} + +.news-poster img { + max-width: 120px; + max-height: 120px; +} + +.news-poster h1 { + line-height: 100%; + margin: 0; + margin-top: -5px; +} + +@media (max-width: 768px) { + + .news-poster { + margin: 0; + } + +} + +@media (max-width: 400px) { + + .news-poster { + margin-top: 10px; + width: auto; + padding: 0 10px 0 0; + } + + .news-poster img { + display: none; + } + +} + +/* + * Profile page Styling + */ +.profile { + background: rgba(211, 191, 255, .8) !important; +} + +.profile .content-left { + max-height: 800px; + overflow: auto; +} + +.profile .user-actions { + font-size: 3em; + line-height: 1.4em; +} + +.profile .user-actions a { + color: #8364A1; + text-decoration: none; + text-shadow: 0 0 2px #9475B2; + transition: all .2s; +} + +.profile .user-actions a:hover { + text-shadow: 0 0 6px #9475B2; +} + +.profile .user-actions a:active { + color: #725390; + text-shadow: 0 0 8px #8364A1; +} + +@media (max-width: 1024px) { + + .content { + width: auto; + } + + .content .content-right { + width: 100% !important; + min-height: 0; + } + + .content .content-left { + width: 100% !important; + min-height: 0; + border-top: 1px solid #9475B2; + } + +} + +/* + * New profile page styling + */ +.new-profile { + background: rgba(211, 191, 255, .8) !important; +} + +.new-profile .new-profile-header { + height: 200px; + background: no-repeat center center / cover transparent; + width: 100%; + align-items: center; + border-bottom: 1px solid #9475b2; +} + +.new-profile .new-profile-info { + height: 100%; + width: 100%; + background: linear-gradient(0deg, rgba(211, 191, 255, .8), rgba(211, 191, 255, .8) 52px, transparent 52px, transparent); + width: 100%; + display: flex; + align-items: center; + + // hackjob + pointer-events: none; + position: relative; + top: -100%; + + > * { + pointer-events: auto; + } +} + +.new-profile .new-profile-avatar { + height: 190px; + width: 190px; + margin: 0 2px; + flex-grow: 0; + flex-shrink: 0; + background: no-repeat center center / cover #FFF; +} + +.new-profile .new-profile-username { + align-self: flex-end; + margin-left: 4px; +} + +.new-profile .new-profile-dates { + font-size: .8em; + line-height: 1.4em; + text-align: right; + align-self: flex-end; + flex-grow: 5; + height: 45px; +} + +.new-profile .new-profile-interactions { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 2.5em; + line-height: 1.4em; + border-bottom: 1px solid #9475b2; +} + +.new-profile .new-profile-interactions a { + color: #8364A1; + text-decoration: none; + text-shadow: 0 0 2px #9475B2; + transition: all .2s; +} + +.new-profile .new-profile-interactions a:hover { + text-shadow: 0 0 6px #9475B2; +} + +.new-profile .new-profile-interactions a:active { + color: #725390; + text-shadow: 0 0 8px #8364A1; +} + +.new-profile .new-profile-navigation { + margin-left: 5px; +} + +.new-profile .new-profile-actions { + border-left: 1px solid #9475b2; + min-width: 345px; + text-align: right; + margin-right: 5px; +} + +.new-profile .new-profile-content { + display: flex; + justify-content: space-between; +} + +.new-profile .new-profile-data { + display: block; + width: 350px; + border-left: 1px solid #9475b2; + flex-shrink: 0; + text-align: center; +} + +.new-profile .new-profile-mode { + width: 100%; + flex-grow: 0; + margin-right: 2px; + overflow: auto; +} + +.new-profile .new-profile-mode-title { + padding-bottom: 2px; + border-bottom: 1px solid #9475b2; + margin-bottom: 2px; +} + +@media (max-width: 1032px) { + .new-profile .new-profile-info { + background: rgba(211, 191, 255, .5); + flex-flow: column; + } + + .new-profile .new-profile-avatar { + height: 120px; + width: 120px; + margin: 2px; + } + + .new-profile .new-profile-dates, + .new-profile .new-profile-username { + flex-grow: 6; + width: 100%; + text-align: center; + } + + .new-profile .new-profile-dates br { + content: ""; + } + + .new-profile .new-profile-dates br:before { + content: "- "; + } + + .new-profile .new-profile-interactions { + flex-flow: column; + } + + .new-profile .new-profile-navigation, + .new-profile .new-profile-actions { + border: 0; + width: 100%; + text-align: center; + margin: 0; + } + + .new-profile .new-profile-content { + flex-flow: column-reverse; + } + + .new-profile .new-profile-data { + width: 100%; + border-bottom: 1px solid #9475b2; + border-left: 0; + } + + .new-profile .new-profile-mode { + margin: 0; + } +} + +@media (max-width: 500px) { + .new-profile .new-profile-dates { + display: none; + } +} + +/* + * Friends section + */ + +.profile-friends { + text-align: center; +} + +.profile-friends > div:not(:last-child) { + display: inline-block; + border: 1px solid #9475B2; + text-align: center; + width: 200px; + margin: 4px 0; + border-radius: 3px; + box-shadow: inset 0 0 1px #9475B2; + background: #E4CFFF; + transition: background .2s, box-shadow .2s; +} + +.profile-friends > div:not(:last-child):hover { + background: #C2AFFE; + box-shadow: inset 0 0 2px #9475B2; +} + +.profile-friends > div > .friends-list-data { + display: block; +} + +.profile-friends > div > .friends-list-data > .friends-list-name { + font-size: 1.2em; + line-height: 1.5em; + padding-bottom: 4px; +} + +/* + * Panel table + */ +.panelTable { + width: 100%; + font-size: .8em; + line-height: 1.5em; + border-spacing: 1px; +} + +.panelTable th { + background: #9475B2; + color: #306; +} + +.panelTable td:first-child { + padding: 0 2px; + text-align: center; +} + +.panelTable .warning td { + background: #A22; + color: #FFF; +} + +.panelTable .silence td { + background: #A22; + color: #FFF; +} + +.panelTable .restriction td { + background: #822; + color: #FFF; +} + +.panelTable .ban td { + background: #444; + color: #FFF; +} + +.panelTable .abyss td { + background: #888; +} + +/* + * User Background + */ +#userBackground { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + background: no-repeat center center / cover transparent; +} + +/* + * Settings page styling + */ +.settings ul > li { + margin-left: 2em; + list-style: square; +} +.settings .content-left { + width: 850px; +} +.settings .content-right { + width: 174px; + text-align: right; +} +.settings .right-menu-nav > div { + background: #C2AFFE; + padding: 4px; + margin: -1px -2px; + font-weight: 700; + display: block; + font-size: 17px; +} + +.settings .right-menu-nav > a { + display: block; + font-size: 14px; + line-height: 25px; + color: #22E; + text-decoration: none; + padding: 0 10px; +} + +.settings .right-menu-nav > a:hover { + color: #22E; + text-decoration: underline; +} + +.settings .right-menu-nav > a:active { + color: #E22; + text-decoration: underline; +} + +.settings .settings-explanation { + font-size: 11px; + line-height: 18px; + padding: 7px; + border-bottom: 1px solid #C2AFFE; + margin-bottom: 7px; +} + +.settings .settings-table { + width: 100%; +} + +.settings .settings-table tr > th { + font-size: 17px; + background: #C2AFFE; + padding: 4px; + margin: -1px -2px; + font-weight: 700; +} + +.settings .settings-table tr > td { + text-align: center; +} + +.settings .settings-table > tbody > tr:not(:last-child) > td { + border-bottom: 1px solid #C2AFFE; +} + +.settings .settings-table tr.current-session > td { + background: #B39EED; +} + +.settings .profile-field { + width: 100%; +} + +.settings .profile-field > div:nth-child(2) > input { + width: calc(100% ~'-' 16px); +} + +.settings .profile-save { + text-align: center; + padding: 10px; +} + +.settings .background-frame { + max-width: 600px; + max-height: 400px; + border: 3px solid #EEE; + background: #EEE; + box-shadow: 0 3px 7px #888; + border-radius: 3px; + margin: 5px; +} + +.settings form { + overflow: auto; +} + +.settings .notification-history > a { + border: 1px solid #507; + margin: 5px; + background: rgba(113, 74, 150, .3); + display: block; +} + +.settings .notification-history > a > .notif-hist-icon { + float: left; + width: 80px; + height: 80px; + line-height: 80px; + text-align: center; + background: rgba(0, 0, 0, .5); + display: block; + color: #FFF; +} + +.settings .notification-history > a > .notif-hist-icon > .font-icon { + margin: .34em 0; +} + +.settings .notification-history > a > .notif-hist-content > .notif-hist-time { + font-style: italic; + text-align: right; + float: right; + margin-right: 6px; + font-size: .8em; +} + +.settings .notification-history > a > .notif-hist-content > .notif-hist-inside { + float: left; + margin-left: 2px; + padding-left: 8px; +} + +.settings .notification-history > a > .notif-hist-content > .notif-hist-inside > .notif-hist-title { + font-family: "Open Sans", sans-serif; + font-weight: 300; + font-size: 1.7em; + margin-top: 1em; +} + +.settings .friends-list { + text-align: center; +} + +.settings .friends-list button { + background: transparent; + border: 0; + cursor: pointer; + display: block; + box-sizing: border-box; + width: 100%; +} + +.settings .friends-list > div:not(:last-child), +.settings .friends-list > form { + display: inline-block; + border: 1px solid #9475B2; + text-align: center; + width: 220px; + margin: 0 2px 40px; + border-radius: 3px; + box-shadow: inset 0 0 1px #9475B2; + background: #E4CFFF; + transition: background .2s, box-shadow .2s; +} + +.settings .friends-list > div:not(:last-child):hover, +.settings .friends-list > form:hover { + margin-bottom: 6px; + background: #C2AFFE; + box-shadow: inset 0 0 2px #9475B2; +} + +.settings .friends-list > form:hover { + margin-bottom: 4px; +} + +.settings .friends-list > .active { + background: #C2AFFE; + box-shadow: inset 0 0 2px #9475B2; +} + +.settings .friends-list > div > .friends-list-data, +.settings .friends-list > form > .friends-list-data { + display: block; +} + +.settings .friends-list > div > .friends-list-data > .friends-list-name, +.settings .friends-list > form > .friends-list-data > .friends-list-name { + font-size: 1.2em; + line-height: 1.5em; + padding-bottom: 4px; +} + +.settings .friends-list > div > .friends-list-actions, +.settings .friends-list > form > .friends-list-actions { + display: none; + background: linear-gradient(0deg, #9475B2, transparent) transparent; +} + +.settings .friends-list > div > .friends-list-actions > a, +.settings .friends-list > form > .friends-list-actions > button { + color: #222; + font-size: 2em; + line-height: 1em; + text-decoration: none; + transition: .2s; + padding: 5px 0; + float: left; +} + +.settings .friends-list > div:hover > .friends-list-actions, +.settings .friends-list > form:hover > .friends-list-actions { + display: block; +} + +.settings .friends-list > div > .friends-list-actions > .remove:hover, +.settings .friends-list > form > .friends-list-actions > .remove:hover { + color: #D00; +} + +.settings .friends-list > div > .friends-list-actions > .remove:active, +.settings .friends-list > form > .friends-list-actions > .remove:active { + color: #A00; +} + +.settings .friends-list > div > .friends-list-actions > .add:hover, +.settings .friends-list > form > .friends-list-actions > .add:hover { + color: #0D0; +} + +.settings .friends-list > div > .friends-list-actions > .add:active, +.settings .friends-list > form > .friends-list-actions > .add:active { + color: #0A0; +} + +.settings .friends-list > div > .friends-list-actions > a, +.settings .friends-list > form > .friends-list-actions > button { + width: 50%; +} + +.settings .friends-list > div > .friends-list-actions > .fill, +.settings .friends-list > form > .friends-list-actions > .fill { + width: 100%; +} + +@media (max-width: 1024px) { + + .settings .friends-list > div:not(:last-child) { + margin-bottom: 6px; + } + + .settings .friends-list > form { + margin-bottom: 4px; + } + + .settings .friends-list > div > .friends-list-actions, + .settings .friends-list > form > .friends-list-actions { + display: block; + } + +} + +/* + * Support page Styling + */ +.support .sectionHeader { + margin: -1px -2px; + background: linear-gradient(270deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0), rgba(148, 117, 178, .7)) #C2AFFE; + padding: 2px; + font-weight: 700; + font-size: 15px; + color: #306; +} + +.support .featureParent { + width: 100%; + padding: 10px 0; + overflow: hidden; + text-align: center; +} + +.support .featureBox { + background: linear-gradient(180deg, #C2AFFE, #B19EED) no-repeat scroll left top / cover #C2AFFE; + margin: 7px; + border-radius: 5px; + text-align: center; + box-shadow: 0 0 .5em #000; + text-shadow: 0 0 .5em #9475B2; + display: inline-block; + vertical-align: top; + transition: .2s; + width: 400px; + height: 50px; + cursor: default; + color: #503170; +} + +@media (min-width: 1024px) { + + .support .featureBox.final { + width: 818px; + } + + .support .featureBox.final .featureBoxDesc { + font-size: 1.3em; + } + +} + +@media (max-width: 840px) { + + .support .featureBox, + .support .featureBox.final { + width: 380px; + } + + .support .featureBox.final .featureBoxDesc { + line-height: 25px; + } + + .support .featureBox .right { + display: none; + } + +} + +.support .featureBoxIcon.right { + float: right; +} + +.support .featureBox:hover { + box-shadow: 0 0 1.5em #609; + text-shadow: 0 0 .7em #9475B2; +} + +.support .featureBoxIcon { + float: left; + line-height: 50px; + width: 60px; + text-align: center; + font-size: 2.8em; +} + +.support .featureBoxDesc { + display: block; + line-height: 50px; +} + +.support .paymentOptions { + float: right; + font-size: 2em; + margin-left: 6px; +} + +.support .paymentOptions div { + float: left; + margin: 0 1px; +} + +.support table { + width: 100%; + border-spacing: 0; + margin: 3px auto; +} + +.support table td, +.support table th { + padding: 4px 8px; +} + +.support table td { + padding: 4px 8px; + background: #C2AFFE; +} + +.support table th:nth-child(1) { + width: 25%; +} + +.support table th:nth-child(2) { + width: 10%; +} + +.support table td:nth-child(2) { + text-align: center; +} + +.support table th:nth-child(3) { + width: 65%; +} + +.support thead th { + background: linear-gradient(0deg, #C2AFFE, transparent); +} + +.support tfoot th { + background: linear-gradient(180deg, #C2AFFE, transparent); +} + +/* + * Input box Styling + */ +input[type="submit"].inputStyling, +input[type="button"].inputStyling, +input[type="reset"].inputStyling, +button.inputStyling, +a.button { + padding: 3px 10px; + cursor: pointer; + border: 0; + border-radius: 3px; + background: linear-gradient(180deg, #9475B2 0%, #9475B2 50%, #86A 50%) #9475B2; + margin: 4px 1px; + color: #FFF; + box-shadow: inset #222 0 0 1px; + text-shadow: #888 0 0 2px; + transition: text-shadow .5s, box-shadow .5s; + font-size: 22px; + min-width: 120px; +} + +input[type="submit"].inputStyling.small, +input[type="button"].inputStyling.small, +input[type="reset"].inputStyling.small, +button.inputStyling.small, +a.button.small { + padding: 0 4px 1px; + margin: -2px 0 0; + font-size: 16px; + border-radius: 0; + min-width: 80px !important; +} + +input[type="submit"].inputStyling:hover, +input[type="button"].inputStyling:hover, +input[type="reset"].inputStyling:hover, +button.inputStyling:hover, +a.button:hover { + box-shadow: inset #222 0 0 3px; + text-shadow: #F1F1F1 0 0 5px; +} + +input[type="submit"].inputStyling:active, +input[type="button"].inputStyling:active, +input[type="reset"].inputStyling:active, +button.inputStyling:active, +a.button:active { + box-shadow: inset #222 0 0 5px; + text-shadow: #F1F1F1 0 0 3px; + transition: text-shadow .2s, box-shadow .2s; +} + +input[type="submit"][disabled=disabled].inputStyling, +input[type="button"][disabled=disabled].inputStyling, +input[type="reset"][disabled=disabled].inputStyling, +button[disabled=disabled].inputStyling, +a.button[disabled=disabled] { + background: linear-gradient(180deg, #858585 0%, #858585 50%, #787878 50%) #858585 !important; + box-shadow: inset #222 0 0 1px !important; + text-shadow: #888 0 0 2px !important; +} + +input[type="text"].inputStyling, +input[type="password"].inputStyling, +input[type="date"].inputStyling, +input[type="url"].inputStyling { + padding: 3px 4px; + border: 1px solid #CCC; + box-shadow: inset #DDD 0 0 5px; + background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF; +} + +input[type="text"].inputStyling.red, +input[type="password"].inputStyling.red, +input[type="date"].inputStyling.red, +input[type="url"].inputStyling.red { + box-shadow: inset 0 0 7px #EB5959; +} + +input[type="text"].inputStyling.green, +input[type="password"].inputStyling.green, +input[type="date"].inputStyling.green, +input[type="url"].inputStyling.green { + box-shadow: inset 0 0 7px #A9EC8B; +} + +input[type="range"].inputStyling { + border: 0; + width: 100%; + font-size: 1.5em; + margin: 5px 0; +} + +textarea.inputStyling { + padding: 3px 4px; + border: 1px solid #CCC; + box-shadow: inset #DDD 0 0 5px; + background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF; +} + +/* + * Forum Styling + */ +.forum .forumList { + display: flex; + flex-flow: column; +} + +.forum .forumList .forumCategory { + background: #C2AFFE; + font-weight: 700; + font-size: 17px; + padding: 4px; + color: inherit; + text-decoration: none; +} + +.forum .forumList .forumForum { + display: inline-flex; + min-height: 50px; +} + +.forum .forumList .forumForum > div { + display: inline-flex; + flex-flow: column; + justify-content: center; +} + +.forum .forumList .forumForum .forumIcon { + text-align: center; + width: 50px; + line-height: 50px; + flex-shrink: 0; + color: #444; + text-shadow: 0 0 5px #444; +} + +.forum .forumList .forumForum .forumIcon.unread { + color: #6C5D7B; + text-shadow: 0 0 5px #9475B2; +} + +.forum .forumList .forumForum .forumTitle { + flex-grow: 1; + flex-shrink: 1; +} + +.forum .forumList .forumForum .forumTitle .name { + font-size: 1.2em; + line-height: 1.7em; +} + +.forum .forumList .forumForum .forumTitle .desc { + font-size: .8em; + line-height: 1em; +} + +.forum .forumList .forumForum .forumTitle .desc .subforums { + font-weight: bold; + padding-top: 5px; +} + +.forum .forumList .forumForum .forumCount { + width: 70px; + text-align: center; + flex-shrink: 0; +} + +.forum .forumList .forumForum .forumCount .topics { + font-size: 1.5em; + color: #111; +} + +.forum .forumList .forumForum .forumCount .posts { + font-size: .8em; + line-height: 1.2em; + color: #555; +} + +.forum .forumList .forumForum .forumLastPost { + width: 250px; + font-size: .9em; + line-height: 1.4em; + flex-shrink: 0; +} + +@media (max-width: 768px) { + .forum .forumList .forumForum .forumLastPost { + display: none; + } +} + +.forum .topicList { + width: 100%; + border-spacing: 0; + margin-top: 2px; +} + +.forum .topicList thead, +.forum .topicList tfoot { + background: #C2AFFE; + font-weight: 700; +} + +.forum .topicList tbody td { + height: 40px; + word-wrap: break-word; +} + +.forum .topicList tbody .topicAnnouncement { + background: #C2AFFE; +} + +.forum .topicList tbody .topicIcon { + width: 40px; + text-align: center; + color: #444; + text-shadow: 0 0 5px #444; +} + +.forum .topicList tbody .topicIcon.unread { + color: #6C5D7B; + text-shadow: 0 0 5px #9475B2; +} + +.forum .topicList tbody .topicAuthor { + width: 150px; + text-align: center; +} + +.forum .topicList tbody .topicCounts { + text-align: center; +} + +.forum .topicList tbody .topicCounts .replies { + font-size: 1.3em; + color: #111; + line-height: 1.3em; +} + +.forum .topicList tbody .topicCounts .views { + font-size: .8em; + color: #555; + line-height: 1em; +} + +.forum .topicList tbody .topicLast { + width: 250px; + text-align: center; +} + +.forum.viewtopic .posts { + width: 100%; + border-spacing: 0; + table-layout: fixed; + word-break: break-word; +} + +.forum.viewtopic .posts td { + vertical-align: top; + word-wrap: break-word; +} + +.forum.viewtopic .posts tr:not(:last-child) td { + border-bottom: 1px solid #9475B2; +} + +.forum.viewtopic .posts .userpanel { + width: 200px; + text-align: center; + background: linear-gradient(270deg, transparent, #C2AFFE); + padding-bottom: 6px; +} + +.forum.viewtopic .posts .userpanel .username { + font: 1.5em/1.7em "Open Sans", sans-serif; + text-shadow: 0 0 7px #888; padding: 0 0 2px; + display: inline-block; +} + +.forum.viewtopic .posts .userpanel .avatar { + max-width: 150px; + max-height: 150px; + border: 3px solid #EEE; + background: #EEE; + box-shadow: 0 3px 7px #888; + border-radius: 3px; + display: block; + margin: 0 auto 10px; +} + +.forum.viewtopic .posts .userpanel .usertitle { + font-size: .8em; + line-height: 1.5em; +} + +.forum.viewtopic .posts .userpanel .actions { + font-size: 2em; + line-height: 1.4em; +} + +.forum.viewtopic .posts .userpanel .actions a { + color: #8364A1; + text-decoration: none; + text-shadow: 0 0 2px #9475B2; + transition: all .2s; +} + +.forum.viewtopic .posts .userpanel .actions a:hover { + text-shadow: 0 0 6px #9475B2; +} + +.forum.viewtopic .posts .userpanel .actions a:active { + color: #725390; + text-shadow: 0 0 8px #8364A1; +} + +.forum.viewtopic .posts .post-content { + font-size: .9em; +} + +.forum.viewtopic .posts .post-content .details { + border-bottom: 1px solid #B19EED; + color: #222; +} + +.forum.viewtopic .posts .post-content .details .subject { + float: left; +} + +.forum.viewtopic .posts .post-content .details .date { + float: right; +} + +.forum.viewtopic .posts .post-content .signature { + border-top: 1px solid #B19EED; + padding-top: 2px; + margin-top: 20px; + display: block; + width: 100%; + max-height: 200px; + overflow: auto; +} + +.forum.viewtopic .posts .post-content .signature img { + vertical-align: middle; +} + +.posting-subject { + padding: 3px 0 2px; +} + +.posting-subject input { + width: calc(100% ~'-' 10px); +} + +.posting-bbcodes { + padding: 4px 0 2px; +} + +.posting-bbcode-description { + font: .9em/1.2em "Open Sans", sans-serif; + padding: 2px 0 3px; +} + +.posting-text { + padding: 2px 0 0; + margin: 0 0 -1px; +} + +.posting-emotes { + text-align: center; + padding: 10px 0; +} + +.posting-emotes img { + vertical-align: middle; + cursor: pointer; + margin: 0 3px; +} + +.posting-text textarea { + min-width: calc(100% ~'-' 10px); + max-width: calc(100% ~'-' 10px); + min-height: 200px; +} + +.posting-options > div { + float: left; + padding: 10px 10px 0; +} + +.posting-buttons { + text-align: center; +} + +.forum .buttonRow .leftSide { + float: left; +} + +.forum .buttonRow .rightSide { + float: right; +} + +/* + * Pagination + */ +.pagination a, +.forumbtn { + background: linear-gradient(0deg, #9475B2 10%, #C2AFFE 90%); + color: #306; + padding: 4px 8px; + text-decoration: none; + border-radius: 2px; + margin: 4px 2px; + display: inline-block; + font-size: 1.3em; + border: 1px solid #9475B2; + cursor: pointer; +} + +button.forumbtn { + padding: 3px 6px; +} + +.pagination a.current, +.forumbtn.current { + background: linear-gradient(0deg, #A586C3, #D3BFFF); +} + +.pagination a:hover, +.forumbtn:hover { + background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%); +} + +.pagination a:active, +.forumbtn:active { + background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%); +} + +/* + * Ban page styling + */ +.banned p { + background: #B19DDD; + border: 1px solid #9475B2; + font-size: 13px; + line-height: 19px; + overflow: auto; + padding: 6px 10px; + border-radius: 3px; +} + +/* + * Comments + */ +#comments .comment-input-section { + border-bottom: 1px solid #9475B2; +} + +#comments .comment { + display: flex; + align-items: stretch; + margin-bottom: 3px; +} + +#comments .comments-discussion .comment { + margin-top: 3px; +} + +#comments .comment > .comment-avatar { + height: 60px; + width: 60px; + background: rgba(0, 0, 0, .2) url("/images/pixel.png") no-repeat scroll left center / contain; + flex-shrink: 0; + margin-right: 2px; + border-radius: 4px; + border: 0; + display: block; + text-align: center; + word-wrap: break-word; + transition: .2s; +} + +#comments .comment > .comment-avatar:hover { + background-color: transparent; +} + +#comments .comment > .comment-avatar > span { + opacity: 0; + transition: .2s; +} + +#comments .comment > .comment-avatar:hover > span { + opacity: 1; +} + +#comments .comment > .comment-pointer { + width: 0; + height: 0; + border-style: solid; + border-width: 0 15px 15px 0; + border-color: transparent #F6F6F6 transparent transparent; + margin-top: 10px; +} + +#comments .comment > .comment-content { + border-radius: 5px; + border: 0; + min-height: 50px; + min-width: 300px; + flex-grow: 2; + padding: 5px; + font: 12px/20px "Open Sans", sans-serif; + background: #F6F6F6; +} + +#comments .comment > textarea.comment-content { + height: 50px; +} + +#comments .comment > .comment-content > .comment-controls { + float: right; +} + +#comments .comment > .comment-content > .comment-controls > ul > li { + float: left; + margin: 0 5px; + opacity: 0; + transition: .5s; +} + +#comments .comment > .comment-content:hover > .comment-controls > ul > li, +#comments .comment > .comment-content > .comment-controls > ul > li.shown { + opacity: 1; +} + +#comments .comment > .comment-content > .comment-controls > ul > li.voting { + font-size: 1.5em; +} + +#comments .comment > .comment-content > .comment-controls > ul > li.like { + color: #0A0; +} + +#comments .comment > .comment-content > .comment-controls > ul > li.dislike { + color: #C00; +} + +#comments .comment > .comment-submit { + flex-shrink: 0; + font-family: FontAwesome; + width: 50px; + border-radius: 4px; + margin-left: 2px; + font-size: 2em; + background: linear-gradient(0deg, #9475B2 10%, #C2AFFE 90%); + color: #306; + border: 1px solid #9475B2; + cursor: pointer; +} + +#comments .comment > .comment-submit.new { + width: 60px; +} + +#comments .comment > .comment-submit:hover { + background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%); +} + +#comments .comment > .comment-submit:active { + background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%); +} + +#comments .comments-discussion { + overflow: auto; +} + +#comments ul { + list-style: none; +} + +#comments .comments-list > li > ul, +#comments .comments-list > li > ul > li > ul, +#comments .comments-list > li > ul > li > ul > li > ul, +#comments .comments-list > li > ul > li > ul > li > ul > li > ul { + margin-left: 40px; +} + +#comments ul > li > ul .comment > .comment-avatar { + height: 50px; + width: 50px; + font-size: .9em; + line-height: 1.1em; +} + +#comments ul > li > ul .comment > .comment-content { + min-height: 40px; +} + +#comments ul > li > ul .comment > textarea.comment-content { + height: 40px; +} + +/* + * User container + */ +.user-container { + display: flex; + align-items: center; + background: no-repeat center center / cover transparent; +} + +.user-container-avatar { + height: 100px; + width: 100px; + margin: 0 2px; + flex-grow: 0; + flex-shrink: 0; + background: no-repeat center center / cover #FFF; +} + +.user-container-info { + background: rgba(211, 191, 255, .8); + width: 100%; + padding: 0 5px; +} diff --git a/resources/assets/less/yuuno/main.less b/resources/assets/less/yuuno/main.less index 016aadf..1be0124 100644 --- a/resources/assets/less/yuuno/main.less +++ b/resources/assets/less/yuuno/main.less @@ -1,2329 +1,13 @@ -/* - * Sakura Yuuno Stylesheet - * By Flashwave - */ - -/* Import bbcode specific style */ -@import "bbcode"; -@import "alert"; -@import "dropdown"; -@import "np"; -@import "dialogue"; -@import "uploader"; - -/* - * Animation Keyframes - */ -/* Spin */ -@keyframes spin { - - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } - -} - -/* Fade out */ -@keyframes fadeOut { - - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } - -} - -/* Fade in */ -@keyframes fadeIn { - - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - -} - -/* Slide in from right */ -@keyframes slideInFromRight { /* Requires position: relative to be set on the element */ - - 0% { - right: -100%; - } - - 100% { - right: 0; - } - -} - -/* Slide out to bottom */ -@keyframes slideOutToBottom { /* Read comment above */ - - 0% { - bottom: 0; - } - - 100% { - bottom: -100%; - } - -} - -/* - * Standard Elements - */ -* { - /* Reset margin and padding */ - margin: 0; - padding: 0; -} - -html { - width: 100%; - height: 100%; -} - -body { - font: 12px/20px Verdana, sans-serif; - background: linear-gradient(180deg, #C2AFFE, #FBEEFF) no-repeat scroll left top #FBEEFF; - background-size: cover; - color: #000; - height: 100%; - position: relative; - width: 100%; -} - -#container { - min-height: 100%; - position: relative; - width: 100%; -} - -#contentwrapper { - padding-bottom: 220px; -} - -.clear { - clear: both !important; - float: none !important; -} - -.hidden { - display: none !important; - visibility: hidden !important; -} - -.centreAlign { - text-align: center; -} - -.leftAlign { - text-align: left; -} - -.rightAlign { - text-align: right; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Open Sans", sans-serif; - font-weight: 100; - margin: 5px 0; -} - -h1.stylised { - text-shadow: 0 0 5px #8364A1; - color: #614390; -} - -hr.default { - border: 0; - height: 1px; - color: #9475B2; - background: #9475B2; -} - -img { - max-width: 100%; - max-height: 100%; -} - -.default-avatar-setting { - max-width: 200px; - max-height: 200px; - border: 3px solid #EEE; - background: #EEE; - box-shadow: 0 3px 7px #888; - border-radius: 3px; - margin: 5px; -} - -img.homepage-menu-avatar { - float: right; - max-width: 100px; - margin-top: -25px; - margin-right: 0; -} - -img.emoticon { - vertical-align: middle; -} - -@media (max-width: 400px) { - - img.homepage-menu-avatar { - display: none; - } - -} - -.standalone img:not(:hover) { - max-width: 100%; -} - -a.clean, -a.underline, -a.no-underline { - color: inherit !important; - text-decoration: none !important; -} - -a.underline:hover { - text-decoration: underline !important; -} - -a.default { - color: #22E; - text-decoration: none; -} - -a.default:hover { - color: #22E; - text-decoration: underline; -} - -a.default:active { - color: #E22; - text-decoration: underline; -} - -.content { - margin: 10px auto; - padding: 2px 3px; - width: 1024px; - border: 1px solid #9475B2; - box-shadow: 0 0 3px #9475B2; - border-radius: 3px; - background: #D3BFFF; -} - -.content-column { - position: relative; -} - -.content-left { - float: left; - width: 688px; -} - -.content-right { - float: right; - width: 334px; -} - -.content .head, -.loginPage .head { - margin: -1px -2px; - padding: 4px 5px 5px; - font-weight: 700; - font-size: 20px; - color: #306; - background: linear-gradient(90deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE; - border-radius: 2px; - word-wrap: break-word; -} - -.content-right .head { - margin: -1px -2px -1px; - padding: 4px 5px 5px; - font-weight: 700; - font-size: 20px; - color: #306; - background: linear-gradient(270deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE; - border-radius: 2px; - word-wrap: break-word; -} - -.head > .links { - float: right; -} - -.standalone { - background: #C2AEEE; -} - -.standalone > div { - padding: 5px 10px; -} - -.private-message { - border-top: 1px solid #C2AEEE; -} - -.ajax-busy { - background: #222; - background: linear-gradient(0deg, rgba(0, 0, 0, .4), transparent) rgba(0, 0, 0, .8); - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 5; - text-align: center; - opacity: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.ajax-busy .ajax-inner { - line-height: 2em; - color: #FFF; - display: inline-block; - padding: 10px 20px 15px; - border-radius: 10px; -} - -.ajax-busy .ajax-inner h2 { - line-height: 2em; -} - -.homepage .content-right ul { - margin: 10px 0 10px 30px; -} - -@media (max-width: 1024px) { - .membersPageList { - padding-top: 10px; - } -} - -.headerLoginContainer { - background: rgba(211, 191, 255, .8); - border: 1px solid #9475B2; - box-shadow: 0 0 3px #8364A1; - text-align: center; - max-width: 1024px; - margin: 10px auto 0; - padding: 6px 3px; - border-radius: 3px; -} - -.headerLoginContainer form, -.headerLoginContainer div { - display: inline-block; -} - -.headerLoginContainer input[type="submit"], -.headerLoginContainer button { - display: inline-block !important; - border-radius: 3px !important; -} - -@media (max-width: 640px) { - - #headerLoginForm > div { - display: block; - } - - #headerLoginForm label { - text-align: right; - min-width: 80px; - display: inline-block; - } - -} - -#headerLoginForm label { - font-family: "Open Sans", sans-serif; - font-weight: 100; - font-size: 15px; -} - -.indexSidePanelLinks { - font-size: 4em; - text-align: center; - line-height: 1.3em; -} - -.panelQuickLinks { - font-size: 2.5em; - list-style: none; - line-height: 2.2em; - margin: 0 !important; - padding: 6px 0 0 8px -} - -.panelQuickLinks > li { - float: left; - margin: 0 10px; -} - -.panelQuickLinks > li > a > .count { - font: 100 1em "Open Sans", sans-serif; - margin-left: 6px; -} - -.indexSidePanelLinks > a, -.panelQuickLinks a { - color: #8364A1; - text-decoration: none; - text-shadow: 0 0 2px #9475B2; - transition: .2s; -} - -.indexSidePanelLinks > a:hover, -.panelQuickLinks a:hover { - text-shadow: 0 0 6px #9475B2; -} - -.indexSidePanelLinks > a:active, -.panelQuickLinks a:active { - color: #725390; - text-shadow: 0 0 8px #8364A1; -} - -/* - * Site header styling - */ -.header { - text-align: center; - background: linear-gradient(180deg, #C2AFFE, #CCBAFE); - box-shadow: 0 0 5px #8364A1; -} - -.header .logo { - background: none; - height: auto; - width: auto; - display: inline-block; - text-decoration: none; - font: 100 70px/80px "Open Sans", sans-serif; - color: #B06AC4; - transition: color .2s, text-shadow .2s; -} - -.header .logo:hover { - color: #C17BD5; - text-shadow: 0 0 .1em #C17BD5; -} - -.header .logo:active { - color: #A059B3; - text-shadow: 0 0 .1em #A059B3; -} - -@media (max-width: 768px) { - - .header .logo { - font: 100 50px/60px "Open Sans", sans-serif; - } - -} - -.header .menu { - border-bottom: 2px solid #9475B2; - display: block; -} - -.header .menu:after { - clear: both; - content: " "; - display: block; - height: 0; - visibility: hidden; -} - -.header .menu .menu-nav { - float: left; -} - -.header .menu .menu-ucp { - float: right; -} - -.header .menu .menu-item { - margin: 0 7px -2px 6px; - display: inline-block; - border-bottom: 2px solid #8364A1; - text-decoration: none; - text-align: center; - transition: background .3s, border-color .3s; - height: 30px; - width: 30px; - line-height: 30px; - vertical-align: middle; - font-size: 1.6em; - color: #75569B; - background: linear-gradient(180deg, transparent 0%, transparent 50%, #8364A1 100%); - background-size: 100% 200%; -} - -.header .menu .menu-item:hover { - background-position: 0 50%; -} - -.header .menu .menu-item:active { - background-position: 0 100%; -} - -.header .menu .menu-item.avatar { - padding-left: 30px; - background: url('/images/pixel.png') no-repeat scroll left center / contain transparent; -} - -@media (max-width: 1024px) { - - .header .menu { - border: 0; - padding: 10px 0 5px; - margin: 0 auto; - width: auto; - } - - .header .menu > div { - float: none !important; - display: inline; - } - - .header .menu .menu-item { - border: 0; - height: 50px; - width: 50px; - line-height: 50px; - font-size: 2em; - display: inline-block; - } - - .header .menu .menu-item:hover { - background: transparent; - } - - .header .menu .menu-item:active { - background: #75569B; - color: #9575B2; - } - - .header .menu .menu-item.avatar { - padding-left: 50px; - background: url('/images/pixel.png') no-repeat scroll left center / contain transparent; - } - -} - -.headerNotify { - margin: 10px auto; - padding: 10px 3px; - width: auto; - max-width: 1024px; - border: 1px solid #9475B2; - box-shadow: 0 0 3px #9475B2; - border-radius: 3px; - background: #D3BFFF; - background: repeating-linear-gradient(-45deg, #C2AFFE, #C2AFFE 10px, #D3BFFF 10px, #D3BFFF 20px); - display: block; - text-align: center; -} - -.headerAnnouncement { - display: block; - margin: 10px auto; - text-align: center; - padding: 2px 3px; - border: 1px solid #9475B2; - box-shadow: 0 0 3px #9475B2; - border-radius: 3px; - max-width: 1024px; - height: 120px; - background: #D3BFFF no-repeat scroll center center; -} - -.headerAnnouncement > a { - display: block; - width: 100%; - height: 100%; -} - -/* - * Site footer styling - */ -.footer { - box-shadow: 0 0 1em #9475B2; - font-size: small; - width: 100%; - padding-top: 10px; - padding-bottom: 30px; - background: linear-gradient(180deg, #9475B2 0%, #FBEEFF 20%, #C2AFFE 100%) #C2AFFE; - position: absolute; - bottom: 0; -} - -.footer .ftsections a { - color: inherit; - text-decoration: none; -} - -.footer .ftsections a:hover { - text-decoration: underline; -} - -.footer .ftsections { - margin: auto; - text-align: center; - width: 95%; - min-height: 150px; -} - -.footer .ftsections .ftsection { - vertical-align: top; - text-align: left; - display: inline-block; - width: 200px; - list-style: square; -} - -.footer .ftsections .ftsection li { - margin: 2px 2px 2px 16px; -} - -.footer .ftsections .ftsection li.fthead { - margin: 2px 2px 5px; - font-weight: 700; - list-style: none; -} - -.footer .ftsections .copycentre { - text-align: center; - width: 100%; - font-size: .9em; - line-height: 1.8em; -} - -@media (max-width: 1024px) { - - .footer { - position: inherit; - } - - #contentwrapper { - padding: 0; - } - -} - -/* - * Advertisement container - */ -.ad-container { - font-size: .8em; -} - -.ad-container img { - box-sizing: border-box; - width: 100%; - height: 100%; -} - -.ad-container a { - color: #22E; - text-decoration: none; -} - -.ad-container a:hover { - text-decoration: underline; -} - -.ad-container a:active { - color: #E22; -} - -.ad-container img { - vertical-align: middle; -} - -.ad-container.ad-sidebar > .ad-box { - text-align: center; - padding: 6px 2px; -} - -.ad-container.ad-sidebar img { - max-height: 250px; - max-width: 250px; -} - -.ad-container.ad-footer { - display: block; - margin: 10px auto; - text-align: center; -} - -.ad-container.ad-footer img { - max-height: 90px; - max-width: 728px; -} - -.ad-container.ad-footer > .ad-box { - display: inline-block; - padding: 2px; - border: 1px solid #9475B2; - box-shadow: 0 0 3px #9475B2; - border-radius: 3px; - background: #D3BFFF; -} - -/* - * Authentication page Styling - */ -.loginPage { - margin: 0 auto; - max-width: 825px; -} - -.loginPage > * { - text-align: center; - margin: 10px auto; - padding: 2px 3px; - width: 400px; - border: 1px solid #9475B2; - box-shadow: 0 0 3px #9475B2; - border-radius: 3px; - background: #D3BFFF; -} - -@media (max-width: 430px) { - .loginPage > * { - width: 300px; - } -} - -.loginPage .head { - text-align: left; -} - -.loginPage > div > form > div > input { - font-size: 16px; -} - -.loginPage input[type="text"], -.loginPage input[type="password"] { - width: calc(100% ~'-' 16px); -} - -.loginPage form > div > label { - font-size: 20px; - font-weight: 100; - padding: 0 5px; - line-height: 32px; - color: #222; - text-shadow: #888 0 0 3px; -} - -.loginPage .subLinks { - font-size: 10px; -} - -/* - * Members page Styling - */ -.membersPage { - width: 100%; - margin: 0 auto; - padding: 10px 0; - overflow: hidden; - text-align: center; - max-width: 1280px; -} - -.membersPage a { - color: inherit; -} - -.membersPage .userBox { - background: linear-gradient(180deg, #C2AFFE, #B19EED) no-repeat scroll left top / cover #C2AFFE; - margin: 7px; - border-radius: 5px; - text-align: center; - box-shadow: 0 0 .5em #000; - display: inline-block; - vertical-align: top; - transition: box-shadow .2s; -} - -.membersPage .userBox { - padding: 10px; - line-height: 330%; -} - -.membersPage .userBox:hover { - box-shadow: 0 0 1em #000; - cursor: pointer; -} - -.membersPage .userBox:active { - box-shadow: 0 0 1.5em #9475B2; -} - -.membersPage .userBox img { - margin: 0 auto; -} - -.membersPage .userBox .userBoxUserName { - font-weight: 700; -} - -.membersPage .boxes .userBox { - width: 200px; - height: 230px; -} - -.membersPage .boxes .userBox img { - width: 200px; - height: 200px; - display: block; -} - -.membersPage .rectangles .userBox { - width: 300px; - height: 100px; - text-align: left; -} - -.membersPage .rectangles .userBox img { - width: 100px; - height: 100px; - display: inline-block; -} - -.membersPage .rectangles .userBox .userBoxUserName { - display: inline-block; - vertical-align: top; - padding: 30px 10px; -} - -.membersPage .list table { - margin: 10px auto; - background: #C2AFFE; - box-shadow: 0 0 3px #9475B2; - border: 1px solid #9475B2; - max-width: 1024px; - width: auto; - border-radius: 3px; - border-spacing: 0; -} - -.membersPage .list table td, -.membersPage .list table th { - padding: 4px 8px; -} - -.membersPage .list thead th { - border-bottom: 1px solid #9475B2; - background: #A586C4; -} - -.membersPage .list tfoot th { - border-top: 1px solid #9475B2; - background: #A586C4; -} - -/* - * Private Messages Styling - */ -.messages table { - width: 100%; - border-spacing: 0; -} - -.messages table > tbody > tr.unread { - background: #C2AFFE; - font-weight: 700; -} - -.messages table > tbody > tr > td { - border-bottom: 1px solid #B19EED; - border-top: 1px solid #B19EED; -} - -.messages table > * > tr > td { - padding: 0 4px; -} - -.messages table > * > tr > td:first-child { - width: 150px; - text-align: center; -} - -.messages table > tbody > tr > td:first-child { - border-left: 1px solid #B19EED; -} - -.messages table > * > tr > td:last-child { - width: 220px; - text-align: center; -} - -.messages table > tbody > tr > td:last-child { - border-right: 1px solid #B19EED; -} - -/* - * Background transparency - */ -.background-transparent { - border-style: dashed; - background: fade(#D3BFFF, 50%); -} - -/* - * News page styling - */ -.news { - min-height: 0; -} - -.news-head { - margin: -1px -2px; - padding: 4px; - background: #C2AFFE; - font-weight: 700; - display: block; - font-size: 17px; - color: inherit; - text-decoration: none; -} - -.news-body { - font-size: .9em; - padding: 2px 0 0 3px; -} - -.news-body p { - margin: 0; - margin-bottom: 1em; -} - -.news-post-time { - font-size: 8pt; - padding: 6px 15px; - text-align: right; - font-weight: 700; -} -.news-poster { - margin-top: -20px; - float: right; - text-align: center; - min-width: 140px; -} - -.news-poster img { - max-width: 120px; - max-height: 120px; -} - -.news-poster h1 { - line-height: 100%; - margin: 0; - margin-top: -5px; -} - -@media (max-width: 768px) { - - .news-poster { - margin: 0; - } - -} - -@media (max-width: 400px) { - - .news-poster { - margin-top: 10px; - width: auto; - padding: 0 10px 0 0; - } - - .news-poster img { - display: none; - } - -} - -/* - * Profile page Styling - */ -.profile { - background: rgba(211, 191, 255, .8) !important; -} - -.profile .content-left { - max-height: 800px; - overflow: auto; -} - -.profile .user-actions { - font-size: 3em; - line-height: 1.4em; -} - -.profile .user-actions a { - color: #8364A1; - text-decoration: none; - text-shadow: 0 0 2px #9475B2; - transition: all .2s; -} - -.profile .user-actions a:hover { - text-shadow: 0 0 6px #9475B2; -} - -.profile .user-actions a:active { - color: #725390; - text-shadow: 0 0 8px #8364A1; -} - -@media (max-width: 1024px) { - - .content { - width: auto; - } - - .content .content-right { - width: 100% !important; - min-height: 0; - } - - .content .content-left { - width: 100% !important; - min-height: 0; - border-top: 1px solid #9475B2; - } - -} - -/* - * New profile page styling - */ -.new-profile { - background: rgba(211, 191, 255, .8) !important; -} - -.new-profile .new-profile-header { - height: 200px; - background: no-repeat center center / cover transparent; - width: 100%; - align-items: center; - border-bottom: 1px solid #9475b2; -} - -.new-profile .new-profile-info { - height: 100%; - width: 100%; - background: linear-gradient(0deg, rgba(211, 191, 255, .8), rgba(211, 191, 255, .8) 52px, transparent 52px, transparent); - width: 100%; - display: flex; - align-items: center; - - // hackjob - pointer-events: none; - position: relative; - top: -100%; - - > * { - pointer-events: auto; - } -} - -.new-profile .new-profile-avatar { - height: 190px; - width: 190px; - margin: 0 2px; - flex-grow: 0; - flex-shrink: 0; - background: no-repeat center center / cover #FFF; -} - -.new-profile .new-profile-username { - align-self: flex-end; - margin-left: 4px; -} - -.new-profile .new-profile-dates { - font-size: .8em; - line-height: 1.4em; - text-align: right; - align-self: flex-end; - flex-grow: 5; - height: 45px; -} - -.new-profile .new-profile-interactions { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 2.5em; - line-height: 1.4em; - border-bottom: 1px solid #9475b2; -} - -.new-profile .new-profile-interactions a { - color: #8364A1; - text-decoration: none; - text-shadow: 0 0 2px #9475B2; - transition: all .2s; -} - -.new-profile .new-profile-interactions a:hover { - text-shadow: 0 0 6px #9475B2; -} - -.new-profile .new-profile-interactions a:active { - color: #725390; - text-shadow: 0 0 8px #8364A1; -} - -.new-profile .new-profile-navigation { - margin-left: 5px; -} - -.new-profile .new-profile-actions { - border-left: 1px solid #9475b2; - min-width: 345px; - text-align: right; - margin-right: 5px; -} - -.new-profile .new-profile-content { - display: flex; - justify-content: space-between; -} - -.new-profile .new-profile-data { - display: block; - width: 350px; - border-left: 1px solid #9475b2; - flex-shrink: 0; - text-align: center; -} - -.new-profile .new-profile-mode { - width: 100%; - flex-grow: 0; - margin-right: 2px; - overflow: auto; -} - -.new-profile .new-profile-mode-title { - padding-bottom: 2px; - border-bottom: 1px solid #9475b2; - margin-bottom: 2px; -} - -@media (max-width: 1032px) { - .new-profile .new-profile-info { - background: rgba(211, 191, 255, .5); - flex-flow: column; - } - - .new-profile .new-profile-avatar { - height: 120px; - width: 120px; - margin: 2px; - } - - .new-profile .new-profile-dates, - .new-profile .new-profile-username { - flex-grow: 6; - width: 100%; - text-align: center; - } - - .new-profile .new-profile-dates br { - content: ""; - } - - .new-profile .new-profile-dates br:before { - content: "- "; - } - - .new-profile .new-profile-interactions { - flex-flow: column; - } - - .new-profile .new-profile-navigation, - .new-profile .new-profile-actions { - border: 0; - width: 100%; - text-align: center; - margin: 0; - } - - .new-profile .new-profile-content { - flex-flow: column-reverse; - } - - .new-profile .new-profile-data { - width: 100%; - border-bottom: 1px solid #9475b2; - border-left: 0; - } - - .new-profile .new-profile-mode { - margin: 0; - } -} - -@media (max-width: 500px) { - .new-profile .new-profile-dates { - display: none; - } -} - -/* - * Friends section - */ - -.profile-friends { - text-align: center; -} - -.profile-friends > div:not(:last-child) { - display: inline-block; - border: 1px solid #9475B2; - text-align: center; - width: 200px; - margin: 4px 0; - border-radius: 3px; - box-shadow: inset 0 0 1px #9475B2; - background: #E4CFFF; - transition: background .2s, box-shadow .2s; -} - -.profile-friends > div:not(:last-child):hover { - background: #C2AFFE; - box-shadow: inset 0 0 2px #9475B2; -} - -.profile-friends > div > .friends-list-data { - display: block; -} - -.profile-friends > div > .friends-list-data > .friends-list-name { - font-size: 1.2em; - line-height: 1.5em; - padding-bottom: 4px; -} - -/* - * Panel table - */ -.panelTable { - width: 100%; - font-size: .8em; - line-height: 1.5em; - border-spacing: 1px; -} - -.panelTable th { - background: #9475B2; - color: #306; -} - -.panelTable td:first-child { - padding: 0 2px; - text-align: center; -} - -.panelTable .warning td { - background: #A22; - color: #FFF; -} - -.panelTable .silence td { - background: #A22; - color: #FFF; -} - -.panelTable .restriction td { - background: #822; - color: #FFF; -} - -.panelTable .ban td { - background: #444; - color: #FFF; -} - -.panelTable .abyss td { - background: #888; -} - -/* - * User Background - */ -#userBackground { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: -1; - background: no-repeat center center / cover transparent; -} - -/* - * Settings page styling - */ -.settings ul > li { - margin-left: 2em; - list-style: square; -} -.settings .content-left { - width: 850px; -} -.settings .content-right { - width: 174px; - text-align: right; -} -.settings .right-menu-nav > div { - background: #C2AFFE; - padding: 4px; - margin: -1px -2px; - font-weight: 700; - display: block; - font-size: 17px; -} - -.settings .right-menu-nav > a { - display: block; - font-size: 14px; - line-height: 25px; - color: #22E; - text-decoration: none; - padding: 0 10px; -} - -.settings .right-menu-nav > a:hover { - color: #22E; - text-decoration: underline; -} - -.settings .right-menu-nav > a:active { - color: #E22; - text-decoration: underline; -} - -.settings .settings-explanation { - font-size: 11px; - line-height: 18px; - padding: 7px; - border-bottom: 1px solid #C2AFFE; - margin-bottom: 7px; -} - -.settings .settings-table { - width: 100%; -} - -.settings .settings-table tr > th { - font-size: 17px; - background: #C2AFFE; - padding: 4px; - margin: -1px -2px; - font-weight: 700; -} - -.settings .settings-table tr > td { - text-align: center; -} - -.settings .settings-table > tbody > tr:not(:last-child) > td { - border-bottom: 1px solid #C2AFFE; -} - -.settings .settings-table tr.current-session > td { - background: #B39EED; -} - -.settings .profile-field { - width: 100%; -} - -.settings .profile-field > div:nth-child(2) > input { - width: calc(100% ~'-' 16px); -} - -.settings .profile-save { - text-align: center; - padding: 10px; -} - -.settings .background-frame { - max-width: 600px; - max-height: 400px; - border: 3px solid #EEE; - background: #EEE; - box-shadow: 0 3px 7px #888; - border-radius: 3px; - margin: 5px; -} - -.settings form { - overflow: auto; -} - -.settings .notification-history > a { - border: 1px solid #507; - margin: 5px; - background: rgba(113, 74, 150, .3); - display: block; -} - -.settings .notification-history > a > .notif-hist-icon { - float: left; - width: 80px; - height: 80px; - line-height: 80px; - text-align: center; - background: rgba(0, 0, 0, .5); - display: block; - color: #FFF; -} - -.settings .notification-history > a > .notif-hist-icon > .font-icon { - margin: .34em 0; -} - -.settings .notification-history > a > .notif-hist-content > .notif-hist-time { - font-style: italic; - text-align: right; - float: right; - margin-right: 6px; - font-size: .8em; -} - -.settings .notification-history > a > .notif-hist-content > .notif-hist-inside { - float: left; - margin-left: 2px; - padding-left: 8px; -} - -.settings .notification-history > a > .notif-hist-content > .notif-hist-inside > .notif-hist-title { - font-family: "Open Sans", sans-serif; - font-weight: 300; - font-size: 1.7em; - margin-top: 1em; -} - -.settings .friends-list { - text-align: center; -} - -.settings .friends-list button { - background: transparent; - border: 0; - cursor: pointer; - display: block; - box-sizing: border-box; - width: 100%; -} - -.settings .friends-list > div:not(:last-child), -.settings .friends-list > form { - display: inline-block; - border: 1px solid #9475B2; - text-align: center; - width: 220px; - margin: 0 2px 40px; - border-radius: 3px; - box-shadow: inset 0 0 1px #9475B2; - background: #E4CFFF; - transition: background .2s, box-shadow .2s; -} - -.settings .friends-list > div:not(:last-child):hover, -.settings .friends-list > form:hover { - margin-bottom: 6px; - background: #C2AFFE; - box-shadow: inset 0 0 2px #9475B2; -} - -.settings .friends-list > form:hover { - margin-bottom: 4px; -} - -.settings .friends-list > .active { - background: #C2AFFE; - box-shadow: inset 0 0 2px #9475B2; -} - -.settings .friends-list > div > .friends-list-data, -.settings .friends-list > form > .friends-list-data { - display: block; -} - -.settings .friends-list > div > .friends-list-data > .friends-list-name, -.settings .friends-list > form > .friends-list-data > .friends-list-name { - font-size: 1.2em; - line-height: 1.5em; - padding-bottom: 4px; -} - -.settings .friends-list > div > .friends-list-actions, -.settings .friends-list > form > .friends-list-actions { - display: none; - background: linear-gradient(0deg, #9475B2, transparent) transparent; -} - -.settings .friends-list > div > .friends-list-actions > a, -.settings .friends-list > form > .friends-list-actions > button { - color: #222; - font-size: 2em; - line-height: 1em; - text-decoration: none; - transition: .2s; - padding: 5px 0; - float: left; -} - -.settings .friends-list > div:hover > .friends-list-actions, -.settings .friends-list > form:hover > .friends-list-actions { - display: block; -} - -.settings .friends-list > div > .friends-list-actions > .remove:hover, -.settings .friends-list > form > .friends-list-actions > .remove:hover { - color: #D00; -} - -.settings .friends-list > div > .friends-list-actions > .remove:active, -.settings .friends-list > form > .friends-list-actions > .remove:active { - color: #A00; -} - -.settings .friends-list > div > .friends-list-actions > .add:hover, -.settings .friends-list > form > .friends-list-actions > .add:hover { - color: #0D0; -} - -.settings .friends-list > div > .friends-list-actions > .add:active, -.settings .friends-list > form > .friends-list-actions > .add:active { - color: #0A0; -} - -.settings .friends-list > div > .friends-list-actions > a, -.settings .friends-list > form > .friends-list-actions > button { - width: 50%; -} - -.settings .friends-list > div > .friends-list-actions > .fill, -.settings .friends-list > form > .friends-list-actions > .fill { - width: 100%; -} - -@media (max-width: 1024px) { - - .settings .friends-list > div:not(:last-child) { - margin-bottom: 6px; - } - - .settings .friends-list > form { - margin-bottom: 4px; - } - - .settings .friends-list > div > .friends-list-actions, - .settings .friends-list > form > .friends-list-actions { - display: block; - } - -} - -/* - * Support page Styling - */ -.support .sectionHeader { - margin: -1px -2px; - background: linear-gradient(270deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0), rgba(148, 117, 178, .7)) #C2AFFE; - padding: 2px; - font-weight: 700; - font-size: 15px; - color: #306; -} - -.support .featureParent { - width: 100%; - padding: 10px 0; - overflow: hidden; - text-align: center; -} - -.support .featureBox { - background: linear-gradient(180deg, #C2AFFE, #B19EED) no-repeat scroll left top / cover #C2AFFE; - margin: 7px; - border-radius: 5px; - text-align: center; - box-shadow: 0 0 .5em #000; - text-shadow: 0 0 .5em #9475B2; - display: inline-block; - vertical-align: top; - transition: .2s; - width: 400px; - height: 50px; - cursor: default; - color: #503170; -} - -@media (min-width: 1024px) { - - .support .featureBox.final { - width: 818px; - } - - .support .featureBox.final .featureBoxDesc { - font-size: 1.3em; - } - -} - -@media (max-width: 840px) { - - .support .featureBox, - .support .featureBox.final { - width: 380px; - } - - .support .featureBox.final .featureBoxDesc { - line-height: 25px; - } - - .support .featureBox .right { - display: none; - } - -} - -.support .featureBoxIcon.right { - float: right; -} - -.support .featureBox:hover { - box-shadow: 0 0 1.5em #609; - text-shadow: 0 0 .7em #9475B2; -} - -.support .featureBoxIcon { - float: left; - line-height: 50px; - width: 60px; - text-align: center; - font-size: 2.8em; -} - -.support .featureBoxDesc { - display: block; - line-height: 50px; -} - -.support .paymentOptions { - float: right; - font-size: 2em; - margin-left: 6px; -} - -.support .paymentOptions div { - float: left; - margin: 0 1px; -} - -.support table { - width: 100%; - border-spacing: 0; - margin: 3px auto; -} - -.support table td, -.support table th { - padding: 4px 8px; -} - -.support table td { - padding: 4px 8px; - background: #C2AFFE; -} - -.support table th:nth-child(1) { - width: 25%; -} - -.support table th:nth-child(2) { - width: 10%; -} - -.support table td:nth-child(2) { - text-align: center; -} - -.support table th:nth-child(3) { - width: 65%; -} - -.support thead th { - background: linear-gradient(0deg, #C2AFFE, transparent); -} - -.support tfoot th { - background: linear-gradient(180deg, #C2AFFE, transparent); -} - -/* - * Input box Styling - */ -input[type="submit"].inputStyling, -input[type="button"].inputStyling, -input[type="reset"].inputStyling, -button.inputStyling, -a.button { - padding: 3px 10px; - cursor: pointer; - border: 0; - border-radius: 3px; - background: linear-gradient(180deg, #9475B2 0%, #9475B2 50%, #86A 50%) #9475B2; - margin: 4px 1px; - color: #FFF; - box-shadow: inset #222 0 0 1px; - text-shadow: #888 0 0 2px; - transition: text-shadow .5s, box-shadow .5s; - font-size: 22px; - min-width: 120px; -} - -input[type="submit"].inputStyling.small, -input[type="button"].inputStyling.small, -input[type="reset"].inputStyling.small, -button.inputStyling.small, -a.button.small { - padding: 0 4px 1px; - margin: -2px 0 0; - font-size: 16px; - border-radius: 0; - min-width: 80px !important; -} - -input[type="submit"].inputStyling:hover, -input[type="button"].inputStyling:hover, -input[type="reset"].inputStyling:hover, -button.inputStyling:hover, -a.button:hover { - box-shadow: inset #222 0 0 3px; - text-shadow: #F1F1F1 0 0 5px; -} - -input[type="submit"].inputStyling:active, -input[type="button"].inputStyling:active, -input[type="reset"].inputStyling:active, -button.inputStyling:active, -a.button:active { - box-shadow: inset #222 0 0 5px; - text-shadow: #F1F1F1 0 0 3px; - transition: text-shadow .2s, box-shadow .2s; -} - -input[type="submit"][disabled=disabled].inputStyling, -input[type="button"][disabled=disabled].inputStyling, -input[type="reset"][disabled=disabled].inputStyling, -button[disabled=disabled].inputStyling, -a.button[disabled=disabled] { - background: linear-gradient(180deg, #858585 0%, #858585 50%, #787878 50%) #858585 !important; - box-shadow: inset #222 0 0 1px !important; - text-shadow: #888 0 0 2px !important; -} - -input[type="text"].inputStyling, -input[type="password"].inputStyling, -input[type="date"].inputStyling, -input[type="url"].inputStyling { - padding: 3px 4px; - border: 1px solid #CCC; - box-shadow: inset #DDD 0 0 5px; - background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF; -} - -input[type="text"].inputStyling.red, -input[type="password"].inputStyling.red, -input[type="date"].inputStyling.red, -input[type="url"].inputStyling.red { - box-shadow: inset 0 0 7px #EB5959; -} - -input[type="text"].inputStyling.green, -input[type="password"].inputStyling.green, -input[type="date"].inputStyling.green, -input[type="url"].inputStyling.green { - box-shadow: inset 0 0 7px #A9EC8B; -} - -input[type="range"].inputStyling { - border: 0; - width: 100%; - font-size: 1.5em; - margin: 5px 0; -} - -textarea.inputStyling { - padding: 3px 4px; - border: 1px solid #CCC; - box-shadow: inset #DDD 0 0 5px; - background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF; -} - -/* - * Forum Styling - */ -.forum .forumList { - display: flex; - flex-flow: column; -} - -.forum .forumList .forumCategory { - background: #C2AFFE; - font-weight: 700; - font-size: 17px; - padding: 4px; - color: inherit; - text-decoration: none; -} - -.forum .forumList .forumForum { - display: inline-flex; - min-height: 50px; -} - -.forum .forumList .forumForum > div { - display: inline-flex; - flex-flow: column; - justify-content: center; -} - -.forum .forumList .forumForum .forumIcon { - text-align: center; - width: 50px; - line-height: 50px; - flex-shrink: 0; - color: #444; - text-shadow: 0 0 5px #444; -} - -.forum .forumList .forumForum .forumIcon.unread { - color: #6C5D7B; - text-shadow: 0 0 5px #9475B2; -} - -.forum .forumList .forumForum .forumTitle { - flex-grow: 1; - flex-shrink: 1; -} - -.forum .forumList .forumForum .forumTitle .name { - font-size: 1.2em; - line-height: 1.7em; -} - -.forum .forumList .forumForum .forumTitle .desc { - font-size: .8em; - line-height: 1em; -} - -.forum .forumList .forumForum .forumTitle .desc .subforums { - font-weight: bold; - padding-top: 5px; -} - -.forum .forumList .forumForum .forumCount { - width: 70px; - text-align: center; - flex-shrink: 0; -} - -.forum .forumList .forumForum .forumCount .topics { - font-size: 1.5em; - color: #111; -} - -.forum .forumList .forumForum .forumCount .posts { - font-size: .8em; - line-height: 1.2em; - color: #555; -} - -.forum .forumList .forumForum .forumLastPost { - width: 250px; - font-size: .9em; - line-height: 1.4em; - flex-shrink: 0; -} - -@media (max-width: 768px) { - .forum .forumList .forumForum .forumLastPost { - display: none; - } -} - -.forum .topicList { - width: 100%; - border-spacing: 0; - margin-top: 2px; -} - -.forum .topicList thead, -.forum .topicList tfoot { - background: #C2AFFE; - font-weight: 700; -} - -.forum .topicList tbody td { - height: 40px; - word-wrap: break-word; -} - -.forum .topicList tbody .topicAnnouncement { - background: #C2AFFE; -} - -.forum .topicList tbody .topicIcon { - width: 40px; - text-align: center; - color: #444; - text-shadow: 0 0 5px #444; -} - -.forum .topicList tbody .topicIcon.unread { - color: #6C5D7B; - text-shadow: 0 0 5px #9475B2; -} - -.forum .topicList tbody .topicAuthor { - width: 150px; - text-align: center; -} - -.forum .topicList tbody .topicCounts { - text-align: center; -} - -.forum .topicList tbody .topicCounts .replies { - font-size: 1.3em; - color: #111; - line-height: 1.3em; -} - -.forum .topicList tbody .topicCounts .views { - font-size: .8em; - color: #555; - line-height: 1em; -} - -.forum .topicList tbody .topicLast { - width: 250px; - text-align: center; -} - -.forum.viewtopic .posts { - width: 100%; - border-spacing: 0; - table-layout: fixed; - word-break: break-word; -} - -.forum.viewtopic .posts td { - vertical-align: top; - word-wrap: break-word; -} - -.forum.viewtopic .posts tr:not(:last-child) td { - border-bottom: 1px solid #9475B2; -} - -.forum.viewtopic .posts .userpanel { - width: 200px; - text-align: center; - background: linear-gradient(270deg, transparent, #C2AFFE); - padding-bottom: 6px; -} - -.forum.viewtopic .posts .userpanel .username { - font: 1.5em/1.7em "Open Sans", sans-serif; - text-shadow: 0 0 7px #888; padding: 0 0 2px; - display: inline-block; -} - -.forum.viewtopic .posts .userpanel .avatar { - max-width: 150px; - max-height: 150px; - border: 3px solid #EEE; - background: #EEE; - box-shadow: 0 3px 7px #888; - border-radius: 3px; - display: block; - margin: 0 auto 10px; -} - -.forum.viewtopic .posts .userpanel .usertitle { - font-size: .8em; - line-height: 1.5em; -} - -.forum.viewtopic .posts .userpanel .actions { - font-size: 2em; - line-height: 1.4em; -} - -.forum.viewtopic .posts .userpanel .actions a { - color: #8364A1; - text-decoration: none; - text-shadow: 0 0 2px #9475B2; - transition: all .2s; -} - -.forum.viewtopic .posts .userpanel .actions a:hover { - text-shadow: 0 0 6px #9475B2; -} - -.forum.viewtopic .posts .userpanel .actions a:active { - color: #725390; - text-shadow: 0 0 8px #8364A1; -} - -.forum.viewtopic .posts .post-content { - font-size: .9em; -} - -.forum.viewtopic .posts .post-content .details { - border-bottom: 1px solid #B19EED; - color: #222; -} - -.forum.viewtopic .posts .post-content .details .subject { - float: left; -} - -.forum.viewtopic .posts .post-content .details .date { - float: right; -} - -.forum.viewtopic .posts .post-content .signature { - border-top: 1px solid #B19EED; - padding-top: 2px; - margin-top: 20px; - display: block; - width: 100%; - max-height: 200px; - overflow: auto; -} - -.forum.viewtopic .posts .post-content .signature img { - vertical-align: middle; -} - -.posting-subject { - padding: 3px 0 2px; -} - -.posting-subject input { - width: calc(100% ~'-' 10px); -} - -.posting-bbcodes { - padding: 4px 0 2px; -} - -.posting-bbcode-description { - font: .9em/1.2em "Open Sans", sans-serif; - padding: 2px 0 3px; -} - -.posting-text { - padding: 2px 0 0; - margin: 0 0 -1px; -} - -.posting-emotes { - text-align: center; - padding: 10px 0; -} - -.posting-emotes img { - vertical-align: middle; - cursor: pointer; - margin: 0 3px; -} - -.posting-text textarea { - min-width: calc(100% ~'-' 10px); - max-width: calc(100% ~'-' 10px); - min-height: 200px; -} - -.posting-options > div { - float: left; - padding: 10px 10px 0; -} - -.posting-buttons { - text-align: center; -} - -.forum .buttonRow .leftSide { - float: left; -} - -.forum .buttonRow .rightSide { - float: right; -} - -/* - * Pagination - */ -.pagination a, -.forumbtn { - background: linear-gradient(0deg, #9475B2 10%, #C2AFFE 90%); - color: #306; - padding: 4px 8px; - text-decoration: none; - border-radius: 2px; - margin: 4px 2px; - display: inline-block; - font-size: 1.3em; - border: 1px solid #9475B2; - cursor: pointer; -} - -button.forumbtn { - padding: 3px 6px; -} - -.pagination a.current, -.forumbtn.current { - background: linear-gradient(0deg, #A586C3, #D3BFFF); -} - -.pagination a:hover, -.forumbtn:hover { - background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%); -} - -.pagination a:active, -.forumbtn:active { - background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%); -} - -/* - * Ban page styling - */ -.banned p { - background: #B19DDD; - border: 1px solid #9475B2; - font-size: 13px; - line-height: 19px; - overflow: auto; - padding: 6px 10px; - border-radius: 3px; -} - -/* - * Comments - */ -#comments .comment-input-section { - border-bottom: 1px solid #9475B2; -} - -#comments .comment { - display: flex; - align-items: stretch; - margin-bottom: 3px; -} - -#comments .comments-discussion .comment { - margin-top: 3px; -} - -#comments .comment > .comment-avatar { - height: 60px; - width: 60px; - background: rgba(0, 0, 0, .2) url("/images/pixel.png") no-repeat scroll left center / contain; - flex-shrink: 0; - margin-right: 2px; - border-radius: 4px; - border: 0; - display: block; - text-align: center; - word-wrap: break-word; - transition: .2s; -} - -#comments .comment > .comment-avatar:hover { - background-color: transparent; -} - -#comments .comment > .comment-avatar > span { - opacity: 0; - transition: .2s; -} - -#comments .comment > .comment-avatar:hover > span { - opacity: 1; -} - -#comments .comment > .comment-pointer { - width: 0; - height: 0; - border-style: solid; - border-width: 0 15px 15px 0; - border-color: transparent #F6F6F6 transparent transparent; - margin-top: 10px; -} - -#comments .comment > .comment-content { - border-radius: 5px; - border: 0; - min-height: 50px; - min-width: 300px; - flex-grow: 2; - padding: 5px; - font: 12px/20px "Open Sans", sans-serif; - background: #F6F6F6; -} - -#comments .comment > textarea.comment-content { - height: 50px; -} - -#comments .comment > .comment-content > .comment-controls { - float: right; -} - -#comments .comment > .comment-content > .comment-controls > ul > li { - float: left; - margin: 0 5px; - opacity: 0; - transition: .5s; -} - -#comments .comment > .comment-content:hover > .comment-controls > ul > li, -#comments .comment > .comment-content > .comment-controls > ul > li.shown { - opacity: 1; -} - -#comments .comment > .comment-content > .comment-controls > ul > li.voting { - font-size: 1.5em; -} - -#comments .comment > .comment-content > .comment-controls > ul > li.like { - color: #0A0; -} - -#comments .comment > .comment-content > .comment-controls > ul > li.dislike { - color: #C00; -} - -#comments .comment > .comment-submit { - flex-shrink: 0; - font-family: FontAwesome; - width: 50px; - border-radius: 4px; - margin-left: 2px; - font-size: 2em; - background: linear-gradient(0deg, #9475B2 10%, #C2AFFE 90%); - color: #306; - border: 1px solid #9475B2; - cursor: pointer; -} - -#comments .comment > .comment-submit.new { - width: 60px; -} - -#comments .comment > .comment-submit:hover { - background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%); -} - -#comments .comment > .comment-submit:active { - background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%); -} - -#comments .comments-discussion { - overflow: auto; -} - -#comments ul { - list-style: none; -} - -#comments .comments-list > li > ul, -#comments .comments-list > li > ul > li > ul, -#comments .comments-list > li > ul > li > ul > li > ul, -#comments .comments-list > li > ul > li > ul > li > ul > li > ul { - margin-left: 40px; -} - -#comments ul > li > ul .comment > .comment-avatar { - height: 50px; - width: 50px; - font-size: .9em; - line-height: 1.1em; -} - -#comments ul > li > ul .comment > .comment-content { - min-height: 40px; -} - -#comments ul > li > ul .comment > textarea.comment-content { - height: 40px; -} - -/* - * User container - */ -.user-container { - display: flex; - align-items: center; - background: no-repeat center center / cover transparent; -} - -.user-container-avatar { - height: 100px; - width: 100px; - margin: 0 2px; - flex-grow: 0; - flex-shrink: 0; - background: no-repeat center center / cover #FFF; -} - -.user-container-info { - background: rgba(211, 191, 255, .8); - width: 100%; - padding: 0 5px; -} +@import "base"; +@import "legacy"; + +@import "bem/alert"; +@import "bem/bbcode"; +@import "bem/busy"; +@import "bem/container"; +@import "bem/content"; +@import "bem/dialogue"; +@import "bem/dropdown"; +@import "bem/footer"; +@import "bem/header"; +@import "bem/uploader"; diff --git a/resources/views/yuuno/auth/register.twig b/resources/views/yuuno/auth/register.twig index 248e04e..696442e 100644 --- a/resources/views/yuuno/auth/register.twig +++ b/resources/views/yuuno/auth/register.twig @@ -48,7 +48,7 @@
-

+

Are you {{ haltName }}?

Making more than one account is not permitted.

If you lost your password please use the reset password form but if you don't already have an account you can go ahead and click the link below to show the registration form this check is based on your IP so in some cases someone may have registered/used the site on this IP already.

diff --git a/resources/views/yuuno/elements/comments.twig b/resources/views/yuuno/elements/comments.twig index 278b2d3..4e6dfbc 100644 --- a/resources/views/yuuno/elements/comments.twig +++ b/resources/views/yuuno/elements/comments.twig @@ -8,7 +8,7 @@
{% else %} -

Log in to comment!

+

Log in to comment!

{% endif %}
@@ -18,7 +18,7 @@ {% include 'elements/comment.twig' %} {% endfor %} {% else %} -

There are no comments yet!

+

There are no comments yet!

{% endif %}
diff --git a/resources/views/yuuno/forum/elements/forumBase.twig b/resources/views/yuuno/forum/elements/forumBase.twig index 3edd1d8..f8aa5ec 100644 --- a/resources/views/yuuno/forum/elements/forumBase.twig +++ b/resources/views/yuuno/forum/elements/forumBase.twig @@ -49,7 +49,7 @@ {% else %} -

There are no posts in this forum!

+

There are no posts in this forum!

{% endif %} {% include 'forum/elements/forumBtns.twig' %} {% endif %} diff --git a/resources/views/yuuno/forum/index.twig b/resources/views/yuuno/forum/index.twig index 716c5be..c61a5cc 100644 --- a/resources/views/yuuno/forum/index.twig +++ b/resources/views/yuuno/forum/index.twig @@ -4,7 +4,7 @@ {% block content %}
-
+
Popular topics
@@ -54,11 +54,11 @@ {% else %} -

No one yet!

+

No one yet!

{% endif %} -
+
{% include 'forum/elements/forumBase.twig' %}
diff --git a/resources/views/yuuno/global/information.twig b/resources/views/yuuno/global/information.twig index 494db45..f382181 100644 --- a/resources/views/yuuno/global/information.twig +++ b/resources/views/yuuno/global/information.twig @@ -3,7 +3,7 @@ {% set title = 'Information' %} {% block content %} -
+

Information

diff --git a/resources/views/yuuno/info/master.twig b/resources/views/yuuno/info/master.twig index 584bf68..11e827d 100644 --- a/resources/views/yuuno/info/master.twig +++ b/resources/views/yuuno/info/master.twig @@ -1,7 +1,7 @@ {% extends 'master.twig' %} {% block content %} -
+
{{ block('info') }}
diff --git a/resources/views/yuuno/manage/master.twig b/resources/views/yuuno/manage/master.twig index 11ee709..37b8bd3 100644 --- a/resources/views/yuuno/manage/master.twig +++ b/resources/views/yuuno/manage/master.twig @@ -3,8 +3,8 @@ {% set title = category ~ ' / ' ~ mode %} {% block content %} -
-
+
+
Navigation
@@ -17,7 +17,7 @@ {% endfor %}
-
+
{{ title }}
{{ block('description') }}
{{ block('manageContent') }} diff --git a/resources/views/yuuno/master.twig b/resources/views/yuuno/master.twig index d7e97c8..ef765f8 100644 --- a/resources/views/yuuno/master.twig +++ b/resources/views/yuuno/master.twig @@ -10,61 +10,69 @@ {% endif %} {{ block('meta') }} - - + + {{ block('css') }} - - + + {{ block('js') }} -
+
-