From f93191f4061601490c99b60b7a28e183a760f4ac Mon Sep 17 00:00:00 2001 From: mdipierro Date: Wed, 9 Mar 2016 11:55:36 -0600 Subject: [PATCH] new admin --- applications/admin/static/css/stupid.css | 361 +++++++++++++++++++++++ applications/admin/static/css/web2py.css | 204 +++++++++++++ 2 files changed, 565 insertions(+) create mode 100644 applications/admin/static/css/stupid.css create mode 100644 applications/admin/static/css/web2py.css diff --git a/applications/admin/static/css/stupid.css b/applications/admin/static/css/stupid.css new file mode 100644 index 00000000..ee31e646 --- /dev/null +++ b/applications/admin/static/css/stupid.css @@ -0,0 +1,361 @@ +/************ + Created by Massimo Di Pierro + Stupid.css is what the names says, take it with a grain of salt + License: BSD +************/ + +/*** basic styles ***/ +* {border:0; margin:0; padding:0; font-familiy:Helvetica} +html, body {max-width: 100vw !important;overflow-x: hidden !important} +body {font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif} +p, li {margin-bottom:0.5em} +p {text-align:justify} +label, strong {font-weight:bold} +ul {list-style-type:none; padding-left:20px} +a {text-decoration:none; color:#26a69a; white-space:nowrap} +a:hover {cursor:pointer} +h1,h2,h3,h4,h5,h6{font-weight:strong; text-transform:uppercase} +h1{font-size:4em; margin:1.0em 0 0.25em 0} +h2{font-size:2.4em; margin:0.9em 0 0.25em 0} +h3{font-size:1.8em; margin:0.8em 0 0.25em 0} +h4{font-size:1.6em; margin:0.7em 0 0.25em 0} +h5{font-size:1.4em; margin:0.6em 0 0.25em 0} +h6{font-size:1.2em; margin:0.5em 0 0.25em 0} +table {border-collapse:collapse} +tbody tr:hover {background-color:#fbf6d9} +td, th {padding:5px; vertical-align:top; text-align:left; border:0} +thead tr {background-color:#f1f1f1} +tbody tr {border-bottom:2px solid #f1f1f1} +th {font-weight:string; padding:5px; vertical-align:bottom; text-align:left} +thead th {vertical-align:bottom} +tbody th {vertical-align:top} +header, footer {with:100%} + +@media (max-width:599px) { + h1{font-size:2em} + h2{font-size:1.8em} + h3{font-size:1.6em} + h4{font-size:1.4em} + h5{font-size:1.2em} + h6{font-size:1.0em} +} + +/*** buttons ***/ +.btn, button, [type=button], [type=submit] {padding:0.5em 1em !important; margin:0 0.5em 0.5em 0; line-height:2.4em; background-color:#26a69a; color:white} +.btn:hover, button:hover, [type=button]:hover, [type=submit]:hover {box-shadow:0 0 10px #666; text-decoration:none; cursor:pointer} +.btn.small, table .btn {padding:0.25em 0.5em !important; font-size:0.8em; line-height:1.5em} +.btn.large {padding:1em 2em !important; font-size:1.2em; line-height:4em} +.btn.oval {border-radius:50%} + +/*** helpers ***/ +.rounded {-moz-border-radius:5px; border-radius:5px} +.padded {padding:10px 20px !important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box} +.center {text-align:center !important; margin-left:auto; margin-right:auto} +.center>div {text-align:left} +.right {right:0; text-align:right} +.middle div {vertical-align:middle !important} +.bottom div {vertical-align:bottom !important} +.xscroll {overflow-x:scroll; width:100%} +.yscroll {overflow-y:scroll; width:100%} +.nowrap {white-space:nowrap; overflow-x:hidden} +.fill {width:100%} +.lifted {box-shadow:5px 5px 10px #666} +.relative {position:relative} +.relative>div {position:absolute} +.spaced {margin-bottom:20px; margin-top:20px} +.hidden {display:none} + +/*** forms ***/ +input:not([type]), input:not([type=checkbox]):not([type=radio]):not([type=submit]), [type=file]:before {outline:none; padding:0.5em 1em; margin:0.5px; border-bottom:1px solid #ddd; width:100%} +textarea {width:100%; border:1px solid #ddd; padding:4px 8px; outline:none; outline:none} +select {-webkit-appearance:none; outline:none; padding:0.5em 1em; border-radius:0; margin:0.5px; border-bottom:1px solid #ddd} +input, textarea, select, button {font-size:12px} +input:not([type]), input:not([type=checkbox]):not([type=radio]):not([type=submit]):hover, select:hover, textarea:hover {background-color:#fbf6d9; transition:background-color 1s ease} + +/*** grid ***/ +.container {margin-right:-20px} +.container>.quarter, .container>.half, .container>.third, .container>.twothirds, .container>.threequarters, .container>.fill{display:inline-block; padding:5px 20px 5px 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; vertical-align:top} +.container>.fill {width:100%; margin-right:-20px} +.container img, .container video {max-width:100%} +@media (min-width:800px) { + .max900 {max-width:900px; margin-left:auto; margin-right:auto} + .quarter {width:25%; margin-right:-5px} + .half {width:50%; margin-right:-10px} + .third {width:33.33%; margin-right:-6.66px} + .twothirds {width:66.66%; margin-right:-13.33px} + .threequarters {width:75%; margin-right:-15px} +} +@media (min-width:600px) and (max-width:799px) { + .quarter.compressible {width:25%; margin-right:-5px} + .half.compressible {width:50%; margin-right:-10px} + .threequarters.compressible {width:75%; margin-right:-15px} + .quarter:not(.compressible), .half:not(.compressible), .threequarters:not(.compressible) {width:100%; margin-right:-20px} + .third {width:33.33%; margin-right:-6.66px} + .twothirds {width:66.66%; margin-right:-13.33px} + label.quarter:not(.compressible).right, label.half:not(.compressible).right, label.threequarters:not(.compressible).right {float:left; text-align:left} +} +@media (max-width:599px) { + .quarter:not(.compressible), .half:not(.compressible), .third:not(.compressible), .twothirds:not(.compressible), .threequarters:not(.compressible) {width:100%;} + label.quarter:not(.compressible).right, label.half:not(.compressible).right, label.threequarters:not(.compressible).right, + label.third:not(.compressible).right, label.twothirds:not(.compressible).right {float:left; text-align:left} + .quarter.compressible {width:25%; margin-right:-5px} + .half.compressible {width:50%; margin-right:-10px} + .third.compressible {width:33.33%; margin-right:-6.66px} + .twothirds.compressible {width:66.66%; margin-right:-13.33px} + .threequarters.compressible {width:75%; margin-right:-15px} +} + +/*** progress bar from http://codepen.io/holdencreative/details/pvxGxy ***/ +.progress { + margin-left:-15px; + margin-right:-15px; + position:relative; + height:8px; + display:block; + width:120%; + background-color:#acece6; + border-radius:0 !important; + background-clip:padding-box; + overflow:hidden; +} +.progress .determinate { + position:absolute; + background-color:inherit; + top:0; + bottom:0; + background-color:#26a69a; + transition:width .3s linear; +} +.progress .indeterminate { + background-color:#26a69a; +} +.progress .indeterminate:before { + content:''; + position:absolute; + background-color:inherit; + top:0; + left:0; + bottom:0; + will-change:left, right; + animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} +.progress .indeterminate:after { + content:''; + position:absolute; + background-color:inherit; + top:0; + left:0; + bottom:0; + will-change:left, right; + animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation-delay:1.15s; +} +@-webkit-keyframes indeterminate { + 0% {left:-35%; right:100%} + 60% {left:100%; right:-90%} + 100% {left:100%; right:-90%} +} +@-moz-keyframes indeterminate { + 0% {left:-35%; right:100%} + 60% {left:100%; right:-90%} + 100% {left:100%; right:-90%} +} +@keyframes indeterminate { + 0% {left:-35%; right:100%} + 60% {left:100%; right:-90%} + 100% {left:100%; right:-90%} +} +@-webkit-keyframes indeterminate-short { + 0% {left:-200%; right:100%} + 60% {left:107%; right:-8%} + 100% {left:107%; right:-8%} +} +@-moz-keyframes indeterminate-short { + 0% {left:-200%; right:100%} + 60% {left:107%; right:-8%} + 100% {left:107%; right:-8%} +} +@keyframes indeterminate-short { + 0% {left:-200%; right:100%} + 60% {left:107%; right:-8%} + 100% {left:107%; right:-8%} +} + +/**** dropdown menu from http://codepen.io/philhoyt/pen/ujHzd ***/ +.menu {list-style:none; position:relative; margin:0; padding:0} +.menu.right {float:right} +.menu a {padding:0 15px; text-decoration:none;text-align:left;font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align:left} +.menu li {position:relative; float:left; margin:0; padding:0} +.menu ul {background:white; border:1px solid #e1e1e1; visibility:hidden; opacity:0; position:absolute; top:110%; padding:0; z-index:1000; transition:all 0.2s ease-out; list-style-type:none; box-shadow:5px 5px 10px #666} +.menu ul a {padding:10px 15px; color:#333; font-weight:700; font-size:12px; line-height:16px; display: block} +.menu ul li {float:none; width:200px} +.menu ul ul {top:0; left:80%; z-index:2000} +.menu li:hover > ul {visibility:visible; opacity:1} +.menu>li>ul>li:first-child:before{content:''; position:absolute; width:1px; height:1px; border:10px solid transparent; left:50px; top:-20px; margin-left:-10px; border-bottom-color:white} +.menu.dark ul {background:black; border:1px solid black} +.menu.dark ul a {color:white} +.menu.dark>li>ul>li:first-child:before{border-bottom-color:black} + +@media (max-width:599px) { + header .menu li, header .menu ul {width: 100%} + header .menu.right {float:left; text-align:left} + header .menu ul ul {top:2.5em; left:-1px; z-index:2000} +} + +@media (min-width:600px) { + .ham {display:none!important} + .burger.accordion * {max-height:1000px; overflow:visible} +} + +/*** pulsating ring from https://jsfiddle.net/mandynicole/7xrKP/ *******/ +.pulse:after { + content:""; + border:3px solid #00e6ac; + -webkit-border-radius:30px; + height:40px; + width:40px; + position:absolute; + margin-left:-20px; + margin-top:-20px; + -webkit-animation:pulsate 1s ease-out; + -webkit-animation-iteration-count:infinite; + opacity:0.0 +} +@-webkit-keyframes pulsate { + 0% {-webkit-transform:scale(0.1, 0.1); opacity:0.0} + 50% {opacity:1.0} + 100% {-webkit-transform:scale(1.2, 1.2); opacity:0.0} +} + +/**** underline effect ***/ +a:not(.btn):not(.noeffect) {position:relative} +a:not(.btn):not(.noeffect):hover {color:#26a69a} +a:not(.btn):not(.noeffect):hover:after {width:100%} +a:not(.btn):not(.noeffect):after { + display:block; + position:absolute; + left:0; + bottom:-1px; + width:0; + height:2px; + background-color:#26a69a; + content:""; + transition:width 0.2s; +} + +/**** modal ***/ +.modal { + position:fixed; + z-index:9999; + top:0; + bottom:0; + left:0; + right:0; + background-color:rgba(0,0,0,0.8); + padding-top:20vh; + transition:opacity 500ms; + visibility:hidden; + opacity:0; +} +.modal:target {visibility:visible; opacity:1} +.modal div {margin-left:auto; margin-right:auto} +.modal .close:not(.btn) {position:absolute; top:10px; right:10px; font-size:20px} +.modal .close {transition:all 200ms} + +/*** tooltips from http://codepen.io/trezy/pen/Khnzy ***/ +[data-tooltip] {position:relative} +[data-tooltip]:hover:after,[data-tooltip]:hover:before {display:block} +[data-tooltip]:before, [data-tooltip]:after {display:none; position:absolute; top:0} +[data-tooltip]:hover:before { + border-bottom:.6em solid black; + border-bottom:.6em solid black; + border-left:7px solid transparent; + border-right:7px solid transparent; + content:""; + left:5px; + margin-top:1em; +} +[data-tooltip]:hover:after { + background-color:rgba(0,0,0,0.8) !important; + border:4px solid rgba(0,0,0,0.8) !important; + border-radius:7px !important; + color:white !important; + content:attr(data-tooltip); + text-transform:none; + font-size: 11px; + left:0 !important; + margin-top:1.5em; + padding:5px 15px; + white-space:pre-wrap; + width:100px; +} + +/*** accordion ***/ +.accordion>input ~ label:before {content:"▲ "; color:#ddd} +.accordion>input:checked ~ label:before {content:"▼ "; color:#ddd} +.accordion>input {display:none} +.accordion>input:checked ~ *:not(label) { + max-height: 1000px !important; + overflow:visible !important; + -webkit-transition: max-height .3s ease-in; + transition: max-height .3s ease-in; +} +.accordion>*:not(label) { + max-height: 0; + overflow: hidden; + margin: 0; + padding: 0; + -webkit-transition: max-height .3s ease-out; + transition: max-height .3s ease-out; +} + + +/*** cards from http://codepen.io/edeesims/pen/iGDzk ***/ +.card {perspective: 500px; max-width:100%} +.card>div { + position: absolute; + width: 100%; + height: 100%; + box-shadow: 0 0 15px rgba(0,0,0,0.1); + transition: transform 1s; + transform-style: preserve-3d; +} +.card:hover>div { + transform: rotateY( 180deg ) ; + transition: transform 0.5s; +} +.card>div>div { + position: absolute; + height: 100%; + width: 100%; + backface-visibility: hidden; +} +.card>div>div:nth-child(2) { + transform: rotateY( 180deg ); +} + +/*** colors from http://clrs.cc/ ***/ +.navy{background-color:#001f3f!important;color:white}.blue{background-color:#0074d9!important;color:white}.aqua{background-color:#7fdbff!important;color:black}.teal{background-color:#39cccc!important;color:white}.olive{background-color:#3d9970!important;color:white}.green{background-color:#2ecc40!important;color:white}.aquamarine{background-color:#26a69a!important;color:white}.lime{background-color:#01ff70!important;color:black}.yellow{background-color:#ffdc00!important;color:black}.orange{background-color:#ff851b!important;color:white}.red{background-color:#cc1f00!important;color:white}.fuchsia{background-color:#f012be!important;color:white}.pink{background-color:#ee6e73!important;color:white}.purple{background-color:#b10dc9!important;color:white}.maroon{background-color:#85144b!important;color:white}.white{background-color:#fff!important;color:black;-webkit-box-shadow:inset 0px 0px 0px 1px #ddd;-moz-box-shadow:inset 0px 0px 0px 1px #ddd;box-shadow:inset 0px 0px 0px 1px #ddd}.gray{background-color:#aaa!important;color:white}.silver{background-color:#f1f1f1!important;color:black}.black{background-color:#000!important;color:white}.glass{background:rgba(255,255,255,0.5)!important;color:black} + +/**** tags ****/ +.tags > span, .tags > span.off:hover { + height: 30px; + padding: 4px 9px; + text-decoration: none; + margin: 0 5px 30px 0 !important; + white-space: nowrap; + color: white; + background-color: #26a69a; + border-radius: 5px; + line-height: 32px; +} +.tags.dismissible > span:not(.off):hover { + background-color: #ccc !important; +} +.tags.dismissible > span:not(.off):after { + content: " \f00d"; + font-family: FontAwesome; +} +.tags > span.off { + background-color: #ccc; +} diff --git a/applications/admin/static/css/web2py.css b/applications/admin/static/css/web2py.css new file mode 100644 index 00000000..24f75d02 --- /dev/null +++ b/applications/admin/static/css/web2py.css @@ -0,0 +1,204 @@ +header a {color: white; font-size:1.1em} +main {min-height: 70vh} +.form-group {padding-bottom: 10px !important;} +.w2p_hidden {display:none;visibility:visible} +.right {float:right; text-align:right} +.left {float:left; text-align:left} +.center {width:100%; text-align:center; vertical-align:middle} +td.w2p_fw {padding-bottom:1px} +td.w2p_fl,td.w2p_fw,td.w2p_fc {vertical-align:top} +td.w2p_fl {text-align:left} +td.w2p_fl, td.w2p_fw {padding-right:7px} +td.w2p_fl,td.w2p_fc {padding-top:4px} +div.w2p_export_menu {white-space: wrap; margin:5px 0} +div.w2p_export_menu a, div.w2p_wiki_tags a, div.w2p_cloud a {margin-left:5px; padding:2px 5px; background-color:#f1f1f1; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; font-size:0.7em; color: black} + +/* tr#submit_record__row {border-top:1px solid #E5E5E5} */ +#submit_record__row td {padding-top:.5em} + +/* Fix */ +#auth_user_remember__row label {display:inline} +#web2py_user_form td {vertical-align:top} + +/*********** web2py specific ***********/ +div.w2p_flash { + font-weight:bold; + display:none; + padding:20px 20px 20px 50px; + width:100%; + opacity:0.95; + vertical-align:middle; + cursor:pointer; + color:#000; + background-color:#ffdc00; + z-index:2000; +} + +div.w2p_flash:before{content:"×";float:right; margin-right:100px; color:black;} +.ie-lte7 div.flash #closeflash +{color:expression(this.parentNode.currentStyle['color']);float:none;position:absolute;right:4px;} + +div.w2p_flash:hover { opacity:0.80; } + +div.error_wrapper {display:block} +div.error { + color:red; + padding:5px; + display:inline-block; +} + +.topbar { + padding:10px 0; + width:100%; + color:#959595; + vertical-align:middle; + padding:auto; + background-image:-khtml-gradient(linear,left top,left bottom,from(#333333),to(#222222)); + background-image:-moz-linear-gradient(top,#333333,#222222); + background-image:-ms-linear-gradient(top,#333333,#222222); + background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#333333),color-stop(100%,#222222)); + background-image:-webkit-linear-gradient(top,#333333,#222222); + background-image:-o-linear-gradient(top,#333333,#222222); + background-image:linear-gradient(top,#333333,#222222); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='#222222',GradientType=0); + -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1); + -moz-box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1); + box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1); +} + +.topbar a { + color:#e1e1e1; +} + +#navbar {float:right; padding:5px; /* same as superfish */} + +.statusbar { + background-color:#F5F5F5; + margin-top:1em; + margin-bottom:1em; + padding:.5em 1em; + border:1px solid #ddd; + border-radius:5px; + -moz-border-radius:5px; + -webkit-border-radius:5px; +} + +.breadcrumbs {float:left} + +.copyright {float:left} +#poweredBy {float:right} + +/* #MEDIA QUERIES SECTION */ + +/* +*Grid +* +* The default style for SQLFORM.grid even using jquery-iu or another ui framework +* will look better with the declarations below +* if needed to remove base.css consider keeping these following lines in some css file. +*/ +/* .web2py_table {border:1px solid #ccc} */ +.web2py_paginator {} +.web2py_grid table {width:100%} +.web2py_grid td {color: black;} + +.web2py_console form { + width: 100%; + display: inline; + vertical-align: middle; + margin: 0 0 0 5px; +} + +.web2py_console form select { + margin:0; +} + +.web2py_search_actions { + float:left; + text-align:left; +} + +.web2py_grid .row_buttons { + min-height:25px; + vertical-align:middle; +} +.web2py_grid .row_buttons a { + margin:3px; +} + +.web2py_search_actions { + width:100%; +} + +.web2py_grid .row_buttons a, +.web2py_paginator ul li a, +.web2py_search_actions a, +.web2py_console input[type=submit], +.web2py_console input[type=button], +.web2py_console button { + line-height:20px; + margin-right:2px; display:inline-block; + padding:3px 5px 3px 5px; +} + +.web2py_counter { + margin-top:5px; + margin-right:2px; + width:35%; + float:right; + text-align:right; +} + +/*Fix firefox problem*/ +.web2py_table {clear:both; display:block} + +.web2py_paginator { + padding:5px; + text-align:right; + background-color:#f2f2f2; + +} +.web2py_paginator ul { + list-style-type:none; + margin:0px; + padding:0px; +} + +.web2py_paginator ul li { + display:inline; +} + +.web2py_paginator .current { + font-weight:bold; +} + +.web2py_breadcrumbs ul { + list-style:none; + margin-bottom:18px; +} + +li.w2p_grid_breadcrumb_elem { + display:inline-block; +} + +.web2py_console form { vertical-align: middle; } +.web2py_console input, .web2py_console select, +.web2py_console a { margin: 2px; } + + +#wiki_page_body { + width: 600px; + height: auto; + min-height: 400px; +} + +/* fix some IE problems */ + +.ie-lte7 .topbar .container {z-index:2} +.ie-lte8 div.w2p_flash{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#000000', GradientType=0 ); } +.ie-lte8 div.w2p_flash:hover {filter:alpha(opacity=25);} +.ie9 #w2p_query_panel {padding-bottom:2px} + +.web2py_console .form-control {width: 20%; display: inline;} +.web2py_console #w2p_keywords {width: 50%;} +.web2py_search_actions a, .web2py_console input[type=submit], .web2py_console input[type=button], .web2py_console button { padding: 6px 12px; }