From: hyunduk.kim Date: Wed, 4 Sep 2019 08:58:37 +0000 (+0900) Subject: [SettingApp] Adjust Page Size X-Git-Tag: submit/tizen/20190920.002515~9^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=959eef7329ba8975a3101ce82954ef11f86f571d;p=platform%2Fframework%2Fweb%2Fwrtjs.git [SettingApp] Adjust Page Size The main page size was too big in mobile. This fixes : - Screen size of main page - Text size of each table Change-Id: Icc6b3aedf208011eb832e5b3bf6bea826505e273 Signed-off-by: hyunduk.kim --- diff --git a/addon_setting_app/css/button.css b/addon_setting_app/css/button.css index 6752b56e..35c16558 100644 --- a/addon_setting_app/css/button.css +++ b/addon_setting_app/css/button.css @@ -50,14 +50,14 @@ a.button { box-shadow: inset 0 0 0 1px #f5f5f5; color: #555; display: inline-block; - font: bold 28px TizenSansRegular; + font: bold TizenSansRegular; /*font: bold 12px Arial, Helvetica, Clean, sans-serif;*/ padding: 10px 10px; position: relative; text-align: center; text-decoration: none; text-shadow: 0 1px 0 #fafafa; } - + a.button:hover { background: #e4e4e4; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed)); @@ -66,7 +66,7 @@ a.button:hover { border: solid 1px #c2c2c2; border-bottom: solid 3px #b2b1b1; box-shadow: inset 0 0 0 1px #efefef; } - + a.button:active { background: #dfdfdf; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3)); diff --git a/addon_setting_app/css/style.css b/addon_setting_app/css/style.css index b5d15359..a4d54dc0 100644 --- a/addon_setting_app/css/style.css +++ b/addon_setting_app/css/style.css @@ -1,143 +1,150 @@ @font-face { - font-family: 'TizenSansRegular'; - src: url("../font/TizenSansRegular.ttf"); + font-family: 'TizenSansRegular'; + src: url("../font/TizenSansRegular.ttf"); } body { background-color: black; - /* background-image: url("../image/bg.jpg"); */ - /* font-family: 'TizenSansRegular'; */ + /* background-image: url("../image/bg.jpg"); */ + /* font-family: 'TizenSansRegular'; */ + width: 100%; + height: 100%; + margin: 0px; } .frame { - text-align: -webkit-center; - margin: 2%; + text-align: -webkit-center; } .title { - color: whitesmoke; - font-size: 5em; - width: 660px; - text-align:center; - font-weight:bold; - margin-top:50px; - margin-bottom:20px; + color: whitesmoke; + font-size: 2em; + text-align:center; + font-weight:bold; + margin-top:10px; + margin-bottom:10px; } .footer { - width:640px; - text-align:right; + text-align:right; } .extList { - margin:10px 0px;padding:3px; - width:640px; + padding:3px; border:1px solid #000000; - -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px; - -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px; - -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; - -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; -}.extList table{ - border-collapse: collapse; - border-spacing: 0; +} + +.extList table{ + border-collapse: collapse; + border-spacing: 0; width:100%; height:100%; margin:0px;padding:0px; -}.extList tr:last-child td:last-child { +} + +.extList tr:last-child td:last-child { -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px; } + .extList table tr:first-child td:first-child { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; - text-align:left; + text-align:left; } + .extList table tr:first-child td:last-child { -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; - text-align:right; -}.extList tr:last-child td:first-child{ + text-align:right; +} + +.extList tr:last-child td:first-child{ -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px; -}.extList tr:hover td{ +} + +.extList tr:hover td{ background-color:#9b9b9b; } + .extList td{ vertical-align:middle; - background:-o-linear-gradient(bottom, #ffffff 5%, #eeeeee 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #eeeeee) ); + background:-o-linear-gradient(bottom, #ffffff 5%, #eeeeee 100%); + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #eeeeee) ); background:-moz-linear-gradient( center top, #ffffff 5%, #eeeeee 100% ); - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#eeeeee"); background: -o-linear-gradient(top,#ffffff,eeeeee); - + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#eeeeee"); + background: -o-linear-gradient(top,#ffffff,eeeeee); background-color:#ffffff; - border:1px solid #000000; border-width:0px 1px 1px 0px; text-align:left; padding:7px; - font-size:30px; color:#000000; - - height:40px; + height:40px; } + .extList td::first-line{ - font-size:40px; font-weight:bold; -}.extList tr:last-child td{ +} + +.extList tr:last-child td{ border-width:0px 1px 0px 0px; } + .extList tr td:last-child{ border-width:0px 0px 1px 0px; - text-align:center; - width:140px; + text-align:center; } + .extList tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } + .extList tr:first-child td{ background:-o-linear-gradient(bottom, #777777 5%, #444444 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #777777), color-stop(1, #444444) ); background:-moz-linear-gradient( center top, #777777 5%, #444444 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#777777", endColorstr="#444444"); background: -o-linear-gradient(top,#777777,444444); - background-color:#777777; border:0px solid #000000; text-align:center; border-width:0px 0px 1px 1px; - font-size:40px; font-weight:bold; color:#ffffff; - - height:45px; + height:45px; } + .extList tr:first-child:hover td{ background:-o-linear-gradient(bottom, #777777 5%, #444444 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #777777), color-stop(1, #444444) ); background:-moz-linear-gradient( center top, #777777 5%, #444444 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#777777", endColorstr="#444444"); background: -o-linear-gradient(top,#777777,444444); - background-color:#777777; } + .extList tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } + .extList tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }