Skip to content
Permalink
Browse files

Merge pull request #6 from illwieckz/responsive

responsive: set font size using em unit to be relative to default font size
  • Loading branch information...
illwieckz committed Mar 3, 2019
2 parents 99a8ec6 + 04cc39d commit 8f2e40b31c182f5e10d67f80252746eb3391ea8e
@@ -15,9 +15,9 @@ body
.circlemenu icon{
display:inline-block;
position:absolute;
bottom:20px;
right:-20px;
font-size:1.5em;
bottom: .8em;
right: -.6em;
font-size: 1.7em;
}
.circlemenu button {
icon-color-multiplier: red;
@@ -15,9 +15,9 @@ body
.circlemenu icon{
display:inline-block;
position:absolute;
bottom:20px;
right:-20px;
font-size:1.5em;
bottom: .8em;
right: -.6em;
font-size: 1.7em;
}
.circlemenu button {
icon-color-multiplier: red;
@@ -15,14 +15,14 @@
{
width: 40%;
float: left;
margin-left: 0;
margin-left: 0em;
}

button.builder
{
width: 40%;
float: right;
margin-right: 0;
margin-right: 0em;
}

button.teamselect
@@ -4,13 +4,9 @@
<link type="text/template" href="/ui/shared/window.rml" />

<style>



</style>

</head>
<body id="callvote_draw" template="window" style="width: 35em; margin: 10%;">
<body id="callvote_draw" template="window" style="width: 35em; margin: 1em;">
<h1> Call a vote for a draw </h1>

<form onsubmit='Events.pushevent("execForm \"callvote draw $reason$\"; hide", event)'>
@@ -25,7 +25,7 @@
</style>

</head>
<body id="callvote_map" template="window" style="width: 40em; margin: 10%;" onShow='Events.pushevent("buildDS mapList", event)' >
<body id="callvote_map" template="window" style="width: 40em; margin: 1em;" onShow='Events.pushevent("buildDS mapList", event)' >
<h1> Change map </h1>


@@ -3,7 +3,7 @@
<link type="text/rcss" href="/ui/shared/basics.rcss" />
<link type="text/template" href="/ui/shared/window.rml" />
</head>
<body id="error" onhide='Events.pushevent("exec set com_errorMessage", event)' template="window" style="width: 32em; margin: 10%;">
<body id="error" onhide='Events.pushevent("exec set com_errorMessage", event)' template="window" style="width: 32em; margin: 1em;">
<h1>Error!</h1>
<p class="inline">
<inlinecvar cvar="ui_errorMessage"/>
@@ -16,7 +16,7 @@

</style>
</head>
<body template="window" id="help_gameplay" style="width:45em; margin: 10%;">
<body template="window" id="help_gameplay" style="width:45em; margin: 1em;">

<h1>Gameplay Guide</h1>
<tabset>
@@ -17,7 +17,7 @@


</head>
<body id="help_textentry" template="window" style="width: 32em; margin: 10%;">
<body id="help_textentry" template="window" style="width: 32em; margin: 1em;">
<h1> Colour Codes and Symbols </h1>

<p>
@@ -26,38 +26,40 @@
using ^^.
</p>

<color style="color: #333333;">^0</color>
<color style="color: #FF0000;">^1</color>
<color style="color: #00FF00;">^2</color>
<color style="color: #FFFF00;">^3</color>
<color style="color: #0000FF;">^4</color>
<color style="color: #00FFFF;">^5</color>
<color style="color: #FF00FF;">^6</color>
<color style="color: #FFFFFF;">^7</color>
<color style="color: #FF7F00;">^8</color>
<color style="color: #7F7F7F;">^9</color>
<color style="color: #BFBFBF;">^:</color>
<color style="color: #BFBFBF;">^;</color>
<color style="color: #007F00;">^&lt;</color>
<color style="color: #7F7F00;">^=</color>
<color style="color: #00007F;">^></color>
<color style="color: #7F0000;">^?</color>
<color style="color: #7F3F00;">^@</color>
<color style="color: #FF9919;">^A</color>
<color style="color: #007F7F;">^B</color>
<color style="color: #7F007F;">^C</color>
<color style="color: #007FFF;">^D</color>
<color style="color: #7F00FF;">^E</color>
<color style="color: #3399CC;">^F</color>
<color style="color: #CCFFCC;">^G</color>
<color style="color: #006633;">^H</color>
<color style="color: #FF0033;">^I</color>
<color style="color: #B21919;">^J</color>
<color style="color: #993300;">^K</color>
<color style="color: #CC9933;">^L</color>
<color style="color: #999933;">^M</color>
<color style="color: #FFFFBF;">^N</color>
<color style="color: #FFFF7F;">^O</color>
<p>
<color style="color: #333333;">^0</color>
<color style="color: #FF0000;">^1</color>
<color style="color: #00FF00;">^2</color>
<color style="color: #FFFF00;">^3</color>
<color style="color: #0000FF;">^4</color>
<color style="color: #00FFFF;">^5</color>
<color style="color: #FF00FF;">^6</color>
<color style="color: #FFFFFF;">^7</color>
<color style="color: #FF7F00;">^8</color>
<color style="color: #7F7F7F;">^9</color>
<color style="color: #BFBFBF;">^:</color>
<color style="color: #BFBFBF;">^;</color>
<color style="color: #007F00;">^&lt;</color>
<color style="color: #7F7F00;">^=</color>
<color style="color: #00007F;">^></color>
<color style="color: #7F0000;">^?</color>
<color style="color: #7F3F00;">^@</color>
<color style="color: #FF9919;">^A</color>
<color style="color: #007F7F;">^B</color>
<color style="color: #7F007F;">^C</color>
<color style="color: #007FFF;">^D</color>
<color style="color: #7F00FF;">^E</color>
<color style="color: #3399CC;">^F</color>
<color style="color: #CCFFCC;">^G</color>
<color style="color: #006633;">^H</color>
<color style="color: #FF0033;">^I</color>
<color style="color: #B21919;">^J</color>
<color style="color: #993300;">^K</color>
<color style="color: #CC9933;">^L</color>
<color style="color: #999933;">^M</color>
<color style="color: #FFFFBF;">^N</color>
<color style="color: #FFFF7F;">^O</color>
</p>

<p style="clear: both;">
Example: ^3Fred^1Baggins becomes <in style="color: #FFFF00;">Fred</in><in style="color: #FF0000;">Baggins</in>
@@ -5,26 +5,25 @@
<style>
body
{
font-size: 46;
width: 100%;
height: 100%;
}

.speed_max, .speed_current
{
color: black;
font-size: 20;
padding: 25px;
margin: -65px;
font-size: 1.6em;
padding: 2em;
margin: -5.4em;
}
div.item_select img
{
color: blue;
}
div.item_select img.selected
{
width: 256px;
height: 256px;
width: 21.3em;
height: 21.3em;
color: black;
}
div.item_select img.inactive, div.item_select img.no_ammo
@@ -36,20 +35,20 @@
position: absolute;
width: 85%;
height: 85%;
top: 40px;
top: 4.8em;
margin-left: auto;
margin-right: auto;
}
div#barbs
{
position: absolute;
height: 100px;
width: 20px;
height: 8.3em;
width: 1.6em;
}
img.sides
{
width: 33px;
height: 33px;
width: 2.7em;
height: 2.7em;
}
#left img.sides,#right img.sides{
width:80%;
@@ -65,8 +64,8 @@
orientation: left;
width: 65%;
height: auto;
left: 0px;
bottom: 0px;
left: 0em;
bottom: 0em;
}
progressbar#poison-bar
{
@@ -75,8 +74,8 @@
orientation: right;
width: 65%;
height: auto;
right: 0px;
bottom: 0px;
right: 0em;
bottom: 0em;
}
wallwalk.wallwalking img.sides
{
@@ -87,14 +86,14 @@
display: block;
}
#left img.sides{
left:0px;
left:0em;
position:absolute;
bottom:0px;
bottom:0em;
}
#right img.sides{
right:0px;
right:0em;
position:absolute;
bottom:0px;
bottom:0em;
}
#right img.poison{
opacity: 0.2;
@@ -110,34 +109,33 @@
}
#left,#right{
display:block;
width:37%;
bottom:0px;
width: 35em;
height: 28em;
bottom: 0em;
position:absolute;
height:30%;
}
#left{
left:0px;
left:0em;
}
#right{
right:0px;
right:0em;
}

#health-icon{
position:absolute;
right:-1.3em;
top: 10px;
bottom:15%;
width:15%;
height:100%;
width: 1.3em;
right: -1.3em;
bottom: .09em;
width: 1.2em;
height: 1.2em;
color:#ff0000ff;
}
#health{
font-size: 5em;
color:#f02119;
position:absolute;
left:15%;
left:12.5%;
width: 20%;
bottom:15%;
bottom: .2em;
line-height:1.3em;
text-align: right;
}
@@ -150,17 +148,17 @@
color:#f500ffAA;
}

weapon_icon img{
weapon_icon img {
position:absolute;
right:27%;
bottom:20%;
width:15%;
right: 12.6em;
bottom: 3.9em;
width: 5.1em;
height:auto;
color:#ff0000ff;
}

#evos{
font-size:0.5em;
font-size: 2em;
position:absolute;
right:3%;
bottom:3%;
@@ -202,7 +200,7 @@
cell-color: #93141466;
color: #703030FF;

border-width: 0px;
border-width: 0em;
}

health, health_cross
Oops, something went wrong.

0 comments on commit 8f2e40b

Please sign in to comment.
You can’t perform that action at this time.