From 236587e77e8905e1879f467c1af12f75df930f95 Mon Sep 17 00:00:00 2001 From: Alinson Xavier Date: Sat, 5 Sep 2015 16:28:06 -0400 Subject: [PATCH] Use scss for stylesheets --- app/assets/stylesheets/wiki.scss.erb | 825 +++++++++++++++++++++++++++ 1 file changed, 825 insertions(+) create mode 100644 app/assets/stylesheets/wiki.scss.erb diff --git a/app/assets/stylesheets/wiki.scss.erb b/app/assets/stylesheets/wiki.scss.erb new file mode 100644 index 0000000..c5547ac --- /dev/null +++ b/app/assets/stylesheets/wiki.scss.erb @@ -0,0 +1,825 @@ +$base-font-size: 12px; +@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700); + +* { + margin: 0px; + padding: 0px; + line-height: 1.5 * $base-font-size; +} +a { + text-decoration: none; +} +a:focus { + -moz-outline: none; +} +h1 { + margin: 18px 0px; + line-height: 1.5 * $base-font-size; +} +h2 { + margin: 18px 0px; + line-height: 18px; +} +h3, h4 { + font-size: $base-font-size; +} +ol, dl, ul { + line-height: 1.5 * $base-font-size; + margin: 18px 0px; + padding-left: 36px; +} +ul ul, ol ol { + margin: 0px; +} +.fa { + text-align: middle; + color: #aaa; +} +.box ul { + list-style: none; + padding-left: 18px; +} +.box ul li { + background-image: url(<%= App.base_path %>/assets/bullet.gif); + background-position: 0px 7px; + background-repeat: no-repeat; + padding-left: 15px; +} +.content blockquote { + margin-left: 27px; + border-left: 3px solid #ccc; + padding-left: 12px; + font-style: italic; +} +.content pre { + margin-top: 18px; + padding: 9px 15px; +} +.content code, .content pre { + background-color: #f4f4f4; +} +.content p img.insert_image {} +dt { + margin-top: 9px; + margin-left: -27px; +} +table tr td { + line-height: 1.5 * $base-font-size; +} +table { + border-spacing: 0px; +} +h1, h2, h3, h4 { + font-weight: normal; + padding: 0px 18px; + margin: 18px 0px; +} +h1 { + font-size: 2 * $base-font-size; +} +h2 { + font-size: 1.8 * $base-font-size; +} +h3 { + font-weight: bold; + font-size: $base-font-size; +} +p { + line-height: 1.5 * $base-font-size; + margin-top: 18px; + margin-bottom: 0px; + font-size: $base-font-size; +} +p.middle:first-letter { + padding-left: 18px; +} +p.middle { + margin-top: 0px; +} +body { + color: #222; + margin: 0px; + padding: 0px; + font-family: verdana, sans-serif; + font-weight: normal; + background-color: #fff; + overflow-x: hidden; + +} +#wrapper { + background-color: #f4f4f4; + box-shadow: 2px 2px 2px rgba(0,0,0,0.1); +} +.wrapper2 { + // background-image: url(<%= App.base_path %>/assets/bg_body.png); + // background-repeat: repeat-x; + // background-color: #f4f4f4; + max-width: 1200px; + padding: 1px; + margin: 0px auto; +} +#header { + background-image: url(<%= App.base_path %>/assets/header_bg.png); + background-position: top; + background-repeat: repeat-x; + color: #eee; + height: 50px; + margin: 0px 0px; + box-shadow: 2px 2px 2px #d0d0d0; +} +#header h1 { + color: #eee; + font-size: 2 * $base-font-size; + margin: 0px 0px 0px 48px; + padding: 0px; + display: inline; + line-height: 4.2 * $base-font-size; + font-weight: normal; + float: left; + text-shadow: 2px 2px 2px rgba(0,0,0,0.2); +} +#header_menu { + font-size: 0.9 * $base-font-size; + text-align: right; + height: 22px; + // border-bottom: 3px solid #ddd; + margin: 0px 0px; + margin-top: -22px; + color: #eee; + background-color: transparent !important;; +} +#header_menu ul { + margin: 0px 0px; + float: right; + list-style: none; +} +#header_menu ul li { + float: left; + line-height: 1.5 * $base-font-size; +} +#header_menu a { + color: #ccc; + display: block; + padding: 0px 1.5em; + line-height: 1.5 * $base-font-size; + border-bottom: 0px; +} +#header_menu a:hover { + color: #fff; + text-decoration: none; + border-bottom: 0px; +} +#header_menu ul li.last { + border-right: 0px; +} +#strip { + display: none; + border-bottom: 3px solid #ddd; +} +#site { + padding: 0px; + margin-top: 18px; +} +#footer { + // border-top: 3px solid #f0f0f0; + margin: 0px -9px; + padding: 18px 0px; + text-align: center; + color: #aaa; +} +#footer .fa { + font-size: 175% !important; + vertical-align: middle; +} +#footer p { + margin-top: 0px; +} +.menu { + margin: -3px 0px 15px 0px; + background-color: #fff; +} +.menu ul { + margin: 0px 0px; + padding: 0px; + list-style: none; +} +.menu li, #shoutbox li { + border-top: 1px solid #eee; + margin-top: -1px; + padding: 9px 10px; +} +.menu h1 { + font-size: $base-font-size; + font-weight: bold; + margin: 0px 0em; + padding: 9px; +} +.content { + margin: -3px 0px 0px 0px; + padding: 0em; + background-color: #fff; +} +.content h1 { + margin: 18px 0px; + line-height: 3 * $base-font-size; + font-size: 2 * $base-font-size; +} +.calendario { + border-top: 1px solid #eee; + margin-top: -1px; + padding: 9px 0px; +} +.calendario tr td { + font-size: 0.9 * $base-font-size; + text-align: center; + width: 25px; +} +.calendario th { + font-weight: normal; + font-size: 0.9 * $base-font-size; +} +.otherMonth { + color: #ccc; +} +.specialDay { + background-image: url(<%= App.base_path %>/assets/bg_day.gif); + cursor: pointer; +} +.specialDay a, .specialDay a:hover { + border-bottom: 0px solid #ccc; +} +.widget_users a { + display: block; + float: left; + margin: 1px; +} +.widget_users a:hover { + border-bottom: 0px !important; +} +.widget_users { + padding-bottom: 9px !important; + padding-top: 9px !important; + border-top: 1px solid #eee; +} +.menu h3, .menu h4 { + margin: 0px; + padding: 0px; + font-weight: normal; + font-size: 0.9 * $base-font-size; +} +.menu h4 { + float: right; +} +#location { + margin: 9px 0px -12px 0px; + padding: 6px 18px; +} +#location a { + margin: 0em 9px; + line-height: 1.5 * $base-font-size; +} +#location a:first-child { + margin-left: 0px; +} +.latex { + text-align: center; + margin-bottom: -5px; +} +.wikicmd, .cmd { + font-size: 0.85 * $base-font-size; + float: right; +} +.wikicmd a, .cmd a { + margin: 0px 9px; +} +.cmd a { + line-height: 2.66 * $base-font-size; +} +.box .cmd a { + line-height: 2.66 * $base-font-size; +} +#toc { + display: table; + margin: 16px 18px; + padding: 9px 0px 7px 0px; +} +#toc h1 { + text-align: center; + margin: 0px 18px 0px 18px; + font-size: $base-font-size; + line-height: 1.5 * $base-font-size; +} +#toc ol { + margin: 0px; + padding: 0px 36px; +} +h4.title, h1.title { + margin: 0px 0px -9px 0px; + line-height: 3 * $base-font-size; +} +.box { + margin: 18px 0px; +} +.box h3 { + line-height: 2.83 * $base-font-size; + margin: 0px; + border-bottom: 1px solid #eee; + font-weight: normal !important; +} +.box ul { + margin-top: 0px; + margin-bottom: 0px; + padding-left: 0px; +} +.box li { + background-position: 16px 16px !important; + line-height: 1.5 * $base-font-size; + padding: 9px 0px 8px 32px !important; + border-bottom: 1px solid #f4f4f4; +} +.div_calendario table, .div_news table { + width: 100%; +} +.div_calendario table tr td, .div_news table tr td { + padding-top: 9px; + padding-bottom: 9px; +} +.div_calendario table tr td:first-child, .div_news table tr td:first-child { + padding-left: 18px; +} +.div_calendario .cmd, .div_news .cmd { + margin-top: -9px; + line-weigth: 9px; +} + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * +* Repositorio * +* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + +.repositorio h1, .repositorio p { + padding: 0px; + margin: 0px; +} +.repositorio li h1 { + font-size: $base-font-size; + line-height: 1.5 * $base-font-size; +} +.repositorio li { + background-repeat: no-repeat; + background-position: 16px !important; + list-style: none; + padding: 9px 0px 8px 43px !important; + border-bottom: 1px solid #eee; + line-height: 1.5 * $base-font-size; +} +.repositorio .mime_plain_text { + background-image: url(<%= App.base_path %>/assets/tango/text-x-generic.png); +} +.repositorio .mime_presentation { + background-image: url(<%= App.base_path %>/assets/tango/x-office-presentation.png); +} +.repositorio .mime_document { + background-image: url(<%= App.base_path %>/assets/tango/x-office-document.png); +} +.repositorio .mime_binary { + background-image: url(<%= App.base_path %>/assets/tango/application-x-executable.png); +} +.repositorio .mime_zip { + background-image: url(<%= App.base_path %>/assets/tango/package-x-generic.png); +} +.repositorio .mime_folder { + background-image: url(<%= App.base_path %>/assets/tango/folder.png); +} +.spinner { + float: right; + margin-top: 8px; + margin-right: 5px; +} +select { + min-width: 5em; +} +.message, .notice { + background-color: #690 +} +.warning { + background-color: #c00 +} +.warning a { + color: #fff !important; + border-bottom: 1px dotted #fff !important +} +.message a, .notice a { + color: #fff !important; + border-bottom: 1px dotted #fff !important +} +#errorExplanation { + border-bottom: 2px solid #fdd; + border-right: 2px solid #fdd; + background-color: #fee; + padding: 18px 9px; + color: #422; +} +#passmeter { + margin-left: 5px; + font-size: 0.9 * $base-font-size; +} +#errorExplanation * { + margin: 0px; + font-size: $base-font-size; + line-height: 1.5 * $base-font-size; +} +#errorExplanation h2 { + display: none; + color: #c00; + line-height: 3 * $base-font-size; +} +#errorExplanation p, #errorExplanation h2 { + padding-left: 9px; +} +#errorExplanation ul { + margin-top: 9px; +} +.history { + margin-top: 18px; + margin-left: 18px; +} +.history h4 { + margin-bottom: 0px; +} +.history pre { + background-color: #e0e0e0; + margin-left: 20px; + padding: 9px; +} +.tex_block { + text-align: center; + margin: 18px 0px; +} +img { + vertical-align: middle; +} +input, button, textarea { + border-width: 1px; + padding: 2px 5px; + //xmargin-bottom: 9px; +} +textarea { + width: 100%; +} +.no_itens, .see_all { + color: #aaa; +} +.box .see_all { + font-size: 0.9 * $base-font-size; + background-image: none; + border-bottom-width: 0px; +} +.history input { + margin: 0px 10px 0px 0px; +} +.history td { + line-height: 1.5 * $base-font-size; +} +#wiki_preview { + background-image: url(<%= App.base_path %>/assets/rascunho.png); + border: 2px solid #e4e4e4; + padding: 10px; + overflow: auto; + margin: 18px 0px; +} +.diff { + font-family: monospace; + font-size: $base-font-size; + width: 100%; +} +.diff_add, .diff_del, .diff_line { + padding: 0px 9px 0px 18px; +} +.diff_add { + background-color: #dfd; + border-left: 2px solid #0c0; + border-right: 1px solid #0c0; + color: #050; +} +.diff_line { + background-color: #f3f3f3; + border-left: 2px solid #bbb; + border-right: 1px solid #bbb; + color: #333; +} +.diff_del { + background-color: #fdd; + border-left: 2px solid #c00; + border-right: 1px solid #c00; + color: #500; +} +.diff_space { + height: 18px; + margin-top: 18px; +} +.diff_border_add { + border-top: 1px solid #0c0; +} +.diff_border_del { + border-top: 1px solid #c00; +} +.diff_border_line { + border-top: 1px solid #bbb; +} +.menu, .content, #location { + box-shadow: 2px 2px 2px #d0d0d0; + background-color: #fff; +} +.menu { + padding: 0px 9px; +} +.content { + padding: 9px 18px 36px 18px; +} +form dt, form dd { + margin-left: 0px; +} +form dl { + padding-left: 0px; +} +#header_menu .grey { + opacity: 0.5; +} +.content .grey { + color: #aaa; +} +.avatar { + padding: 2px; + box-shadow: 1px 1px 3px #ccc; + margin: 1px; +} +.card img.avatar { + float: left; + margin: 5px 18px 0px 0px; +} +.user_list { + list-style: none; +} +.user_list li { + background-image: none; +} +.card h1 { + margin-bottom: 0px; +} +.card p { + margin-top: 0px; +} +.color_box { + width: 18px; + height: 18px; + margin: 2px; +} +.color_theme { + float: left; + border: 1px solid #ccc; + margin: 0px 2px; + text-align: center; +} +.color_theme { + margin-top: 5px; +} +.color_theme input { + margin: 3px 0px; +} +.clear { + clear: both; +} +.icon { + margin: 1px 1px !important; +} +.icon img { + background-color: #bbb; + background-repeat: no-repeat; +} +.icon:hover { + border-bottom: 0px; +} +.icon img { + border: 0px solid #fff; +} +.menu .cmd { + line-height: $base-font-size !important; + margin-top: -1px; +} + +/*.box ul li { +border-top: 1px solid #eee; +padding: 9px 0px 9px 15px; +background-position: 0px 12px; +}*/ + +.box table { + margin-bottom: 2px; + border-collapse: collapse; +} +.box table td { + border-top: 1px solid #eee; + padding: 4px 12px; +} +.box table th { + padding: 4px 12px; + border-top: 1px solid #eee; + font-weight: normal; + text-align: left; +} +.box dl { + margin: 0px 18px; +} +.top { + vertical-align: top; +} +.center { + text-align: center !important; +} +.left { + float: left !important; +} +.right { + float: right !important; +} +.aright { + text-align: right !important; +} +.pagination { + margin: 18px 0px; + text-align: right; +} +.fieldWithErrors input, .fieldWithErrors textarea { + border: 2px solid #c00; +} +.insert_image { + display: block; + margin: 0px auto; +} +.narrow { + padding: 4px !important; +} +#wiki_text h2, #wiki_text h3, #wiki_text h4 { + font-weight: bold; +} +#wiki_text h1 { + font-size: 1.66 * $base-font-size; +} +#wiki_text h2 { + font-size: 1.2 * $base-font-size; +} +#wiki_text h3 { + font-size: $base-font-size; +} +#wiki_text h4, #wiki_text h5, #wiki_text h6 { + font-size: 0.9 * $base-font-size; +} +.content ol li { + background-image: none; + padding: 0px; +} +ul ul, ul ol, ol ul, ol ol { + margin: 0px; +} +li p, td p { + margin-top: 0px; +} +.dashboard td:first-child { + padding-left: 27px; +} +.dashboard table tr td { + padding-right: 9px; +} +.dashboard .box ul { + margin-bottom: 0px; +} +form dt p { + margin: 0px; +} +#markup_help { + background-color: #f4f4f4; + border-bottom: 2px solid #eee; + border-right: 2px solid #eee; + margin: 9px 0px; + padding: 1px; +} +#markup_help pre { + margin: 0px; + padding: 0px 9px; + margin: 0px 36px; + border: 1px dotted #aaa; +} +#markup_help h3 { + margin: 18px 0px 9px 0px; +} +#markup_help ul { + margin: 9px 0px; +} +.log_entries .date { + float: left; + width: 50px; + margin: 0px 15px 0px -90px; +} +.log_entries .avatar { + float: left; + margin: 0px 0px 0px -40px; +} +.log_entries * { + vertical-align: top; + background-image: none !important; +} +.log_entries li { + padding-left: 110px !important; +} +ul.nested { + padding-left: 24px; +} +ul.nested li { + padding-top: 5px !important; + padding-bottom: 4px !important; + border-left: 1px solid #eee; +} +#contents { + margin-top: 18px; + padding: 0px 27px 9px 0px; + border: 1px solid #ccc; + width: 300px; +} +#contents h1 { + font-size: $base-font-size; + margin: 0px; + text-align: center; + font-weight: bold; +} +#contents li { + list-style: none; +} +#contents ol { + margin: 0px; + padding: 0px 0px 0px 18px; +} +.box li.show_all { + background-image: none; + font-size: 0.9 * $base-font-size; +} +.wiki-error { + color: #f00; +} +@media all and (min-width: 800px) { + body { + font-size: $base-font-size; + } + .float_panel_left { + float: left; + margin: 3px 0px 0px 0px; + padding: 0em; + } + .float_panel_right { + float: right; + margin: 3px 0px 0px 0px; + padding: 0em; + } + #wrapper { + padding: 0px 9px; + } + #innerwrapper_2column { + padding: 0em 0px 0em 208px; + } + #innerwrapper_3column { + padding: 0em 208px 0em 208px; + } + #innerwrapper_2column .content { + padding: 9px 27px 36px 27px; + } + .menu { + width: 177px; + } + #flash { + float: right; + font-size: 11px; + margin-top: 15px; + margin-right: 9px; + } + .message, .notice, .warning { + color: #fff; + padding: 0px 10px; + border-radius: 3px; + } +} +@media all and (max-width: 800px) { + body { + font-size: $base-font-size; + } + #innerwrapper_2column .content { + padding: 9px; + } + .message, .notice, .warning { + margin: 4px 0px; + padding: 4px 14px; + color: #fff; + box-shadow: 1px 1px 3px #ccc; + } +} + +/*body { background-image: url(<%= App.base_path %>/prototype/line.png); background-repeat: repeat; } +html * { background-color: transparent !important; }*/