Nicolae Claudius
13 years ago
4 changed files with 817 additions and 18 deletions
@ -0,0 +1,386 @@
|
||||
/* ============================================================================= |
||||
normalize.css |
||||
2011-07-06T20:20 UTC |
||||
//github.com/jonathantneal/normalize.css |
||||
|
||||
Normalize.css is a customisable CSS file that makes browsers render all |
||||
elements more consistently and in line with modern standards. We researched |
||||
the differences between default browser styles in order to precisely target |
||||
only the styles that need normalizing. |
||||
|
||||
How comment documentation is written: |
||||
Comments: (anchor) (type of change) (summary of issue) in (affected browsers) |
||||
Url: (url related to above comment) |
||||
|
||||
To be concise, comments are restricted to a length of 77 characters or less. |
||||
|
||||
What 'types of change' mean: |
||||
Addresses: Changes involving downgrades for greater cross-browser consistency |
||||
Corrects: Bug fixes and corrections to unexpected visual quirks |
||||
Improves: Improvements based on popular usage and html5 recommendation |
||||
========================================================================== */ |
||||
|
||||
|
||||
/* ============================================================================= |
||||
Base |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Corrects block display not defined in IE6/7/8/9 & FF3 |
||||
*/ |
||||
|
||||
article, |
||||
aside, |
||||
details, |
||||
figcaption, |
||||
figure, |
||||
footer, |
||||
header, |
||||
hgroup, |
||||
nav, |
||||
section { |
||||
display: block; |
||||
} |
||||
|
||||
/* |
||||
* 1. Improves visual focus of mouse in all browsers |
||||
* 2. Corrects text resizing oddly when font size is set using ems in IE6/7 |
||||
* http://clagnut.com/blog/348/#c790 |
||||
* 3. Corrects page centering in all browsers regardless of content height |
||||
* 4. Improves visual appearance of containers during a delegated click in mSaf |
||||
* www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ |
||||
* 5. Corrects text resizing oddly after orientation change in all handhelds |
||||
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ |
||||
*/ |
||||
|
||||
html { |
||||
cursor: default; /* 1 */ |
||||
font-size: 100%; /* 2 */ |
||||
overflow-y: scroll; /* 3 */ |
||||
-webkit-tap-highlight-color: transparent; /* 4 */ |
||||
-ms-text-size-adjust: 100%; /* 5 */ |
||||
-webkit-text-size-adjust: 100%; /* 5 */ |
||||
} |
||||
|
||||
/* |
||||
* 1. Addresses text resizing limitations in IE6/7 |
||||
* Improves text sizing inconsistency in all browsers |
||||
* Known issue: text sizing unnecessary for 'form' |
||||
* 2. Improves margins set oddly in IE6/7 FF3/4 S5 C10 |
||||
*/ |
||||
|
||||
body, |
||||
form, |
||||
input, |
||||
button, |
||||
select, |
||||
textarea { |
||||
font-size: 100%; /* 1 */ |
||||
margin: 0; /* 2 */ |
||||
} |
||||
|
||||
|
||||
/* ============================================================================= |
||||
Links |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Improves appearance when active or hovered in all browsers |
||||
* people.opera.com/patrickl/experiments/keyboard/test |
||||
*/ |
||||
|
||||
a, |
||||
a:active, |
||||
a:hover { |
||||
outline: none; |
||||
} |
||||
|
||||
/* |
||||
* Addresses outline set oddly in C10 |
||||
*/ |
||||
|
||||
a:focus { |
||||
outline: thin dotted; |
||||
} |
||||
|
||||
|
||||
/* ============================================================================= |
||||
Typography |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Corrects styling not present in IE6/7/8/9 S5 C10 |
||||
*/ |
||||
|
||||
abbr { |
||||
_border-bottom: expression(this.title ? '1px dotted' : 'none'); |
||||
} |
||||
|
||||
abbr[title] { |
||||
border-bottom: 1px dotted; |
||||
} |
||||
|
||||
/* |
||||
* Corrects style set incorrectly as 'bolder' in FF3/4 S4/5 C10 |
||||
*/ |
||||
|
||||
b, |
||||
strong { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/* |
||||
* Corrects styling not present in S5 C10 |
||||
*/ |
||||
|
||||
dfn { |
||||
font-style: italic; |
||||
} |
||||
|
||||
/* |
||||
* Corrects styling not present in IE6/7/8/9 |
||||
*/ |
||||
|
||||
mark { |
||||
background: #FF0; |
||||
color: #000; |
||||
} |
||||
|
||||
/* |
||||
* Corrects font family displayed oddly in IE6 S5 C10 |
||||
* en.wikipedia.org/wiki/User:Davidgothberg/Test59 |
||||
*/ |
||||
|
||||
pre, |
||||
code, |
||||
kbd, |
||||
samp { |
||||
font-family: monospace, monospace; |
||||
_font-family: 'courier new', monospace; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
/* |
||||
* Improves readability of pre-formatted text in all browsers |
||||
*/ |
||||
|
||||
pre { |
||||
white-space: pre; |
||||
white-space: pre-wrap; |
||||
word-wrap: break-word; |
||||
} |
||||
|
||||
/* |
||||
* Addresses CSS quotes not supported in IE6/7 |
||||
*/ |
||||
|
||||
q { |
||||
quotes: none; |
||||
} |
||||
|
||||
/* |
||||
* Addresses quote property not supported in S4 |
||||
*/ |
||||
|
||||
q:before, |
||||
q:after { |
||||
content: ''; |
||||
content: none; |
||||
} |
||||
|
||||
/* |
||||
* Improves appearance in all browsers |
||||
*/ |
||||
|
||||
small, |
||||
sub, |
||||
sup { |
||||
font-size: 75%; |
||||
} |
||||
|
||||
/* |
||||
* Improves appearance in all browsers |
||||
* gist.github.com/413930 |
||||
*/ |
||||
|
||||
sub, |
||||
sup { |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
|
||||
/* ============================================================================= |
||||
Lists |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Improves appearance of navigation-specific lists |
||||
*/ |
||||
|
||||
nav ul { |
||||
list-style: none; |
||||
} |
||||
|
||||
/* ============================================================================= |
||||
Embedded content |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Corrects display not defined in IE6/7/8/9 & FF3 |
||||
*/ |
||||
|
||||
audio[controls], |
||||
canvas, |
||||
video { |
||||
display: inline-block; |
||||
*display: inline; |
||||
} |
||||
|
||||
audio { |
||||
display: none; |
||||
_display: expression(this.controls ? 'inline' : 'none'); |
||||
*zoom: 1; |
||||
} |
||||
|
||||
audio[controls] { |
||||
display: inline-block; |
||||
} |
||||
|
||||
/* |
||||
* 1. Improves readability when inside 'a' in all browsers |
||||
* 2. Improves visual appearance when scaled in IE7 |
||||
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ |
||||
*/ |
||||
|
||||
img { |
||||
border: 0; /* 1 */ |
||||
-ms-interpolation-mode: bicubic; /* 2 */ |
||||
} |
||||
|
||||
/* |
||||
* Corrects overflow displayed oddly in IE9 |
||||
*/ |
||||
|
||||
svg:not(:root) { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
/* ============================================================================= |
||||
Forms |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Corrects alignment displayed oddly in IE6/7 |
||||
*/ |
||||
|
||||
legend { |
||||
*margin-left: -7px; |
||||
} |
||||
|
||||
/* |
||||
* Improves appearance in all browsers |
||||
*/ |
||||
|
||||
button, |
||||
input, |
||||
select, |
||||
textarea { |
||||
-webkit-appearance: none; |
||||
border-radius: 0; |
||||
vertical-align: baseline; |
||||
*vertical-align: middle; |
||||
} |
||||
|
||||
/* |
||||
* 1. Corrects FF3/4 setting it using !important in the UA stylesheet |
||||
* 2. Corrects spacing displayed oddly in IE6/7 |
||||
* 3. Corrects inability to style clickable 'input' types in iOS |
||||
*/ |
||||
|
||||
button, |
||||
input { |
||||
line-height: normal; /* 1 */ |
||||
_overflow: expression(this.type == 'button|reset|submit' ? 'visible' : ''); /* 2 */ |
||||
} |
||||
|
||||
/* 3 */ |
||||
|
||||
button, |
||||
input[type="button"], |
||||
input[type="reset"], |
||||
input[type="submit"] { |
||||
overflow: visible; |
||||
} |
||||
|
||||
/* |
||||
* Addresses box sizing forced to border-box in IE6/7 |
||||
*/ |
||||
|
||||
input[type="checkbox"], |
||||
input[type="radio"] { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
/* |
||||
* Addresses sizing set oddly to searchfield in S5 iOS C10 |
||||
* Known issue: -moz included to future-proof |
||||
*/ |
||||
|
||||
input[type="search"] { |
||||
-moz-box-sizing: content-box; |
||||
-webkit-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
} |
||||
|
||||
/* |
||||
* Addresses inner padding displayed oddly in S5 C10 on OSX |
||||
*/ |
||||
|
||||
input[type="search"]::-webkit-search-decoration { |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
/* |
||||
* Corrects appearance displayed oddly in FF3/4 |
||||
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ |
||||
*/ |
||||
|
||||
button::-moz-focus-inner, |
||||
input::-moz-focus-inner { |
||||
border: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
/* |
||||
* 1. Corrects scrollbar displayed oddly in IE6/7/8/9 |
||||
* 2. Improves readability and alignment in all browsers |
||||
*/ |
||||
|
||||
textarea { |
||||
overflow: auto; /* 1 */ |
||||
vertical-align: top; /* 2 */ |
||||
} |
||||
|
||||
/* ============================================================================= |
||||
Tables |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Improves visual appearance in all browsers |
||||
*/ |
||||
|
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
} |
@ -0,0 +1,16 @@
|
||||
#main .block .content h2 { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
#main .block .content .active-scaffold-header h2 { |
||||
font-size: 200%; |
||||
} |
||||
|
||||
#main .block .content .active-scaffold th a { |
||||
text-shadow: none; |
||||
} |
||||
|
||||
.flash .alert { |
||||
border: 1px solid #bb9004; |
||||
background: #f9c006 url(<%= asset_path("web-app-theme/themes/default/images/messages/warning.png") %>) no-repeat 10px center; |
||||
} |
@ -0,0 +1,412 @@
|
||||
/* |
||||
Override base to remove zero-reset. |
||||
*/ |
||||
.clear { clear: both; height: 0; } |
||||
|
||||
.wat-cf:after { |
||||
content: "."; |
||||
display: block; |
||||
height: 0; |
||||
clear: both; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.wat-cf {display: inline-block;} |
||||
|
||||
/* Hides from IE-mac \*/ |
||||
* html .wat-cf {height: 1%;} |
||||
.wat-cf {display: block;} |
||||
/* End hide from IE-mac */ |
||||
|
||||
h1 { margin: 15px 0; font-size: 22px; font-weight: normal; } |
||||
h2 { font-size: 22px; margin: 15px 0; font-weight: normal;} |
||||
h3 { font-size: 18px; margin: 10px 0; font-weight: normal;} |
||||
h4 { font-size: 16px; margin: 10px 0; font-weight: normal;} |
||||
hr {height: 1px; border: 0; } |
||||
p { margin: 15px 0;} |
||||
a img { border: none; } |
||||
|
||||
body { |
||||
font-size: 12px; |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
#container { |
||||
min-width: 960px; |
||||
} |
||||
|
||||
#header, #wrapper { |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
#header { |
||||
position: relative; |
||||
padding-top: 1px; |
||||
} |
||||
|
||||
#header h1 { |
||||
margin: 0; |
||||
padding: 10px 0; |
||||
font-size: 26px; |
||||
} |
||||
|
||||
#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
#main { |
||||
width: 70%; |
||||
float: left; |
||||
} |
||||
|
||||
.actions-bar { |
||||
padding: 10px 1px; |
||||
} |
||||
|
||||
.actions-bar .actions { |
||||
float: left; |
||||
} |
||||
|
||||
|
||||
.actions-bar .pagination { |
||||
float: right; |
||||
padding: 1px 0; |
||||
} |
||||
|
||||
#sidebar { |
||||
width: 25%; |
||||
float: right; |
||||
} |
||||
|
||||
#sidebar h3 { |
||||
padding: 10px 15px; |
||||
margin: 0; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
#sidebar .block { |
||||
margin-bottom: 20px; |
||||
padding-bottom: 10px; |
||||
} |
||||
|
||||
#sidebar .block .content { |
||||
padding: 0 15px; |
||||
} |
||||
|
||||
#sidebar ul.navigation li a:link, #sidebar ul.navigation li a:visited { |
||||
display: block; |
||||
padding: 10px 15px; |
||||
} |
||||
|
||||
#sidebar .block .sidebar-block, #sidebar .notice { |
||||
padding:10px; |
||||
} |
||||
|
||||
#wrapper { |
||||
padding-top: 20px; |
||||
} |
||||
|
||||
#main .block { |
||||
margin-bottom: 20px; |
||||
padding-top: 1px; |
||||
} |
||||
|
||||
#main .block .content .inner { |
||||
padding: 0 15px 15px; |
||||
} |
||||
|
||||
#main .main p.first { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
#user-navigation { |
||||
position: absolute; |
||||
top: 0px; |
||||
right: 20px; |
||||
} |
||||
|
||||
#main-navigation { |
||||
width: 100%; |
||||
} |
||||
|
||||
#user-navigation ul, #main-navigation ul, .secondary-navigation ul, #sidebar ul.navigation { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style-type: none; |
||||
} |
||||
|
||||
#user-navigation ul li, #main-navigation ul li, .secondary-navigation ul li { |
||||
float: left; |
||||
} |
||||
|
||||
#main-navigation ul li { |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
#user-navigation ul li { |
||||
padding: 5px 10px; |
||||
} |
||||
|
||||
#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active, |
||||
.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active, |
||||
#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
#main-navigation ul li a { |
||||
font-size: 14px; |
||||
line-height: 14px; |
||||
display: block; |
||||
padding: 8px 15px; |
||||
} |
||||
|
||||
.secondary-navigation { |
||||
font-size: 13px; |
||||
border-bottom-width: 10px; |
||||
border-bottom-style: solid; |
||||
} |
||||
|
||||
.secondary-navigation ul li a { |
||||
display: block; |
||||
padding: 10px 15px; |
||||
} |
||||
|
||||
#footer { |
||||
padding-bottom: 20px; |
||||
} |
||||
|
||||
/* pagination */ |
||||
|
||||
.pagination a, .pagination span, .pagination em { |
||||
padding: 2px 5px; |
||||
margin-right: 5px; |
||||
display: block; |
||||
float: left; |
||||
border-style: solid; |
||||
border-width: 1px; |
||||
} |
||||
|
||||
.pagination em { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.pagination a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
/* tables */ |
||||
.table { |
||||
width: 100%; |
||||
border-collapse: collapse; |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.table th { |
||||
padding: 10px; |
||||
font-weight: bold; |
||||
text-align: left; |
||||
} |
||||
|
||||
.table th.first { |
||||
width: 30px; |
||||
} |
||||
|
||||
.table th.last { |
||||
width: 200px; |
||||
} |
||||
|
||||
.table .checkbox { |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.table td { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.table td.last { |
||||
text-align: right; |
||||
} |
||||
|
||||
/* forms */ |
||||
|
||||
input.checkbox { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.form .group { |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.form div.left { |
||||
width: 20%; |
||||
float: left; |
||||
} |
||||
|
||||
.form div.right { |
||||
width: 75%; |
||||
float: right; |
||||
} |
||||
|
||||
.form .columns .column { |
||||
width: 48%; |
||||
} |
||||
|
||||
.form .columns .left { |
||||
float: left; |
||||
} |
||||
|
||||
.form .columns .right { |
||||
float: right; |
||||
} |
||||
|
||||
.form label.label, .form input.text_field, .form textarea.text_area { |
||||
font-size: 1.2em; |
||||
padding: 1px 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
.form label.right { |
||||
text-align: right; |
||||
} |
||||
|
||||
.form input.checkbox, .form input.radio { |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.form label.checkbox, .form label.radio { |
||||
line-height: 1.5em; |
||||
} |
||||
|
||||
.form label.label { |
||||
display: block; |
||||
padding-bottom: 2px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.form div.fieldWithErrors label.label { |
||||
display: inline; |
||||
} |
||||
|
||||
.form .fieldWithErrors .error { |
||||
color: red; |
||||
} |
||||
|
||||
.form input.text_field, .form textarea.text_area { |
||||
width: 100%; |
||||
border-width: 1px; |
||||
border-style: solid; |
||||
} |
||||
|
||||
/* lists */ |
||||
|
||||
ul.list { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style-type: none; |
||||
} |
||||
|
||||
ul.list li { |
||||
clear: left; |
||||
padding-bottom: 5px; |
||||
} |
||||
|
||||
ul.list li .left { |
||||
float: left; |
||||
} |
||||
|
||||
ul.list li .left .avatar { |
||||
width: 50px; |
||||
height: 50px; |
||||
} |
||||
|
||||
ul.list li .item { |
||||
margin-left: 80px; |
||||
} |
||||
|
||||
ul.list li .item .avatar { |
||||
float: left; |
||||
margin: 0 5px 5px 0; |
||||
width: 30px; |
||||
height: 30px; |
||||
} |
||||
|
||||
/* box */ |
||||
|
||||
#box { |
||||
width: 500px; |
||||
margin: 50px auto; |
||||
} |
||||
|
||||
#box .block { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
#box .block h2 { |
||||
padding: 10px 15px; |
||||
margin: 0; |
||||
} |
||||
|
||||
#box .block .content { |
||||
padding: 10px 20px; |
||||
} |
||||
|
||||
/* Inspired by http://particletree.com/features/rediscovering-the-button-element */ |
||||
|
||||
a.button:link, a.button:visited, a.button:hover, a.button:active, button.button { |
||||
color: #222; |
||||
display:block; |
||||
float:left; |
||||
margin:0 7px 0 0; |
||||
background-color: #eee; |
||||
border:1px solid #bfbfbf; |
||||
font-size: 1em; |
||||
line-height: 1.3em; |
||||
font-weight:bold; |
||||
cursor:pointer; |
||||
padding:5px 10px 6px 7px; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
button.button { |
||||
width:auto; |
||||
overflow:visible; |
||||
padding:4px 10px 3px 7px; /* IE6 */ |
||||
} |
||||
button.button[type] { |
||||
padding:5px 10px 5px 7px; /* Firefox */ |
||||
line-height:17px; /* Safari */ |
||||
} |
||||
|
||||
*:first-child+html button.button[type] { |
||||
padding:4px 10px 3px 7px; /* IE7 */ |
||||
} |
||||
|
||||
button.button img, a.button img { |
||||
margin:0 3px -3px 0 !important; |
||||
padding:0; |
||||
border:none; |
||||
width:16px; |
||||
height:16px; |
||||
} |
||||
|
||||
button.button:hover, a.button:hover { |
||||
background-color:#dedede; |
||||
} |
||||
|
||||
button.button:active, a.button:active { |
||||
background-color:#e5e5e5; |
||||
} |
||||
.text_button_padding{ |
||||
color: #222222; |
||||
display: block; |
||||
float: left; |
||||
font-size: 1em; |
||||
line-height: 2em; |
||||
margin: 0 7px 0 0; |
||||
padding: 5px 0 6px 7px; |
||||
text-decoration: none; |
||||
} |
||||
.link_button{ |
||||
cursor: pointer; |
||||
} |
Loading…
Reference in new issue