Commit 524e3075 authored by Bas Lijnse's avatar Bas Lijnse

Moved all css from preprocessed monolithic stylesheet to multiple files linked to Clean modules

parent 5f13f20e
/* Global themabable variables shared by the builtin editors. */
:root {
--canvas-base-color: #eee;
--canvas-text-color: #000;
--panel-header-base-color: #ccc;
--panel-header-base-color-lighter: #ececec; /* lighten 12.5% */
--panel-header-base-color-lighter2: white; /* lighten 20% */
--panel-header-base-color-darker: #999999; /* darken 20% */
--panel-header-base-color-darker2: #b3b3b3; /* darken 10% */
--panel-header-text-color: #000;
--panel-border-color: #ccc;
--window-header-base-color: #ccc;
--window-header-base-color-lighter: #ececec; /* lighten 12.5% */
--window-header-text-color: #000;
--window-border-color: #ccc;
--toolbar-base-color: var(--canvas-base-color);
--toolbar-base-color-lighter: #f8f8f8; /* lighten 4% */
--toolbar-base-color-darker: #cecece; /* darken 12.5% */
--toolbar-base-color-darker2: #e1e1e1; /* darken 5% */
--button-base-color: var(--canvas-base-color);
--button-base-color-lighter: white; /* lighten 10% */
--button-base-color-darker: #bbbbbb; /* darken 20% */
--button-base-color-darkest: #888888; /* darken 40% */
--button-text-color: var(--canvas-text-color);
--button-text-color-lighter: #595959; /* lighten 35% */
--tab-base-color: var(--canvas-base-color);
--tab-base-color-darker: #e1e1e1; /* lighten 5% */
--tab-text-color: var(--canvas-text-color);
--tab-border-color: #ccc;
--select-base-color: #333;
--select-text-color: #fff;
--list-base-color: #fff;
--list-text-color: #000;
--list-highlight-color: #eee;
--list-border-color: #ccc;
--choicegrid-up-color: #d9d9d9; /* lighten 5% */
--choicegrid-down-color: #f2f2f2; /* lighten 15% */
}
/* Predefined themes: just add this class to the viewport or (any container) */
.itasks-orangeblue {
--panel-header-base-color: #fb7322;
--panel-header-text-color: #fff;
--panel-border-color: #fb7322;
--window-header-base-color: #004584;
--window-header-text-color: #fff;
--window-border-color: #fb7322;
--toolbar-base-color: #fb7322;
--select-base-color: #004584;
--panel-header-base-color-lighter: #fc9b61;
--panel-header-base-color-lighter2: #fdb286;
--panel-header-base-color-darker: #b44503;
--panel-header-base-color-darker2: #e65804;
--window-header-base-color-lighter: #0066c4;
--toolbar-base-color-lighter: #fb8036;
--toolbar-base-color-darker: #d95404;
--toolbar-base-color-darker2: #fb6309;
--choicegrid-up-color: #fb833b;
--choicegrid-down-color: #fca36d;
}
/* Intermediate UI elements */
.itasks-raw-record,
.itasks-raw-cons,
.itasks-raw-var-cons,
.itasks-raw-interact,
.itasks-raw-step,
.itasks-raw-parallel,
.itasks-raw-form,
.itasks-raw-form-item {
border: dashed 2px #ccc;
}
.itasks-raw-record > .itasks-header,
.itasks-raw-cons > .itasks-header,
.itasks-raw-var-cons > .itasks-header,
.itasks-raw-interact > .itasks-header,
.itasks-raw-step > .itasks-header,
.itasks-raw-parallel > .itasks-header,
.itasks-raw-form > .itasks-header,
.itasks-raw-form-item > .itasks-header {
color: #fff;
padding: 2px;
}
.itasks-raw-form {
border: solid 2px #f33;
background: #fee;
}
.itasks-raw-form > .itasks-header {
background: #f33;
}
.itasks-raw-form-item {
border: dashed 2px #f33;
border-radius: 5px;
}
.itasks-raw-form-item > .itasks-header {
background: #f33;
}
.itasks-raw-record {
border: solid 2px #f33;
background: #fee;
}
.itasks-raw-record > .itasks-header {
background: #f33;
}
.itasks-raw-cons {
border: solid 2px #ff3;
background: #ffe;
}
.itasks-raw-cons > .itasks-header {
background: #ff3;
}
.itasks-raw-var-cons {
border: solid 2px #ff3;
background: #ffe;
}
.itasks-raw-var-cons > .itasks-header {
background: #ff3;
}
.itasks-raw-interact {
border: solid 2px #f3f;
background: #fef;
}
.itasks-raw-interact > .itasks-header {
background: #f3f;
}
.itasks-raw-step {
border: solid 2px #33f;
background: #eef;
}
.itasks-raw-step > .itasks-header {
background: #33f;
}
.itasks-raw-parallel {
border: solid 2px #3f3;
background: #efe;
}
.itasks-raw-parallel > .itasks-header {
background: #3f3;
}
.itasks-raw-empty {
border: dashed 2px #eee;
color: #ccc;
font-style: italic;
}
.itasks-raw-action {
border: solid 2px #000;
padding: 5px 20px;
border-radius: 5px;
color: #fff;
font-weight: bold;
}
.itasks-raw-action-enabled {
background-color: #0f0;
}
.itasks-raw-action-disabled {
background-color: #f00;
}
/* Predefined icon classes */
*.itasks-viewport .icon-help {
background-image: url('/css/icons/help.png');
}
......
.itasks-textview, .itasks-htmlview {
padding: 5px;
}
.itasks-icon {
width: 16px;
height: 16px;
}
.itasks-label {
width: 100px;
padding: 5px;
text-overflow: elipsis;
}
.itasks-button {
font-size: 8pt;
padding: 3px;
background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color));
background-repeat: none;
border: 1px solid var(--button-base-color-darker);
border-radius: 3px;
display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
color: var(--button-text-color);
flex-shrink: 0;
}
.itasks-button:hover {
border-color: var(--button-base-color-darkest);
}
.itasks-button:active {
background: var(--button-base-color-lighter);
}
.itasks-button-label {
margin: 0 4px;
height: 16px;
cursor: default;
}
.itasks-button-icon {
width: 16px;
height: 16px;
}
.itasks-button:disabled {
color: var(--button-text-color-lighter);
background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color-darker));
}
.itasks-button:disabled:hover {
border-color: var(--button-base-color-darkest);
}
.itasks-button:disabled .itasks-button-icon {
opacity: 0.5;
}
.itasks-checkgroup, {
margin: 0;
padding: 0;
......@@ -170,3 +225,54 @@
background-color: var(--select-base-color);
color: var(--select-text-color);
}
*.itasks-viewport [data-tooltip] {
position: relative;
display: inline-block;
}
*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
position: absolute;
transform: translate3d(0, 0, 0);
visibility: hidden;
opacity: 0;
z-index: 1000000;
pointer-events: none;
transition: 0.3s ease;
}
*.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:hover:after,
*.itasks-viewport [data-tooltip]:focus:before, *.itasks-viewport [data-tooltip]:focus:after {
visibility: visible;
opacity: 1;
}
*.itasks-viewport [data-tooltip]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001;
}
*.itasks-viewport [data-tooltip]:after {
content: attr(data-tooltip);
background: #ccc;
color: #000;
padding: 8px 10px;
font-size: 12px;
line-height: 12px;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
*.itasks-viewport [data-tooltip]:before {
border-left-color: #ccc;
margin-right: -12px;
margin-bottom: -6px;
}
*.itasks-viewport [data-tooltip]:after {
margin-bottom: -14px;
}
*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
right: 100%;
bottom: 50%;
}
*.itasks-viewport [data-tooltip]:hover:after, *.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:focus:after, *.itasks-viewport [data-tooltip]:focus:before {
transform: translateX(-8px);
}
#!/bin/sh
cat src/options.css\
src/themes.css\
src/components-core.css\
src/components-raw.css\
src/components-container.css\
src/components-form.css\
src/components-display.css\
src/components-selection.css\
src/icons.css\
src/tooltip.css > itasks.css
This diff is collapsed.
.itasks-textview, .itasks-htmlview {
padding: 5px;
}
.itasks-icon {
width: 16px;
height: 16px;
}
.itasks-label {
width: 100px;
padding: 5px;
text-overflow: elipsis;
}
.itasks-button {
font-size: 8pt;
padding: 3px;
background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color));
background-repeat: none;
border: 1px solid var(--button-base-color-darker);
border-radius: 3px;
display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
color: var(--button-text-color);
flex-shrink: 0;
}
.itasks-button:hover {
border-color: var(--button-base-color-darkest);
}
.itasks-button:active {
background: var(--button-base-color-lighter);
}
.itasks-button-label {
margin: 0 4px;
height: 16px;
cursor: default;
}
.itasks-button-icon {
width: 16px;
height: 16px;
}
.itasks-button:disabled {
color: var(--button-text-color-lighter);
background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color-darker));
}
.itasks-button:disabled:hover {
border-color: var(--button-base-color-darkest);
}
.itasks-button:disabled .itasks-button-icon {
opacity: 0.5;
}
/* Styles for unlayouted content */
.itasks-raw-record,
.itasks-raw-cons,
.itasks-raw-var-cons,
.itasks-raw-interact,
.itasks-raw-step,
.itasks-raw-parallel,
.itasks-raw-form,
.itasks-raw-form-item {
border: dashed 2px #ccc;
}
.itasks-raw-record > .itasks-header,
.itasks-raw-cons > .itasks-header,
.itasks-raw-var-cons > .itasks-header,
.itasks-raw-interact > .itasks-header,
.itasks-raw-step > .itasks-header,
.itasks-raw-parallel > .itasks-header,
.itasks-raw-form > .itasks-header,
.itasks-raw-form-item > .itasks-header {
color: #fff;
padding: 2px;
}
.itasks-raw-form {
border: solid 2px #f33;
background: #fee;
}
.itasks-raw-form > .itasks-header {
background: #f33;
}
.itasks-raw-form-item {
border: dashed 2px #f33;
border-radius: 5px;
}
.itasks-raw-form-item > .itasks-header {
background: #f33;
}
.itasks-raw-record {
border: solid 2px #f33;
background: #fee;
}
.itasks-raw-record > .itasks-header {
background: #f33;
}
.itasks-raw-cons {
border: solid 2px #ff3;
background: #ffe;
}
.itasks-raw-cons > .itasks-header {
background: #ff3;
}
.itasks-raw-var-cons {
border: solid 2px #ff3;
background: #ffe;
}
.itasks-raw-var-cons > .itasks-header {
background: #ff3;
}
.itasks-raw-interact {
border: solid 2px #f3f;
background: #fef;
}
.itasks-raw-interact > .itasks-header {
background: #f3f;
}
.itasks-raw-step {
border: solid 2px #33f;
background: #eef;
}
.itasks-raw-step > .itasks-header {
background: #33f;
}
.itasks-raw-parallel {
border: solid 2px #3f3;
background: #efe;
}
.itasks-raw-parallel > .itasks-header {
background: #3f3;
}
.itasks-raw-empty {
border: dashed 2px #eee;
color: #ccc;
font-style: italic;
}
.itasks-raw-action {
border: solid 2px #000;
padding: 5px 20px;
border-radius: 5px;
color: #fff;
font-weight: bold;
}
.itasks-raw-action-enabled {
background-color: #0f0;
}
.itasks-raw-action-disabled {
background-color: #f00;
}
:root {
--canvas-base-color: #eee;
--canvas-text-color: #000;
--panel-header-base-color: #ccc;
--panel-header-base-color-lighter: #ececec; /* lighten 12.5% */
--panel-header-base-color-lighter2: white; /* lighten 20% */
--panel-header-base-color-darker: #999999; /* darken 20% */
--panel-header-base-color-darker2: #b3b3b3; /* darken 10% */
--panel-header-text-color: #000;
--panel-border-color: #ccc;
--window-header-base-color: #ccc;
--window-header-base-color-lighter: #ececec; /* lighten 12.5% */
--window-header-text-color: #000;
--window-border-color: #ccc;
--toolbar-base-color: var(--canvas-base-color);
--toolbar-base-color-lighter: #f8f8f8; /* lighten 4% */
--toolbar-base-color-darker: #cecece; /* darken 12.5% */
--toolbar-base-color-darker2: #e1e1e1; /* darken 5% */
--button-base-color: var(--canvas-base-color);
--button-base-color-lighter: white; /* lighten 10% */
--button-base-color-darker: #bbbbbb; /* darken 20% */
--button-base-color-darkest: #888888; /* darken 40% */
--button-text-color: var(--canvas-text-color);
--button-text-color-lighter: #595959; /* lighten 35% */
--tab-base-color: var(--canvas-base-color);
--tab-base-color-darker: #e1e1e1; /* lighten 5% */
--tab-text-color: var(--canvas-text-color);
--tab-border-color: #ccc;
--select-base-color: #333;
--select-text-color: #fff;
--list-base-color: #fff;
--list-text-color: #000;
--list-highlight-color: #eee;
--list-border-color: #ccc;
--choicegrid-up-color: #d9d9d9; /* lighten 5% */
--choicegrid-down-color: #f2f2f2; /* lighten 15% */
}
.itasks-orangeblue {
--panel-header-base-color: #fb7322;
--panel-header-text-color: #fff;
--panel-border-color: #fb7322;
--window-header-base-color: #004584;
--window-header-text-color: #fff;
--window-border-color: #fb7322;
--toolbar-base-color: #fb7322;
--select-base-color: #004584;
--panel-header-base-color-lighter: #fc9b61;
--panel-header-base-color-lighter2: #fdb286;
--panel-header-base-color-darker: #b44503;
--panel-header-base-color-darker2: #e65804;
--window-header-base-color-lighter: #0066c4;
--toolbar-base-color-lighter: #fb8036;
--toolbar-base-color-darker: #d95404;
--toolbar-base-color-darker2: #fb6309;
--choicegrid-up-color: #fb833b;
--choicegrid-down-color: #fca36d;
}
*.itasks-viewport [data-tooltip] {
position: relative;
display: inline-block;
}
*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
position: absolute;
transform: translate3d(0, 0, 0);
visibility: hidden;
opacity: 0;
z-index: 1000000;
pointer-events: none;
transition: 0.3s ease;
}
*.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:hover:after,
*.itasks-viewport [data-tooltip]:focus:before, *.itasks-viewport [data-tooltip]:focus:after {
visibility: visible;
opacity: 1;
}
*.itasks-viewport [data-tooltip]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001;
}
*.itasks-viewport [data-tooltip]:after {
content: attr(data-tooltip);
background: #ccc;
color: #000;
padding: 8px 10px;
font-size: 12px;
line-height: 12px;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
*.itasks-viewport [data-tooltip]:before {
border-left-color: #ccc;
margin-right: -12px;
margin-bottom: -6px;
}
*.itasks-viewport [data-tooltip]:after {
margin-bottom: -14px;
}
*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
right: 100%;
bottom: 50%;
}
*.itasks-viewport [data-tooltip]:hover:after, *.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:focus:after, *.itasks-viewport [data-tooltip]:focus:before {
transform: translateX(-8px);
}
......@@ -4,7 +4,6 @@
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/css/itasks.css" type="text/css" >
<link rel="stylesheet" href="/css/itasks-modules.css" type="text/css" >
<!-- ABC interpreter -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment