Self-Hosted
/
changedetection.io
mirror of https://github.com/dgtlmoon/changedetection.io.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'fe10d289a0'
${ noResults }
changedetection.io/changedetectionio/static/styles/styles.css

835 lines
16 KiB
Raw Blame History

body {
color: #333;
background: #262626;
}
.pure-table-even {
background: #fff;
}
a {
text-decoration: none;
color: #1b98f8;
}
a.github-link {
color: #fff;
}
.pure-menu-horizontal {
background: #fff;
padding: 5px;
display: flex;
justify-content: space-between;
border-bottom: 2px solid #ed5900;
align-items: center;
}
section.content {
padding-top: 5em;
padding-bottom: 5em;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
}
.search-box input {
width: 32px;
border: none;
background-image: url(/static/images/search.png);
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 16px 0px 16px 16px;
-webkit-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
color: transparent;
}
.search-box input:hover {
cursor: pointer;
}
.search-box input:focus {
width: 150px;
padding-left: 48px;
cursor: text;
color: #333;
}
.search-box input:(not:focus) {
cursor: default;
}
.search-box input::placeholder-shown {
cursor: text;
}
.search-box input:not(:placeholder-shown) {
width: 150px;
padding-left: 48px;
color: #333;
}
.search-box input::placeholder {
opacity: 0;
}
.search-box input:focus::placeholder {
opacity: 1;
}
.search-box input:not(:-ms-input-placeholder) {
width: 150px;
padding-left: 48px;
color: #333;
}
.search-box .search-box input:not(:-moz-placeholder) {
width: 150px;
padding-left: 48px;
color: #333;
}
.search-box .search-box input::not(:-moz-placeholder) {
width: 150px;
padding-left: 48px;
color: #333;
}
.search-box .search-box input:not(:-webkit-input-placeholder) {
width: 150px;
padding-left: 48px;
color: #333;
}
.search-box .search-box input::not(:-webkit-input-placeholder) {
width: 150px;
padding-left: 48px;
color: #333;
}
.box {
width: 80%;
flex-direction: column;
display: flex;
justify-content: center;
}
.watch-table {
width: 100%;
}
#header {
text-align: center;
vertical-align: middle;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
#add-paused > label {
color: #fff;
font-weight: normal;
}
#play-pause {
line-height: .8em;
}
#checkbox-functions {
position: fixed;
left: 10%;
text-align: left;
/*display: grid;*/
}
#checkbox-functions .pure-button {
background: #0078e7;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#danger .pure-button {
background: #e7096e;
}
.watch-table td.title-col, #actions {
text-align: center;
}
.watch-table #clickable {
cursor: pointer;
}
.watch-table #sortarrow {
color: #0078e7;
}
.watch-table #hidden {
display: none;
}
.watch-table tr.unviewed {
font-weight: bold;
}
.watch-table .error {
color: #a00;
}
.watch-table td {
font-size: 80%;
white-space: nowrap;
text-align: center;
}
.watch-table td.title-col {
word-break: break-all;
white-space: normal;
}
.watch-table th {
white-space: nowrap;
}
.watch-table .title-col a[target="_blank"]::after,
.watch-table .current-diff-url::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0 3px 0 5px;
}
.watch-tag-list {
color: #e70069;
white-space: nowrap;
}
#watch-actions {
display: inline-block;
}
.box {
max-width: 80%;
flex-direction: column;
display: flex;
justify-content: center;
}
#post-list-buttons, #post-list-buttons-top {
padding: 0;
margin: 0;
}
#post-list-buttons li, #post-list-buttons-top li {
display: inline-block;
}
#flexlayout {
display: flex;
justify-content: space-between;
}
#categories {
text-align: left;
margin-top: auto;
}
#controls-top {
text-align: right;
margin-top: auto;
}
#recheck-and-rss {
display: inline-flex;
}
#controls-bottom {
text-align: right;
margin-bottom: auto;
direction: rtl;
}
.watch-table tfoot {
bottom: 0;
position: fixed;
}
#post-list-buttons-top a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: initial;
border-bottom-right-radius: initial;
}
#post-list-buttons a {
border-top-left-radius: initial;
border-top-right-radius: initial;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
body:after {
content: "";
background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
}
body:after,
body:before {
display: block;
height: 600px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
body::after {
opacity: 0.91;
}
body::before {
content: "";
background-image: url(../images/gradient-border.png);
}
body:before {
background-size: cover;
}
body:after,
body:before {
-webkit-clip-path: polygon(
100% 0,
0 0,
0 77.5%,
1% 77.4%,
2% 77.1%,
3% 76.6%,
4% 75.9%,
5% 75.05%,
6% 74.05%,
7% 72.95%,
8% 71.75%,
9% 70.55%,
10% 69.3%,
11% 68.05%,
12% 66.9%,
13% 65.8%,
14% 64.8%,
15% 64%,
16% 63.35%,
17% 62.85%,
18% 62.6%,
19% 62.5%,
20% 62.65%,
21% 63%,
22% 63.5%,
23% 64.2%,
24% 65.1%,
25% 66.1%,
26% 67.2%,
27% 68.4%,
28% 69.65%,
29% 70.9%,
30% 72.15%,
31% 73.3%,
32% 74.35%,
33% 75.3%,
34% 76.1%,
35% 76.75%,
36% 77.2%,
37% 77.45%,
38% 77.5%,
39% 77.3%,
40% 76.95%,
41% 76.4%,
42% 75.65%,
43% 74.75%,
44% 73.75%,
45% 72.6%,
46% 71.4%,
47% 70.15%,
48% 68.9%,
49% 67.7%,
50% 66.55%,
51% 65.5%,
52% 64.55%,
53% 63.75%,
54% 63.15%,
55% 62.75%,
56% 62.55%,
57% 62.5%,
58% 62.7%,
59% 63.1%,
60% 63.7%,
61% 64.45%,
62% 65.4%,
63% 66.45%,
64% 67.6%,
65% 68.8%,
66% 70.05%,
67% 71.3%,
68% 72.5%,
69% 73.6%,
70% 74.65%,
71% 75.55%,
72% 76.35%,
73% 76.9%,
74% 77.3%,
75% 77.5%,
76% 77.45%,
77% 77.25%,
78% 76.8%,
79% 76.2%,
80% 75.4%,
81% 74.45%,
82% 73.4%,
83% 72.25%,
84% 71.05%,
85% 69.8%,
86% 68.55%,
87% 67.35%,
88% 66.2%,
89% 65.2%,
90% 64.3%,
91% 63.55%,
92% 63%,
93% 62.65%,
94% 62.5%,
95% 62.55%,
96% 62.8%,
97% 63.3%,
98% 63.9%,
99% 64.75%,
100% 65.7%
);
clip-path: polygon(
100% 0,
0 0,
0 77.5%,
1% 77.4%,
2% 77.1%,
3% 76.6%,
4% 75.9%,
5% 75.05%,
6% 74.05%,
7% 72.95%,
8% 71.75%,
9% 70.55%,
10% 69.3%,
11% 68.05%,
12% 66.9%,
13% 65.8%,
14% 64.8%,
15% 64%,
16% 63.35%,
17% 62.85%,
18% 62.6%,
19% 62.5%,
20% 62.65%,
21% 63%,
22% 63.5%,
23% 64.2%,
24% 65.1%,
25% 66.1%,
26% 67.2%,
27% 68.4%,
28% 69.65%,
29% 70.9%,
30% 72.15%,
31% 73.3%,
32% 74.35%,
33% 75.3%,
34% 76.1%,
35% 76.75%,
36% 77.2%,
37% 77.45%,
38% 77.5%,
39% 77.3%,
40% 76.95%,
41% 76.4%,
42% 75.65%,
43% 74.75%,
44% 73.75%,
45% 72.6%,
46% 71.4%,
47% 70.15%,
48% 68.9%,
49% 67.7%,
50% 66.55%,
51% 65.5%,
52% 64.55%,
53% 63.75%,
54% 63.15%,
55% 62.75%,
56% 62.55%,
57% 62.5%,
58% 62.7%,
59% 63.1%,
60% 63.7%,
61% 64.45%,
62% 65.4%,
63% 66.45%,
64% 67.6%,
65% 68.8%,
66% 70.05%,
67% 71.3%,
68% 72.5%,
69% 73.6%,
70% 74.65%,
71% 75.55%,
72% 76.35%,
73% 76.9%,
74% 77.3%,
75% 77.5%,
76% 77.45%,
77% 77.25%,
78% 76.8%,
79% 76.2%,
80% 75.4%,
81% 74.45%,
82% 73.4%,
83% 72.25%,
84% 71.05%,
85% 69.8%,
86% 68.55%,
87% 67.35%,
88% 66.2%,
89% 65.2%,
90% 64.3%,
91% 63.55%,
92% 63%,
93% 62.65%,
94% 62.5%,
95% 62.55%,
96% 62.8%,
97% 63.3%,
98% 63.9%,
99% 64.75%,
100% 65.7%
);
}
.arrow {
border: solid #000;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.arrow.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.arrow.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.arrow.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.arrow.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.button-small {
font-size: 85%;
}
.fetch-error {
padding-top: 1em;
font-size: 60%;
max-width: 400px;
display: block;
}
.button-secondary {
color: #fff;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: #1cb841;
}
.button-tag {
background: #636363;
color: #fff;
font-size: 65%;
border-bottom-left-radius: initial;
border-bottom-right-radius: initial;
}
.button-tag.active {
background: #9c9c9c;
font-weight: bold;
}
.button-error {
background: #ca3c3c;
}
.button-warning {
background: #df7514;
}
.button-secondary {
background: #42b8dd;
}
.button-cancel {
background: #c8c8c8;
}
.messages li {
list-style: none;
padding: 1em;
border-radius: 10px;
color: #fff;
font-weight: bold;
}
.messages li.message {
background: rgba(255, 255, 255, 0.2);
}
.messages li.error {
background: rgba(255, 1, 1, 0.5);
}
.messages li.notice {
background: rgba(255, 255, 255, 0.5);
}
#notification-customisation {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 5px;
}
#token-table.pure-table td,
#token-table.pure-table th {
font-size: 80%;
}
#new-watch-form {
background: rgba(0, 0, 0, 0.05);
padding: 1em;
border-radius: 10px;
margin-bottom: 1em;
}
#new-watch-form input {
width: auto !important;
display: inline-block;
}
#new-watch-form .label {
display: none;
}
#new-watch-form legend {
color: #fff;
}
#diff-col {
padding-left: 40px;
}
#diff-jump {
position: fixed;
left: 0;
top: 120px;
background: #fff;
padding: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 5px 0 5px -2px #888;
}
#diff-jump a {
color: #1b98f8;
cursor: grabbing;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
}
footer {
padding: 10px;
background: #fff;
color: #444;
text-align: center;
}
#feed-icon {
vertical-align: middle;
}
.sticky-tab {
position: absolute;
top: 80px;
font-size: 11px;
background: #fff;
padding: 10px;
}
.sticky-tab#left-sticky {
left: 0;
}
.sticky-tab#right-sticky {
right: 0;
}
#new-version-text a {
color: #e07171;
}
.paused-state.state-False img {
opacity: 0.2;
}
.paused-state.state-False:hover img {
opacity: 0.8;
}
.monospaced-textarea textarea {
width: 100%;
font-family: monospace;
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
.pure-form .pure-control-group,
.pure-form .pure-group,
.pure-form .pure-controls {
padding-bottom: 1em;
}
.pure-form .pure-control-group div,
.pure-form .pure-group div,
.pure-form .pure-controls div {
margin: 0;
}
.pure-form .error input {
background-color: #ffebeb;
}
.pure-form ul.errors {
padding: 0.5em 0.6em;
border: 1px solid #d00;
border-radius: 4px;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.pure-form ul.errors li {
margin-left: 1em;
color: #d00;
}
.pure-form label {
font-weight: bold;
}
.pure-form textarea {
width: 100%;
}
.pure-form ul#fetch_backend {
margin: 0;
list-style: none;
}
.pure-form ul#fetch_backend > li > * {
display: inline-block;
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
.box {
max-width: 95%;
}
.watch-table td.low-res {
display: inline-block;
padding: 5px;
}
.search-box input[type=text]:focus,input[type=text]:not(:placeholder-shown) {
width: 150px;
}
.pure-form fieldset {
padding: 0;
}
.edit-form {
padding: 0.5em;
margin: 0;
}
#nav-menu {
overflow-x: scroll;
}
.hover-img img {
opacity: 1;
}
.hover-img:hover img {
opacity: 1;
}
#watch-actions {
margin-top: 3px;
}
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
input[type="text"] {
width: 100%;
}
.search-box input {
width: 32px;
}
.watch-table thead,
.watch-table tbody,
.watch-table th,
.watch-table td,
.watch-table tr {
display: block;
}
.watch-table .last-checked::before {
color: #555;
content: "Checked ";
}
.watch-table .last-changed::before {
color: #555;
content: "Changed ";
}
.watch-table th:nth-child(0) {
display: inline-block;
}
.watch-table th:nth-child(1) {
display: inline-block;
}
.watch-table th:nth-child(2) {
display: inline-block;
}
.watch-table th:nth-child(3) {
display: inline-block;
}
.watch-table th:nth-child(4) {
display: inline-block;
}
.watch-table th:nth-child(5) {
display: inline-block;
}
.watch-table th:nth-child(6) {
display: none;
}
.watch-table th:nth-child(7) {
display: inline-block;
}
.watch-table th:nth-child(8) {
display: none;
}
.watch-table th:nth-child(9) {
display: inline-block;
}
.watch-table th:nth-child(10) {
display: none;
}
.watch-table th:nth-child(11) {
display: none;
}
.watch-table .pure-table td,
.watch-table .pure-table th {
border: none;
}
.watch-table td {
border: none;
border-bottom: 1px solid #eee;
}
.watch-table td:before {
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.watch-table.pure-table-striped tr:nth-child(2n-1) {
background-color: #eee;
}
.watch-table.pure-table-striped tr:nth-child(2n-1) td {
background-color: inherit;
}
}
@media only screen and (min-width: 761px) {
.m-d {
min-width: 80%;
}
}
.tabs ul {
margin: 0;
padding: 0;
display: block;
}
.tabs ul li {
margin-right: 3px;
display: inline-block;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgba(255, 255, 255, 0.2);
}
.tabs ul li.active,
.tabs ul li :target {
background-color: #fff;
}
.tabs ul li.active a,
.tabs ul li :target a {
color: #222;
font-weight: bold;
}
.tabs ul li a {
display: block;
padding: 0.8em;
color: #fff;
}
.pure-form-stacked > div:first-child {
display: block;
}
.edit-form {
min-width: 70%;
}
.edit-form .tab-pane-inner {
padding: 0;
}
.edit-form .tab-pane-inner:not(:target) {
display: none;
}
.edit-form .tab-pane-inner:target {
display: block;
}
.edit-form .box-wrap {
position: relative;
}
.edit-form .inner {
background: #fff;
padding: 20px;
}
.edit-form #actions {
display: block;
background: #fff;
}
Reference in new issue View Git Blame Copy Permalink