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-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);
|
||||
}
|
||||
}
|
||||
@import url('css/tabbed-container.css');
|
||||
|
||||
/* == 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 {
|
||||
|
|
@ -1818,59 +1725,6 @@ div.emotebox .emote-container:hover {
|
|||
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 {
|
||||
display: inline-block;
|
||||
background-color: #0005;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user