$form-input-border: #d8d8d8;
$form-input-background: #eee;
+:root {
+ --main-color: #{$main-green};
+ --background-color: #{$background-color};
+ --dark-main-color: #{$dark-green};
+}
+
// General
body {
- background: $background-color;
+ background: var(--background-color);
}
.strong {
}
.pure-alert-success {
- background-color: $main-green;
+ background-color: var(--main-color);
}
.pure-alert-warning {
top: 0;
transition: max-height .5s;
z-index: 999;
- background: $main-green;
+ background: var(--main-color);
width: 100%;
// Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
max-height: 45px;
button {
border: 0;
border-radius: 2px;
- background-color: $main-green;
+ background-color: var(--main-color);
padding: 4px 8px 6px;
color: $almost-white;
}
.search-tagcloud {
button {
&:hover {
- color: $background-color;
+ color: var(--background-color);
}
}
}
position: fixed;
visibility: hidden;
z-index: 999;
- background: $main-green;
+ background: var(--main-color);
padding: 5px 0;
width: 100%;
height: 30px;
margin: 0 0 5px;
border: 1px solid $almost-white;
border-radius: 2px;
- background: $main-green;
+ background: var(--main-color);
padding: 4px 0;
width: 100px;
height: 28px;
&:hover {
background: $almost-white;
- color: $main-green;
+ color: var(--main-color);
}
}
}
}
+.header-alert-message {
+ text-align: center;
+}
+
// CONTENT - GENERAL
.container {
position: relative;
}
.filter-on {
- background: $main-green;
+ background: var(--main-color);
color: $light-green;
}
padding: 5px;
text-decoration: none;
color: $dark-grey;
+
+ &.selected {
+ background: var(--main-color);
+ color: $white;
+ }
}
input {
&:visited {
.linklist-link {
- color: $dark-green;
+ color: var(--dark-main-color);
}
}
}
.linklist-link {
- color: $main-green;
+ color: var(--main-color);
font-size: 1.1em;
&:hover {
a {
text-decoration: none;
- color: $main-green;
+ color: var(--main-color);
&:hover {
color: $dark-grey;
}
&:visited {
- color: $dark-green;
+ color: var(--dark-main-color);
}
}
}
&::before {
display: block;
margin: 10px auto;
- background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
+ background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
width: 80%;
height: 1px;
content: '';
margin: 15px 5px;
border: 0;
box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border;
- background: $main-green;
+ background: var(--main-color);
min-width: 150px;
height: 35px;
vertical-align: center;
padding: 10px 0;
width: 100%;
text-align: center;
- color: $main-green;
+ color: var(--main-color);
}
.window-subtitle {
a {
text-decoration: none;
- color: $main-green;
+ color: var(--main-color);
font-weight: bold;
&.button {
.page-form {
.submit-buttons {
.button {
- display: block;
margin: auto;
}
}
color: $dark-grey;
}
-.page404-container {
+.page-error-container {
color: $dark-grey;
+
+ h2 {
+ margin: 70px 0 25px;
+ }
+
+ pre {
+ margin: 0 20%;
+ padding: 20px 0;
+ text-align: left;
+ line-height: .7em;
+ }
}
// EDIT LINK
.pure-button {
&:hover {
- background-color: $main-green;
+ background-color: var(--main-color);
background-image: none;
color: $almost-white;
}
}
.validate-rename-tag {
- color: $main-green;
+ color: var(--main-color);
}
}
-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
+ min-width: 1px;
+ min-height: 1px;
&.b-loaded {
opacity: 1;
&::after {
display: block;
margin: 10px auto;
- background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
+ background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
width: 90%;
height: 1px;
content: '';
.daily-entry-description {
a {
text-decoration: none;
- color: $main-green;
+ color: var(--main-color);
&:hover {
text-shadow: 1px 1px $background-linklist-info;
}
&:visited {
- color: $dark-green;
+ color: var(--dark-main-color);
}
}
}
}
.pure-button-shaarli {
- background-color: $main-green;
+ background-color: var(--main-color);
}
.progressbar {
border-radius: 6px;
- background-color: $main-green;
+ background-color: var(--main-color);
padding: 1px;
> div {
-45deg,
$almost-white,
$almost-white 6px,
- $background-color 6px,
- $background-color 12px
+ var(--background-color) 6px,
+ var(--background-color) 12px
);
width: 0%;
height: 10px;