user profile stuff
This commit is contained in:
parent
b2c4a315d2
commit
abb19b7827
19
css/profile.css
Normal file
19
css/profile.css
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
body.profile {
|
||||||
|
font-style: Pixio;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > .page-container.thin-page {max-width: 800px;}
|
||||||
|
|
||||||
|
body.profile .page-container {
|
||||||
|
background: var(--primary-container-background);
|
||||||
|
border: var(--primary-container-border);
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.profile .page-container .header-table td.tag .userlink {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.profile .page-container .header-table td.tag .userlink img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
112
css/tabbed-container.css
Normal file
112
css/tabbed-container.css
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
/* = TABBED CONTAINERS */
|
||||||
|
|
||||||
|
.tabbed-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container .tablist {
|
||||||
|
position: relative;
|
||||||
|
bottom: -2px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container .tablist .tab,
|
||||||
|
.tabbed-container .tablist .faketab {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablist a,
|
||||||
|
.tablist a:link, .tablist a:visited {
|
||||||
|
color: var(--main-text);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container .tablist .tab,
|
||||||
|
.tabbed-container .tablist .faketab {
|
||||||
|
background-color: var(--tab-inactive);
|
||||||
|
border: var(--tab-border);
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px;
|
||||||
|
position: relative;
|
||||||
|
margin: auto 2px 0px 2px;
|
||||||
|
bottom: -2px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: var(--primary-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container .tablist .tab *:not(.userlink) img,
|
||||||
|
.tabbed-container .tablist .faketab img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container .tablist .tab.selected,
|
||||||
|
.tabbed-container .tablist .faketab.selected {
|
||||||
|
background: var(--tab-selected, #d3d3d3);
|
||||||
|
background: -moz-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
||||||
|
background: -webkit-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
||||||
|
background: linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
||||||
|
bottom: -2px;
|
||||||
|
/*border-bottom: none;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container .box,
|
||||||
|
.tabbed-container .dropdown {
|
||||||
|
background-color: var(--tab-selected);
|
||||||
|
border: var(--tab-border);
|
||||||
|
padding: 4px;
|
||||||
|
display: block;
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* JS should handle positions and shit */
|
||||||
|
.tabbed-container .dropdown {
|
||||||
|
position: absolute;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container > .tablist > .tab > .tab-close {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px; height: 16px;
|
||||||
|
margin-left: 4px;
|
||||||
|
background-image: url('//assets.worlio.com/style/icons/close');
|
||||||
|
background-size: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (orientation: landscape) {
|
||||||
|
.tabbed-container.vertical {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container.vertical > .tablist {
|
||||||
|
position: relative;
|
||||||
|
right: -1px;
|
||||||
|
bottom: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container.vertical > .tablist .tab,
|
||||||
|
.tabbed-container.vertical > .tablist .faketab {
|
||||||
|
margin: 2px 0px;
|
||||||
|
right: -1px;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-container.vertical > .tablist .tab.selected,
|
||||||
|
.tabbed-container.vertical > .tablist .faketab.selected {
|
||||||
|
background: var(--tab-selected, #d3d3d3);
|
||||||
|
background: -moz-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
||||||
|
background: -webkit-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
||||||
|
background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
||||||
|
border: var(--tab-border);
|
||||||
|
}
|
||||||
|
}
|
||||||
182
style.css
182
style.css
|
|
@ -141,117 +141,7 @@ body > div.overlay .dialog table:not(.titlebox) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* = TABBED CONTAINERS */
|
/* = TABBED CONTAINERS */
|
||||||
|
@import url('css/tabbed-container.css');
|
||||||
.tabbed-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container .tablist {
|
|
||||||
position: relative;
|
|
||||||
bottom: -2px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-shrink: 0;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container .tablist .tab,
|
|
||||||
.tabbed-container .tablist .faketab {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tablist a,
|
|
||||||
.tablist a:link, .tablist a:visited {
|
|
||||||
color: var(--main-text);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container .tablist .tab,
|
|
||||||
.tabbed-container .tablist .faketab {
|
|
||||||
background-color: var(--tab-inactive);
|
|
||||||
border: var(--tab-border);
|
|
||||||
display: inline-block;
|
|
||||||
padding: 8px;
|
|
||||||
position: relative;
|
|
||||||
margin: auto 2px 0px 2px;
|
|
||||||
bottom: -2px;
|
|
||||||
text-align: center;
|
|
||||||
font-family: var(--primary-font);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container .tablist .tab *:not(.userlink) img,
|
|
||||||
.tabbed-container .tablist .faketab img {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container .tablist .tab.selected,
|
|
||||||
.tabbed-container .tablist .faketab.selected {
|
|
||||||
background: var(--tab-selected, #d3d3d3);
|
|
||||||
background: -moz-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
|
||||||
background: -webkit-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
|
||||||
background: linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
|
||||||
bottom: -2px;
|
|
||||||
/*border-bottom: none;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container .box,
|
|
||||||
.tabbed-container .dropdown {
|
|
||||||
background-color: var(--tab-selected);
|
|
||||||
border: var(--tab-border);
|
|
||||||
padding: 4px;
|
|
||||||
display: block;
|
|
||||||
flex: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* JS should handle positions and shit */
|
|
||||||
.tabbed-container .dropdown {
|
|
||||||
position: absolute;
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container > .tablist > .tab > .tab-close {
|
|
||||||
display: inline-block;
|
|
||||||
width: 16px; height: 16px;
|
|
||||||
margin-left: 4px;
|
|
||||||
background-image: url('//assets.worlio.com/style/icons/close');
|
|
||||||
background-size: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (orientation: landscape) {
|
|
||||||
.tabbed-container.vertical {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container.vertical > .tablist {
|
|
||||||
position: relative;
|
|
||||||
right: -1px;
|
|
||||||
bottom: 0px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container.vertical > .tablist .tab,
|
|
||||||
.tabbed-container.vertical > .tablist .faketab {
|
|
||||||
margin: 2px 0px;
|
|
||||||
right: -1px;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbed-container.vertical > .tablist .tab.selected,
|
|
||||||
.tabbed-container.vertical > .tablist .faketab.selected {
|
|
||||||
background: var(--tab-selected, #d3d3d3);
|
|
||||||
background: -moz-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
|
||||||
background: -webkit-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
|
||||||
background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
|
||||||
border: var(--tab-border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* == MAIN BODY */
|
/* == MAIN BODY */
|
||||||
|
|
||||||
|
|
@ -1461,6 +1351,23 @@ body.forum.new table.board-display tr.title-row input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* == USER PAGE */
|
||||||
|
body.userpage iframe#profile {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
border: none;
|
||||||
|
margin: 0px;
|
||||||
|
top: 28px; right: 0px; bottom: 0px; left: -8px;
|
||||||
|
width: calc(100% + 16px);
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (orientation: landscape) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (orientation: portrait) {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
heading .button {
|
heading .button {
|
||||||
|
|
@ -1818,59 +1725,6 @@ div.emotebox .emote-container:hover {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* USER PROFILE PAGE */
|
|
||||||
body.user-profile .user-infobox {
|
|
||||||
width: 180px;
|
|
||||||
background: var(--primary-container-background);
|
|
||||||
margin: 2px;
|
|
||||||
border: var(--primary-container-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.user-profile iframe.box {
|
|
||||||
padding: 0px;
|
|
||||||
margin: -34px -8px auto -8px;
|
|
||||||
height: calc(100% - 36px);
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.user-profile .tabbed-container .tablist {
|
|
||||||
margin: -7px -4px auto -8px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (orientation: portrait) {
|
|
||||||
body.user-profile iframe.box { margin-top: -46px; }
|
|
||||||
body.user-profile .tabbed-container .tablist { margin: -12px -4px auto -8px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
body.user-profile .tabbed-container .tablist .tab {padding:4px;bottom: 0px;}
|
|
||||||
body.user-profile .tabbed-container .tablist .tab.selected {bottom: -1px;}
|
|
||||||
|
|
||||||
body.user-profile .tabbed-container .tablist .tab.selected[name="profile"] {
|
|
||||||
--tab-selected-mid: #d3d3d3AA;
|
|
||||||
background: linear-gradient(0deg, #0000 0%, var(--tab-selected-mid) 10%,var(--tab-selected) 50%, var(--tab-gradient, #dedede) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.user-profile .tabbed-container {
|
|
||||||
height: calc(100% - 26px);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.user-profile .tabbed-container .tablist {white-space: nowrap;}
|
|
||||||
|
|
||||||
body.user-profile .tabbed-container .box[name='stats'] .stat.role-stat,
|
|
||||||
body.user-profile .tabbed-container .box[name='stats'] .stat.plan-stat { font-family: var(--primary-font); }
|
|
||||||
body.user-profile .tabbed-container .stat b {
|
|
||||||
font-family: var(--primary-font);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TAB */
|
|
||||||
.tabbed-container .tablist .tab.special {
|
|
||||||
--menu-border: 1px outset #ffe301;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.thumbnail-box {
|
a.thumbnail-box {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: #0005;
|
background-color: #0005;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user