-$fa-font-path: '~font-awesome/fonts';
+$fa-font-path: '~fork-awesome/fonts';
-@import '~font-awesome/scss/font-awesome';
+@import '~fork-awesome/scss/fork-awesome';
@import '~purecss/build/pure.css';
@import '~purecss/build/grids-responsive.css';
@import '~pure-extras/css/pure-extras.css';
$light-grey: #797979;
$main-green: #1b926c;
$light-green: #b0ddce;
-$dark-green: #2a4c41;
+$dark-green: #186446;
$red: #ac2925;
$orange: #f89406;
$blue: #0b5ea6;
$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 {
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
- src: local('Roboto'),
- local('Roboto-Regular'),
- url('../fonts/Roboto-Regular.woff2') format('woff2'),
- url('../fonts/Roboto-Regular.woff') format('woff');
+ src:
+ local('Roboto'),
+ local('Roboto-Regular'),
+ url('../fonts/Roboto-Regular.woff2') format('woff2'),
+ url('../fonts/Roboto-Regular.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-weight: 700;
font-style: normal;
- src: local('Roboto'),
- local('Roboto-Bold'),
- url('../fonts/Roboto-Bold.woff2') format('woff2'),
- url('../fonts/Roboto-Bold.woff') format('woff');
+ src:
+ local('Roboto'),
+ local('Roboto-Bold'),
+ url('../fonts/Roboto-Bold.woff2') format('woff2'),
+ url('../fonts/Roboto-Bold.woff') format('woff');
}
body,
}
.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);
}
}
}
}
@media screen and (max-width: 64em) {
- .header-search ,
+ .header-search,
.header-search * {
visibility: hidden;
}
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;
color: $dark-grey;
font-size: .9em;
-
a {
display: inline-block;
margin: 3px 0;
}
.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 {
content: '';
}
}
+
+ .search-highlight {
+ background-color: yellow;
+ }
}
.linklist-item-buttons {
&: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 {
&.button-red {
background: $red;
}
+
+ &.button-grey {
+ background: $light-grey;
+ }
}
.submit-buttons {
}
table {
- margin: auto;
+ margin: 10px auto 25px auto;
width: 90%;
.order {
position: absolute;
right: 5%;
}
+
+ &.button-grey {
+ position: absolute;
+ left: 5%;
+ }
}
}
}
.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;
+ }
+
+ a {
+ color: var(--main-color);
+ }
+
+ pre {
+ margin: 0 20%;
+ padding: 20px 0;
+ text-align: left;
+ line-height: 1em;
+ }
}
// EDIT LINK
}
}
+.loading-input {
+ position: relative;
+
+ @keyframes around {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ .icon-container {
+ position: absolute;
+ right: 60px;
+ top: calc(50% - 10px);
+ }
+
+ .loader {
+ position: relative;
+ height: 20px;
+ width: 20px;
+ display: inline-block;
+ animation: around 5.4s infinite;
+
+ &::after,
+ &::before {
+ content: "";
+ background: $form-input-background;
+ position: absolute;
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ border-width: 2px;
+ border-color: #333 #333 transparent transparent;
+ border-style: solid;
+ border-radius: 20px;
+ box-sizing: border-box;
+ top: 0;
+ left: 0;
+ animation: around 0.7s ease-in-out infinite;
+ }
+
+ &::after {
+ animation: around 0.7s ease-in-out 0.1s infinite;
+ background: transparent;
+ }
+ }
+}
+
// LOGIN
.login-form-container {
.remember-me {
.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);
}
}
}
text-align: center;
a {
+ background: $almost-white;
display: inline-block;
- margin: 0 15px;
+ padding: 5px;
text-decoration: none;
- color: $white;
- font-weight: bold;
+ color: $dark-grey;
}
}
}
.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 {
border-radius: 10px;
- background: repeating-linear-gradient(
- -45deg,
- $almost-white,
- $almost-white 6px,
- $background-color 6px,
- $background-color 12px
- );
+ background:
+ repeating-linear-gradient(
+ -45deg,
+ $almost-white,
+ $almost-white 6px,
+ var(--background-color) 6px,
+ var(--background-color) 12px
+ );
width: 0%;
height: 10px;
}
white-space: nowrap;
}
}
+
+// SERVER PAGE
+
+.server-tables-page,
+.server-tables {
+ .window-subtitle {
+ &::before {
+ display: block;
+ margin: 8px auto;
+ background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
+ width: 50%;
+ height: 1px;
+ content: '';
+ }
+ }
+
+ .server-row {
+ p {
+ height: 25px;
+ padding: 0 10px;
+ }
+ }
+
+ .server-label {
+ text-align: right;
+ font-weight: bold;
+ }
+
+ i {
+ &.fa-color-green {
+ color: $main-green;
+ }
+
+ &.fa-color-orange {
+ color: $orange;
+ }
+
+ &.fa-color-red {
+ color: $red;
+ }
+ }
+
+ @media screen and (max-width: 64em) {
+ .server-label {
+ text-align: center;
+ }
+
+ .server-row {
+ p {
+ text-align: center;
+ }
+ }
+ }
+}
+
+// Batch creation
+input[name='save_edit_batch'] {
+ @extend %page-form-button;
+}
+
+.addlink-batch-show-more {
+ display: flex;
+ align-items: center;
+ margin: 20px 0 8px;
+
+ a {
+ color: var(--main-color);
+ text-decoration: none;
+ }
+
+ &::before,
+ &::after {
+ content: "";
+ flex-grow: 1;
+ background: rgba(0, 0, 0, 0.35);
+ height: 1px;
+ font-size: 0;
+ line-height: 0;
+ }
+
+ &::before {
+ margin: 0 16px 0 0;
+ }
+
+ &::after {
+ margin: 0 0 0 16px;
+ }
+}
+
+.dark-layer {
+ display: none;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ z-index: 998;
+ background-color: rgba(0, 0, 0, .75);
+ color: #fff;
+
+ .screen-center {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ min-height: 100vh;
+ }
+
+ .progressbar {
+ width: 33%;
+ }
+}
+
+.addlink-batch-form-block {
+ .pure-alert {
+ margin: 25px 0 0 0;
+ }
+}
+
+// Print rules
+@media print {
+ .shaarli-menu {
+ position: absolute;
+ }
+
+ .search-linklist,
+ .link-count-block,
+ .linklist-item-infos-controls-group,
+ .mobile-buttons {
+ display: none;
+ }
+}