mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-06-26 11:40:48 +03:00
Fronted framework
This commit is contained in:
Denis Shakhov
parent
f57d0f5746
commit
65f5ab10de
68
templates/framework/css/buttons.css
Normal file
68
templates/framework/css/buttons.css
Normal file
|
|
@ -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; }
|
||||
77
templates/framework/css/forms.css
Normal file
77
templates/framework/css/forms.css
Normal file
|
|
@ -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; }
|
||||
|
|
@ -56,4 +56,17 @@
|
|||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 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; }
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
/* -------------------------------------------------------------------
|
||||
|
||||
КНОПКИ
|
||||
|
||||
|
||||
Примеры использования:
|
||||
|
||||
<button class="button">Preview</button>
|
||||
<a href="#" class="button">Preview</a>
|
||||
|
||||
<button class="button button-primary">Save</button>
|
||||
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.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; }
|
||||
|
|
@ -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; }
|
||||
|
|
@ -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 { }
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{hook run='content_end'}
|
||||
{hook run='content_end'}
|
||||
</div> <!-- /content -->
|
||||
</div> <!-- /content-wrapper -->
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@
|
|||
</ul>
|
||||
|
||||
|
||||
<button type="submit" class="button button-icon" title="{$aLang.topic_question_vote_result_sort}" onclick="return ls.poll.switchResult(this, {$oTopic->getId()});"><i class="icon-align-left icon-white"></i></button>
|
||||
<button type="submit" class="button" title="{$aLang.topic_question_vote_result_sort}" onclick="return ls.poll.switchResult(this, {$oTopic->getId()});"><i class="icon-align-left"></i></button>
|
||||
|
||||
<span class="poll-total poll-total-result">{$aLang.topic_question_vote_result}: {$oTopic->getQuestionCountVote()} | {$aLang.topic_question_abstain_result}: {$oTopic->getQuestionCountVoteAbstain()}</span>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,23 +1,10 @@
|
|||
/* -------------------------------------------------------------------
|
||||
|
||||
КНОПКИ
|
||||
|
||||
|
||||
Примеры использования:
|
||||
|
||||
<button class="button">Preview</button>
|
||||
<a href="#" class="button">Preview</a>
|
||||
|
||||
<button class="button button-primary">Save</button>
|
||||
|
||||
------------------------------------------------------------------- */
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue