]> git.0d.be Git - panikdb.git/blobdiff - panikdb/static/css/style.css
add page to view/edit profile
[panikdb.git] / panikdb / static / css / style.css
index 81357ac4b588e87dc40065d71e6538e34aaa3b5f..aa663f5a7ad974934faa4e7af53cd761c6d02127 100644 (file)
-/* theme derived and inspired by TerraFirma
- * <http://www.oswd.org/design/information/id/3557/>
- */
-
-@font-face {
-  font-family: "FontAwesome";
-  src: url('fontawesome-webfont.eot');
-  src: url('fontawesome-webfont.eot?#iefix') format('eot'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf') format('truetype'), url('fontawesome-webfont.svg#FontAwesome') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-html {
-       margin: 0;
-       background: #F9F9F7 url(../images/a1.gif) repeat-x;
-}
-
-/* bootstrap <sigh/> */
-h1, h2, h3, h4 {
-       font-family: sans-serif;
-}
-
-body {
-       margin: 0;
-       background: transparent;
-       color: #8c8c73;
-       line-height: inherit;
-       font-size: 14px;
-}
-
-a {
-       color: #FF7800;
-       text-decoration: underline;
-       transition: all .2s ease-in-out;
-       -webkit-transition: all .2s ease-in-out;
-       -moz-transition: all .2s ease-in-out;
-}
-
-a:hover {
-       text-decoration: none;
-       color: #D76500;
-}
-
-div#user-links {
-       display: inline;
-       padding: 5px;
-       background: rgba(100, 100, 100, 0.8);
-       border-top-right-radius: 6px;
-       border-bottom-left-radius: 6px;
-}
-
-div#user-links a {
-       color: white;
-       text-decoration: none;
-}
-
-div#user-links a:hover {
-       text-shadow: 1px 1px 1px black;
+div#header {
+       background: #282f2e url(../images/banner-1054.png) no-repeat 0px top;
+       height: 93px;
 }
 
-div#wrap {
-       background: white;
-       margin: 3em auto;
-       margin-bottom: 0;
-       padding: 15px;
-       border-radius: 6px;
-       -moz-border-radius: 6px;
-       -webkit-border-radius:6px;
-       box-shadow: 0 0 4px rgba(0,0,0,0.75);
-       -moz-box-shadow: 0 0 4px rgba(0,0,0,0.75);
-       -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.75);
+div#top {
+       float: right;
+       background: rgba(0, 0, 0, 0.8);
+       height: auto;
+       box-sizing: border-box;
+       padding: 1ex;
+       color: #eee;
        position: relative;
-       width: 90%;
+       z-index: 1000;
+       border-radius: 0 0 0 1ex;
 }
 
-#header
-{
-       position: absolute;
-       background: #FF7800 url(../images/a8.gif) repeat-x;
-       border-radius: 6px 0 0 6px;
-       -moz-border-radius: 6px 0 0 6px;
-       -webkit-border-radius: 6px 0 0 6px;
-       width: 212px;
-       width: 212px;
-       height: 92px;
-       color: #fff;
-       padding-left: 10px;
-       z-index: 14;
-}
-
-#header h1
-{
-       font-size: 23px;
-       letter-spacing: -1px;
-       padding-top: 30px;
-       margin: 0;
-}
-
-#header span
-{
-       margin: 0;
-       font-size: 10px;
-       font-weight: normal;
-       color: #FCE2CA;
+div#top a {
+       padding: 0 1ex;
+       color: white;
 }
 
-#header h1 a,
-#header span a {
-       color: white;
-       text-decoration: none;
+div#main-content {
+       padding-top: 0;
+       overflow: visible;
 }
 
-#splash
-{
-       position: absolute;
-       right: 15px;
-       background: #282f2e url(../images/banner-1054.png) no-repeat 0px top;
-       width: 90%;
-       height: 87px;
-       border-radius: 0 6px 6px 0;
-       -moz-border-radius: 0 6px 6px 0;
-       -webkit-border-radius: 0 6px 6px 0;
-       z-index: 10;
-       color: white;
-       font-weight: bold;
-       text-align: right;
-       padding-top: 5px;
+div#more-user-links {
+       margin-top: -1ex;
+       margin-bottom: 1em;
 }
 
 div#content {
-       margin: 1em 1ex;
-       margin-top: 100px;
-       padding: 7px;
-       position: relative;
+       margin-top: 1ex;
 }
 
 div#appbar button,
@@ -141,6 +41,7 @@ div#appbar span {
        padding-right: 15px;
        right: 10px;
        top: 20px;
+       z-index: 10;
 }
 
 div#appbar button {
@@ -149,11 +50,11 @@ div#appbar button {
 }
 
 div#appbar a {
-        font-size: 80%;
-        font-weight: normal;
+       font-size: 80%;
+       font-weight: normal;
 }
 
-div#content h2 {
+div#content h3 {
        margin-top: 0;
        font-weight: normal;
        color: #656551;
@@ -161,44 +62,52 @@ div#content h2 {
        letter-spacing: -1px;
        line-height: 25px;
        margin-bottom: 20px;
-       padding: 0 0 10px 15px;
-       position: relative;
-       top: 4px;
-       background: url(../images/a22.gif) bottom repeat-x;
 }
 
-div#content ul {
+ul.episode-list {
        line-height: 1.5em;
        padding: 1ex 2ex 1ex 3ex;
 }
 
-#footer
-{
-       font-size: 70%;
-       position: relative;
+hr {
        clear: both;
-       height: 66px;
-       text-align: center;
-       line-height: 66px;
-       background-image: url(../images/a50.gif);
-       color: #A8A88D;
+       border: 0;
+       border-bottom: 1px solid #888;
+       margin: 10px auto 20px auto;
+       width: 80%;
+}
+
+body.login div#search,
+body.login div#more-user-links {
+       display: none;
+}
+
+body.login #header {
+       border: 1px solid #666;
+}
+
+body.login #main {
+       max-width: 100ex;
+       margin: 0 auto;
 }
 
-#footer a
-{
-       color: #8C8C73;
+body.login #content {
+       background: white;
+       padding: 1rem;
 }
 
+body.login div#main-content {
+       border-width: 0 1px 1px 1px;
+       box-sizing: border-box;
+}
 
 form#login-form p {
        float: left;
        width: 40%;
 }
 
-form input.submit {
-       float: right;
-       width: 18%;
-       margin-top: 30px;
+form#login-form button {
+       margin-top: 1.8rem;
 }
 
 div.login-actions {
@@ -210,10 +119,6 @@ div.login-actions p {
        margin: 0;
 }
 
-form p {
-       margin: 0 0 1em 0;
-}
-
 form.inline p label {
   display: inline;
 }
@@ -225,54 +130,15 @@ form .inline li {
   display: inline;
 }
 
-form p label {
-       display: block;
-}
-
-form p input,
-form p textarea {
-       margin-left: 10px;
-}
-
-ul.errorlist {
-       margin: 0;
-       padding: 0;
-       color: #e80404;
-       list-style: none;
-}
-
-input, textarea {
+span.add-on {
        padding: 5px;
        border: 1px solid #cccccc;
        color:#666666;
        background: white;
        color: black;
        -webkit-border-radius: 4px;
-}
-
-textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
-       border: 1px solid #4690d6;
-       color:#333333;
-}
-
-input[type=submit] {
-       color: #ffffff;
-       background:#4690d6;
-       border: 1px solid #2a567f;
-       font-weight: bold;
-       padding: 2px 8px 2px 8px;
-       margin: 0;
-       cursor: pointer;
-}
-
-input[type=submit]:hover {
-       border-color: #0e1d2b;
-}
-
-form#login-form ul.errorlist {
-       margin-bottom: 1em;
-       width: 80%;
-       font-weight: normal;
+       -moz-border-radius: 4px;
+       border-radius: 4px;
 }
 
 div#content h4 {
@@ -280,35 +146,6 @@ div#content h4 {
        margin-top: 30px;
 }
 
-div.errors {
-       margin: 0;
-       padding: 0;
-       color: #e80404;
-       list-style: none;
-}
-
-div#breadcrumb {
-       font-size: 80%;
-       margin-bottom: 1em;
-}
-
-form input.submit {
-       position: relative;
-       top: -22px;
-}
-
-form#login-form input.submit {
-       position: relative;
-       top: -5px;
-}
-
-div.content {
-       float: left;
-       width: 82%;
-       margin-left: 8px;
-       margin-top: -10px;
-}
-
 abbr {
        border-bottom: 1px dotted #8c8c73;
        cursor: help;
@@ -334,10 +171,20 @@ margin: 1em 0;
 }
 
 ul.emission-list {
+  column-count: 4;
+  -moz-column-count: 4;
   -webkit-column-count: 4;
 }
 
 ul.episode-list {
+  column-count: 2;
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+}
+
+ul.newsitem-list {
+  column-count: 2;
+  -moz-column-count: 2;
   -webkit-column-count: 2;
 }
 
@@ -381,15 +228,28 @@ a.big-friendly-button:hover {
 }
 
 a.actually-not-that-friendly {
-       background: #F52F2D;
+       border-color: #F52F2D;
+       color: #F52F2D;
        position: absolute;
        right: -10px;
+       padding: 0 1ex;
 }
 
 a.actually-not-that-friendly:hover {
        background: #d01311;
 }
 
+div.two-columns ul.episode-list {
+  column-count: 1;
+  -moz-column-count: 1;
+  -webkit-column-count: 1;
+}
+
+div.two-columns > div {
+       width: 48%;
+       margin-right: 1%;
+       float: left;
+}
 
 .input-append {
        margin-left: 10px;
@@ -401,6 +261,107 @@ a.actually-not-that-friendly:hover {
        padding: 0;
 }
 
+span.add-on {
+       background: #eee;
+       margin-left: 3px;
+}
+
+#s2id_id_category,
+#s2id_id_emission {
+       width: 30em;
+}
+
+.image {
+       text-align: right;
+}
+
+.image img {
+       padding: 5px;
+       max-width: 200px;
+       border: 1px solid #666;
+       float: right;
+       margin: 1em;
+}
+
+.image img.large {
+       max-width: 100%;
+}
+
+span.tag {
+       border: 1px solid #888;
+       border-radius: 1ex;
+       padding: 0 1ex;
+       background: #eee;
+}
+
+div.text {
+       border-bottom: 1px solid #aaa;
+       margin-bottom: 1em;
+}
+
+#piece-details {
+       float: right;
+       margin: 1em;
+}
+
+#piece-details img {
+       padding: 5px;
+       max-width: 200px;
+       border: 1px solid #666;
+}
+
+.matos-piece #id_comment, .matos-piece #id_location {
+       height: 4em;
+       width: 100%;
+}
+
+.pieces-list {
+       padding: 1rem 2rem;
+       background: white;
+       -webkit-column-width: 19em;
+       -moz-column-width: 19em;
+       column-width: 19em;
+}
+
+.pieces-list li {
+       margin-bottom: 6px;
+       margin-right: 2rem;
+}
+
+.matos-loan .loan-infos {
+       float: left;
+       width: 48%;
+}
+
+.matos-loan .loan-pieces {
+       float: right;
+       width: 48%;
+}
+
+.matos-loan .buttons {
+       clear: both;
+}
+
+.soma-list .filepath {
+       font-size: 80%;
+       color: #888;
+}
+
+.trackartist {
+       font-size: 80%;
+}
+
+.artists-list {
+       -webkit-column-width: 15em;
+       -moz-column-width: 15em;
+       column-width: 15em;
+}
+
+.on-air-False {
+       opacity: 0.5;
+}
+
+[class^="icon-"]:after, [class*=" icon-"]:after,
 [class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: FontAwesome;
   font-weight: normal;
@@ -425,3 +386,252 @@ a [class^="icon-"], a [class*=" icon-"] {
 .icon-circle-arrow-right:before   { content: "\f0a9"; }
 .icon-music:before                { content: "\f001"; }
 .icon-th:before                   { content: "\f00a"; }
+.icon-eye-open:before             { content: "\f06e "; }
+.icon-bar-chart:before            { content: "\f080 "; }
+.icon-search:before               { content: "\f002 "; }
+.icon-signout:before              { content: "\f08b "; }
+.icon-pushpin:before              { content: "\f08d "; }
+
+.icon-circle-arrow-down:after     { content: "  \f0ab"; }
+.icon-arrow-left:after            { content: "\f060"; }
+.icon-arrow-right:after           { content: "\f061"; }
+
+div#placeholders {
+       overflow: hidden;
+}
+
+div#placeholders h3 {
+       margin-bottom: 0;
+       line-height: 100%;
+       padding: 0.5ex 1ex;
+}
+
+body.combo div.select2-container {
+       width: 100%;
+}
+
+body.combo a.view-online {
+       display: none;
+}
+
+div.nonstop-stats h3 span {
+       font-weight: normal;
+       font-size: 70%;
+}
+
+div#content div#available-cells ul {
+       padding: 0;
+}
+
+div.poll {
+       border-radius: 10px;
+       margin: 0 auto;
+       text-align: center;
+       max-width: 30em;
+       background: #FF7600;
+       border: 1px solid red;
+}
+
+div.poll a {
+       display: inline-block;
+       width: 100%;
+       padding: 3em;
+       color: white;
+       font-weight: bold;
+}
+
+form.poll img {
+       margin-left: 1em;
+       margin-right: 4em;
+}
+
+form.poll p {
+       margin-top: 1em;
+}
+
+form.poll textarea {
+       width: 100%;
+       max-width: 40em;
+       height: 10em;
+}
+
+form.poll div.buttons {
+       margin-top: 1em;
+}
+
+form.poll div.error {
+       padding: 1ex;
+       max-width: 40em;
+       margin: 2em;
+       border: 2px solid red;
+}
+
+table#playlist {
+       border-spacing: 1em;
+       border-collapse: unset;
+       width: 100%;
+}
+
+table#playlist td.playlist-title {
+       border: 1px outset black;
+       background: #eee;
+       text-align: center;
+       padding: 1ex;
+       cursor: pointer;
+       position: relative;
+}
+
+table#playlist .shortcut {
+       position: absolute;
+       right: 1ex;
+       font-size: 90%;
+}
+
+table#playlist td:last-child {
+       color: #444;
+       font-style: italic;
+}
+
+.button-done {
+       opacity: 0.5;
+}
+
+table#playlist td.handle {
+       width: 10px;
+       color: white;
+       background: #666;
+       cursor: grab;
+}
+
+body.submitting {
+       opacity: 0.5;
+       pointer-events: none;
+}
+
+div#content ul.team {
+       padding: 0;
+       padding-left: 1ex;
+       margin: 0;
+}
+
+ul.team li {
+       display: inline;
+       padding: 0;
+       margin: 0;
+}
+
+ul.team li::after {
+       content: " / ";
+}
+
+div.two-columns.schedule-team {
+       width: 60%;
+}
+
+div.two-columns.schedule-team > div:first-child {
+       width: 30%;
+}
+
+div.two-columns.schedule-team > div:nth-child(2) {
+       width: 68%;
+}
+
+.extra-actions-menu {
+       display: none;
+}
+
+ul.gallery li {
+       display: inline-block;
+       position: relative;
+       padding-bottom: 20px;
+}
+
+ul.gallery li span.image-actions {
+       position: absolute;
+       bottom: 0;
+       right: 0;
+}
+
+table {
+       max-width: 100%;
+       border-collapse: collapse;
+       border-spacing: 0;
+}
+
+.dropdown-menu {
+       position: absolute;
+       top: 100%;
+       left: 0;
+       z-index: 1000;
+       display: none;
+       float: left;
+       min-width: 160px;
+       padding: 5px 0;
+       margin: 2px 0 0;
+       margin-top: 2px;
+       font-size: 14px;
+       list-style: none;
+       background-color: #ffffff;
+       border: 1px solid #cccccc;
+       border: 1px solid rgba(0, 0, 0, 0.15);
+       border-radius: 4px;
+       -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+       box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+       background-clip: padding-box;
+}
+
+div#search {
+       position: absolute;
+       top: 40px;
+       right: 10px;
+}
+
+select#id_datetime_0, select#id_datetime_1, select#id_datetime_2 {
+       width: auto;
+       margin-right: 1em;
+}
+
+div.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
+       content: "×";
+}
+
+form#track-search p {
+       float: left;
+       margin-right: 1em;
+}
+
+form#track-search button {
+       margin-top: 2.5ex;
+}
+
+#more-user-links a {
+       background: white;
+       border: 1px solid #386ede;
+       padding: 1ex;
+       border-radius: 3px;
+       font-weight: bold;
+}
+
+.home .block {
+       background: white;
+       padding: 1rem;
+       margin-bottom: 1rem;
+       border-radius: 3px;
+}
+
+.home .block hr {
+       border-color: white;
+}
+
+.action-see-online {
+       display: none;
+}
+
+.select2-container {
+       min-width: 90%;
+}
+
+div#content div.section > h3 {
+       background: linear-gradient(to right, #386ede 30%, #00d6eb 100%);
+       color: white;
+}