User:THE OWL/Sandbox/Templates/User page: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
m (Bot: Substituting template: Message)
No edit summary
 
(41 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{DISPLAYTITLE:<span style="opacity:0; user-select:none; pointer-events:none">{{FULLPAGENAME}}</span>}}<!--
{{DISPLAYTITLE:<span style="opacity:0; user-select:none; pointer-events:none">{{FULLPAGENAME}}</span>}}<!--
-->{{#ifeq:{{{colorscheme affect|}}}|layout only||<div style="width:calc(100% + 224px); height:calc(100% + 182px); pointer-events:none; user-select:none; position:absolute; z-index:-100; top:-182px; left:-200px">
-->{{#ifeq:{{{colorscheme affect|}}}|layout only||<div style="width:calc(100% + 224px); height:calc(100% + 191px); pointer-events:none; user-select:none; position:absolute; z-index:-100; top:-191px; left:-200px">
<div style="box-sizing:border-box; width:100%; height:60px; display:flex; align-items:center; background-color:rgb(45 45 45); border-bottom:1px solid rgb(255 255 255 / 10%); overflow:hidden"> {{#ifeq:{{{colorscheme|}}}|sepia|[[File:vdc-header-sepia.jpg|link=]][[File:vdc-header-sepia.jpg|link=]]|}} </div>
<div style="box-sizing:border-box; width:100%; height:60px; display:flex; align-items:center; background-color:rgb(45 45 45); overflow:hidden"> {{{header img|{{#ifeq:{{{colorscheme|}}}|sepia|[[File:vdc-header-sepia.jpg|link=]][[File:vdc-header-sepia.jpg|link=]]|}}}}} </div>
<div style="box-sizing:border-box; width:100%; height:calc(100% - 35px); background-image:linear-gradient(0deg, black, rgb({{{global bgcolor|{{{island bgcolor|}}}}}} / 70%)); display:flex">
<div style="box-sizing:border-box; width:100%; height:calc(100% - 35px); background-image:linear-gradient(0deg, #1F1E1D, rgb({{{global bgcolor|{{{island bgcolor|}}}}}} / 70%)); display:flex">
<div style="box-sizing:inherit; width:175px; height:100%"></div>
<div style="box-sizing:inherit; width:175px; height:100%"></div>
<div style="box-sizing:inherit; width:calc(100% - 175px)">
<div style="box-sizing:inherit; width:calc(100% - 175px)">
<div style="width:100%; min-height:48px"></div>
<div style="width:100%; min-height:48px"></div>
<div style="box-sizing:inherit; width:100%; height:calc(100% - 48px); background-color:rgb({{{island bgcolor|}}} / 60%); border:1px solid #525252; border-right:0">
<div style="box-sizing:inherit; width:100%; height:calc(100% - 48px); background-color:rgb({{{island bgcolor|}}} / 60%); border:1px solid #525252; border-right:0; border-radius:0 0 0 4px;">
<div style="width:100%; min-height:24px; background-image:linear-gradient(180deg, rgb(38 38 38), transparent)"> </div>
<div style="width:100%; min-height:24px; background-image:linear-gradient(180deg, rgb(38 38 38), transparent)"> </div>
</div>
</div>
Line 12: Line 12:
</div>
</div>
</div>}}
</div>}}
<h1 id="firstHeading" class="firstHeading" style="font-size:1.95em; margin-top:-80px; margin-bottom:35px"> User Interface Kit – Monolith (Preview of User page) </h1>
<div style="display:flow-root"><h1 id="firstHeading" class="firstHeading" style="color:#FFF !important; font-size:2em; margin-top:-121px; margin-bottom:35px"> {{FULLPAGENAME}} </h1></div>
<div class="plainlinks" style="display:flex; flex-direction:column; align-items:center; width:100%; box-sizing:border-box">
<div class="plainlinks" style="display:flex; flex-direction:column; align-items:center; width:100%; box-sizing:border-box">


<div style="width:100%; min-height:300px; height:300px; display:inherit; justify-content:center; align-items:center; box-shadow:-5px -5px 80px rgba(231 220 143 / 20%); background-color:rgb(0 0 0 / 30%); background-color:rgb(232 221 144); border-radius:.6em; overflow:hidden"> <!--
<div style="width:100%; min-height:300px; height:300px; display:inherit; justify-content:center; align-items:center; box-shadow:-5px -5px 80px rgba(231 220 143 / 20%); background-color:rgb(0 0 0 / 30%); background-color:rgb({{{cover bgcolor|232 221 144}}}); border-radius:.6em; overflow:hidden"> <!--
--> <span style="user-select:none; mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)"> [[File:User Page Cover - Firewatch Early Morning.jpg|link=]] </span>
--> <span style="user-select:none; mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)"> [[File:{{{cover|}}}|link=]] </span>
</div>
</div>


<div style="max-width:calc(1080px + 60px); width:100%; display:inherit; flex-direction:column; gap:1em; margin-top:-60px; z-index:1">
<div style="width:100%; display:inherit; flex-direction:column; gap:1em; margin-top:-60px; z-index:1">


<div style="display:inherit; gap:1em; border:1px solid rgb(255 255 255 / 10%); background-color:rgb({{{island bgcolor|41 41 42}}} / 99%); border-radius:4px; padding:1.3em 3.5em 1.3em 1.3em; margin:0 24px">
<div style="display:inherit; gap:1em; border:1px solid rgb(255 255 255 / 10%); background-color:rgb({{{island bgcolor|41 41 42}}} / 99%); border-radius:4px; padding:1.3em 3.5em 1.3em 1.3em; margin:0 24px">
<div style="width:100px; height:100px; display:inherit; align-items:center; justify-content:center; background-color:rgb(255 255 255 / 10%); border-radius:.5em; cursor:grab">
<div style="width:100px; height:100px; display:inherit; align-items:center; justify-content:center; background-color:rgb(255 255 255 / 10%); border-radius:.5em; cursor:grab">
<div style="display:inherit; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; user-select:none; transform:scale(.54); position:absolute"> [[File:UserAvatarFrame-Karma.png|link=]] </div>
<div style="display:inherit; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; user-select:none; transform:scale(.54); position:absolute"> [[File:{{{avatar frame|}}}|link=]] </div>
<div style="display:inherit; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; user-select:none"> [[File:User Page Avatar - Firewatcher Henry.jpg|100px|link=]] </div>
<div style="display:inherit; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; user-select:none"> [[File:{{{avatar|}}}|100px|link=]] </div>
</div>
</div>


<div style="max-width:calc(100% - 300px); display:inherit; flex-direction:column; justify-content:center; gap:.7em"> <!--
<div style="max-width:calc(100% - 300px); display:inherit; flex-direction:column; justify-content:center; gap:.7em"> <!--
--> <span style="font-size:2em; font-weight:900; color:rgb({{{username color|
--> <span style="font-size:2em; font-weight:900; color:rgb({{{username color|
255 255 255}}} / 80%)"> Henry M. </span>{{#if:{{{status|}}}|<!--
255 255 255}}} / 80%)"> {{{username|Henry M.}}} </span>{{#if:{{{status|}}}|<!--
--> <span style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:1.1em"> {{{status}}} </span>|}}
--> <span style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:1.1em"> {{{status}}} </span>|}}
</div>
</div>


<div style="display:inherit; flex-direction:column; justify-content:center; margin-left:auto"> <!--
<div style="display:inherit; flex-direction:column; justify-content:center; margin-left:auto"> <!--
--> [[:Category:Active Users|<span style="background-image:linear-gradient(135deg, rgb(85 99 60 / 30%), rgb(75 89 50 / 30%)); border:1px solid rgb(175 225 105 / 30%); border-radius:2em; color:rgb(190 225 145); padding:.4em .8em"> Active User </span>]]
--> [[:Category:Away Users|<span style="background-image:linear-gradient(135deg, rgb(100 70 60 / 30%), rgb(90 55 50 / 30%)); border:1px solid rgb(225 140 105 / 30%); border-radius:2em; color:rgb(225 155 145); padding:.4em .8em"> Away </span>]]
</div>
</div>
</div> <!--
</div> <!--


--> <div style="display:flex; flex-direction:row-reverse; gap:1em; margin:0 24px">
--> <div style="display:flex; flex-direction:row-reverse; gap:1em; margin:0 24px 24px 24px">
<div style="min-width:280px; max-width:280px; display:inherit; flex-direction:column; gap:1em">
<div style="min-width:280px; max-width:280px; display:inherit; flex-direction:column; gap:1em">
{{User:THE OWL/Sandbox/Templates/Island|bgcolor = {{{island bgcolor|}}}|1=
{{User:THE OWL/Sandbox/Templates/User page/island|bgcolor = {{{island bgcolor|}}}|1=
<div  style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''Wikichievements''' </div>
<div  style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''Wikichievements''' </div>
<div style="max-height:60px; display:inherit; flex-wrap:wrap; gap:.5em; overflow:hidden">
<div style="max-height:60px; display:inherit; flex-wrap:wrap; gap:.5em; overflow:hidden">
Line 53: Line 53:
}}
}}


{{User:THE OWL/Sandbox/Templates/Island|bgcolor = {{{island bgcolor|}}}|padding = .5em .7em|1=
{{User:THE OWL/Sandbox/Templates/User page/island|bgcolor = {{{island bgcolor|}}}|padding = .5em .7em|1=
<div  style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''Bio''' </div>
<div  style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''Bio''' </div>
<div> Full name: {{{fullname|None}}} </div>
{{#if:{{{fullname|}}} | <div> Full name: {{{fullname}}} </div> |}}
<div> Nickname: {{{nickname|None}}} </div>
{{#if:{{{nickname|}}} | <div> Nickname: {{{nickname}}} </div> |}}
<div> Gender: {{{gender|None}}} </div>
{{#if:{{{gender|}}} | <div> Gender: {{{gender}}} </div> |}}
<div> Age: {{{age|None}}} </div>
{{#if:{{{age|}}} | <div> Age: {{{age}}} </div> |}}
<div> Birth place: {{{birth place|None}}} </div>
{{#if:{{{birth place|}}} | <div> Birth place: {{{birth place}}} </div> |}}
<div> Native language: {{{native lang|None}}} </div>
{{#if:{{{native lang|}}} | <div> Native language: {{{native lang}}} </div> |}}
}}
 
{{User:THE OWL/Sandbox/Templates/User page/island|bgcolor = {{{island bgcolor|}}}|padding = .5em .7em|1=
<div  style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''Links''' </div>
{{#if:{{{website|}}} | <div> [http://{{{website|}}} Website] </div> |}}
{{#if:{{{steam|}}}{{{steam id|}}} | <div>{{Steam community|{{#if:{{{steam|}}}|id|profiles}}/{{{steam|{{{steam id}}}}}}|Steam}}</div> |}}
{{#if:{{{gamebanana|}}} | <div> {{Gamebanana|page=other|members/{{{gamebanana}}}|GameBanana}} </div> |}}
{{#if:{{{github|}}} | <div> {{Github|{{{github}}}|GitHub}} </div> |}}
{{#if:{{{discord id|}}} | <div> {{Discord|user={{{discord id}}}|Discord}}</div> |}}
{{#if:{{{discord|}}} | <hr style="background-color:rgb(255 255 255 / 15%)"><div><span style="color:rgb(240 240 240); font-weight:bolder; user-select:none; pointer-events:none; margin-right:.3em;">Discord:</span>{{{discord}}}<span style="user-select:none"></span></div> |}}
}} <!--
}} <!--


--> {{#if:{{{userboxes|}}}|{{User:THE OWL/Sandbox/Templates/Island|bgcolor = {{{island bgcolor|}}}|1=
--> {{#if:{{{userboxes|}}}|{{User:THE OWL/Sandbox/Templates/User page/island|bgcolor = {{{island bgcolor|}}}|1=
<div style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''Userboxes''' </div>{{{userboxes}}}
<div style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''Userboxes''' </div>{{{userboxes}}}
}}|}}
}}|}}
Line 70: Line 80:
<div style="min-width:280px; display:inherit; flex-direction:column; flex:auto; gap:1em">
<div style="min-width:280px; display:inherit; flex-direction:column; flex:auto; gap:1em">
<div style="border:1px solid rgb(255 255 255 / 3%); background-color:rgb(41 41 41 / 30%); border-radius:4px; padding:.5em .7em">
<div style="border:1px solid rgb(255 255 255 / 3%); background-color:rgb(41 41 41 / 30%); border-radius:4px; padding:.5em .7em">
<div> Hello, World! </div>
<div> {{{content|Hello, World!}}} </div>
</div>
</div>


{{User:THE OWL/Sandbox/Templates/Island|bgcolor = {{{island bgcolor|}}}|1=
{{User:THE OWL/Sandbox/Templates/User page/island|bgcolor = {{{island bgcolor|}}}|1=
<div  style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''User Reviews''' </div>
<div  style="{{#if:{{{header glow|}}}|text-shadow:0 0 10px rgb({{{header color|}}} / {{{header glow|100%}}});|}}color:rgb({{{header color|255 255 255 / 70%}}})"> '''User Reviews''' </div>
<div style="background-color:rgb(255 255 255 / 2%); border:1px solid rgba(255, 255, 255, 0.05); border-radius:3px; padding:0 1.5em 0 1.5em">  
<div><!--
<small>(using [[Template:Message]])</small>&nbsp;Oh, hello there! {{emoji|obsolete}}&nbsp;--[[User:THE OWL|THE OWL]] ([[User talk:THE OWL|talk]]) 21:28, 16 May 2024 (UTC) </div>
--> <span class="plainlinks">[{{fullurl:{{FULLPAGENAME}}/User_reviews|action=edit&section=new}} <span class="plainlinks" style="color:#648CC8 !important">Write a review</span>]</span>&ensp;·&ensp;[[/User reviews|<span style="color:#648CC8 !important">View the reviews page</span>]]
</div>
<div style="background-color:rgb(255 255 255 / 2%); border:1px solid rgba(255, 255, 255, 0.05); border-radius:3px; padding:1em"> {{{user reviews|}}} </div>
}}
}}
</div>
</div>

Latest revision as of 09:56, 27 August 2025

User:THE OWL/Sandbox/Templates/User page