465 lines
6.7 KiB
SCSS
Executable File
465 lines
6.7 KiB
SCSS
Executable File
/* Colors
|
|
Very Very Bright Brown: #f7f2eb
|
|
Very Bright Brown: #ede0d0
|
|
bright brown : #e2ccb2
|
|
dark brown : #584127
|
|
blue lines : #2DCDFF
|
|
red lines : #EC3B45
|
|
*/
|
|
|
|
/* Fonts */
|
|
|
|
@import 'font-awesome';
|
|
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
|
|
|
|
/* Plugins */
|
|
|
|
@import 'quill.bubble';
|
|
|
|
/* Pages */
|
|
|
|
@import 'write';
|
|
|
|
/* General */
|
|
|
|
body {
|
|
min-width: 700px;
|
|
font-family: 'Indie Flower', cursive;
|
|
font-size:1em;
|
|
background-color:#e2ccb2;
|
|
margin:0;
|
|
color:#584127;
|
|
}
|
|
|
|
table {
|
|
border:none;
|
|
background:none;
|
|
text-align:center;
|
|
margin:0;
|
|
padding:0;
|
|
border-spacing:0;
|
|
}
|
|
|
|
input, textarea {
|
|
font-family: 'Indie Flower', cursive;
|
|
font-size:1em;
|
|
color:#584127;
|
|
}
|
|
|
|
input[type=button], input[type=submit] {
|
|
-moz-border-radius:5px;
|
|
-webkit-border-radius:5px;
|
|
border-radius:5px;
|
|
font-weight:bold;
|
|
color:#584127;
|
|
}
|
|
|
|
p {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
a:visited, a {
|
|
color:#584127;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a:active, a:focus, input:active, input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.round {
|
|
-moz-border-radius:3px;
|
|
-webkit-border-radius:3px;
|
|
border-radius:3px;
|
|
}
|
|
.round_top {
|
|
-moz-border-radius:3px 3px 0 0;
|
|
-webkit-border-radius:3px 3px 0 0;
|
|
border-radius:3px 3px 0 0;
|
|
}
|
|
.round_right {
|
|
-moz-border-radius:0 3px 3px 0;
|
|
-webkit-border-radius:0 3px 3px 0;
|
|
border-radius:0 3px 3px 0;
|
|
}
|
|
|
|
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner {
|
|
border: none;
|
|
}
|
|
|
|
/* Common Classes */
|
|
|
|
a.button {
|
|
font-weight:normal;
|
|
height:50px;
|
|
width:50px;
|
|
line-height:50px;
|
|
font-size: 1.2em;
|
|
text-align:center;
|
|
background: url("../images/minicloud.png") 0 0 no-repeat;
|
|
}
|
|
a.button:hover {
|
|
color:white;
|
|
background-position:0 -50px;
|
|
}
|
|
a.button:active {
|
|
color:white;
|
|
background-position:0 -100px;
|
|
}
|
|
|
|
/* Container */
|
|
|
|
#container {
|
|
position:absolute;
|
|
left:0;
|
|
right:0;
|
|
top:1em;
|
|
bottom:1em;
|
|
width:40em;
|
|
margin:auto;
|
|
}
|
|
|
|
/* Feedback */
|
|
|
|
#feedback {
|
|
position:absolute;
|
|
width:100%;
|
|
z-index:1000;
|
|
}
|
|
|
|
#feedback span.feedback {
|
|
display:block;
|
|
margin-bottom:1em;
|
|
width:calc(100% - 1em);
|
|
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/* Header */
|
|
|
|
#header {
|
|
margin-left:-100px;
|
|
height:203px;
|
|
background:url('../images/logo.png') 0 0 no-repeat;
|
|
}
|
|
|
|
/* Menu */
|
|
|
|
#menu {
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
}
|
|
|
|
/* Calendar */
|
|
|
|
#calendar {
|
|
position:absolute;
|
|
margin-top:-40px;
|
|
margin-left:560px;
|
|
}
|
|
|
|
table.calendar_list {
|
|
/*border:2px solid #584127;*/
|
|
background-color:#e2ccb2;
|
|
}
|
|
|
|
table.calendar_list tbody {
|
|
display:none;
|
|
border:2px solid #584127;
|
|
}
|
|
|
|
table.calendar_list:hover tbody {
|
|
display:inline-table;
|
|
overflow:visible;
|
|
}
|
|
|
|
table.calendar_list tr.calendar_items td {
|
|
background-position:-6px -7px;
|
|
background-repeat:no-repeat;
|
|
width:37px;
|
|
height:42px;
|
|
padding-top:2px;
|
|
padding-right:3px;
|
|
}
|
|
|
|
table.calendar_list tr th {
|
|
width:auto;
|
|
text-align:left;
|
|
font-size:16px;
|
|
/*border-bottom:2px solid #584127;*/
|
|
padding-top:2px;
|
|
}
|
|
|
|
table.calendar_list tr td.item_full {
|
|
background-image:url('../images/minicloud.png');
|
|
cursor:pointer;
|
|
}
|
|
table.calendar_list tr td.item_full:hover {
|
|
background-image:url('../images/minicloud_hover.png');
|
|
color:white;
|
|
}
|
|
table.calendar_list tr td.item_full:active {
|
|
background-image:url('../images/minicloud_active.png');
|
|
background-position: 53% 53%;
|
|
}
|
|
table.calendar_list tr td.item_empty {
|
|
background-image:url('../images/minicloud_disabled.png');
|
|
color:#e2ccb2;
|
|
font-weight:bold;
|
|
}
|
|
table.calendar_list tr td.item_disabled {
|
|
color:#e2ccb2;
|
|
}
|
|
|
|
a.calendar_direction {
|
|
text-decoration:none;
|
|
}
|
|
|
|
/* Main */
|
|
|
|
#main {
|
|
margin-top:1em;
|
|
position: absolute;
|
|
top:203px;
|
|
bottom:2em;
|
|
right:0;
|
|
left:0;
|
|
background:#EDE0D0;
|
|
border-radius: 0.5em;
|
|
}
|
|
|
|
/* Log on */
|
|
|
|
#logon {
|
|
width: 496px;
|
|
height: 225px;
|
|
position: fixed;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
margin: auto;
|
|
background: transparent url('../images/bubble_inverted.png') 0 0 no-repeat;
|
|
}
|
|
|
|
#logon, #logon input {
|
|
font-size:30px;
|
|
border:none;
|
|
background-color:transparent;
|
|
}
|
|
|
|
#logon .credentials {
|
|
margin:45px 0 0 0 ;
|
|
}
|
|
|
|
#logon .credentials input {
|
|
width: 305px;
|
|
padding:0 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
#logon input.connection {
|
|
position:absolute;
|
|
left:374px;
|
|
top:140px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
#logon .register {
|
|
margin-top:60px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Write */
|
|
|
|
/* Write - Container */
|
|
|
|
#write {
|
|
height:100%;
|
|
}
|
|
|
|
|
|
/* Write - Editor */
|
|
|
|
#write #editor div {
|
|
margin:0;
|
|
}
|
|
|
|
#write #editor p {
|
|
text-indent: 1.5em;
|
|
margin:1em 0 0 0;
|
|
padding:0;
|
|
text-align: justify;
|
|
}
|
|
|
|
#write .jqte_editor p:FIRST-CHILD, #write .jqte_toolbar {
|
|
margin-top:0.5em;
|
|
}
|
|
|
|
/* Write - Toolbar */
|
|
|
|
#write #nav {
|
|
position:absolute;
|
|
bottom:0;
|
|
right:0;
|
|
left:0;
|
|
text-align: center;
|
|
}
|
|
|
|
#write .fa-prev, #write .page_nb, #write .fa-next {
|
|
color:#997E60;
|
|
font-size:1.5em;
|
|
margin:0 0 0.5em 0;
|
|
cursor:pointer;
|
|
}
|
|
#write .page_nb {
|
|
font-size: 1em;
|
|
vertical-align:0.25em;
|
|
cursor: default;
|
|
padding-left:0.5em;
|
|
padding-right:0.5em;
|
|
}
|
|
#write .fa-prev:hover, #write .fa-next:hover {
|
|
color:#584127;
|
|
}
|
|
#write .fa-prev.disabled, #write .fa-next.disabled,
|
|
#write .fa-prev.disabled:hover, #write .fa-next.disabled:hover {
|
|
color:#EDE0D0;
|
|
}
|
|
|
|
/* Write - Placeholder */
|
|
|
|
#write .jqte_placeholder_text {
|
|
top:1em;
|
|
left:0;
|
|
text-indent: 1.5em;
|
|
}
|
|
|
|
#write .jqte_focused .jqte_placeholder_text {
|
|
display:none;
|
|
}
|
|
|
|
/* Write - Feedback */
|
|
|
|
#write_feedback {
|
|
position:absolute;
|
|
top: -1.5em;
|
|
right:0.5em;
|
|
}
|
|
|
|
/* Read */
|
|
|
|
div.read {
|
|
position:relative;
|
|
padding-bottom:30px;
|
|
}
|
|
|
|
div.thought {
|
|
font-size:16px;
|
|
line-height:20px;
|
|
}
|
|
|
|
p.date {
|
|
font-size:20px;
|
|
}
|
|
|
|
div.time {
|
|
position:absolute;
|
|
margin-left:-100px;
|
|
}
|
|
|
|
div.paragraphs p {
|
|
margin:0 0 20px 0;
|
|
}
|
|
|
|
div.paragraphs p:first-letter {
|
|
font-size:59px;
|
|
line-height:16px;
|
|
margin-right:5px;
|
|
font-weight:400;
|
|
float:left;
|
|
text-transform:uppercase;
|
|
}
|
|
|
|
div.paragraphs p + p, div.paragraphs p + p:first-letter {
|
|
font-size:inherit;
|
|
line-height:inherit;
|
|
margin-right:inherit;
|
|
font-weight:normal;
|
|
float:none;
|
|
text-indent:40px;
|
|
}
|
|
|
|
/* Settings */
|
|
|
|
#settings table tr td {
|
|
text-align:left;
|
|
}
|
|
|
|
/* Footer */
|
|
|
|
#footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
text-align:center;
|
|
color:grey;
|
|
font-size:0.9em;
|
|
width:100%;
|
|
height:2em;
|
|
}
|
|
|
|
#footer a {
|
|
color:grey;
|
|
|
|
}
|
|
|
|
/* Errors */
|
|
|
|
#errors {
|
|
position:fixed;
|
|
bottom:-2px;
|
|
background-color:white;
|
|
width:696px;
|
|
border:2px solid red;
|
|
}
|
|
#errors ul li {
|
|
list-style-image: url(../images/error.png);
|
|
color:red;
|
|
font-weight: bold;
|
|
font-size:24px;
|
|
}
|
|
|
|
fieldset {
|
|
margin:20px auto;
|
|
width:90%;
|
|
}
|
|
|
|
fieldset p {
|
|
text-align: justify;
|
|
}
|
|
|
|
/* Feedback */
|
|
|
|
.notice {
|
|
padding:0;
|
|
color:#997E60;
|
|
}
|
|
|
|
.error {
|
|
padding:0 0.5em;
|
|
color: red;
|
|
background:#FFB2B2;
|
|
}
|
|
.warning {
|
|
padding:0 0.5em;
|
|
color:orange;
|
|
background:#FFE4B2;
|
|
}
|
|
.success {
|
|
padding:0 0.5em;
|
|
color:green;
|
|
background:#B2D9B2;
|
|
} |