mirror of
https://github.com/keymanapp/keyman.git
synced 2026-10-22 22:07:48 +00:00
Fixes #4265. This adjusts the button sizes of the splash screen to accommodate longer strings such as found in the Khmer translation. We could go to a more flexible layout model to allow for the buttons to stretch as needed, but that's a lot more work and I don't really want to try for that right now.
181 lines
3.1 KiB
CSS
181 lines
3.1 KiB
CSS
html, body {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
font-size: 15px;
|
|
background: white;
|
|
}
|
|
|
|
div {
|
|
position: static;
|
|
}
|
|
|
|
#size {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border: solid 1px #444444;
|
|
background: white;
|
|
width: 630px;
|
|
height: 450px;
|
|
}
|
|
|
|
#displaylanguage { top: 40px; right: 12px; position: absolute; color: white; }
|
|
#displaylanguage a { color: white; }
|
|
|
|
#titleBox {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 26px;
|
|
background: url("keyman-desktop-486x50-black.png") no-repeat;
|
|
width: 486px;
|
|
height: 50px;
|
|
}
|
|
|
|
#silLogo {
|
|
position: absolute; right: 20px; top: 24px; background: url("sil-logo-blue.png"); width: 48px; height: 50px;
|
|
}
|
|
|
|
#family {
|
|
position: absolute; left: 0px; top: 108px; width: 630px; height: 210px;
|
|
background: url("family.jpg");
|
|
}
|
|
|
|
#footer {
|
|
left: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
width: 700px;
|
|
padding: 8px;
|
|
}
|
|
|
|
#version {
|
|
position: absolute;
|
|
font-size: 0.8em;
|
|
right: 120px;
|
|
bottom: 10px;
|
|
color: #F68924;
|
|
}
|
|
|
|
#beta {
|
|
color: red; font-weight: bold;
|
|
}
|
|
|
|
#keyboards {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 328px;
|
|
font-size: 12pt;
|
|
color: #626364;
|
|
height: 84px;
|
|
max-height: 84px;
|
|
overflow-y: auto;
|
|
width: 360px;
|
|
padding: 0 16px 0 0;
|
|
}
|
|
|
|
a.button {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
color: black;
|
|
text-decoration: none;
|
|
position: absolute;
|
|
}
|
|
|
|
.btn {
|
|
float: left;
|
|
width: 160px;
|
|
height: 26px;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
padding: 4px 12px 4px 12px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
color: #33333f;
|
|
}
|
|
|
|
.btn-orange {
|
|
background: #F68924;
|
|
}
|
|
|
|
.btn-blue {
|
|
background: #79C3DA;
|
|
}
|
|
|
|
.btn-red {
|
|
background: #CC3846;
|
|
color: #fcf8f8;
|
|
}
|
|
|
|
.btn-small {
|
|
width: 61px;
|
|
height: 20px;
|
|
font-size: 15px;
|
|
padding: 1px 6px 1px 6px;
|
|
background: #F68924;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#ribbon {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 100px;
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #79C3DA;
|
|
}
|
|
|
|
#ribbon div {
|
|
position: static;
|
|
float: left;
|
|
height: 8px;
|
|
}
|
|
|
|
#ribbon #ribbon1 {
|
|
width: 56%;
|
|
background: #F68924;
|
|
}
|
|
|
|
#ribbon #ribbon2 {
|
|
width: 24%;
|
|
background: #CC3846;
|
|
}
|
|
|
|
#tasks {
|
|
position: absolute;
|
|
left: 0; bottom: 0; margin-left: 8px; margin-bottom: 8px; font-size: 13px }
|
|
#tasks div { margin-bottom: 2px; margin-left: 4px }
|
|
|
|
#startNow {
|
|
right: 12px;
|
|
top: 332px;
|
|
height: 1.2em;
|
|
}
|
|
|
|
#startNow .btn,
|
|
#config .btn {
|
|
width: 180px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#config {
|
|
right: 12px;
|
|
top: 372px;
|
|
}
|
|
|
|
#exit { right: 12px; bottom: 12px; }
|
|
|
|
#exit .btn-small {
|
|
width: 90px;
|
|
}
|
|
|
|
#tasks div#showAtStartupBox { margin-top: 6px; margin-left: 0; }
|
|
#tasks a, #showAtStartupLabel { color: #F68924; text-decoration: none; }
|
|
#tasks a:hover { text-decoration: underline; }
|
|
#showAtStartup { margin: 0 4px 0 0; }
|
|
|
|
#showAtStartupBox #showAtStartup { display: none; }
|
|
#showAtStartupBox #hideAtStartup { display: inline; }
|
|
#showAtStartupBox.hideAtStartup #showAtStartup { display: inline; }
|
|
#showAtStartupBox.hideAtStartup #hideAtStartup { display: none; }
|
|
|