CSS refactoring

Refactored CSS stylesheets. Broke down original CSS file into small, more
logical parts

Signed-off-by: Gergely POLONKAI <polesz@w00d5t0ck.info>
This commit is contained in:
Gergely POLONKAI 2012-08-15 11:45:58 +02:00
parent 8309843958
commit 7823ac2847
15 changed files with 580 additions and 502 deletions

View File

@ -0,0 +1,53 @@
/*
Document : eventbox
Created on : 2012.08.15., 11:34:17
Author : Gergely Polonkai
Description:
Event-box styling CSS
*/
#event-box {
position: fixed;
left: 5px;
top: 32px;
width: 250px;
height: 200px;
background-color: #c4d3ff;
border: 2px solid #152967;
color: #152967;
display: none;
}
#event-box td {
text-align: center;
vertical-align: middle;
}
#event-box td.woy {
font-size: 60%;
}
#event-box td.program {
background-color: green;
}
#event-inside p.month {
text-align: center;
margin: 0 5px;
font-weight: bold;
}
#event-inside table {
margin-left: auto;
margin-right: auto;
}
#event-inside {
position: relative;
padding: 5px;
}
#events-button {
float: left;
padding: 5px;
}

View File

@ -0,0 +1,98 @@
/*
Document : forum
Created on : 2012.08.15., 11:40:39
Author : Gergely
Description:
Forum styling CSS
*/
.forum-lista {
border: 1px solid #3366ff;
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
.forum-lista thead td {
font-weight: bold;
height: 1.5em;
border-bottom: 2px solid #3366ff;
padding: 3px;
}
.forum-lista thead td a {
color: #3366ff;
text-decoration: none;
}
.forum-lista tbody td {
padding: 5px;
border-bottom: 1px solid #3366ff;
}
.forum-lista tbody tr.odd td {
background-color: #060c16;
}
.forum-lista tbody tr.even td {
background-color: #000000;
}
.forum-lista tbody td a {
color: #3366ff;
text-decoration: underline;
}
.post-lista {
border: 1px solid #3366ff;
border-collapse: collapse;
}
.post-lista td {
border-style: solid;
border-color: #3366ff;
border-width: 3px 1px;
vertical-align: top;
padding: 5px;
}
.post-lista td.felado {
width: 150px !important;
font-size: 80%;
}
.post-lista td.szoveg {
width: 510px;
}
.post-lista td.szoveg div {
width: 510px;
overflow: auto;
}
td.uj-post {
}
td.uj-post textarea {
width: 500px;
background-color: #000000;
color: #3366ff;
border-style: solid;
border-color: #3366ff;
border-width: 0 0 2px 0;
height: 15em;
}
td.uj-post p {
clear: both;
float: none;
margin: 0;
}
td.uj-post p .eszkoztar {
float: left;
}
td.uj-post p .kuldes-gomb {
float: right;
}

View File

@ -0,0 +1,17 @@
/*
Document : books.css
Created on : 2012.08.15., 11:41:37
Author : Gergely Polonkai
Description:
Library-styling CSS
*/
#konyvtar-gomb {
float: left;
padding: 5px;
}
#konyvtar-gomb a {
color: inherit;
text-decoration: none;
}

View File

@ -0,0 +1,24 @@
/*
Document : loginbox
Created on : 2012.08.15., 11:32:19
Author : Gergely Polonkai
Description:
Login-box styling CSS
*/
#login-box {
position: fixed;
left: 5px;
top: 32px;
width: 300px;
height: 100px;
background-color: #c4d3ff;
border: 2px solid #152967;
color: #152967;
display: none;
}
#login-belso {
position: relative;
padding: 5px;
}

View File

@ -0,0 +1,175 @@
/*
Document : main
Created on : 2012.08.15., 10:58:08
Author : Gergely Polonkai
Description:
Main stylesheet
*/
* {
font-family: sans-serif;
font-size: 14px;
}
body {
margin: 0;
background-color: #001100;
background-image: url('../images/rose_bg.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
a {
color: inherit;
text-decoration: underline;
}
#top-line {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #152967;
color: #c4d3ff;
height: 32px;
border-bottom: 1px solid #1b3586;
}
#top-line-padding {
height: 33px;
clear: both;
}
#top-line #search-box {
float: right;
padding: 5px;
}
#top-line #login-gomb {
float: left;
padding: 5px;
}
#top-line #profil-gomb {
float: left;
padding: 5px;
}
#bottom-line-padding {
height: 33px;
}
#bottom-line {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #152967;
color: #c4d3ff;
height: 32px;
border-top: 1px solid #1b3586;
}
#wrapper {
background-color: #000000;
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header {
height: 270px;
background-image: url('../images/fejlec.jpg');
}
#header h1 {
display: none;
}
#content-wrapper {
background-color: #0e0e0e;
}
#content-outline {
color: #3366ff;
text-align: justify;
width: 740px;
float: left;
background-color: #c6ecfe;
}
#content {
padding: 5px;
}
#hirek {
float: right;
color: #aaaacc;
width: 215px;
}
#hirek h3 {
padding: 10px;
margin: 15px 0 0 0;
}
div.hir {
padding: 5px;
font-size: 80%;
margin-bottom: 15px;
}
p.hir-cim {
font-weight: bold;
margin: 0 0 5px 0;
}
p.hir-szoveg {
text-align: justify;
margin: 10px 0;
}
p.hir-szerzo {
font-style: italic;
text-align: right;
margin: 0;
}
p.hir-datum {
text-align: right;
margin: 0;
}
h3 a {
color: #3366ff;
text-decoration: none;
}
.u {
text-decoration: underline;
}
.b {
font-weight: bold;
}
.i {
font-style: italic;
}
.gomb {
background-color: #cccccc;
color: black;
white-space: nowrap;
cursor: pointer;
}
#top-line .gomb {
background-color: transparent;
color: #c4d3ff;
}
.gomb a {
color: inherit !important;
}

View File

@ -0,0 +1,31 @@
/*
Document : menu
Created on : 2012.08.15., 11:10:44
Author : Gergely Polonkai
Description:
Menu stylesheet
*/
#menu {
background-color: #29140d;
border-radius: 15px 15px 0 0;
border-color: #29140d;
font-size: 80%;
height: 50px;
}
#menu ul {
margin: 0;
padding: 17px 0 0 20px;
}
#menu li {
list-style-type: none;
display: inline;
}
#menu a {
color: #ffffff;
margin-right: 5px;
padding: 0 15px;
}

View File

@ -0,0 +1,100 @@
/*
Document : popup
Created on : 2012.08.15., 11:29:58
Author : Gergely Polonkai
Description:
Popup DIV styling CSS
*/
#popup-container {
display: none;
position: fixed;
height: 300px;
width: 200px;
background: #ffffff;
z-index: 80;
}
#popup-close {
position: absolute;
width: 16px;
height: 16px;
top: -5px;
right: -5px;
background-image: url('../images/no.png');
}
#popup-inside {
border: 1px solid black;
height: 292px;
width: 192px;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
}
#popup-title {
font-weight: bold;
padding: 5px;
}
#popup-content {
padding: 3px;
}
#popup-scrollable {
width: 192px;
clear: both;
margin: 20px 0 10px;
}
#popup-scrollable .viewport {
width: 172px;
height: 246px;
overflow: hidden;
position: relative;
}
#popup-scrollable .overview {
list-style: none;
position: absolute;
left: 0;
top: 0;
}
#popup-scrollable .thumb .end, #popup-scrollable .thumb {
background-color: #003D5D;
}
#popup-scrollable .scrollbar {
position: relative;
float: right;
width: 15px;
}
#popup-scrollable .track {
background-color: #D8EEFD;
height: 100%;
width: 13px;
position: relative;
padding: 0 1px;
}
#popup-scrollable .thumb {
height: 20px;
width: 13px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: 0;
}
#popup-scrollable .thumb .end {
overflow: hidden;
height: 5px;
width: 13px;
}
#popup-scrollable .disable {
display: none;
}

View File

@ -0,0 +1,34 @@
/*
Document : profilebox
Created on : 2012.08.15., 11:31:41
Author : Gergely Polonkai
Description:
Profile-box styling CSS
*/
#profil-box {
position: fixed;
left: 5px;
top: 32px;
width: 300px;
height: 400px;
background-color: #c4d3ff;
border: 2px solid #152967;
color: #152967;
display: none;
}
#profil-belso {
position: relative;
padding: 5px;
}
#profil-box dt {
font-weight: bold;
}
#profil-szerkesztes {
position: absolute;
bottom: 5px;
right: 5px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

View File

Before

Width:  |  Height:  |  Size: 894 B

After

Width:  |  Height:  |  Size: 894 B

View File

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 61 KiB

View File

@ -1,10 +1,10 @@
{# vim: ft=htmljinja {# vim: ft=htmljinja
#} #}
<div id="esemenyek-gomb"> <div id="events-button">
<span id="esemeny-mutato" class="gomb">[események gomb]</span> <span id="event-shower" class="gomb">[események gomb]</span>
<div id="esemeny-box"> <div id="event-box">
<div id="esemeny-belso"> <div id="event-inside">
<p class="honap">{{ firstDay|date('Y-m') }}</p> <p class="month">{{ firstDay|date('Y-m') }}</p>
<table> <table>
<thead> <thead>
<tr> <tr>

View File

@ -2,20 +2,32 @@
#} #}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Kék Rózsák{% block title %}{% endblock %}</title> <title>Kék Rózsák{% block title %}{% endblock %}</title>
<meta charset="utf8" /> <meta charset="utf8" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/kekrozsak_front.css') }}" /> <link rel="stylesheet" type="text/css" href="{{ asset('css/kekrozsak_front.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('js/jquery-cluetip/jquery.cluetip.css') }}" /> <link rel="stylesheet" type="text/css" href="{{ asset('js/jquery-cluetip/jquery.cluetip.css') }}" />
{% stylesheets
'../app/Resources/public/css/main.css'
'../app/Resources/public/css/menu.css'
'../app/Resources/public/css/popup.css'
'../app/Resources/public/css/profilebox.css'
'../app/Resources/public/css/loginbox.css'
'../app/Resources/public/css/eventbox.css'
'../app/Resources/public/css/forum.css'
'../app/Resources/public/css/library.css'
filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% block additional_css %}{% endblock %} {% block additional_css %}{% endblock %}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('js/jquery-cluetip/lib/jquery.hoverIntent.js')}}"></script> <script type="text/javascript" src="{{ asset('js/jquery-cluetip/lib/jquery.hoverIntent.js')}}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-cluetip/jquery.cluetip.js') }}"></script> <script type="text/javascript" src="{{ asset('js/jquery-cluetip/jquery.cluetip.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery.tinyscrollbar.min.js') }}"></script> <script type="text/javascript" src="{{ asset('js/jquery.tinyscrollbar.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script> <script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script type="text/javascript" src="{{ path('fos_js_routing_js', {callback: 'fos.Router.setData'}) }}"></script> <script type="text/javascript" src="{{ path('fos_js_routing_js', {callback: 'fos.Router.setData'}) }}"></script>
{% block additional_js %}{% endblock %} {% block additional_js %}{% endblock %}
</head> </head>
<body> <body>
<div id="popup-container"> <div id="popup-container">
<div id="popup-close"></div> <div id="popup-close"></div>
@ -65,8 +77,7 @@
</ul> </ul>
</div> </div>
<div id="header"> <div id="header">
<h1><a href="{{ path('KekRozsakFrontBundle_homepage') }}"><img src="{{ asset('images/kek_rozsak_felirat.jpg') }}" alt="Kék Rózsák" /></a></h1> <h1>Kék Rózsák</h1>
<h2><img src="{{ asset('images/okkultista_kor_felirat.jpg') }}" alt="A Kék Rózsa okkultista kör honlapja" /></h2>
</div> </div>
<div id="content-wrapper"> <div id="content-wrapper">
<div id="content-outline"> <div id="content-outline">
@ -113,14 +124,14 @@
$('.program').cluetip({ $('.program').cluetip({
cluezIndex: 1000 cluezIndex: 1000
}); });
$('#esemeny-mutato').click(function() { $('#event-shower').click(function() {
if ($('#esemeny-box').is(':visible')) if ($('#event-box').is(':visible'))
{ {
$('#esemeny-box').hide(); $('#event-box').hide();
} }
else else
{ {
$('#esemeny-box').show(); $('#event-box').show();
} }
}); });
$('.userdata').cluetip(); $('.userdata').cluetip();
@ -174,6 +185,20 @@
$('#popup-content').html('Nem sikerült betölteni a könyv adatait.'); $('#popup-content').html('Nem sikerült betölteni a könyv adatait.');
}); });
} }
$(document).ready(function() {
bottomLineTop = $('#bottom-line').position().top;
contentOutlineTop = $('#content-outline').position().top;
contentHeight = $('#content-outline').outerHeight();
newsHeight = $('#hirek').outerHeight();
minHeight = bottomLineTop - contentOutlineTop;
height = Math.max(contentHeight, newsHeight, minHeight);
if ($('#content-outline').outerHeight() < height)
$('#content-outline').css('height', height + 'px');
if ($('#hirek').outerHeight() < height)
$('#hirek').css('height', height + 'px');
});
</script> </script>
{% block bottomscripts %}{% endblock %} {% block bottomscripts %}{% endblock %}
</body> </body>

View File

@ -1,479 +0,0 @@
* {
font-family: sans-serif;
font-size: 14px;
}
body {
margin: 0;
background-color: black;
background-image: url('../images/rose_bg.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
#top-line {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #152967;
color: #c4d3ff;
height: 32px;
border-bottom: 1px solid #1b3586;
}
#top-line-padding {
height: 33px;
clear: both;
}
#top-line #search-box {
float: right;
padding: 5px;
}
#top-line #login-gomb {
float: left;
padding: 5px;
}
#top-line #profil-gomb {
float: left;
padding: 5px;
}
#bottom-line-padding {
height: 33px;
}
#profil-box {
position: fixed;
left: 5px;
top: 32px;
width: 300px;
height: 400px;
background-color: #c4d3ff;
border: 2px solid #152967;
color: #152967;
display: none;
}
#profil-belso {
position: relative;
padding: 5px;
}
#profil-box dt {
font-weight: bold;
}
#profil-szerkesztes {
position: absolute;
bottom: 5px;
right: 5px;
}
#login-box {
position: fixed;
left: 5px;
top: 32px;
width: 300px;
height: 100px;
background-color: #c4d3ff;
border: 2px solid #152967;
color: #152967;
display: none;
}
#esemeny-box {
position: fixed;
left: 5px;
top: 32px;
width: 250px;
height: 200px;
background-color: #c4d3ff;
border: 2px solid #152967;
color: #152967;
display: none;
}
#esemeny-box td {
text-align: center;
vertical-align: middle;
}
#esemeny-box td.woy {
font-size: 60%;
}
#esemeny-box td.program {
background-color: green;
}
#esemeny-belso p.honap {
text-align: center;
margin: 0 5px;
font-weight: bold;
}
#esemeny-belso table {
margin-left: auto;
margin-right: auto;
}
#login-belso {
position: relative;
padding: 5px;
}
#esemeny-belso {
position: relative;
padding: 5px;
}
#esemenyek-gomb {
float: left;
padding: 5px;
}
#konyvtar-gomb {
float: left;
padding: 5px;
}
#konyvtar-gomb a {
color: inherit;
text-decoration: none;
}
#bottom-line {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #152967;
color: #c4d3ff;
height: 32px;
border-top: 1px solid #1b3586;
}
#wrapper {
background-color: #000000;
width: 960px;
margin-left: auto;
margin-right: auto;
}
#menu {
background-color: #29140d;
background-image: gradient(top, #4e1e0b, #29140d);
border-radius: 15px 15px 0 0;
border-color: #29140d;
font-size: 80%;
height: 50px;
}
#menu ul {
margin: 0;
padding: 17px 0 0 20px;
}
#menu li {
list-style-type: none;
display: inline;
}
#menu a {
color: #ffffff;
margin-right: 5px;
padding: 0 15px;
}
#header {
height: 270px;
background-image: url('../images/fejlec.jpg');
}
#header h1 {
margin: 0;
padding-left: 96px;
padding-top: 95px;
}
#header h2 {
margin: 0;
padding-left: 15px;
padding-top: 20px;
}
#content-wrapper {
background-color: #0e0e0e;
}
#content-outline {
color:#3366ff;
text-align: justify;
width: 740px;
float: left;
}
#content {
padding: 5px;
}
#hirek {
float: right;
color: #aaaacc;
width: 215px;
}
#hirek h3 {
padding: 10px;
margin: 15px 0 0 0;
}
div.hir {
padding: 5px;
font-size: 80%;
margin-bottom: 15px;
}
p.hir-cim {
font-weight: bold;
margin: 0 0 5px 0;
}
p.hir-szoveg {
text-align: justify;
margin: 10px 0;
}
p.hir-szerzo {
font-style: italic;
text-align: right;
margin: 0;
}
p.hir-datum {
text-align: right;
margin: 0;
}
h3 a {
color: #3366ff;
text-decoration: none;
}
.forum-lista {
border: 1px solid #3366ff;
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
.forum-lista thead td {
font-weight: bold;
height: 1.5em;
border-bottom: 2px solid #3366ff;
padding: 3px;
}
.forum-lista thead td a {
color: #3366ff;
text-decoration: none;
}
.forum-lista tbody td {
padding: 5px;
border-bottom: 1px solid #3366ff;
}
.forum-lista tbody tr.odd td {
background-color: #060c16;
}
.forum-lista tbody tr.even td {
background-color: #000000;
}
.forum-lista tbody td a {
color: #3366ff;
text-decoration: underline;
}
.post-lista {
border: 1px solid #3366ff;
border-collapse: collapse;
}
.post-lista td {
border-style: solid;
border-color: #3366ff;
border-width: 3px 1px;
vertical-align: top;
padding: 5px;
}
.post-lista td.felado {
width: 150px !important;
font-size: 80%;
}
.post-lista td.szoveg {
width: 510px;
}
.post-lista td.szoveg div {
width: 510px;
overflow: auto;
}
td.uj-post {
}
td.uj-post textarea {
width: 500px;
background-color: #000000;
color: #3366ff;
border-style: solid;
border-color: #3366ff;
border-width: 0 0 2px 0;
height: 15em;
}
td.uj-post p {
clear: both;
float: none;
margin: 0;
}
td.uj-post p .eszkoztar {
float: left;
}
td.uj-post p .kuldes-gomb {
float: right;
}
.u {
text-decoration: underline;
}
.b {
font-weight: bold;
}
.i {
font-style: italic;
}
#popup-container {
display: none;
position: fixed;
height: 300px;
width: 200px;
background: #ffffff;
z-index: 80;
}
#popup-close {
position: absolute;
width: 16px;
height: 16px;
top: -5px;
right: -5px;
background-image: url('../images/no.png');
}
#popup-inside {
border: 1px solid black;
height: 292px;
width: 192px;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
}
#popup-title {
font-weight: bold;
padding: 5px;
}
#popup-content {
padding: 3px;
}
#popup-scrollable {
width: 192px;
clear: both;
margin: 20px 0 10px;
}
#popup-scrollable .viewport {
width: 172px;
height: 246px;
overflow: hidden;
position: relative;
}
#popup-scrollable .overview {
list-style: none;
position: absolute;
left: 0;
top: 0;
}
#popup-scrollable .thumb .end, #popup-scrollable .thumb {
background-color: #003D5D;
}
#popup-scrollable .scrollbar {
position: relative;
float: right;
width: 15px;
}
#popup-scrollable .track {
background-color: #D8EEFD;
height: 100%;
width: 13px;
position: relative;
padding: 0 1px;
}
#popup-scrollable .thumb {
height: 20px;
width: 13px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: 0;
}
#popup-scrollable .thumb .end {
overflow: hidden;
height: 5px;
width: 13px;
}
#popup-scrollable .disable {
display: none;
}
.gomb {
background-color: #cccccc;
color: black;
white-space: nowrap;
cursor: pointer;
}
#top-line .gomb {
background-color: transparent;
color: #c4d3ff;
}
.gomb a {
color: inherit !important;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB