From 65f5ab10de0ff2a270549b353a59ef93ca7c89f3 Mon Sep 17 00:00:00 2001 From: Denis Shakhov Date: Tue, 15 Jan 2013 11:27:45 +0700 Subject: [PATCH] Fronted framework --- templates/framework/css/buttons.css | 68 ++++++++++++++++ templates/framework/css/forms.css | 77 +++++++++++++++++++ templates/framework/css/helpers.css | 15 +++- templates/framework/css/reset.css | 5 +- templates/skin/developer/css/base.css | 8 +- templates/skin/developer/css/buttons.css | 68 ---------------- templates/skin/developer/css/forms.css | 66 ---------------- templates/skin/developer/css/topic.css | 1 - templates/skin/developer/footer.tpl | 2 +- templates/skin/developer/question_result.tpl | 2 +- .../skin/developer/settings/config/config.php | 4 +- templates/skin/synio/css/buttons.css | 55 ++++--------- .../skin/synio/settings/config/config.php | 1 + 13 files changed, 187 insertions(+), 185 deletions(-) create mode 100644 templates/framework/css/buttons.css create mode 100644 templates/framework/css/forms.css delete mode 100644 templates/skin/developer/css/buttons.css delete mode 100644 templates/skin/developer/css/forms.css diff --git a/templates/framework/css/buttons.css b/templates/framework/css/buttons.css new file mode 100644 index 00000000..1e707e67 --- /dev/null +++ b/templates/framework/css/buttons.css @@ -0,0 +1,68 @@ +/* + * Buttons + */ + +.button { + display: inline-block; + + padding: 4px 12px; + margin: 0; + + text-align: center; + vertical-align: middle; + text-decoration: none; + + font-size: 14px; + line-height: 20px; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + + border: 1px solid #ddd; + border-radius: 4px; + + color: #333; + + background: #fafafa; + background: -moz-linear-gradient(top, #fff 0%, #e6e6e6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e6e6e6)); + background: -webkit-linear-gradient(top, #fff 0%,#e6e6e6 100%); + background: -o-linear-gradient(top, #fff 0%,#e6e6e6 100%); + background: -ms-linear-gradient(top, #fff 0%,#e6e6e6 100%); + background: linear-gradient(top, #fff 0%,#e6e6e6 100%); + + -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); + + cursor: pointer; + + *margin-right: 5px; + *border: 0; +} +.button:hover { text-decoration: none; background: #eee; } +.button:active, +.button.active { + background: #eaeaea; + border-color: #ccc; + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset; + -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset; + box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset; +} +.button.fl-r { *margin-right: 0; } + + +/* Button Primary */ +.button.button-primary { + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + + background: #006DCC; + background: -moz-linear-gradient(top, #0088cc 0%, #0044cc 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0044cc)); + background: -webkit-linear-gradient(top, #0088cc 0%,#0044cc 100%); + background: -o-linear-gradient(top, #0088cc 0%,#0044cc 100%); + background: -ms-linear-gradient(top, #0088cc 0%,#0044cc 100%); + background: linear-gradient(top, #0088cc 0%,#0044cc 100%); +} +.button.button-primary:hover { background: #0044cc; } +.button.button-primary.active { background: #006DCC; } \ No newline at end of file diff --git a/templates/framework/css/forms.css b/templates/framework/css/forms.css new file mode 100644 index 00000000..0479bd6b --- /dev/null +++ b/templates/framework/css/forms.css @@ -0,0 +1,77 @@ +/* + * Forms + */ + + +/* Input Text */ +textarea, +input[type="text"], +.input-text { + padding: 5px; + border: 1px solid #ddd; + border-radius: 3px; + -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.07) inset; + box-shadow: 0 2px 4px rgba(0,0,0,.07) inset; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +input[type="text"]:focus, +.input-text:focus { + border-color: #4d90fe; + -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.07) inset, 0 0 3px #4d90fe; + box-shadow: 0 2px 4px rgba(0,0,0,.07) inset, 0 0 3px #4d90fe; +} + + +/* Checkboxes */ +input[type="checkbox"], +.input-checkbox { + position: relative; + top: 1px; + margin: 0 2px 0 1px; +} + + +/* Select */ +select { padding: 4px; border: 1px solid #ddd; border-radius: 3px; } + + +/* Fieldset */ +fieldset { margin-bottom: 30px; padding-top: 20px; border-top: 1px solid #eaeaea; } +fieldset legend { color: #000; font-size: 18px; padding-right: 10px; } + + +form p { margin-bottom: 20px; } +form label { display: block; margin-bottom: 3px; } +form .icon-question-sign { cursor: help; } + + +/* Note */ +.note { display: block; margin-top: 3px; font-size: 12px; color: #aaa; } +.note.note-header { margin-bottom: 20px; } + +.captcha-image { vertical-align: top; } + +dl.form-item { overflow: hidden; zoom: 1; margin-bottom: 20px; } +dl.form-item dt { float: left; width: 135px; padding-top: 4px; padding-right: 15px; overflow: hidden; } +dl.form-item dd { float: left; width: 300px; } + +.form-profile { position: relative; } +.form-profile .avatar-change { position: absolute; top: 40px; right: 0; padding: 10px; background: #f7f7f7; font-size: 11px; } + + +/* Placeholder */ +:-moz-placeholder { color: #aaa; } +::-webkit-input-placeholder { color: #aaa; } +.placeholder { color: #aaa; } /* IE */ + + +/* Editor */ +.mceEditor { display: block; margin-bottom: 20px; } +.markItUpEditor { border-radius: 0; } + + +/* Validate */ +.validate-error-hide { display: none; } +.validate-error-show { display: block; color: #f00; font-weight: bold; font-size: 12px; } \ No newline at end of file diff --git a/templates/framework/css/helpers.css b/templates/framework/css/helpers.css index 093368d9..5c20db2d 100644 --- a/templates/framework/css/helpers.css +++ b/templates/framework/css/helpers.css @@ -56,4 +56,17 @@ white-space: pre-wrap; word-wrap: break-word; white-space: normal; -} \ No newline at end of file +} + + +/* Width */ +/* @todo: Delete input-width */ +.input-width-full, .width-full { width: 100%; } +.input-width-50 , .width-50 { width: 50px; } +.input-width-100, .width-100 { width: 100px; } +.input-width-150, .width-150 { width: 150px; } +.input-width-200, .width-200 { width: 200px; } +.input-width-250, .width-250 { width: 250px; } +.input-width-300, .width-300 { width: 300px; } +.input-width-400, .width-400 { width: 400px; } +.input-width-500, .width-500 { width: 500px; } \ No newline at end of file diff --git a/templates/framework/css/reset.css b/templates/framework/css/reset.css index 4f1e1156..c73ee197 100644 --- a/templates/framework/css/reset.css +++ b/templates/framework/css/reset.css @@ -229,6 +229,7 @@ ul, ol { img { border: 0; + vertical-align: middle; } /** @@ -260,9 +261,9 @@ figure { */ fieldset { - border: 1px solid #c0c0c0; + border: 0; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + padding: 0; } /** diff --git a/templates/skin/developer/css/base.css b/templates/skin/developer/css/base.css index 2e195ccf..6bc0e47d 100644 --- a/templates/skin/developer/css/base.css +++ b/templates/skin/developer/css/base.css @@ -43,11 +43,11 @@ h2.header-table { margin-bottom: 0; border-bottom: 1px solid #eee; padding-botto /* Шапка сайта ---------------------------------------------------- */ -#header a { text-decoration: none; color: #333; } +#header a { text-decoration: none; color: #000; } -#header .site-name { margin: 0 0 10px; font-size: 54px; line-height: 1em; font-weight: bold; } -#header .site-name a:hover { color: #444AA3; } -#header .site-description { width: 500px; color: #777; font-size: 15px; } +#header .site-name { margin: 0 0 10px; font-size: 54px; line-height: 1em; font-weight: bold; text-align: center; } +#header .site-name a:hover { color: #3a41b8; } +#header .site-description { max-width: 500px; margin: 0 auto; color: #777; font-size: 15px; } diff --git a/templates/skin/developer/css/buttons.css b/templates/skin/developer/css/buttons.css deleted file mode 100644 index f0c4b881..00000000 --- a/templates/skin/developer/css/buttons.css +++ /dev/null @@ -1,68 +0,0 @@ -/* ------------------------------------------------------------------- - - КНОПКИ - - - Примеры использования: - - - Preview - - - -------------------------------------------------------------------- */ - -.button { - display: inline-block; - - padding: 7px 15px; - text-align: center; - - border: none; - border-radius: 2px; - - font-size: 12px; - line-height: 16px; - - color: #fff; - - background: #555; - background: -moz-linear-gradient(top, #666666 0%, #555555 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#555555)); - background: -webkit-linear-gradient(top, #666666 0%,#555555 100%); - background: -o-linear-gradient(top, #666666 0%,#555555 100%); - background: -ms-linear-gradient(top, #666666 0%,#555555 100%); - background: linear-gradient(top, #666666 0%,#555555 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#555555',GradientType=0 ); - - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); - - cursor: pointer; - - *margin-right: 5px; -} -.button:hover { text-decoration: none; color: #fff; background: #666; } -.button:active { - -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .5) inset; - -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .5) inset; - box-shadow: 0 0 7px rgba(0, 0, 0, .5) inset; -} -.button.fl-r { *margin-right: 0; } - - -/* Button Primary */ -.button.button-primary { - background: #43bb34; - background: -moz-linear-gradient(top, #43bb34 0%, #3aa62c 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43bb34), color-stop(100%,#3aa62c)); - background: -webkit-linear-gradient(top, #43bb34 0%,#3aa62c 100%); - background: -o-linear-gradient(top, #43bb34 0%,#3aa62c 100%); - background: -ms-linear-gradient(top, #43bb34 0%,#3aa62c 100%); - background: linear-gradient(top, #43bb34 0%,#3aa62c 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43bb34', endColorstr='#3aa62c',GradientType=0 ); -} -.button.button-primary:hover { background: #3AA62C; } -.button.button-primary.active { background: #D23E3E; } - -/* Button Icon (Without text) */ -.button.button-icon { padding: 7px 10px; } \ No newline at end of file diff --git a/templates/skin/developer/css/forms.css b/templates/skin/developer/css/forms.css deleted file mode 100644 index 7d4b9237..00000000 --- a/templates/skin/developer/css/forms.css +++ /dev/null @@ -1,66 +0,0 @@ -/* ------------------------------------------------------------------- - ФОРМЫ -------------------------------------------------------------------- */ - -.input-text { - width: 150px; - padding: 5px; - border: 1px solid #ddd; - -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.07) inset; box-shadow: 0 2px 4px rgba(0,0,0,.07) inset; - border-radius: 3px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.input-text:focus { border-color: #4D90FE; -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.07) inset, 0 0 3px #4D90FE; box-shadow: 0 2px 4px rgba(0,0,0,.07) inset, 0 0 3px #4D90FE; } -.input-checkbox { position: relative; top: 1px; margin: 0 2px 0 1px; } - -.input-width-full { width: 100%; } -.input-width-50 { width: 50px; } -.input-width-100 { width: 100px; } -.input-width-150 { width: 150px; } -.input-width-200 { width: 200px; } -.input-width-250 { width: 250px; } -.input-width-300 { width: 300px; } -.input-width-400 { width: 400px; } -.input-width-500 { width: 500px; } - -textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - -select { padding: 4px; border: 1px solid #ddd; border-radius: 3px; } - -fieldset { margin-bottom: 30px; padding-top: 20px; border-top: 1px solid #eaeaea; } -fieldset legend { color: #000; font-size: 18px; padding-right: 10px; } - -form p { margin-bottom: 20px; } -form label { display: block; margin-bottom: 3px; } -form .icon-question-sign { cursor: help; } - -.note { display: block; margin-top: 3px; font-size: 12px; color: #aaa; } -.note.note-header { margin-bottom: 20px; } - -.captcha-image { vertical-align: top; } - -dl.form-item { overflow: hidden; zoom: 1; margin-bottom: 20px; } -dl.form-item dt { float: left; width: 135px; padding-top: 4px; padding-right: 15px; overflow: hidden; } -dl.form-item dd { float: left; width: 300px; } - -.form-profile { position: relative; } -.form-profile .avatar-change { position: absolute; top: 40px; right: 0; padding: 10px; background: #f7f7f7; font-size: 11px; } - - -/* Placeholder */ -:-moz-placeholder { color: #aaa; } -::-webkit-input-placeholder { color: #aaa; } - -/* IE placeholder */ -.placeholder { color: #aaa; } - - -.mceEditor { display: block; margin-bottom: 20px; } - - -/* Валидатор ----------------------------------------------------------------*/ -.validate-error-hide { display: none; } -.validate-error-show { display: block; color: #f00; font-weight: bold; font-size: 12px; } diff --git a/templates/skin/developer/css/topic.css b/templates/skin/developer/css/topic.css index b56bf6fb..0be628bf 100644 --- a/templates/skin/developer/css/topic.css +++ b/templates/skin/developer/css/topic.css @@ -61,7 +61,6 @@ .topic .poll .poll-result li.most dl dd div { background: #60CC4E; } .topic .poll .poll-total { color: #aaa; margin-left: 10px; } -.topic .poll .button.button-icon.active { background: #43bb34; } /* Topic Photo */ .topic.topic-type-photoset { } diff --git a/templates/skin/developer/footer.tpl b/templates/skin/developer/footer.tpl index 2c894559..7cf2c1d9 100644 --- a/templates/skin/developer/footer.tpl +++ b/templates/skin/developer/footer.tpl @@ -1,4 +1,4 @@ - {hook run='content_end'} + {hook run='content_end'} diff --git a/templates/skin/developer/question_result.tpl b/templates/skin/developer/question_result.tpl index 0b1bd456..32611137 100644 --- a/templates/skin/developer/question_result.tpl +++ b/templates/skin/developer/question_result.tpl @@ -28,6 +28,6 @@ - + {$aLang.topic_question_vote_result}: {$oTopic->getQuestionCountVote()} | {$aLang.topic_question_abstain_result}: {$oTopic->getQuestionCountVoteAbstain()} \ No newline at end of file diff --git a/templates/skin/developer/settings/config/config.php b/templates/skin/developer/settings/config/config.php index bd72fb7a..a0fc65b5 100644 --- a/templates/skin/developer/settings/config/config.php +++ b/templates/skin/developer/settings/config/config.php @@ -29,6 +29,8 @@ $config['head']['default']['css'] = array( "___path.root.server___/templates/framework/css/reset.css", "___path.root.server___/templates/framework/css/helpers.css", "___path.root.server___/templates/framework/css/text.css", + "___path.root.server___/templates/framework/css/buttons.css", + "___path.root.server___/templates/framework/css/forms.css", // Template styles "___path.static.skin___/css/base.css", @@ -38,8 +40,6 @@ $config['head']['default']['css'] = array( "___path.root.engine_lib___/external/prettify/prettify.css", "___path.static.skin___/css/grid.css", "___path.static.skin___/css/common.css", - "___path.static.skin___/css/forms.css", - "___path.static.skin___/css/buttons.css", "___path.static.skin___/css/navs.css", "___path.static.skin___/css/icons.css", "___path.static.skin___/css/tables.css", diff --git a/templates/skin/synio/css/buttons.css b/templates/skin/synio/css/buttons.css index 0fac9f47..1948a202 100644 --- a/templates/skin/synio/css/buttons.css +++ b/templates/skin/synio/css/buttons.css @@ -1,23 +1,10 @@ -/* ------------------------------------------------------------------- - - КНОПКИ - - - Примеры использования: - - - Preview - - - -------------------------------------------------------------------- */ +/* + * Buttons + */ .button { - display: inline-block; - padding: 3px 10px 6px; *padding: 3px 10px 4px; - text-align: center; border: 1px solid #dfe3e8; border-radius: 5px; @@ -36,20 +23,12 @@ background: linear-gradient(top, #fbfcfc 0%,#f0f2f5 100%); font-family: Verdana, sans-serif; - cursor: pointer; - text-decoration: none; - - *margin-right: 5px; -} -.button:hover { text-decoration: none; background: #f0f2f5; } -.button:active { - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .3) inset; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3) inset; - box-shadow: 0 0 3px rgba(0, 0, 0, .3) inset; -} -.button.fl-r { *margin-right: 0; } -.opera .button { padding-top: 4px; padding-bottom: 5px; } + text-shadow: none; +} +.button:hover { background: #f0f2f5; } + +.opera .button { padding: 4px 10px 5px; } /* Button Primary */ @@ -62,17 +41,11 @@ background: -ms-linear-gradient(top, #66cfff 0%,#2abcfe 100%); background: linear-gradient(top, #66cfff 0%,#2abcfe 100%); - border: 1px solid #27ace8; - - color: #fff; + border-color: #27ace8; } .button.button-primary:hover { background: #2abcfe; } -/* Button Icon (Without text) */ -.button.button-icon { padding: 7px 10px; } - - /* Button Write */ .button.button-write { background: #66cfff; @@ -101,7 +74,9 @@ background: -ms-linear-gradient(top, #4ec4ff 0%,#22b3fe 100%); background: linear-gradient(top, #4ec4ff 0%,#22b3fe 100%); - -webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset; box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset; + -webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset; + -moz-box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset; + box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset; } @@ -127,7 +102,8 @@ .button.button-action.active, .button.button-action:hover { border: 1px solid #2770e8; - -webkit-box-shadow: 0 -1px 0 #128af3 inset, 0 2px 2px #ddd; box-shadow: 0 -1px 0 #128af3 inset, 0 2px 2px #ddd; + -webkit-box-shadow: 0 -1px 0 #128af3 inset, 0 2px 2px #ddd; + box-shadow: 0 -1px 0 #128af3 inset, 0 2px 2px #ddd; color: #fff; padding: 3px 3px 2px; @@ -163,7 +139,8 @@ background: -ms-linear-gradient(top, #6ce777 0%,#4ace56 100%); background: linear-gradient(top, #6ce777 0%,#4ace56 100%); border: none; - box-shadow: none; -webkit-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; padding: 6px 6px 6px 7px; cursor: default; } diff --git a/templates/skin/synio/settings/config/config.php b/templates/skin/synio/settings/config/config.php index 1ae61720..e0ab9955 100644 --- a/templates/skin/synio/settings/config/config.php +++ b/templates/skin/synio/settings/config/config.php @@ -34,6 +34,7 @@ $config['head']['default']['css'] = array( "___path.root.server___/templates/framework/css/reset.css", "___path.root.server___/templates/framework/css/helpers.css", "___path.root.server___/templates/framework/css/text.css", + "___path.root.server___/templates/framework/css/buttons.css", // Template styles "___path.static.skin___/css/base.css",