diff --git a/css/lexiconga.css b/css/lexiconga.css index c5f46db..813aecc 100644 --- a/css/lexiconga.css +++ b/css/lexiconga.css @@ -3,23 +3,7 @@ body { } header { - height: 50px; - width: 100%; background: #eacc9d; - margin-bottom: 10px; - border: none; - -webkit-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75); - -moz-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75); - box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75); -} - -/* Smartphones (portrait and landscape) ----------- */ -@media only screen -and (min-device-width : 320px) -and (max-device-width : 480px) { - header { - height: 70px; - } } tr, thead { @@ -70,7 +54,6 @@ and (min-device-width : 481px) { /* Smartphones (portrait and landscape) ----------- */ @media only screen -and (min-device-width : 320px) and (max-device-width : 480px) { #siteLogo { display: block; diff --git a/css/mobile.css b/css/mobile.css new file mode 100644 index 0000000..0b5a9fe --- /dev/null +++ b/css/mobile.css @@ -0,0 +1,88 @@ +/* Smartphones (portrait and landscape) ----------- */ +@media only screen +and (max-device-width : 480px) { + body { + font-size: 11pt; + } + + header { + height: 70px; + } + + footer { + position: relative; + clear: both; + max-height: 100%; + } + + #announcementArea, #notificationArea { + width: 80%; + } + + #leftColumn { + width: 100%; + } + + #wordEntryForm { + padding: 8px 0; + width: 100%; + max-width: 450px; + margin: 10px auto; + -webkit-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important; + -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important; + box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important; + } + + #wordEntryForm label { + overflow: auto; + display: flex; + justify-content: center; + font-size: 10pt; + } + + #wordEntryForm label span { + float: left; + width: 30%; + text-align: right; + margin-right: 8px; + } + + #wordEntryForm input, #wordEntryForm select, #wordEntryForm textarea { + float: right; + width: 60%; + margin-right: 8px; + align-self: center; + } + + .longDefinition { + min-width: 200px; + height: 80px; + } + + #wordEntryForm button { + display: block; + width: 50%; + height: 30px; + margin: 0px auto; + } + + #dictionaryContainer { + margin-bottom: 15px !important; + } + + #formLockButton { + display: none; + } + + #showFullScreenTextbox { + display: none; + } + + #settingsSaveButtons { + position: relative; + right: 0; + bottom: 0; + clear: both; + width: 100%; + } +} diff --git a/css/styles.css b/css/styles.css index 1a7bcd7..abd1528 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,4 +1,9 @@ +html { + width: 100%; +} + body { + width: 100%; padding: 0; margin: 0; border: none; @@ -10,6 +15,21 @@ contents { width: 100%; } +header { + height: 50px; + width: 100%; + margin: 0 0 10px; + position: relative; + top: 0px; + left: 0px; + right: 0px; + border: none; + padding: 0; + -webkit-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75); + -moz-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75); + box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75); +} + footer { width: 100%; text-align: center; @@ -18,10 +38,14 @@ footer { bottom: 0px; left: 0px; background: #aaaaaa; - padding: 8px; + padding: 0; max-height: 32px; /* Update Dictionary Container's bottom margin to account for footer */ } +#footer-content { + padding: 8px; +} + table { border-collapse: collapse; width: 100%; @@ -62,6 +86,10 @@ form { border: outset 3px; } +.wbr:after { + content: "\00200B"; +} + label { display: block; margin-bottom: 10px; @@ -139,7 +167,7 @@ input[type=checkbox] { #announcementArea, #notificationArea { text-align:center; padding:10px; - margin:0 auto; + margin: 0 auto 5px; width:50%; min-width:200px; -webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75); @@ -418,34 +446,3 @@ searchTerm { max-width: 400px; margin: 0 30px 0 0; } - -/* Smartphones (portrait and landscape) ----------- */ -@media only screen -and (min-device-width : 320px) -and (max-device-width : 480px) { - footer { - position: relative; - clear: both; - max-height: 100%; - } - - #dictionaryContainer { - margin-bottom: 15px !important; - } - - #formLockButton { - display: none; - } - - #showFullScreenTextbox { - display: none; - } - - #settingsSaveButtons { - position: relative; - right: 0; - bottom: 0; - clear: both; - width: 100%; - } -} diff --git a/index.php b/index.php index 4828f0f..2be560c 100644 --- a/index.php +++ b/index.php @@ -119,6 +119,7 @@ if ($display_mode != "build") { + @@ -150,7 +151,7 @@ if ($display_mode != "build") { -
;margin-bottom:10px;"> +
;"> Close
@@ -171,10 +172,10 @@ if ($display_mode != "build") { -