From a8254987eab264e2e93041d775f28a7ef036c3d4 Mon Sep 17 00:00:00 2001 From: ryliejamesthomas Date: Thu, 19 Mar 2020 16:20:26 +1100 Subject: [PATCH] new icon on unread posts --- design/custom.css | 1130 +++++++++++++++------------------------------ design/new.gif | Bin 0 -> 289 bytes 2 files changed, 365 insertions(+), 765 deletions(-) create mode 100644 design/new.gif diff --git a/design/custom.css b/design/custom.css index 00b845b..f138441 100644 --- a/design/custom.css +++ b/design/custom.css @@ -1,33 +1,77 @@ /* - TABLE OF CONTENTS + TABLE OF CONTENTS ^TOC + - - - - - - - - - - - - - - - (todo) - (use tags so people can jump about) + Vanilla's HTML is a mess to me--doing my best to work + round it >:( - NOTES + TAGS + (so you can jump to sections :) - Colours + ^TOC . . . Table of Contents / top + ^GENERAL . . General rules + ^HACKX . . Horrible hacks + ^LAYOUT . . . + ^HEADER . . Header + ^MAIN . . Main content area + ^PANEL . . Side panel + ^FOOTER . . Page footer + ^PAGES . . . + ^CATS . . Main / front page + ^POSTS . . Discussion threads + ^SEARCH . . Search results page + ^PROFILE . User profile page + ^LOGIN . . Log-in pop-up + + - - - - - - - - - - - - - - + + STYLE NOTES + + Colours: red #ed1c24 pink #ffaec9 yellow #fff200 + grey #f0f0f0 + + Sizes: + regular 1em + small 0.7em + + + General - - - - - - - - - - - - ^GENERAL */ -a:link { color:blue; text-decoration:underline; } -a:visited { color:purple; text-decoration:underline; } -a:hover { color:red; text-decoration:none; } - -body { - background-color:#eee; - font-size:14px; - padding-top:50px; +a:link { + color:blue; + text-decoration:underline; +} +a:visited { + color:purple; + text-decoration:underline dashed; +} +a:hover { + color:#ed1c24; + text-decoration:none; } -div#body { - box-shadow:none; - border:1px solid pink; - border-radius:0; - margin:1em auto; - padding:1em; +body { + background-color:white; + display:grid; + font-size:1em; + font-family:sans-serif; + grid-template-columns:repeat(4, 1fr); + grid-gap:1em; + grid-template-areas: + "main main main panel" + "footer footer footer footer"; +} + +h1 { + background-color:#ffaec9; + border:1px solid #ffaec9; + font-size:1em; + line-height:1; + padding:0.5em 1em 0.2em; } hr { @@ -36,24 +80,297 @@ hr { margin:1.5em 0; } -/* Page titles: front, posts, etc. */ -h1 { - background-color:#ffaec9; +input[type="email"], +input[type="password"], +input[type="text"], +select, +textarea { + background-color:#f0f0f0; border:1px solid #ffaec9; - padding:.5em !important; + font-size:1em; + margin:0; + padding:0; +} + +mark { background-color:#fff200; } + +pre,code { tab-size:4; } + +.Button { + background-color:#ffaec9; + border:1px solid #fff200; + font-size:1em; + padding:0.8em 1em; +} + +.Button:hover, +.BigButton:hover { + border-color:#fff200; + border-radius:0; + color:#ed1c24; +} + +.BigButton { + border-left:none; + border-right:none; +} + +a.NewDiscussion::before { + content:"☞ "; +} + +a.NewDiscussion::after { + content:" ☜"; } /* - Input field stuffs - - - - - - - - - + Hackx - - - - - - - - - - - - ^HACKX */ -input[type="text"],input[type="email"],input[type="password"], select, textarea { - padding:3px; - /*box-shadow:inset 0 1px 1px rgba(0,0,0,0.2);*/ - background-color:#f6f6f6; +/* Hides that pointless gender enquiry and display */ +li.Gender { display:none !important; } + +/* Hides forum title in categories list, because I have it + in the header*/ +main > h1.H.HomepageTitle { display:none; } + +/* Hides extraneous date on categories page */ +span.MItem.LastCommentDate { display:none; } + +/* All pages - - - - - - - - - - - ^LAYOUT + + Header - - - - - - - - - - - - ^HEADER +*/ + +header { + background-color:#ffaec9; + border-bottom:1px solid #fff200; + box-shadow:0 1px 4px rgba(0,0,0,0.3); + padding:0 1em; + position:fixed; + top:0; + width:100%; + z-index:11; +} + +header a:visited { + color:blue; + text-decoration:underline dashed; +} + +header > h1 { + border:none; + font-size:1em; + margin-top:0.4em; + padding:0; +} + +header > img { + float:left; + height:3em; + margin-left:-0.3em; + margin-right:0.5em; + margin-top:0.1em; +} + +header > nav { + font-size:0.7em; +} + +header > nav > ul li { + display:inline; +} + +/* + Main content area - - - - - - - - - ^MAIN +*/ + +main { + grid-area:main; + margin-top:4em; + padding:0 1em; +} + +main > nav > p { + font-size:0.7em; + margin:0; +} + +/* + Panel on the right - - - - - - - - - ^PANEL + */ + +aside { border:1px solid #ffaec9; - margin-bottom:1em; - font-size:1em !important; + grid-area:panel; + margin-right:1em; + margin-top:8em; +} + +/* Little numbers */ +aside .Aside { + float:right; +} + +aside .Count { + background-color:#ffaec9; + border-radius:0; + text-decoration:none; + font-size:0.7em; + margin-left:0.5em; + padding:0.2em 0.5em; +} + +aside #Panel .FilterMenu li, +aside .PanelInfo li, +aside #Panel .FilterMenu li:first-child, +aside .PanelInfo li:first-child { + border:none; +} + +aside .TagCloud li { + border:none; +} + +/* Search area */ +aside form > div { + background-color:#ffaec9; +} + +aside input#Form_Search, +aside input#Form_Go { + padding:0.8em 1em; +} +aside input#Form_Search { + border:0; + box-shadow:inset 0 1px 4px rgba(0,0,0,0.3); + width:100%; +} +aside input#Form_Go { + display:none; + /*border-color:#ffaec9; + font-size:HACK;*/ +} + +aside .BoxFilter.BoxDiscussionFilter, +aside .Box.BoxCategories, +aside .Box { + padding: 0.5em 1em; +} + +/* + Footer - - - - - - - - - - - - ^FOOT +*/ + +footer { + border-top:1px solid #ffaec9; + font-size:0.7em; + grid-area:footer; + text-align:center; +} +footer > ul li { + display:inline; +} +footer > ul li::before { + content:"| "; +} +footer > ul li:first-child::before { + content:""; +} + +/* Pages - - - - - - - - - - - - ^PAGES + + Categories / landing page - - - - - - - ^CATS +*/ + +main ul.CategoryList a.Title { + font-size:1em; +} + +/* Overwrite red categories having grey bg */ +main ul.CategoryList .Item.Read { + background:none; +} + +main ul.CategoryList .Item.Unread .Title::after{ + content:url("new.gif"); + padding-left:0.5em; +} + +main ul.CategoryList li.Item { + padding:1em; +} + +main ul.CategoryList li.Depth2 { + border-left-style:dashed; + margin-left:+1em; +} + + + +/* + Post threads- - - - - - - - - - - ^POSTS +*/ + +/* Thread title */ +div.Discussion .PageTitle h1 { + background-color:#fff200; + font-size:1em; + margin-bottom:-1px; + margin-top:0.5em; +} + +/* Posts */ +main .Item, +main .DataList .Item/*, .NarrowList .Item*/ { + border:1px solid #ffaec9; + font-size:1em; + padding:0; + margin-top:-1px; +} + +/* Author info. */ +div.Item-Header.DiscussionHeader, +div.Item-Header.CommentHeader { + background-color:#ffaec9; + height:3em; + margin:0; +} +.Item .Author a { + font-size:1em; +} + +/* Author avatar */ +.Author .PhotoWrap { + margin:0; + margin-right:1em; +} +.ProfilePhoto, +.ProfilePhotoMedium { + height:3em; + width:3em; +} + +/* Post date, etc. line */ +.Meta.DiscussionMeta { + margin-top:-0.5em; +} + +h2.CommentHeading, +span.Back { + display:none; +} + +/* Post content */ +main div.Item-Body { + padding:1em; +} + +blockquote.Quote, +blockquote.UserQuote { + padding:1em; + border: 1px solid #ffaec9; + border-left: 3px double #ffaec9; } /* Post entry field */ @@ -65,758 +382,41 @@ textarea.TextBox { resize:vertical !important; } -/* ?? */ -textarea.MultiComplete {height:32px;} - -/* Hides that pointless gender enquiry and display */ -li.Gender { display:none !important; } - /* - Categories - - - - - - - - - - - + Search results page - - - - - - - - - ^SEARCH */ -.CategoryList .Depth2 { - margin-top: -6px !important; /* Join to parent category */ - padding-left: 1em !important; /* Overide default indent */ -} + /* - Posts - - - - - - - - - - - - -*/ - -blockquote.Quote, blockquote.UserQuote { - padding:1em; - border: 1px solid #ffaec9; - border-left: 3px double #ffaec9; -} - -/* Thread title */ -.PageTitle h1 { - background-color:#fff200!important; -} - -.ItemDiscussion, .DataList .Item { - padding:1em; - border:1px solid #ffaec9; -} - -.DataList { - margin-top:10px; -} - -.DataList .Item { - background-color:#fdfdfd !important; - margin-bottom:5px; -} - -.DataList .Read { - background-color:#fdfdfd !important; -} - -/* Post author info. */ -.DiscussionHeader, div.Item-Header.CommentHeader { - margin:0; - background-color:#ffaec9; -} - -/* - - - - - - - - - - - - - - - -*/ - -/* Make full-width ? */ -.Row {width:100%;} - -.fl {float:left;} - -.fr {float:right;} - -.clear {clear:both;} - -.BreadcrumbsWrapper { - font-size:13px; - padding:6px 10px; - background-color:#fafafa; - border:1px dashed #eee; - margin-bottom:10px; -} - -/* - Head is top panel, row is within that - - - - - (beyond here still a mess) -*/ - -#Head { - position:fixed; - top:0; - width:100%; - content:''; - padding:0.5em 0; - height:1.4em; - text-align:center; - box-shadow:0 1px 4px rgba(0,0,0,0.3); - border-bottom:2px solid #fff200; - background-color:#ffaec9; - z-index:11; -} - -#Head .Row{ - width:auto !important; - min-width:760px; - max-width:1000px; - margin:auto; -} - -/* Title colour */ -#Head a {color:#fff;} -#Head a:hover {color:#ed1c24;} - -#Head .SiteMenu { - list-style:none; - margin:0; - padding:0; -} - -#Head .SiteMenu>li {float:left;} - -#Head .SiteMenu>li>a { - float:left; - color:#9ea0a5; - font-weight:normal; - padding:0 10px; - font-size:13px; - color:#9ea0a5; -} - -#Head .SiteMenu>li>a:hover { - color:#ed1c24; - text-decoration:none; -} - -.SiteSearch { - margin-top:6px; - width:100%; -} - -#Form_Search { - border-radius:2px; - padding:6px 12px; - box-shadow:inset 0 1px 1px rgba(0,0,0,0.2); - background-color:#f0f0f0; - border:0; - margin-bottom:10px; - width:100% !important; - font-size:13px !important; -} - -#Form_Go { - top:9px; - right:10px; - background:url('http://vanilla.com/applications/dashboard/design/images/sprites.png') 0 -196px no-repeat transparent !important; -} - -.SiteTitle img {height:28px;} - -.PageControls {min-height:inherit;} - -.FilterMenu, .PanelCategories, .PanelInfo { - border-left:1px solid #ddd; - border-right:1px solid #ddd; -} - -.FilterMenu li, .PanelCategories li, .PanelInfo li {padding:6px 8px !important;} - -.FormWrapper { - background:transparent !important; - padding:0 !important; -} - -ul.token-input-list { - border-radius:2px; - padding:3px 0 !important; - box-shadow:inset 0 1px 1px rgba(0,0,0,0.2); - background-color:#f6f6f6 !important; - border:0 !important; - font-size:13px !important; -} - -ul.token-input-list input { - border:0 !important; - background:transparent !important; - box-shadow:0 0 0 transparent !important; -} - -.TagCloud li { - width:100%; - background-color:#fdfdfd !important; - float:left; - padding:6px 0; - border-radius:0 !important; -} - -.TagCloud li>span { - float:left; - margin:0 10px; -} - -.TagCloud li .Count {float:right;} + Profile - - - - - - - - - - - - ^PROFILE + */ .ProfilePhotoLarge { width:100%; - border-radius:3px; -} - -.Button { - padding:8px 12px; - text-shadow:0 0 0 transparent !important; - background-color:#fdfdfd !important; - box-shadow:0 0 0 transparent !important; - border-radius:0 !important; - border-color:#ddd !important; - color:#666 !important; -} - -body.Profile.EditMode #Content form { - background:transparent !important; } /* - * Panel on the right + Login pop-up - - - - - - - - - - ^LOGIN */ -#Panel { - float:right; - width:240px; - background-color:#fdfdfd; - box-shadow:0 1px 1px rgba(0,0,0,0.1); - padding:10px; - border-radius:3px; +.MultipleEntryMethods .Methods { + padding:1em; } -#Body{ - min-width:320px; - max-width:1000px; - margin:10px auto; - box-shadow:0 1px 1px rgba(0,0,0,.3); - padding:10px; - background-color:#f6f6f6; - border-radius:3px; + +a.Close { + margin:0.5em; } -#Body .SiteMenu { - display:block; - float:right; - margin-top:12px; -} - -#Body .SiteMenu li a {font-size:13px;} - -#Body .ContentColumn { - margin:0 270px 0 0; - background-color:#fdfdfd; - box-shadow:0 1px 1px rgba(0,0,0,0.1); - padding:10px; - border-radius:3px; -} - -#Panel input.InputBox {width:192px;} - -/* Backwards compatibility for themes that extended/customized the old version */ - -#Body .Wrapper #Content {margin:0 215px 0 0;} - -.Banner ul { - background:none repeat scroll 0 0 #3B5998; - margin:0; +.Border { + background:rgba(82, 82, 82, 0.7); padding:0; } -/* Footer */ - -#Foot {margin-bottom:10px;} - -#Foot a { - color:#666; - font-weight:bold; -} - - -#Menu {margin-right:0 !important;} - -.Banner ul li, #Menu li {display:inline;} - -.Banner ul li a, #Menu a { - display:inline-block; - padding:3px 7px; - font-size:13px; - font-weight:bold; - color:#fdfdfd; -} - -.Banner ul li a:hover, #Menu a:hover { - text-decoration:underline; - color:#fdfdfd; -} - -#Head #Search form { - float:right; - padding:0; - margin-top:-30px; -} - -#Head #Search form input.InputBox { - width:204px; - border:0; - padding:4px; - margin:0 6px 0 0; - background-color:#fdfdfd; - -moz-border-radius:2px; - -webkit-border:2px; - border-bottom:2px; - color:#969696; - font-size:13px; - vertical-align:bottom; -} -#Head #Search form input.Button { - font-size:13px; - border:none; -} - -/* Custom for CKeditor */ - -#cke_Form_Body { - border:1px solid #ddd !important; - background-color:#fdfdfd; -} - -.cke_editable { - min-height:200px; - white-space:pre-wrap; - background-color:transparent !important; -} - -.cke_inner {background-color:#f0f0f0 !important;} - -.cke_chrome { - border:0 !important; - box-shadow:0 0 0 #fdfdfd !important; -} - -.cke_1 .cke_top { - border:0 !important; - box-shadow:0 0 0 transparent !important; - border-radius:2px; - background:transparent !important; -} - -.cke_float .cke_top {border:0 !important;} - -.cke_bottom { - background:transparent !important; - border-top:1px solid #ddd !important; -} - -.cke_wysiwyg_frame, .cke_wysiwyg_div {background:transparent !important;} - -/* If window is less than 800px wide, hide the panel for - * all pages except profile. */ -@media screen and (max-width:799px) { - - /* Hide the "started by" column of the discussions table. */ - body.Discussions .DataTable .FirstUser { display:none; } - - /* Hide the panel on non-profile pages. */ - #Body .Row {position:relative;} - - #Body .ContentColumn {padding-top:50px;} - - .MeBox, .BigButton { - visibility:visible; - position:relative; - width:120px; - display:inline-block; - } - - .BigButton {padding:8px 20px;} - - .MeBox {width:200px;} - - #Panel { - overflow:visible; - visibility:hidden; - position:absolute; - right:2px; /* Don't know why this is adding some extra padding */ - width:auto; - display:block; - } - - .Column.ContentColumn {margin:0 !important;} - - /* Don't hide the panel on the profile page */ - body.Profile #Body .ContentColumn {padding-top:0;} - - body.Profile .MeBox, body.Profile .BigButton { - visibility:visible; - position:relative; - top:auto; - right:auto; - width:auto; - } - - body.Profile .MeBox { - width:auto; - right:auto; - } - - body.Profile #Panel { - visibility:visible; - position:relative; - right:auto; - width:200px; - } - - body.Profile .Column.ContentColumn {margin:0 220px 0 0 !important;} -} - -#Head .HiddenOnDesktop {display:none;} - -@media screen and (max-width:780px) { - .Discussion .PageTitle h1 {font-size:18px;} - #Head .Row {min-width:320px;} - #Head .HiddenOnMobile {display:none;} - #Head .HiddenOnDesktop {display:block;} - .cd-panel-header .SiteTitle {padding:10px !important; line-height:2.2 !important;} - .cd-panel-content .PanelInfo.PanelCategories {width:90%;} - .cd-panel-content .BoxButtons.BoxNewDiscussion>.Button {margin:10px 0;} -} -@media screen and (max-width:600px) { - body.Profile #Panel .Photo.PhotoWrap.PhotoWrapLarge, body.Profile #Panel .BoxFilter.BoxProfileFilter {padding:10px;} - body.Profile #Panel, body.Profile #Body .ContentColumn {width:100%; padding:0; float:left;} - body.Profile #Body .ContentColumn {margin-top:10px !important; float:left;} - body.Profile #Body .ContentColumn .Profile, body.Profile #Body .ContentColumn .ProfileOptions {padding:10px;} -} - -/* Slider in Panel */ -.cd-main-content {text-align:center;} - -.cd-main-content h3 { - color:#000; - padding:4em 0; -} -.cd-main-content .cd-btn { - position:relative; - display:inline-block; - padding:1em 2em; - background-color:#89ba2c; - color:#ffffff; - font-weight:bold; - -webkit-font-smoothing:antialiased; - -moz-osx-font-smoothing:grayscale; - border-radius:50em; - box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1); - transition:all 0.2s; - -webkit-transition:all 0.2s; - -moz-transition:all 0.2s; - -} - -.no-touch .cd-main-content .cd-btn:hover {box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);} - -.cd-panel { - position:fixed; - top:0; - left:0; - z-index:9999; - height:100%; - width:100%; - visibility:hidden; - transition:visibility 0s 0.6s; - -webkit-transition:visibility 0s 0.6s; - -moz-transition:visibility 0s 0.6s; -} - -.cd-panel::after { - /* overlay layer */ - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - background:transparent; - cursor:pointer; - transition:background 0.3s 0.3s; - -webkit-transition:background 0.3s 0.3s; - -moz-transition:background 0.3s 0.3s; -} - -.cd-panel.is-visible { - visibility:visible; - transition:visibility 0s 0s; - -webkit-transition:visibility 0s 0s; - -moz-transition:visibility 0s 0s; -} -.cd-panel.is-visible::after { - background:rgba(0, 0, 0, 0.6); - transition:background 0.3s 0s; - -webkit-transition:background 0.3s 0s; - -moz-transition:background 0.3s 0s; -} - -.cd-panel.is-visible .cd-panel-close::before { - -webkit-animation:cd-close-1 0.6s 0.3s; - -moz-animation:cd-close-1 0.6s 0.3s; - animation:cd-close-1 0.6s 0.3s; -} - -.cd-panel.is-visible .cd-panel-close::after { - -webkit-animation:cd-close-2 0.6s 0.3s; - -moz-animation:cd-close-2 0.6s 0.3s; - animation:cd-close-2 0.6s 0.3s; -} - -@-webkit-keyframes cd-close-1 { - 0%, 50% {-webkit-transform:rotate(0);} - 100% {-webkit-transform:rotate(45deg);} -} - -@-moz-keyframes cd-close-1 { - 0%, 50% {-moz-transform:rotate(0);} - 100% {-moz-transform:rotate(45deg);} -} - -@keyframes cd-close-1 { - 0%, 50% { - transform:rotate(0); - -webkit-transform:rotate(0); - -moz-transform:rotate(0); - -ms-transform:rotate(0); - -o-transform:rotate(0); - } - 100% { - transform:rotate(45deg); - -webkit-transform:rotate(45deg); - -moz-transform:rotate(45deg); - -ms-transform:rotate(45deg); - -o-transform:rotate(45deg); - } -} - -@-webkit-keyframes cd-close-2 { - 0%, 50% {-webkit-transform:rotate(0);} - 100% {-webkit-transform:rotate(-45deg);} -} - -@-moz-keyframes cd-close-2 { - 0%, 50% {-moz-transform:rotate(0);} - 100% {-moz-transform:rotate(-45deg);} -} - -@keyframes cd-close-2 { - 0%, 50% { - transform:rotate(0); - -webkit-transform:rotate(0); - -moz-transform:rotate(0); - -ms-transform:rotate(0); - -o-transform:rotate(0); - } - 100% { - transform:rotate(-45deg); - -webkit-transform:rotate(-45deg); - -moz-transform:rotate(-45deg); - -ms-transform:rotate(-45deg); - -o-transform:rotate(-45deg); - } -} - -.cd-panel-header { - position:fixed; - width:75%; - height:43px; - line-height:38px; - z-index:9999; - box-shadow:0 1px 4px rgba(0,0,0,0.3); - border-bottom:1px solid #333; - background-color:#373c4a; - -webkit-transition:top 0.3s 0s; - -moz-transition:top 0.3s 0s; - transition:top 0.3s 0s; -} - -.cd-panel-header h3 { - font-weight:bold; - font-size:28px; - color:#000; - margin-top:10px; - padding:0 10px; -} - -.from-right .cd-panel-header, .from-left .cd-panel-header {top:-50px;} - -.from-right .cd-panel-header {right:0;} - -.from-left .cd-panel-header {left:0;} - -.is-visible .cd-panel-header { - top:0; - transition:top 0.3s 0.3s; - -webkit-transition:top 0.3s 0.3s; - -moz-transition:top 0.3s 0.3s; -} - -@media only screen and (min-width:768px) { - .cd-panel-header {width:70%;} -} - -@media only screen and (min-width:1170px) { - .cd-panel-header {width:50%;} -} - -.cd-panel-close { - position:absolute; - top:0; - right:0; - height:100%; - padding:4px 20px; - /* image replacement */ - display:inline-block; - overflow:hidden; - text-align:center; - white-space:nowrap; - color:#fff; -} - -.cd-panel-close::before, .cd-panel-close::after { - /* close icon created in CSS */ - position:absolute; - top:22px; - left:20px; - height:3px; - width:20px; - background-color:#424f5c; - /* this fixes a bug where pseudo elements are slighty off position */ - backface-visibility:hidden; - -webkit-backface-visibility:hidden; -} - -.cd-panel-close::before { - transform:rotate(45deg); - -webkit-transform:rotate(45deg); - -moz-transform:rotate(45deg); - -ms-transform:rotate(45deg); - -o-transform:rotate(45deg); -} - -.cd-panel-close::after { - transform:rotate(-45deg); - -webkit-transform:rotate(-45deg); - -moz-transform:rotate(-45deg); - -ms-transform:rotate(-45deg); - -o-transform:rotate(-45deg); -} - -.no-touch .cd-panel-close:hover { - background-color:#ccc; -} - -.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after { - background-color:#ffffff; - transition-property:transform; - -webkit-transition-property:-webkit-transform; - -moz-transition-property:-moz-transform; - transition-duration:0.3s; - -webkit-transition-duration:0.3s; - -moz-transition-duration:0.3s; -} - -.no-touch .cd-panel-close:hover::before { - transform:rotate(220deg); - -webkit-transform:rotate(220deg); - -moz-transform:rotate(220deg); - -ms-transform:rotate(220deg); - -o-transform:rotate(220deg); -} - -.no-touch .cd-panel-close:hover::after { - transform:rotate(135deg); - -webkit-transform:rotate(135deg); - -moz-transform:rotate(135deg); - -ms-transform:rotate(135deg); - -o-transform:rotate(135deg); -} - -.cd-panel-container { - position:fixed; - width:75%; - height:100%; - top:0; - background-color:#f0f0f0; - z-index:1; - transition-property:transform; - -webkit-transition-property:-webkit-transform; - -moz-transition-property:-moz-transform; - transition-duration:0.3s; - -webkit-transition-duration:0.3s; - -moz-transition-duration:0.3s; - transition-delay:0.3s; - -webkit-transition-delay:0.3s; - -moz-transition-delay:0.3s; -} - -.from-right .cd-panel-container { - right:0; - -webkit-transform:translate3d(100%, 0, 0); - -moz-transform:translate3d(100%, 0, 0); - -ms-transform:translate3d(100%, 0, 0); - -o-transform:translate3d(100%, 0, 0); - transform:translate3d(100%, 0, 0); -} - -.from-left .cd-panel-container { - left:0; - transform:translate3d(-100%, 0, 0); - -webkit-transform:translate3d(-100%, 0, 0); - -moz-transform:translate3d(-100%, 0, 0); - -ms-transform:translate3d(-100%, 0, 0); - -o-transform:translate3d(-100%, 0, 0); -} -.is-visible .cd-panel-container { - transform:translate3d(0, 0, 0); - -webkit-transform:translate3d(0, 0, 0); - -moz-transform:translate3d(0, 0, 0); - -ms-transform:translate3d(0, 0, 0); - -o-transform:translate3d(0, 0, 0); - transition-delay:0s; - -webkit-transition-delay:0s; - -moz-transition-delay:0s; -} - -@media only screen and (min-width:768px) { - .cd-panel-container {width:70%;} -} - -@media only screen and (min-width:1170px) { - .cd-panel-container {width:50%;} -} - -.cd-panel-content { - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - padding:60px 15px; - overflow:auto; - /* smooth scrolling on touch devices */ - -webkit-overflow-scrolling:touch; -} - -.cd-panel-content p { - color:#424f5c; - line-height:1.4; - margin:2em 0; -} - -.cd-panel-content p:first-of-type {margin-top:0;} - -@media only screen and (min-width:768px) { - .cd-panel-content p {line-height:1.6;} -} +/*input#Form_SignIn { + background-color:; + border:; + color:; + font-size:; +}*/ diff --git a/design/new.gif b/design/new.gif new file mode 100644 index 0000000000000000000000000000000000000000..e14a9bb50abe4828609a6cb16c4a737c5f4c8026 GIT binary patch literal 289 zcmZ?wbhEHblw;s$IK;y6Rz~Ijx|9DuG5r7kp8*Ld{^#~{4GDI33~)8lGhk)}N-6$i zVN79QWY7UA18HYqj+fY_rQOG>v3iN{5wO5RS3wl4Yo z;QO8jy@sC|8`j+ol$iaZZ*ROomD09p-l>zKa;LNeDpznM-8?5Jkmi>3IDr3(mU)x8 o^d{~MEjAEw+$WC6MoyJGRu-eI8Vhy#El^i>*0WW=S4gdfE literal 0 HcmV?d00001